/* El contenedor padre que alinea todo */
.gender-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
}

/* Estilo base de cada caja */
.gender-box {
    flex: 1;
    background: var(--color-blanco);       /* Usando variable */
    padding: 10px;
    border-radius: var(--radio-borde);     /* Usando variable (15px) */
    box-shadow: var(--sombra-suave);       /* Usando variable */
    min-width: 200px;

  /* Borde superior por defecto (usé tu color de borde genérico) */
    border-top: 5px solid var(--color-borde);
    border-bottom: 5px solid var(--color-borde);

  /* Opcional: Para que el texto herede tu color principal */
    color: var(--color-texto);
    text-align: center;
}

.gender-box h3 {
    text-transform: lowercase;
    text-align: center;
    font-family: var(--font-pretty-cursive);
    margin: 0;
}

/* Colores específicos usando tus nuevas definiciones */
.box-femenino {
    border-top-color: var(--color-femenino);
    border-bottom-color: var(--color-femenino);
}

.box-masculino {
    border-top-color: var(--color-masculino);
    border-bottom-color: var(--color-masculino);
}

.box-invariable {
    border-top-color: var(--color-ambos);
    border-bottom-color: var(--color-ambos);
}

/* Estilos para la lista */
.gender-box ul {
    list-style: none;
    padding: 0;
}

.gender-box li {
    /* Usé tu variable de borde para la línea punteada también */
    border-bottom: 1px dotted var(--color-borde);
    padding: 8px 0;
}

/* EXTRA: Para que los enlaces dentro de la lista usen tus colores */
.gender-box a {
    color: var(--color-texto);
    text-decoration: none;
    font-family: var(--font-cuerpo); /* Ya que estamos, ¡usamos tu fuente! */
}

.gender-box a:hover {
    color: var(--color-principal); /* Efecto hover con tu verde */
}

/* --- Estilos para la lista y el efecto HOVER --- */

.gender-box ul {
    list-style: none;
    padding: 0;
    margin: 0; /* Quitamos márgenes extra para que se vea limpio */
}

.gender-box li {
  /* Quitamos el padding de aquí para dárselo al enlace <a> */
    padding: 0;
    border-bottom: 1px dotted var(--color-borde);
}

/* Hacemos que el enlace ocupe todo el espacio */
.gender-box li a {
    display: block;       /* ¡El truco mágico! Ocupa todo el ancho */
    padding: 10px 15px;   /* El relleno va adentro del enlace ahora */
    text-decoration: none;
    color: var(--color-texto);
    font-family: var(--font-cuerpo);
    border-radius: 5px;   /* Un toquecito redondeado se ve moderno */

    /* Transición suave para el color de fondo */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* El efecto HOVER: Cambia el fondo del enlace entero */
.gender-box li a:hover {
    background-color: var(--color-fondo-suave); /* Tu gris clarito */
    color: var(--color-principal); /* Opcional: cambia el texto a verde */
}