/* ==========================================================================
   ELEMENTOS COMUNES: fuentes, cabecera y pie
   Compartidos por todas las páginas: mismo marcado y mismos estilos.
   El reparto del alto (flex) lo decide cada página en su propio CSS.
   ========================================================================== */

/* ==========================================================================
   1. FUENTES
   ========================================================================== */

/* font-display: swap muestra el texto con una fuente del sistema mientras carga la propia, en vez de dejarlo invisible */
@font-face{
  font-family: Jost-Regular;
  src: url(../fonts/Jost-Regular.woff2);
  font-display: swap;
}

@font-face{
  font-family: Jost-Light;
  src: url(../fonts/Jost-Light.woff2);
  font-display: swap;
}

@font-face{
  font-family: Jost-SemiBold;
  src: url(../fonts/Jost-SemiBold.woff2);
  font-display: swap;
}

@font-face{
  font-family: Lumen-Title;
  src: url(../fonts/lumen-title.woff2);
  font-display: swap;
}

/* ==========================================================================
   2. CABECERA (logo LUMEN + haz de luz)
   ========================================================================== */

.cabecera{
  /* Única escala fluida del logo: todo lo demás va en em, así que escala solo.
     En variable para que cada página pueda separar su contenido en proporción al logo (p. ej. legal.css) */
  /* min(..., 10vw): por debajo de 320px encoge con la pantalla para que LUMEN (≈8.56em con su letter-spacing) no desborde */
  /* Máximo 3.125rem: algo mayor que el contenido para que la marca mande; mucho más, el trazo de Lumen-Title (un solo peso) engorda */
  --cabecera-tamano: min(clamp(2.25rem, 1.1rem + 3.4vw, 3.125rem), 10vw);

  padding-inline: 1rem; /* margen lateral para que nada toque los bordes en móvil */
  text-align: center;
}

/* Envoltorio del logo: <h1> en la portada y <div> en el resto, con el mismo aspecto */
.cabecera__marca{
  font-size: inherit;
  font-weight: normal; /* el h1 es bold por defecto */
  /* margin y no padding en .cabecera: en index la cabecera es flex-basis 0 y un padding se sumaría aparte, moviendo el contacto */
  margin-top: clamp(1.25rem, 3vw, 2.5rem); /* separa el logo del borde superior */
}

.cabecera__logo{
  font-family: Lumen-Title;
  font-size: var(--cabecera-tamano);
  font-weight: normal; /* Lumen-Title solo tiene un peso: el navegador fingiría una negrita engordando el trazo */
  line-height: 1; /* sin espacio extra entre líneas: el subtítulo queda pegado a LUMEN */
  color: #ffffff;
  text-decoration: none;

  position: relative; /* los ::before/::after (absolute) se colocan respecto al logo */
  isolation: isolate; /* crea su propia capa: el z-index: -1 del haz no se va detrás del body */
  display: inline-flex; /* mide lo que el texto, así los % del haz son % del logo */
  flex-direction: column;
  align-items: center; /* centra los hijos */
}

.cabecera__titulo{
  letter-spacing: 0.86em; /* espacio entre letras; en em para que escale con la fuente */
  margin-right: -0.86em; /* compensa el hueco que deja el letter-spacing tras la última letra */
}

/* Anchos calibrados con las métricas reales de Lumen-Title:
   si cambias font-size, letter-spacing o word-spacing de uno, hay que recalcular el otro */
.cabecera__subtitulo{
  font-size: 0.25em; /* un cuarto del tamaño de LUMEN */
  letter-spacing: 0.615em; /* separación calculada para igualar el ancho de LUMEN */
  word-spacing: 0.4em; /* espacio extra entre palabras */
  margin-right: -0.615em; /* igual que en el título: quita el hueco tras la última letra */
  margin-top: 0.1em;
  translate: 0.1em 0; /* compensa el margen lateral de los glifos de LUMEN para centrar ópticamente */
}

/* Haz de luz bajo el subtítulo:
  ::after es el núcleo (rectángulo con blur que la perspectiva convierte en trapecio)
  y ::before el halo amplio y tenue que alarga la caída. Todo en em/%, escala con el logo */
.cabecera__logo::before,
.cabecera__logo::after{
  content: "";
  position: absolute; /* fuera del flujo: no empuja al resto del contenido */
  z-index: -1; /* detrás del texto; contenido por el isolation del logo */
  pointer-events: none; /* no bloquea clics */

  top: calc(100% - 0.4em); /* arranca por detrás del subtítulo */
  left: 50%; /* junto con translateX(-50%) lo centra respecto al logo */
}

.cabecera__logo::after{
  width: 44%;
  height: 2.2em;

  /* Girar el rectángulo en 3D hace que la parte de abajo "se acerque" y se vea más ancha:
     así sale el trapecio. transform-origin fija el giro en el borde superior */
  transform-origin: 50% 0;
  transform: translateX(-50%) perspective(2.6em) rotateX(46deg);

  /* La luz se apaga de arriba abajo; cada línea es un color y el % donde aparece */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.80) 0%,
    rgba(255, 255, 255, 0.78) 30%,
    rgba(255, 255, 255, 0.36) 60%,
    rgba(255, 255, 255, 0.06) 85%,
    transparent 100%
  );
  filter: blur(0.33em); /* sin máscara: una máscara recortaría el blur y endurecería los bordes */
  opacity: 0.55; /* luz contenida: que acompañe al título sin hacerlo teatral */
}

.cabecera__logo::before{
  width: min(230%, 100vw - 2rem); /* nunca más ancho que la pantalla: sin scroll horizontal */
  height: 7em;
  transform: translateX(-50%);

  /* Elipse centrada en el borde superior: brilla arriba y se apaga hacia fuera */
  background: radial-gradient(
    ellipse 50% 100% at 50% 0%,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.045) 35%,
    rgba(255, 255, 255, 0.016) 65%,
    transparent 100%
  );
  /* La máscara deja ver solo donde es opaca: aquí desvanece el borde superior para que no sea una línea recta */
  mask-image: linear-gradient(to bottom, transparent 0%, #000 1.2em);
  opacity: 0.6;
}

/* ==========================================================================
   3. PIE (redes sociales + enlaces legales + copyright)
   ========================================================================== */

.pie-pagina{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* el texto del pie al fondo de su zona */
  padding-inline: 1rem; /* margen lateral para que nada toque los bordes en móvil */
  text-align: center;
  font-size: clamp(0.75rem, 0.65rem + 0.4vw, 0.875rem); /* base del pie; <small> la reduce un paso */
}

/* Iconos de redes: fila centrada que salta de línea si no cabe (sin media queries) */
.redes-sociales{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  /* Separa las redes del bloque legal (enlaces + copyright), que es otro grupo */
  margin-bottom: clamp(0.5rem, 1.5vh, 0.875rem);
}

.redes-sociales__enlace{
  display: grid;
  place-items: center;
  width: 2.75rem; /* 44px: zona táctil mínima recomendada en móvil */
  height: 2.75rem;
  color: rgba(255, 255, 255, 0.7); /* algo apagado en reposo para que el hover "encienda" el icono */
  transition: color 250ms ease-out;
}

.redes-sociales__enlace svg{
  width: 1.5rem;
  height: 1.5rem; /* mismo cuadro para todos; el viewBox centra cada logo sin deformarlo */
  transition: filter 250ms ease-out;
}

/* El logo de X llena más su cuadro que los otros: se reduce para igualar el peso visual */
.redes-sociales__enlace--x svg{
  width: 1.25rem;
  height: 1.25rem;
}

/* Hover y teclado: el icono se aclara y emite un brillo suave pegado a su silueta. */
.redes-sociales__enlace:hover,
.redes-sociales__enlace:focus-visible{
  color: #ffffff;
}

.redes-sociales__enlace:hover svg,
.redes-sociales__enlace:focus-visible svg{
  filter: drop-shadow(0 0 0.375rem rgba(255, 255, 255, 0.4));
}

/* Enlaces legales en fila con punto separador; en pantallas estrechas saltan de línea */
.enlaces-legales{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0.125rem; /* enlaces y copyright forman un bloque: solo un poco de aire entre ellos */
  font-size: 0.9em; /* algo mayor que el copyright (<small> ≈ 0.83em) para que se lean mejor */
}

.enlaces-legales li + li::before{
  content: "·";
  content: "·" / ""; /* el lector de pantalla no lee el punto */
  margin-inline: 0.5em;
  color: rgba(255, 255, 255, 0.6);
}

/* Enlace discreto, apagado hasta el hover; la página actual queda encendida */
.pie-pagina__enlace{
  font-family: Jost-Light;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none; /* sin subrayado aunque la página subraye sus enlaces (legal.css) */
  transition: color 250ms ease-out;

  /* Zona táctil de unos 24px de alto (mínimo WCAG 2.5.8) sin agrandar el texto */
  display: inline-block;
  padding-block: 0.375em;
}

.pie-pagina__enlace:hover,
.pie-pagina__enlace:focus-visible,
.pie-pagina__enlace[aria-current="page"]{
  color: #ffffff;
}

.pie-pagina__copyright{
  font-family: Jost-Light;
  color: rgba(255, 255, 255, 0.85); /* en blanco puro parece más grande */
  /* margin y no padding en .pie-pagina: en index el pie es flex-basis 0 y un padding se sumaría aparte, moviendo el contacto */
  margin-bottom: clamp(0.5rem, 1.25vw, 1rem); /* separa el pie del borde inferior */
}