/* =========================================================================
   #ZamoraLibre — hoja de estilos única
   Réplica del sitio original de Squarespace (zamoralibre.com).
   Las medidas replican la "fluid engine" de Squarespace: retícula de 24
   columnas en escritorio, apilado en móvil, y la escala tipográfica fluida
   original.
   ========================================================================= */

@import url("fonts.css");

/* ---------- Tokens ------------------------------------------------------ */
:root {
  --rojo: #c31f26;
  --tinta: #1c1c1c;
  --negro: #000;
  --blanco: #fff;
  --gris-seccion: rgba(220, 220, 220, 0.81);
  --gris-carrusel: #fafafa;

  --fuente-titulo: "Poppins", sans-serif;
  --fuente-texto: "Poppins", sans-serif;
  --fuente-nav: "Montserrat", sans-serif;
  /* El original declara Archivo Black pero nunca la carga: cae a la sans del sistema. */
  --fuente-boton: sans-serif;

  /* Geometría de la retícula (valores originales de Squarespace) */
  --ancho-maximo: 1400px;
  --gutter: 4vw;
  --gutter-movil: 6vw;
  --gap: 11px;
  --factor-fila: 0.0215;

  /* Escala tipográfica fluida.
     Squarespace: min((V - 1) * 1.2vw + 1rem, (V - 1) * 0.012 * 1400px + 1rem)
     V = valor de tamaño configurado en el sitio original. */
  --h1: min(calc(3 * 1.2vw + 1rem), 66.4px);      /* V = 4    */
  --h3: min(calc(1.2 * 1.2vw + 1rem), 36.16px);   /* V = 2.2  */
  --h4: min(calc(0.6 * 1.2vw + 1rem), 26.08px);   /* V = 1.6  */
  --texto: min(calc(0.24 * 1.2vw + 1rem), 20.03px); /* V = 1.24 */
  --texto-pequeno: min(calc(0.03 * 1.2vw + 1rem), 16.5px); /* V = 1.03 */
  --titulo-sitio: min(calc(1 * 1.2vw + 1rem), 32.8px);     /* V = 2    */
}

/* En móvil vertical Squarespace escala con la altura, no con el ancho. */
@media screen and (max-width: 767px) and (orientation: portrait) {
  :root {
    --h1: calc(3 * 0.012 * min(100vh, 900px) + 1rem);
    --h3: calc(1.2 * 0.012 * min(100vh, 900px) + 1rem);
    --h4: calc(0.6 * 0.012 * min(100vh, 900px) + 1rem);
    --texto: calc(0.24 * 0.012 * min(100vh, 900px) + 1rem);
    --texto-pequeno: calc(0.03 * 0.012 * min(100vh, 900px) + 1rem);
    --titulo-sitio: calc(1 * 0.012 * min(100vh, 900px) + 1rem);
  }
}

/* ---------- Base -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--texto);
  line-height: 1.76;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  color: var(--negro);
  margin: 0 0 0.6em;
}

h1 { font-size: var(--h1); line-height: 1.4; }
h3 { font-size: var(--h3); line-height: 1.3328; }
h4 { font-size: var(--h4); line-height: 1.3664; }

/* Márgenes medidos en el sitio original. */
h1, h3, h4 { margin: 0 0 32px; }

p { margin: 0 0 16px; }

ul { margin: 1em 0 0; padding-left: 40px; }
li { margin: 0; }
li > p { margin: 0.5em 0; }

.contenido > p:last-child,
.contenido > ul:last-child { margin-bottom: 0; }

.sqsrte-small { font-size: var(--texto-pequeno); }

/* Texto en rojo: el original marca así las versiones en inglés. */
.en-rojo { color: var(--rojo); }

.oculto-visualmente {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Cabecera ---------------------------------------------------- */
.cabecera {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.2vw var(--gutter);
  background: var(--blanco);
}

@media (max-width: 767px) {
  .cabecera { padding: 5vw var(--gutter-movil); }
}

.cabecera__logo {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: var(--titulo-sitio);
  line-height: 1.4;
  color: var(--tinta);
  text-decoration: none;
}

/* Hamburguesa de dos líneas, como el original. */
.cabecera__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  width: 47px; height: 37px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cabecera__menu span {
  display: block;
  width: 35px;
  height: 1px;
  background: var(--tinta);
  transition: transform 0.25s ease;
}

.cabecera__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.cabecera__menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* Panel de navegación */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background: var(--blanco);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.nav-panel[data-abierto="true"] { opacity: 1; visibility: visible; }

.nav-panel a {
  font-family: var(--fuente-nav);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--tinta);
  text-decoration: none;
}

.nav-panel a:hover,
.nav-panel a:focus-visible { color: var(--rojo); }

body[data-menu-abierto="true"] { overflow: hidden; }

/* ---------- Secciones y retícula fluida ---------------------------------
   Alturas mínimas y centrado vertical del original:
   section-height--small = 33vh, medium = 66vh, vertical-alignment--middle. */
.seccion {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  align-content: center;
  min-height: 33vh;
  background: var(--blanco);
}

.seccion--gris { background: var(--gris-seccion); }
.seccion--media { min-height: 66vh; }
.seccion--auto { min-height: 0; }
.seccion--pie { min-height: 10vh; }

/* Retícula: móvil = 8 columnas; escritorio = 24 columnas.
   Reproduce grid-template-columns y grid-template-rows de la "fluid engine".
   Cada bloque declara sus dos áreas: --m (móvil) y --d (escritorio). */
.fe {
  --grid-gutter: calc(var(--gutter-movil) - var(--gap));
  --cell-max-width: calc((var(--ancho-maximo) - (var(--gap) * 7)) / 8);
  display: grid;
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  grid-auto-rows: minmax(24px, auto);
  row-gap: var(--gap);
  column-gap: var(--gap);
  padding: 3.3vmax 0;
  overflow-x: clip;
}

.fe > * { grid-area: var(--m); }

@media (min-width: 768px) {
  .fe {
    --grid-gutter: calc(var(--gutter) - var(--gap));
    --cell-max-width: calc((var(--ancho-maximo) - (var(--gap) * 23)) / 24);
    --container-width: min(var(--ancho-maximo), calc(100vw - var(--gutter) * 2));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
    grid-auto-rows: minmax(calc(var(--container-width) * var(--factor-fila)), auto);
  }
  .fe > * { grid-area: var(--d); }
}

/* Alturas de sección del original (section-height--small / medium / custom). */
.fe--media   { padding: 6.6vmax 0; }
.fe--ayuda   { padding: 4vmax 0 6.6vmax; }
/* Secciones de una sola pieza: el original anula el hueco entre filas. */
.fe--sin-relleno { padding: 0; row-gap: 0; }
.fe--pie     { padding: 1vmax 0; }

/* ---------- Imágenes ----------------------------------------------------
   La imagen se posiciona en absoluto para que NO aporte altura intrínseca:
   así la fila de la retícula conserva su medida (24px en móvil, 2.15% del
   ancho del contenedor en escritorio) y el bloque mide exactamente lo mismo
   que en el sitio original. */
.marco {
  position: relative;
  overflow: hidden;
  min-height: 24px;
}

.marco .imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marco .imagen--contenida,
.imagen--contenida { object-fit: contain; }

/* ---------- Contador de días ------------------------------------------- */
.contador {
  font-family: var(--fuente-titulo);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
  text-align: center;
  margin: 20px 0 1.5rem;
}

@media (max-width: 767px) {
  .contador { font-size: 30px; }
}

.dias-numero {
  color: var(--blanco);
  background-color: var(--rojo);
  padding: 0.2em 0.5em;
  border-radius: 5px;
}

/* ---------- Marquesina -------------------------------------------------- */
.marquesina {
  display: flex;
  align-items: center;
  overflow: hidden;
  user-select: none;
}

.marquesina__pista {
  display: flex;
  flex: 0 0 auto;
  min-width: 100%;
  gap: 0;
  animation: desplazar 38s linear infinite;
}

.marquesina__pista span {
  font-family: var(--fuente-titulo);
  font-size: var(--h1);
  font-weight: 600;
  line-height: 1.4;
  color: var(--negro);
  white-space: nowrap;
  flex: 0 0 auto;
}

@keyframes desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquesina__pista { animation: none; }
}

/* ---------- Carrusel de organizaciones ---------------------------------- */
.carrusel {
  position: relative;
  background: var(--gris-carrusel);
  padding: 3.3vmax 0;
}

.carrusel__pista {
  margin: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 20px) / 2);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 var(--gutter-movil);
  scrollbar-width: none;
}

.carrusel__pista::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .carrusel__pista {
    grid-auto-columns: calc((100% - 60px) / 4);
    padding: 0 var(--gutter);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .carrusel__pista { grid-auto-columns: calc((100% - 40px) / 3); }
}

.carrusel__item {
  position: relative;
  scroll-snap-align: start;
  aspect-ratio: 1.78 / 1;
  background: var(--blanco);
}

/* Absoluta, igual que en las demás imágenes: no aporta altura propia. */
.carrusel__item img {
  position: absolute;
  inset: 0 0 8% 0;
  margin: auto;
  width: 50%;
  height: 89%;
  object-fit: contain;
}

.carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(60, 60, 60, 0.75);
  color: var(--blanco);
  cursor: pointer;
  transition: background 0.2s ease;
}

.carrusel__flecha:hover { background: rgba(30, 30, 30, 0.9); }
.carrusel__flecha:disabled { opacity: 0.3; cursor: default; }
.carrusel__flecha--anterior { left: 1.2vw; }
.carrusel__flecha--siguiente { right: 1.2vw; }
.carrusel__flecha svg { width: 26px; height: 26px; }

/* ---------- Botones ----------------------------------------------------- */
.boton {
  display: inline-block;
  font-family: var(--fuente-boton);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #fafafa;
  background: var(--negro);
  padding: 19.2px 20.8px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.boton:hover,
.boton:focus-visible { opacity: 0.82; }

/* ---------- Enlaces de contenido ---------------------------------------- */
.contenido a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contenido a:hover,
.contenido a:focus-visible { color: var(--rojo); }

.centrado { text-align: center; }
.a-la-derecha { text-align: right; }

/* ---------- Pie --------------------------------------------------------- */
.pie {
  background: var(--blanco);
  padding: 3vw var(--gutter) 4vw;
  text-align: center;
}

.pie h4 { margin-bottom: 1.2em; }

.pie__enlaces {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  font-size: var(--texto-pequeno);
}

.pie__enlaces a { text-decoration: none; }
.pie__enlaces a:hover,
.pie__enlaces a:focus-visible { color: var(--rojo); }

/* ---------- Página de cobertura ----------------------------------------- */
.cobertura__encabezado h3 { text-align: left; }

.cobertura__lista p { margin-bottom: 1.1em; }

/* ---------- Página comparte --------------------------------------------- */
.descarga { display: grid; justify-items: center; gap: 1rem; }
.descarga img { width: 100%; }

/* ---------- Foco visible ------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 2px;
}