/*
    BUSCADOR PARA EL PROFESORADO
    1. Resetear todo
    2. Variables
    3. Contenedor
    4. Accesibilidad
    5. Cabecera y menú
    6. Hero (compartido)
    7. Botones
    8. Sección trabajo seleccionado (index)
    9. Sección servicios promo (index)
    10. Sección proceso (index)
    11. Sección llamada a la acción
    12. Servicios en detalle (services)
    13. Tabla de precios (services)
    14. Historia y estadísticas (about)
    15. Valores (about)
    16. Equipo (about)
    17. Formulario de contacto (contact)
    18. Pie de página
    19 FOOTER
    20 TEMA DE ACCESIBILIDAD
*/


/* --------------------------------------------------
   1. resetear todo
   -------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* QUE EL SALTO NO SEA DIRECTO */
}

body {
    background-color: #0a0a0a;
    color: #ffffff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

img {
    max-width: 100%; /* QUE PILLE TODO EL SITIO QUE PUEDA */
    display: block;
}

a {
    color: inherit;
    text-decoration: none; /* QUITAR LOS ESTILOS DE LOS ENLACES*/
}

ul, ol {
    list-style: none; /* LO MISMO CON LAS LISTAS */
}

address {
    font-style: normal; /* QUITAR EL CURSIVA */
}


/* --------------------------------------------------
   2. VARIABLES
   -------------------------------------------------- */

:root {
    --negro:          #0a0a0a;
    --negro-tarjeta:  #111111;
    --gris-borde:     #1c1c1c;
    --blanco:         #ffffff;
    --gris-claro:     #aaaaaa;
    --gris-medio:     #666666;
    --gris-oscuro:    #3a3a3a;
    --verde:          #c1ff00;
    --verde-suave:    rgba(193, 255, 0, 0.08);

    --gradiente-morado: linear-gradient(135deg, #667eea, #764ba2);
    --gradiente-rosa:   linear-gradient(135deg, #f093fb, #f5576c);
    --gradiente-teal:   linear-gradient(135deg, #11998e, #38ef7d);
    --gradiente-lima:   linear-gradient(135deg, #c1ff00, #00aaff);

    --text-base:   1rem;

    --radio:     8px;
    --radio-lg:  12px;
    --transicion: 300ms ease;
    --space-8: 0; /* PREGUNTAR, VALOR DE --space-8 */
}


/* --------------------------------------------------
   3. CONTENEDOR
   -------------------------------------------------- */

.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-8); /* PREGUNTAR, VALOR DE --space-8 */
    font-size: var(--text-base) ;
}


/* --------------------------------------------------
   4. ACCESIBILIDAD — enlace saltar al contenido
   -------------------------------------------------- */

.saltar-contenido {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--verde);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: var(--radio);
    font-weight: 700;
    z-index: 9999;
    transition: top var(--transicion);
}

.saltar-contenido:focus {
    top: 1rem;
}


/* --------------------------------------------------
   5. CABECERA Y MENÚ
   -------------------------------------------------- */

.cabecera {
    position: fixed; /* Fijamos el menú */
    top: 0;
    left: 0;
    right: 0;
    /* Que esté pegado a la parte superior y laterales */
    z-index: 100; /* Sobreposiciono para que se vea por encima de todo al hacer scroll */
    background-color: var(--negro);
    border-bottom: 1px solid var(--gris-borde);
}

.cabecera .contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Justificar el contenido con espacio */
    height: 64px;
}

.logo {
    font-family: "Syne", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--blanco);
    letter-spacing: -0.02em;
    transition: opacity var(--transicion);
}

.logo:hover {
    opacity: 0.75;
}

.logo span {
    color: var(--verde);
}

.menu-principal {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.menu-principal a {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gris-claro);
    letter-spacing: 0.06em;
    text-transform: uppercase; /* Todo en mayusculas */
    position: relative;
    padding-bottom: 2px;
    transition: color var(--transicion);
}

.menu-principal a::after {
    content: ""; /* Simulo el borde verde bajo la opción de menú y le quito el contenido */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--verde);
    transition: width var(--transicion);
}

.menu-principal a:hover,
.menu-principal a[aria-current="page"] {
    color: var(--blanco);
}

.menu-principal a:hover::after,
.menu-principal a[aria-current="page"]::after {
    width: 100%;
}


/* --------------------------------------------------
   6. HERO — compartido por todas las páginas
   -------------------------------------------------- */

.hero {
    padding-top: calc(64px + 5rem); /* Lo que ocupa el menú mas el espacio que yo considero */
    padding-bottom: 5rem;
}

.hero .contenedor {
    max-width: 1200px; /* Ajuste específico para el hero,El texto se extiende mucho con pantallas 2K, a mi me pasa al menos */
}

.etiqueta-seccion {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--verde);
    /*margin-bottom: 1.25rem;*/
}

/* Hero de la home tiene el título más grande */
.hero-home .titulo-principal {
    font-family: "Syne", sans-serif;
    font-size: clamp(2.75rem, 7vw, 6rem); /* minimo 2.75, máximo 6, preferido el 7% de la ventana */
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--blanco);
    margin-bottom: 1.5rem;
    max-width: 10ch;
    
}

.hero-home .titulo-principal em {
    font-style: italic;
    color: var(--verde);
}

/* Hero de páginas interiores */
.hero-interior .titulo-principal {
    font-family: "Syne", sans-serif;
    font-size: clamp(2.25rem, 5vw, 4rem);/* minimo 2.25, máximo 4, preferido el 5% de la ventana */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em; /* pego mas la letras */
    color: var(--blanco);
    margin-bottom: 1rem;
}

.hero .descripcion {
    font-size: 1.06rem;
    color: var(--gris-claro);
    max-width: 400px; /* A ojo, para ponerlo justo como en la captura*/
    line-height: 1.75;
    margin-bottom: 2.5rem;
}
.descripcion-pers{
    min-width: 30rem !important; /* Par que encaje */
    font-size: 1rem !important; /* CHAPUZADA; PERO ENCAJA MEJOR */
}

.titulo-principal-about {
    letter-spacing: 0em !important;
}

.acciones-hero {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
/* --------------------------------------------------
   7. BOTONES
   -------------------------------------------------- */

.btn { /* REVISAR */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.5rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radio);
    border: none;
    cursor: pointer;
    transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion);
}

.btn-verde { /* mas grande REVISAR */
    background-color: var(--verde);
    color: #000;
    
}

.btn-verde.big { /* sol para este botón */
    background-color: var(--verde);
    color: #000;
    padding: 1.5rem 2rem 1.5rem 2rem;
}

.btn-verde:hover {
    background-color: #d4ff33;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(193, 255, 0, 0.3);
}

.btn-contorno { /* Este no sube y es verde REVISAR */
    background-color: transparent;
    color: var(--blanco);
    border: 1px solid var(--gris-borde);
}

.btn-contorno:hover { /* En el video se ve casi instantaneo, creo que no lleva trasicion*/
    border-color: var(--verde);
    color: var(--verde);
    /*transform: translateY(-2px);*/
}


/* --------------------------------------------------
   8. BARRA DE SERVICIOS CLAVE
   -------------------------------------------------- */

.barra-servicios {
    border-top: 1px solid var(--gris-borde);
    border-bottom: 1px solid var(--gris-borde);
    padding: 1.25rem 0;
}

.barra-servicios .contenedor {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.servicio-rapido {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gris-medio);
}


/* --------------------------------------------------
   9. TRABAJO SELECCIONADO (index — sección portfolio)
   -------------------------------------------------- */

.trabajo-seleccionado {
    padding: 6rem 0;
}
/*
.cabecera-seccion {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 1rem;
} ???*/

.titulo-seccion {
    font-family: "Syne", sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--blanco);
    text-transform: uppercase;
    margin-bottom: 40px; /* Eliminar clase anterior del DIV, sobra, PX a ojo */
}

.enlace-ver-todos {
    font-size: 0.8rem;
    color: var(--gris-claro);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color var(--transicion);
    white-space: nowrap; /* Sin saltos*/
    align-self: flex-end; /* Alineo el enlace al final del contenedor de la cabecera, para que quede a la derecha aunque el título ocupe varias líneas */
    margin-bottom: 0.5rem;
    color: var(--verde);
}
/*
.enlace-ver-todos:hover {
    color: var(--verde);
}

No hace falta en index, revisar en el resto
*/

/* Grid de proyectos */
.grid-proyectos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
}

.tarjeta-proyecto {
    background-color: var(--negro-tarjeta);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-lg);
    overflow: hidden; /* Simulación de corte de texto*/
    transition: border-color var(--transicion), transform var(--transicion);
}

.tarjeta-proyecto:hover {
    border-color: var(--verde);
    transform: translateY(-4px);
}

.miniatura-proyecto {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255,255,255,0.5);
}

.miniatura-proyecto.morado  { background: var(--gradiente-morado); }
.miniatura-proyecto.rosa    { background: var(--gradiente-rosa); }
.miniatura-proyecto.teal    { background: var(--gradiente-teal); }

.info-proyecto {
    padding: 1.25rem;
}

.etiquetas-proyecto {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.etiqueta-tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--verde);
    background-color: var(--verde-suave);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
}

.nombre-proyecto {
    font-family: "Syne", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--blanco);
    margin-bottom: 0.5rem;
}

.descripcion-proyecto {
    font-size: 0.875rem;
    color: var(--gris-claro);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.enlace-proyecto {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--verde);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: var(--transicion);
}

.enlace-proyecto:hover {
    gap: 0.6rem; /* VA A MAYORES PERO QUEDA BONITO, REVISAR */
}


/* --------------------------------------------------
   10. PROMO SERVICIOS (index — sección central)
   -------------------------------------------------- */

.promo-servicios {
    padding: 6rem 0;
    text-align: center;
}

.promo-servicios .titulo-seccion {
    font-size: clamp(2rem, 5vw, 3.5rem); /*Revisar 5%*/
    margin-bottom: 1rem;
}

.promo-servicios .descripcion {
    color: var(--gris-claro);
    max-width: 800px; /* A ojo, solución depsues */
    margin-bottom: 20px; /* A ojo otra vez */
    margin-top: 40px; /* Un poco mas que el margen inferior */
    margin-left: auto;
    margin-right: auto; /* lo centro con margenes automáticos y dejo el ancho del elemnto mas grande para evitar problemas*/
}


/* --------------------------------------------------
   11. PROCESO (index)
   -------------------------------------------------- */

.proceso {
    padding: 6rem 0;
}

.proceso .etiqueta-seccion {
    margin-bottom: 0.5rem;
}

.proceso .titulo-seccion {
    margin-bottom: 4rem;
}

/* --> DIFICIL QUE FLIPAS ESTO EH =( <-- */
.paso-proceso {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: left; /* Centrado se ve un poco mas abajo creo */
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    /* border-bottom: 1px solid var(--gris-borde); est no va aquí ?*/
}

.paso-proceso:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* INVERTIR*/
.paso-proceso.invertido {
    direction: rtl; /*https://developer.mozilla.org/es/docs/Web/CSS/Reference/Properties/direction
    REVISAR*/

}

.paso-proceso.invertido > * {
    direction: ltr;
}

.numero-paso {
    font-family: "Syne", sans-serif;
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: 800;
    color: var(--verde);
    line-height: 1;
}

.contenido-paso h3 {
    font-family: "Syne", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--blanco);
    margin-bottom: 0.75rem;
}

.contenido-paso p {
    color: var(--gris-claro);
    line-height: 1.75;
    max-width: 42ch;
}

/* NAH, NO SE COMO HACER ESTO*/


/* --------------------------------------------------
   12. LLAMADA A LA ACCIÓN (compartida)
   -------------------------------------------------- */

.llamada-accion {
    padding: 6rem 0;
    text-align: center;
}

.llamada-accion h2 {
    font-family: "Syne", sans-serif;
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--blanco);
    margin-bottom: 2rem;
    font-weight: normal !important; /* Pilla la negrita por herencia, le pongo IMPORTANT para asegurar que no carga negrita a pesar de no hacerlo actualente ;) */
}


/* --------------------------------------------------
   13. LISTA DE SERVICIOS (services.html)
   -------------------------------------------------- */


   /* REVISAR FLEX PARA EL NUMERO Y DAR SEPARACION cabecera-servicio??*/
.lista-servicios {
    padding: 6rem 0;
}

.lista-servicios .titulo-seccion {
    margin-bottom: 3rem;
}

/* Cada bloque de servicio */
.bloque-servicio {
    border-top: 1px solid var(--gris-borde);
    padding: 2.5rem 0;
}

.bloque-servicio:last-child {
    border-bottom: 1px solid var(--gris-borde);
}

.bloque-servicio:hover {
    background-color: var(--verde-suave);
}

.cabecera-servicio {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1rem;
    margin-top: -1rem !important; /* Se lo resto porque no recuerdo donde le añado el margen */
}/* IMPORTANTE, basicamente por asegurar */

/*.cabecera-servicio h3{
    font-weight: 00;
}*/

.numero-servicio {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    color: var(--verde);
    letter-spacing: 0.08em;
    min-width: 2ch; /* Espacio de dos 0 para hacer esa simulación de separación a ojo */
    /* padding-bottom: 50px; descripcion-servicio*/
}

.bloque-servicio h3 {
    font-family: "Syne", sans-serif;
    font-size: 1.3rem; /* muy bajo REVISAR*/
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--blanco);
}

.descripcion-servicio {

    color: var(--gris-claro);
    line-height: 1.75;
    max-width: 55ch; /* +- los caracteres por linea, a ojo */
    margin-bottom: 1.5rem;
    padding-left: calc(3rem + 1ch); /* 1 caracter + 3rem ? NO ENCAJA LA SUMA CON LAS MEDIDAS REVISAR*/
    padding-top: 40px;
}/*REVISAR DICHO INFORMÁTICO --> SI va no lo toques 
REPLICAR PARA TABLA
;)*/

/* Grid de características (chocolate de 2) */
.caracteristicas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding-left: calc(3rem + 1ch);
    padding-right: 1rem;
}

.caracteristica {
    font-size: 0.8rem;
    color: var(--gris-claro);
    background-color: var(--negro-tarjeta);
    border: 1px solid var(--gris-borde);
    padding: 0.6rem 1rem;
    border-radius: var(--radio);
}


/* --------------------------------------------------
   14. PRECIOS (services.html)
   -------------------------------------------------- */

.seccion-precios {
    padding: 6rem 0;
}

.seccion-precios .contenedor .etiqueta-seccion {
    letter-spacing: 0.2em;
    font-weight: normal; /* Solo se usa en PRICING, quito la negrita y doy mas espaciado */
} /*REVISAR etiqueta-seccion*/

.seccion-precios .titulo-seccion {
    margin-bottom: 2rem;
}

.tabla-precios-contenedor {
    background-color: var(--negro-tarjeta);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-lg);
    overflow: hidden;
}

.tabla-precios-titulo {
    padding: 1.25rem 1.5rem;
    font-size: 1.25rem;
    color: var(--blanco);
    border-bottom: 1px solid var(--gris-borde);
/*font-weight: bold;*/
}

.clear { 
/* No sabia como solucionar el problema de que se ponga como los encabezados
Perdón por la chapuzada, me di cuenta tarde de que era un rowspan */
    font-weight: normal !important;
    color: var(--gris-claro) !important;
}

.tabla-precios {
    width: 100%;
    border-collapse: collapse;
}

.tabla-precios th,
.tabla-precios td {
    padding: 0.9rem 1.5rem;
    text-align: left;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--gris-borde);
}

.tabla-precios tr:last-child td {
    border-bottom: none;
}

.tabla-precios thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--verde);
}

.tabla-precios thead th:first-child {
    color: var(--gris-medio);
}

.tabla-precios tbody td:first-child {
    font-weight: 600;
    color: var(--blanco);
}

.tabla-precios tbody td {
    color: var(--gris-claro);
}

.destacado-precio {
    color: var(--verde) !important;
    font-weight: 700 !important;
}

.pie-tabla {
    padding: 1rem 1.5rem;
    font-size: 0.8rem;
    color: var(--gris-medio);
    /*border-top: 1px solid var(--gris-borde); No va aquí*/
    font-style: italic;/* REVISAR - PONER CURSIVA*/
}


/* --------------------------------------------------
   15. HISTORIA Y ESTADÍSTICAS (about.html)
   -------------------------------------------------- */

.historia {
    padding: 6rem 0;
}

.grid-historia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.historia .titulo-bloque {
    font-family: "Syne", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--blanco);
    margin-bottom: 0;
    min-width: 30rem; /* = a la descripcion*/
}

.historia .contenido-derecha p {

    color: var(--gris-claro);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.historia .contenido-derecha p:last-child {
    margin-bottom: 0;
}

/* Estadísticas */
.estadisticas {
    padding: 4rem 0;
    border-top: 1px solid var(--gris-borde);
    border-bottom: 1px solid var(--gris-borde);
}

.grid-estadisticas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.cifra {
    font-family: "Syne", sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--verde);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.descripcion-cifra {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gris-medio);
}


/* --------------------------------------------------
   16. VALORES (about.html)
   -------------------------------------------------- */

.valores {
    padding: 6rem 0;
}

.valores .titulo-seccion {
    margin-bottom: 3rem;
}

.grid-valores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.tarjeta-valor {
    background-color: var(--negro-tarjeta);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-lg);
    padding: 1.75rem;
    padding-bottom: 4rem;
    transition: border-color var(--transicion), transform var(--transicion);
}

.tarjeta-valor:hover {
    border-color: var(--verde);
    transform: translateY(-4px);
}

.icono-valor {
    font-size: 3rem;
    color: var(--blanco);
    margin-bottom: 1rem;
}

.tarjeta-valor h3 {
    font-family: "Syne", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanco);
    margin-bottom: 0.75rem;
}

.tarjeta-valor p {

    color: var(--gris-claro);
    line-height: 1.7;
}


/* --------------------------------------------------
   17. EQUIPO (about.html)
   -------------------------------------------------- */

.equipo {
    padding: 6rem 0;
}
.grid-equipo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.tarjeta-miembro {
    background-color: var(--negro-tarjeta);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-lg);
    padding: 1.75rem;
    text-align: center;
    transition: border-color var(--transicion), transform var(--transicion);
}

.tarjeta-miembro:hover {
    border-color: var(--verde);
    transform: translateY(-4px);
}

.avatar-miembro {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #fff;
}

.avatar-miembro.verde  { background: var(--gradiente-teal); }
.avatar-miembro.morado { background: var(--gradiente-morado); }
.avatar-miembro.rosa   { background: var(--gradiente-rosa); }
.avatar-miembro.lima   { background: var(--gradiente-lima); }

.nombre-miembro {
    font-family: "Syne", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanco);
    margin-bottom: 0.25rem;
}

.noborder {
    border: none !important;
}

.rol-miembro {
    font-size: 0.75rem;
    /*font-weight: 700;*/
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--verde);
    margin-bottom: 0.75rem;
    display: block;
    font-weight: normal !important;
    /* REVISAR QUITAR NEGRITA, seprarlo un pelin*/
    padding-top: 1rem; /* REVISAR, para separar un poco el rol del nombre, no se si es mejor margen o padding, lo dejo con padding por si acaso el margen afecta a la separación entre miembros */
}

.bio-miembro {
    font-size: 0.8rem;
    color: var(--gris-claro);
    line-height: 1.65;
}


/* --------------------------------------------------
   18. FORMULARIO DE CONTACTO (contact.html)
   -------------------------------------------------- */

.seccion-contacto {
    padding: 4rem 0 6rem;
}

.grid-contacto {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
}

/* Columna izquierda — información */
.info-contacto h2 {
    font-family: "Syne", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--blanco);
    margin-bottom: 1rem;
}

.intro-contacto {

    color: var(--gris-claro);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.detalle-contacto {
    margin-bottom: 1.5rem;
}

.etiqueta-detalle {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gris-claro);
    display: block;
    margin-bottom: 1.5rem;
}

.detalle-contacto a,
.detalle-contacto p {

    color: var(--gris-claro);
    line-height: 1.6;
    transition: color var(--transicion);
}

.detalle-contacto a:hover {
    color: var(--verde);
}

/* Columna derecha — formulario */
.formulario-contacto {
    background-color: var(--negro-tarjeta);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-lg);
    padding: 2rem;
}

.grupo-formulario {
    border: none;
    padding: 0;
    margin-bottom: 2rem;
}

.grupo-formulario legend {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blanco);
    margin-bottom: 1.25rem;
    width: 100%;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gris-borde);
}

/* Rejilla de 2 columnas dentro del fieldset */
.fila-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.campo.ancho-completo {
    grid-column: 1 / -1;
}

.campo label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--blanco);
}

.campo label .obligatorio { /*REVISAR*/
    color: var(--verde);
    margin-left: 2px;
}

.campo input,
.campo select,
.campo textarea {
    background-color: var(--negro);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    color: var(--blanco);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.9rem;
    padding: 0.65rem 0.875rem;
    transition: border-color var(--transicion), box-shadow var(--transicion);
    width: 100%;
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: var(--gris-medio);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px var(--verde-suave);
}

.campo textarea {
    resize: vertical;
    min-height: 130px;
}

/* Selects */
.campo select {
    appearance: none;
    background-image: url("../images/dropdown-arrow.svg");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 12px;
    cursor: pointer;
}

/* Radio buttons y checkboxes */
.grupo-radios {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.opcion-radio,
.opcion-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--gris-claro);
    cursor: pointer;
}

.opcion-radio input[type="radio"],
.opcion-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--verde);
    cursor: pointer;
    flex-shrink: 0;
}

.grupo-checks {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.aviso-formulario {
    font-size: 0.8rem;
    color: var(--gris-medio);
    margin-top: 0.75rem;
}


/* --------------------------------------------------
   19. PIE DE PÁGINA
   -------------------------------------------------- */

.pie-pagina {
    border-top: 1px solid var(--gris-borde); /* Separación del contenido principal casi no se ve*/
    padding-top: 5rem;
    /* El otro borde va en el DECO */
}

/* Wordmark decorativo grande */
.deco-wordmark {
    overflow: hidden;
    margin-bottom: 4rem;
    user-select: none;
    line-height: 1;
    border-bottom: 1px solid var(--gris-borde);
    padding-bottom: 4rem;
    /* Borde inferior a ojo */
}

.deco-wordmark .linea-nexus {
    font-family: "Syne", sans-serif;
    font-size: 120px; /* Tamaño fijo para mantener el efecto, no es responsive , a ojo*/
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    display: block;
    color: var(--blanco);
}

.deco-wordmark .linea-nexus.gris {
    color: var(--gris-oscuro); /* gris oscuro y negro tarjeta */
}

.deco-wordmark .linea-nexus.gris-oscuro {
    color: var(--negro-tarjeta);
}

/* Columnas de información */
.columnas-pie {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* 1 de 2 y 3 de 1 chocolate*/
    gap: 2rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--gris-borde);
}

.columna-marca .descripcion-pie {
    font-size: 0.875rem;
    color: var(--gris-claro);
    line-height: 1.7;
}

.titulo-columna {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blanco);
    margin-bottom: 1rem;
    display: block;
}

.columna-pie ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.columna-pie ul a {
    color: var(--gris-claro);
    transition: color var(--transicion);
}

.columna-pie ul a:hover {
    color: var(--verde);
}

.columna-contacto address {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.columna-contacto address a,
.columna-contacto address span {
    font-size: 0.9rem;
    color: var(--gris-claro);
    transition: color var(--transicion);
}

.columna-contacto address a:hover {
    color: var(--verde);
}

/* Franja inferior */
.franja-inferior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem 0;
}

.copyright {
    font-size: 0.8rem;
    color: var(--gris-medio);
}

.redes-sociales {
    display: flex;
    gap: 1.25rem;
}

.redes-sociales a {
    font-size: 0.8rem;
    color: var(--gris-medio);
    transition: color var(--transicion);
}

.redes-sociales a:hover {
    color: var(--verde); /* REVISAR VERDE*/
}


/* --------------------------------------------------
   20. ACCESIBILIDAD
   -------------------------------------------------- */

/* lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}