/* RobinBook · componentes y secciones
   Orden del DOM = orden movil. El escritorio se compone con grid. */

/* ============ 0 · Primitivas ============ */

/* Sin max-width: el ancho del contenido lo fija el gutter porcentual, que es el
   3,2 % por lado medido en las referencias, asi que el contenido ocupa el 93,6 %
   de la ventana a 1440, a 1920 y a 3440. El
   `max-width: calc(var(--ancho-max) + var(--gutter) * 2)` que habia aqui es la
   causa de los margenes laterales muertos: por encima de 1448 px de ventana
   congelaba el contenido en 1360 y todo el espacio extra se iba a los lados. */
.contenedor {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.saltar {
  position: absolute;
  left: var(--espacio-4);
  top: -4rem;
  z-index: 60;
  background: var(--tinta);
  color: var(--crema);
  padding: var(--espacio-3) var(--espacio-5);
  border-radius: var(--radio-pill);
  text-decoration: none;
  transition: top var(--transicion);
}
.saltar:focus { top: var(--espacio-4); }

.titular {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: var(--paso-h2);
  line-height: var(--alto-titulo);
  letter-spacing: -0.012em;
}

.antetitulo {
  font-size: var(--paso-xs);
  color: var(--tinta-suave);
  margin-bottom: var(--espacio-3);
}

/* Botones */

.pastilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6em 1.6em;
  border-radius: var(--radio-pill);
  font-size: var(--paso-s);
  line-height: 1.2;
  text-decoration: none;
  transition: filter var(--transicion), background-color var(--transicion);
}
.pastilla:hover { filter: brightness(0.94); }

.pastilla--cta { background: var(--lima); color: var(--tinta); }
.pastilla--crema { background: var(--crema); color: var(--tinta); }
/* Perfilada, para ir sobre un panel de color sin competir con el. */
.pastilla--linea {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--tinta);
}
.pastilla--linea:hover { background: rgba(38, 40, 8, 0.08); filter: none; }

.pastilla--tab {
  background: var(--lima);
  color: var(--tinta);
  border: 2px solid transparent;
}
.pastilla--tab[aria-pressed="true"] { border-color: var(--tinta); }

.circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--crema);
  color: var(--tinta);
  text-decoration: none;   /* tambien se usa como enlace (tarjetas y calendario) */
  transition: transform var(--transicion), background-color var(--transicion);
}
.circulo:hover { transform: scale(1.06); }
.circulo--linea { background: transparent; border: 1px solid var(--filete); }
.circulo--linea:hover { background: rgba(38, 40, 8, 0.06); }
.circulo[disabled] { opacity: 0.35; cursor: default; transform: none; }

/* El JS del carrusel oculta flechas y puntos con [hidden] cuando la tira no
   tiene nada que desplazar. Pero `[hidden]` es solo `display: none` del
   navegador, y cualquier clase que declare `display` lo pisa: sin estas dos
   reglas quedaban controles muertos a la vista. */
.circulo[hidden],
.puntos[hidden] { display: none; }

.enlace-texto {
  display: inline;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.enlace-texto:hover { text-decoration-thickness: 2px; }

.icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  transition: background-color var(--transicion);
}
.icono:hover { background: rgba(38, 40, 8, 0.07); }

/* Conmutador de idioma: mismo hueco que un icono, con el codigo en texto */
.icono--idioma {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: inherit;
}

/* Carrusel: un solo patron para todos los casos */

.carrusel { position: relative; }

.carrusel__pista {
  display: flex;
  gap: var(--espacio-5);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > * { flex: 0 0 auto; scroll-snap-align: start; }

.puntos {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}
.puntos > li { display: flex; }
.punto {
  width: 8px; height: 8px;
  border-radius: var(--radio-pill);
  background: rgba(38, 40, 8, 0.26);
  transition: width var(--transicion), background-color var(--transicion);
}
.punto[aria-current="true"] { width: 22px; background: var(--tinta); }

/* Aviso simulado */

.aviso {
  position: fixed;
  left: 50%;
  bottom: var(--espacio-5);
  transform: translateX(-50%) translateY(0.6rem);
  z-index: 80;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: var(--espacio-3) var(--espacio-5);
  border-radius: var(--radio-pill);
  background: var(--tinta);
  color: var(--crema);
  font-size: var(--paso-s);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
.aviso[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============ 1 · Franja y cabecera ============ */

.franja {
  background: var(--azul);
  color: var(--tinta);
}
.franja__interior {
  position: relative;
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
}
.franja__texto {
  padding: 1.1em 0.4em;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: help;
  line-height: 1.3;
}
.franja__tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-s);
  background: var(--tinta);
  color: var(--crema);
  font-size: var(--paso-xs);
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 6px 20px rgba(38, 40, 8, 0.2);
}
.franja__tooltip[hidden] { display: none; }

.cabecera { background: var(--crema); }
.cabecera__interior {
  display: flex;
  align-items: center;
  /* Envuelve solo si de verdad no cabe: con el texto del sistema aumentado al
     150 % en una pantalla de 390 px, la marca y los tres iconos se salian de la
     cabecera y el `overflow-x: clip` de la pagina los recortaba. A los tamanos
     normales no envuelve nada y la cabecera es la misma. */
  flex-wrap: wrap;
  gap: var(--espacio-5);
  min-height: 84px;
}

.marca {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.marca img {
  display: block;
  width: max(8.5rem, calc(12.67 * var(--uv)));
  height: auto;
}

.cabecera__hamburguesa {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
}

.nav { flex: 1; }
.nav__lista {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: var(--espacio-4);
  /* El reparto es `space-evenly`, asi que sin tope los seis enlaces --que no
     crecen de cuerpo, como todo el texto pequeno del sitio-- se separaban 455 px
     entre si a 3440. El tope es el ancho que tiene el carril de navegacion en el
     techo de 2200, asi que por debajo de ~2350 px no interviene. */
  max-width: calc(72.7 * var(--uv));
  margin-inline: auto;
}
.nav__enlace {
  display: inline-block;
  padding: 0.5em 0.2em;
  font-size: var(--paso-xs);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.nav__enlace:hover { border-bottom-color: var(--tinta); }

.cabecera__iconos {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

/* ============ 2 · Hero · dos variantes ============ */
/* Medidas tomadas de las referencias a 1128 px de ancho de contenedor:
   paneles 558 + hueco 12 + 558, alto 490, texto a 101 px del borde del panel,
   flechas de 33 px y capsula de indicadores a 24 px del borde inferior.
   Se expresan en cqw para que la proporcion se mantenga a cualquier ancho. */

.hero { padding-top: var(--espacio-2); }

.hero__marco {
  position: relative;
  container-type: inline-size;
}

.hero__pista { gap: var(--hero-hueco); }

/* --uc es a este contenedor lo que --uv es a la ventana: 1 % del marco del
   hero, congelado en 22 px --el 1 % de los 2200 px de techo--. Se declara aqui
   aunque .hero no sea el contenedor porque un custom property se resuelve en el
   sitio donde se USA, y todos sus usos estan dentro de .hero__marco; es el mismo
   mecanismo por el que --hero-alto ya funcionaba. */
.hero {
  --uc: min(1cqw, 22px);
  --hero-hueco: 12px;
  --hero-radio: 12px;
  --hero-costura: 50%;
  /* 490 de alto sobre 1128 en la referencia. Con el techo, el hero deja de
     crecer sin freno: 585 px a 1440, 780 a 1920 y 955 de ahi en adelante, en vez
     de los 1365 que daba un 43,4 % puro a 3440. */
  --hero-alto: min(43.4cqw, 955px);
}

.hero__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hero-hueco);
  align-items: stretch;
  /* Es un minimo, no un alto fijo: si el contenido crece, el slide crece y los
     demas se estiran con el. (Aqui habia antes una segunda declaracion,
     `clamp(18rem, 42vw, 34rem)`, que esta linea pisaba: codigo muerto.) */
  min-height: var(--hero-alto);
}

/* El color de fondo llega desde los datos via data-fondo */
.hero__slide[data-fondo="amarillo"] { --hero-fondo: var(--amarillo); }
.hero__slide[data-fondo="lima"]     { --hero-fondo: var(--lima); }
.hero__slide[data-fondo="azul"]     { --hero-fondo: var(--azul); }

.hero__panel--texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: calc(9 * var(--uc));
  padding-block: max(1.5rem, calc(4 * var(--uc)));
}
.hero__contenido { width: 100%; }

.hero__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  /* El tope en rem lo alcanzaba un contenedor de 1211 px: el H1 se quedaba en
     60,8 px dentro de un panel que seguia creciendo. Ahora sube con el marco
     hasta el techo (110 px) y ahi se queda. */
  font-size: max(1.8rem, calc(5.02 * var(--uc)));
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-align: center;
}
.hero__texto {
  margin-top: max(1.25rem, calc(3 * var(--uc)));
  font-size: max(0.8125rem, calc(1.2 * var(--uc)));
  line-height: 1.45;
  text-align: left;
}

.hero__media { min-width: 0; }
.hero__imagen { display: block; }

/* --- Variante split: dos paneles separados por el hueco --- */

.hero__slide[data-variant="split"] .hero__panel--texto {
  background: var(--hero-fondo);
  border-radius: var(--hero-radio);
}
/* La fotografia va en absoluto dentro del panel. Con la imagen en flujo, su
   `height: 100%` no resuelve contra una fila de alto automatico y el navegador
   usaba el alto INTRINSECO de la foto: a 3440 eso estiraba el slide a 1069 px y
   se saltaba el techo de 955. Asi el alto lo manda el panel y la foto lo llena.
   En movil el media lleva `aspect-ratio: 16/11`, que tambien da alto definido. */
.hero__slide[data-variant="split"] .hero__media {
  position: relative;
  border-radius: var(--hero-radio);
  overflow: hidden;
}
.hero__slide[data-variant="split"] .hero__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, center);
}

/* --- Variante full: un unico panel de fondo continuo --- */

.hero__slide[data-variant="full"] {
  grid-template-columns: 0.82fr 1fr;
  gap: 0;
  background: var(--hero-fondo);
  border-radius: var(--hero-radio);
}
.hero__slide[data-variant="full"] .hero__panel--texto {
  padding-inline: calc(9 * var(--uc)) calc(4.8 * var(--uc));
}
.hero__slide[data-variant="full"] .hero__media {
  display: grid;
  place-items: center;
  padding: calc(4.5 * var(--uc)) calc(3 * var(--uc)) calc(2.4 * var(--uc)) 0;
}
/* Alto explicito: asi la ilustracion no impone altura intrinseca al slide y
   ambas variantes coinciden. Dentro de esa caja, contain la muestra entera y
   sin deformar. Proporciones de la referencia: 411 de alto sobre un panel
   de 489, con 51 px arriba y 27 px abajo. */
.hero__slide[data-variant="full"] .hero__imagen {
  width: 100%;
  height: min(36.5cqw, 803px);   /* mismo techo que --hero-alto */
  object-fit: contain;
}

/* --- Controles compartidos por ambas variantes --- */

.hero__controles { display: contents; }

.hero__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: clamp(2rem, 2.93cqw, 2.5rem);
  height: clamp(2rem, 2.93cqw, 2.5rem);
  box-shadow: 0 1px 6px rgba(38, 40, 8, 0.12);
}
.hero__flecha:hover { transform: translateY(-50%) scale(1.07); }
.hero__flecha--prev { left: calc(var(--gutter) + 1.1cqw); }
.hero__flecha--next { right: calc(var(--gutter) + 1.1cqw); }

.hero__puntos {
  position: absolute;
  left: var(--hero-costura);
  bottom: clamp(0.75rem, 2.1cqw, 1.6rem);
  transform: translateX(-50%);
  z-index: 5;
  gap: 6px;
  padding: 6px 9px;
  border-radius: var(--radio-pill);
  background: var(--crema);
}
/* En el hero el punto activo no se alarga: se oscurece, como en la referencia */
.hero__puntos .punto { width: 7px; height: 7px; background: rgba(38, 40, 8, 0.3); }
.hero__puntos .punto[aria-current="true"] { width: 7px; background: var(--tinta); }

/* ============ 3 · Tarjetas de entrada ============ */

.entradas { padding-top: var(--espacio-5); }
.entradas__pista { gap: var(--espacio-5); }
.entrada {
  flex: 0 0 calc((100% - var(--espacio-5) * 2) / 3);
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-m);
  overflow: hidden;
  background: var(--lavanda);
}
.entrada__foto {
  width: 100%;
  aspect-ratio: 76 / 57;
  object-fit: cover;
}
.entrada__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  flex: 1;
  padding: var(--espacio-5);
}
.entrada__copy {
  font-size: 1.0625rem;
  line-height: 1.08;
  max-width: 22ch;
}
.entrada__flecha {
  flex: none;
  width: 43px;
  height: 43px;
  background: var(--crema);
}
.entrada__flecha-icono--escritorio {
  width: 9.5px;
  height: 9.5px;
  max-width: none;
}
.entrada__flecha-icono--movil { display: none; }
.entradas__puntos { display: none; margin-top: var(--espacio-4); }

/* ============ 4 · Se parte del movimiento ============ */

.movimiento { padding-block: var(--seccion); }
.movimiento__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(2rem, calc(6 * var(--uv)));
  align-items: center;
}
.movimiento__figura { border-radius: var(--radio-m); overflow: hidden; }
.movimiento__figura img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.movimiento__cuerpo { text-align: center; }
.movimiento__cuerpo .titular { max-width: 14ch; margin-inline: auto; }
.movimiento .antetitulo { font-size: 16px; }
.movimiento__texto {
  margin-top: var(--espacio-5);
  font-size: 13px;
  color: var(--tinta-suave);
  max-width: 48ch;
  margin-inline: auto;
}

.beneficios { margin-top: var(--espacio-7); }
.beneficio {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--espacio-5);
  padding-block: var(--espacio-4);
  padding-inline-start: var(--espacio-4);
  border-top: 1px solid var(--tinta);
}
.beneficio:first-child { border-top: 0; }
.beneficio__icono {
  flex: none;
  width: auto;
  height: auto;
  object-fit: contain;
}
.beneficio:nth-child(1) .beneficio__icono { width: 46px; height: 56px; }
.beneficio:nth-child(2) .beneficio__icono { width: 54px; height: 45px; }
.beneficio:nth-child(3) .beneficio__icono { width: 42px; height: 51px; }
.beneficio__texto { font-size: 14px; text-align: center; }

/* Insignias oficiales de tienda (App Store y Google Play).
   La altura la fija la referencia: 44 px a 1440. El ancho lo decide la
   proporcion propia de cada asset, asi que nunca se declaran los dos a la vez
   ni se estira nada. El PNG oficial de Google Play trae de fabrica 41 px de
   margen transparente por lado (646x250 envolviendo un arte de 564x168): se
   recorto al arte visible para que las dos insignias compartan altura optica.
   El arte ya trae su propio fondo y redondeo, asi que el boton no pinta ni
   borde ni relleno. Ver docs/asset-sources.md. */
.insignias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.625rem, 0.97vw, 0.875rem);
  justify-content: center;
  margin-top: var(--espacio-6);
}
.insignia__boton {
  display: block;
  border-radius: var(--radio-s);
  transition: opacity var(--transicion);
}
.insignia__boton:hover { opacity: 0.82; }
.insignia__imagen {
  height: clamp(2.25rem, 3.06vw, 2.75rem);
  width: auto;
}

/* ============ 5 · De lectores para lectores ============ */

.blog { padding-block: var(--seccion); }
.blog > .contenedor {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "intro intro"
    "tabs  cta"
    "lista lista"
    "vacio vacio";
  column-gap: var(--espacio-4);
  align-items: center;
}
.blog__intro {
  grid-area: intro;
  text-align: center;
  max-width: max(56rem, calc(62.2 * var(--uv)));
  margin-inline: auto;
}
.blog__lead {
  margin-top: var(--espacio-4);
  font-size: var(--paso-s);
  color: var(--tinta-suave);
  max-width: 62ch;
  margin-inline: auto;
}

.blog__controles {
  grid-area: tabs;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-4);
  margin-top: var(--espacio-7);
}
.pestanas { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }
.pestanas .pastilla { font-size: 13px; }
.blog__ver-todo {
  grid-area: cta;
  margin-top: var(--espacio-7);
  justify-self: end;
}
.blog__lista {
  grid-area: lista;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: max(1.5rem, calc(3 * var(--uv)));
  margin-top: var(--espacio-6);
}
.articulo {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.articulo[hidden] { display: none; }
.articulo__foto {
  width: 100%;
  aspect-ratio: 80 / 52;
  object-fit: cover;
  border-radius: var(--radio-m);
}
.articulo__fecha {
  margin-top: var(--espacio-4);
  font-size: var(--paso-xs);
  color: var(--tinta-tenue);
}
.articulo__titulo {
  margin-top: var(--espacio-2);
  font-size: var(--paso-h3);
  font-weight: 600;
  line-height: 1.22;
}
.articulo__enlace {
  color: inherit;
  text-decoration: none;
}
.articulo__flecha {
  display: none;
  width: 11px;
  height: 11px;
  margin-inline-start: 0.2em;
  vertical-align: middle;
}
.articulo__extracto {
  margin-top: var(--espacio-3);
  font-size: 12px;
  color: var(--tinta-suave);
}
.articulo__mas {
  margin-top: auto;
  padding-top: var(--espacio-4);
  font-size: 13px;
}
.blog__vacio {
  grid-area: vacio;
  margin-top: var(--espacio-6);
  text-align: center;
  color: var(--tinta-suave);
}

/* ============ 6 · Libro del mes ============ */

.libro {
  background: var(--azul);
  padding-block: var(--seccion);
}
.libro__marco {
  --libro-pad: 36px;
  --libro-flecha: 39px;
  --libro-punto: 7px;
  --libro-portada-h: 380px;
  --libro-portada-top: calc(
    var(--libro-pad) + var(--libro-flecha) +
    (630px - var(--libro-pad) * 2 - var(--libro-flecha) - var(--libro-portada-h) - var(--libro-punto)) / 2
  );

  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: max(2rem, calc(6 * var(--uv)));
  align-items: center;
}
.libro__pista {
  grid-column: 1 / -1;
  grid-row: 1;
  gap: var(--espacio-5);
}
.libro__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(2rem, calc(6 * var(--uv)));
  align-items: center;
}
.libro__tarjeta {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  justify-self: center;
  align-self: center;
  box-sizing: border-box;
  width: 475px;
  max-width: 100%;
  height: 630px;
  min-height: 630px;
  background: var(--crema);
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 16px;
  padding: var(--libro-pad) 0;
}
.libro__tarjeta::before {
  content: "";
  flex: none;
  width: 84px;
  height: var(--libro-flecha);
}
.libro__tarjeta::after {
  content: "";
  flex: none;
  width: 35px;
  height: var(--libro-punto);
}
.libro__portada {
  flex: none;
  width: 250px;
  height: var(--libro-portada-h);
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
.libro__cuerpo { grid-column: 1; grid-row: 1; }
.libro__titulo {
  font-size: 50px;
  line-height: 1.05;
}
.libro__lead,
.libro__texto {
  font-size: 14px;
  line-height: 1.45;
  max-width: 52ch;
}
.libro__lead { margin-top: var(--espacio-4); }
.libro__obra {
  margin-top: var(--espacio-6);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
}
.libro__obra strong { font-weight: 600; }
.libro__autor {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.libro__valoracion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
  margin-top: var(--espacio-3);
  font-size: 12px;
  line-height: 1.3;
}
.libro__valoracion svg {
  width: 12px;
  height: 12px;
  flex: none;
}
.libro__genero { font-size: 12px; }
.libro__texto { margin-top: var(--espacio-4); }
.libro__texto + .libro__texto { margin-top: var(--espacio-3); }
.libro__texto--movil { display: none; }
.libro__cuerpo .pastilla {
  margin-top: var(--espacio-6);
  font-size: 13px;
}

.libro__ui {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 5;
  align-self: center;
  justify-self: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 475px;
  max-width: 100%;
  height: 630px;
  padding: 0 0 var(--libro-pad);
  pointer-events: none;
}
.libro__controles {
  position: absolute;
  top: calc((var(--libro-portada-top) - var(--libro-flecha)) / 2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  width: 84px;
  height: var(--libro-flecha);
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.libro__controles .circulo,
.libro__controles .circulo--linea {
  width: 39px;
  height: 39px;
  min-width: 39px;
  border: 1px solid var(--tinta);
  background: transparent;
}
.libro__puntos {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  gap: 7px;
  height: 7px;
  pointer-events: auto;
}
.libro__puntos .punto {
  width: 7px;
  height: 7px;
  background: rgba(38, 40, 8, 0.3);
}
.libro__puntos .punto[aria-current="true"] {
  width: 7px;
  background: var(--tinta);
}

/* ============ 7 · Encuentros lectores ============ */

.encuentros { padding-block: var(--seccion); }
.encuentros__rejilla {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  column-gap: max(2.5rem, calc(7 * var(--uv)));
  row-gap: var(--espacio-5);
  align-content: center;
  grid-template-areas:
    "titulo carrusel"
    "texto  carrusel"
    "cta    carrusel";
}
.encuentros__titulo {
  grid-area: titulo;
  align-self: end;
  font-size: 50px;
  line-height: 1.05;
  margin-bottom: var(--espacio-2);
}
.encuentros__carrusel {
  grid-area: carrusel;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  align-items: center;
  min-width: 0;
}
.encuentros__pista-wrap {
  position: relative;
  width: 100%;
  max-width: calc(226px * 3 + 16px * 2);
  min-width: 0;
}
.encuentros__pista {
  width: 100%;
  gap: 16px;
  min-width: 0;
}
.encuentros__flecha {
  display: none;
}
.encuentros__texto {
  grid-area: texto;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta-suave);
  max-width: 44ch;
}
.encuentros__cta { grid-area: cta; align-self: start; margin-top: var(--espacio-2); }
.encuentros__cta .pastilla {
  box-sizing: border-box;
  width: 162px;
  min-width: 162px;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 200px;
  font-size: 13px;
  line-height: 1;
  background: var(--lima);
  color: var(--tinta);
}
.encuentros__puntos {
  margin-top: 0;
}

.encuentro {
  flex: 0 0 226px;
  width: 226px;
  border-radius: 14px;
  overflow: hidden;
}
.encuentro img {
  width: 226px;
  height: 320px;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

/* ============ 8 · Testimonios ============ */

/* Medidas leidas sobre references/home-desktop.png. Ese fichero son 323 px de
   ancho para un frame de 1440, asi que 1 px de la referencia son 4,46 reales:
   se conservan proporciones y ordenes de magnitud, no px literales. Tarjeta de
   115x76 -> 513x339; hueco de 3,5 -> 16; dos tarjetas completas y la tercera
   asomando por el borde derecho. */

.testimonios { padding-block: var(--seccion); }
.testimonios__cabeza {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espacio-6);
}
.testimonios__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.testimonios__titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  font-size: unset;
  line-height: normal;
  letter-spacing: normal;
  max-width: none;
  text-align: center;
}
.testimonios__eyebrow {
  display: block;
  font-family: var(--fuente-texto) !important;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--tinta);
}
.testimonios__eyebrow::after { content: none; }
.testimonios__destacado {
  display: block;
  font-family: var(--fuente-titulo) !important;
  font-size: 40px !important;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.05;
  max-width: 8.5em;
  color: var(--tinta);
}
.testimonios__lead {
  margin-top: var(--espacio-5);
  font-size: 11px !important;
  line-height: 1.45;
  max-width: 284px;
  margin-inline: auto;
  text-align: left;
  color: var(--tinta);
}
.testimonios__controles { display: none !important; }

@media (min-width: 860px) {
  .testimonios__cabeza {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .testimonios__intro {
    display: block;
    align-items: unset;
    width: auto;
  }
  .testimonios__titulo {
    display: block;
    align-items: unset;
    gap: unset;
    font-size: 45px;
    line-height: var(--alto-titulo);
    letter-spacing: -0.012em;
    max-width: 12.2em;
    text-align: left;
  }
  .testimonios__eyebrow,
  .testimonios__destacado {
    display: inline;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    max-width: none;
    color: inherit;
  }
  .testimonios__eyebrow::after { content: " "; }
  .testimonios__lead {
    margin-top: 2.25rem;
    margin-inline: 0;
    font-size: 14px !important;
    line-height: var(--alto-texto);
    max-width: 52ch;
    text-align: left;
    color: var(--tinta-suave);
  }
  .testimonios__controles {
    display: flex !important;
    gap: var(--espacio-3);
    flex: none;
  }
  .testimonio__cita p {
    font-size: 14px;
  }
  .testimonio__firma {
    font-size: 14px;
  }
}

/* La sangria es ahora el gutter a secas. Antes era
   `max(var(--gutter), calc((100% - var(--ancho-max)) / 2))`, que servia para
   alinear la pista a sangre con el borde de un contenedor centrado y topado en
   1360; sin ese tope el contenedor ya llega hasta el gutter y la resta seria
   negativa, asi que la expresion se queda en su propio minimo. */
.testimonios__pista {
  --sangria: var(--gutter);
  margin-top: 3.375rem;
  padding-inline: var(--sangria);
  /* Sin scroll-padding el snapport arranca en el borde del scrollport y no
     detras del relleno: al ajustar el carrusel la pista se quedaba desplazada
     44 px y la primera tarjeta se pegaba al borde de la ventana en lugar de
     alinearse con el contenedor, como si sobrara media tarjeta por la derecha. */
  scroll-padding-inline: var(--sangria);
  gap: 1rem;
  padding-bottom: var(--espacio-2);
}
/* El 38 % del contenedor son los 512 px de hoy a 1440 y la proporcion medida en
   la referencia (115 de 323). Con tres tarjetas suma el 114 %, asi que la
   composicion «dos tarjetas y media» y el carrusel se conservan a cualquier
   ancho; con el tope de 32rem que habia aqui, a 1920 las tres cabian y el
   carrusel se quedaba sin flechas ni puntos. */
.testimonio {
  position: relative;
  flex: 0 0 min(84vw, 38%);
  /* En proporcion, no 21,25rem fijos: con la tarjeta creciendo hasta 1224 px un
     alto fijo de 340 la dejaba en una franja apaisada. */
  min-height: max(21.25rem, calc(23.6 * var(--uv)));
  padding: max(2rem, calc(3.4 * var(--uv)));
  border-radius: var(--radio-m);
  background: var(--lavanda);
  overflow: hidden;
}
.testimonio__comilla {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 65px;
  font-weight: 400;
  line-height: 41px;
  height: 41px;
  overflow: visible;
  color: #262808;
  margin-bottom: 8px;
  transform: scaleX(0.533);
  transform-origin: left top;
}
/* Sin tope en ch: el relleno de la tarjeta ya deja 406 px de caja, que es
   exactamente el ancho de tinta medido en la referencia (91 px de 323). */
.testimonio__cita p { font-size: var(--paso-s); }
.testimonio__firma {
  margin-top: var(--espacio-5);
  font-size: var(--paso-xs);
  font-weight: 600;
}
.testimonio__nota { font-weight: 400; color: var(--tinta-suave); }
/* Al maximo zoom de la referencia el adorno no esta pegado al borde: queda
   metido unos 12 px de los 115 de la tarjeta (53 reales en la primera, 29 en la
   segunda) y mide 39-45, o sea un 34-39 % del ancho. El borde inferior de la
   tarjeta lo recorta, pero deja la cara entera a la vista. El translate va en %
   sobre la altura propia de cada adorno, asi que los tres se recortan en la
   misma proporcion aunque el dibujo tenga otras medidas. */
.testimonio__adorno {
  position: absolute;
  right: 6%;
  bottom: 0;
  width: 36%;
  height: auto;
  transform: translateY(0%);
  pointer-events: none;
}
.testimonios__puntos { margin-top: 2rem; }

/* ============ 9 · Galeria ============ */

/* La referencia es un mosaico de DOS filas de CUATRO celdas cuadradas iguales,
   no una tira de anchos alternos: medido sobre home-desktop.png, celdas de
   73x72 px de 323 (o sea cuadradas) y huecos de 5, con las cuatro columnas en
   las mismas x en las dos filas. A 1440 eso es una celda de 323,5 y un hueco
   de 22 dentro del contenedor de 1360.
   Cada fila es su PROPIO carrusel, con su par de flechas centrado en su altura:
   en la referencia hay cuatro circulos, dos por fila, y el de la fila 2 esta a
   la altura de la fila 2. No hace falta tocar el JS porque initCarruseles()
   recorre todos los [data-carrusel] y cada fila es uno. */

/* Misma correccion que en testimonios: la sangria es el gutter. Con esto la
   celda de `grid-auto-columns` --que se calcula sobre el ancho de la pista-- deja
   de quedarse en los 321 px de un contenedor de 1360 y pasa a 320 a 1440, 427 a
   1920, 587 a 2560 y 788 a 3440, con las MISMAS cuatro columnas. */
.galeria {
  --galeria-gap: 1.375rem;
  --galeria-sangria: var(--gutter);
  display: grid;
  /* minmax(0, 1fr) y no la columna implicita: sin el 0 la fila se dimensionaba
     a max-content (628 px a 390) y desbordaba la pagina en vez de desplazarse
     dentro de su pista; el overflow-x: clip del body lo tapaba y las flechas
     quedaban ocultas porque la pista «no tenia nada que desplazar». */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--galeria-gap);
  padding-bottom: var(--seccion);
  overflow-x: clip;
}
.galeria__fila { position: relative; min-width: 0; }
.galeria__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--galeria-gap)) / 4);
  gap: var(--galeria-gap);
  padding-inline: var(--galeria-sangria);
  /* Igual que en testimonios: sin scroll-padding el snapport ignora el relleno
     y la fila aparece desplazada, con la primera foto pegada a la ventana. */
  scroll-padding-inline: var(--galeria-sangria);
}
/* Cuadrada por aspect-ratio y no por un clamp de vw: asi el alto lo fija el
   ancho de la celda y ninguna fotografia impone su propia altura. */
.galeria__pieza {
  aspect-ratio: 1;
  border-radius: var(--radio-s);
  overflow: hidden;
}
.galeria__pieza img { width: 100%; height: 100%; object-fit: cover; }

.galeria__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 33px;
  height: 33px;
  min-width: 33px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(38, 40, 8, 0.16);
}
.galeria__flecha:hover { transform: translateY(-50%) scale(1.06); }
.galeria__flecha[data-carrusel-anterior] { left: calc(var(--galeria-sangria) + 0.5rem); }
.galeria__flecha[data-carrusel-siguiente] { right: calc(var(--galeria-sangria) + 0.5rem); }
.galeria__puntos { display: none; }

/* ============ 10 · Newsletter ============ */

.boletin { padding-block: var(--espacio-5); }
.boletin__panel { background: var(--lima); }
.boletin__interior {
  max-width: max(58rem, calc(64.4 * var(--uv)));   /* 928 px a 1440 */
  margin-inline: auto;
  padding: max(2.5rem, calc(6 * var(--uv))) var(--gutter);
  text-align: center;
}
.boletin__titulo {
  font-size: 25px;
  max-width: 22ch;
  margin-inline: auto;
  font-family: var(--fuente-texto);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.boletin__lead {
  margin-top: var(--espacio-4);
  font-size: 14px;
  line-height: 1.45;
  max-width: 46ch;
  margin-inline: auto;
  color: var(--tinta);
}

.boletin__form { margin-top: var(--espacio-6); }
.boletin__campo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  justify-content: center;
  max-width: 30rem;
  margin-inline: auto;
}
.boletin__campo + .boletin__campo { margin-top: var(--espacio-2); }
.boletin__input {
  flex: 1 1 15rem;
  box-sizing: border-box;
  height: 37px;
  min-height: 37px;
  padding: 0 1.1em;
  border: 1px solid var(--tinta);
  border-radius: var(--radio-pill);
  background: transparent;
  font-size: 13px;
  line-height: 1;
  transition: box-shadow var(--transicion);
}
.boletin__input::placeholder { color: rgba(38, 40, 8, 0.5); }
.boletin__input:focus,
.boletin__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(38, 40, 8, 0.12);
}
.boletin__input[aria-invalid="true"] { border-width: 2px; }
.boletin__acciones {
  display: flex;
  justify-content: center;
  margin-top: var(--espacio-5);
}
.boletin__enviar {
  box-sizing: border-box;
  height: 37px;
  min-height: 37px;
  padding: 0 1.6em;
  border-radius: var(--radio-pill);
  background: var(--tinta);
  color: var(--crema);
  font-size: 13px;
  line-height: 1;
  transition: filter var(--transicion), opacity var(--transicion);
}
.boletin__enviar:hover:not(:disabled) { filter: brightness(1.25); }
.boletin__enviar:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.boletin__consentimiento {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.32em;
  margin-top: var(--espacio-5);
  font-size: var(--paso-xs);
}
.boletin__check {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  margin: 0;
  flex: none;
  align-self: center;
  border: 1.5px solid var(--tinta);
  border-radius: 3px;
  background: var(--lima);
  cursor: pointer;
}
.boletin__check:checked {
  background-color: var(--lima);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23262808' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.boletin__error {
  margin-top: var(--espacio-4);
  font-size: var(--paso-xs);
  font-weight: 600;
}
.boletin__error[hidden] { display: none; }
.boletin__nota {
  margin-top: var(--espacio-5);
  font-size: 13px;
  line-height: 1.4;
  color: var(--tinta);
}
.boletin__nota strong { font-weight: 700; }

/* ============ 11 · Comunidad social ============ */

.social { padding-block: var(--seccion); }
.social__cabeza { text-align: center; }
.social__titulo {
  font-size: 25px;
  font-family: var(--fuente-texto);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 44ch;
  margin-inline: auto;
}
.social__lead {
  margin-top: var(--espacio-4);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta-suave);
  max-width: 52ch;
  margin-inline: auto;
}
.social__cabeza .pastilla,
.social__cta {
  margin-top: var(--espacio-5);
  width: 136px; /* Figma */
  min-height: 37px;
  height: 37px;
  padding: 10px;
  font-size: 13px;
  box-sizing: border-box;
}

.social__viewport {
  overflow: hidden;
  margin-top: var(--espacio-7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.social__tira {
  display: flex;
  width: max-content;
  gap: 1rem;
  padding-inline: 0;
  list-style: none;
  margin: 0;
  animation: social-marquee 42s linear infinite;
  will-change: transform;
}
.social__pieza {
  flex: 0 0 max(9.5rem, 15vw);
  border-radius: var(--radio-m);
  overflow: hidden;
}
.social__pieza img { width: 100%; aspect-ratio: 54 / 70; object-fit: cover; }

@keyframes social-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.social__pie { margin-top: var(--espacio-6); text-align: center; }
.social__hashtag {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.social__sub {
  margin-top: var(--espacio-2);
  font-size: 14px;
  color: var(--tinta-suave);
}

/* ============ 12 · Descargar la app ============ */

.app { padding-bottom: var(--seccion); }
.app__bloque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: max(26rem, calc(46.4 * var(--uv)));
  gap: 0;
}
.app__figura {
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  position: relative;
  align-self: stretch;
  background: var(--durazno);
  padding: 0;
  border-radius: var(--radio-l);
  overflow: hidden;
  margin-left: -1.25rem;
  width: calc(100% + 1.25rem);
  min-height: 100%;
}
.app__figura img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.app__panel {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--lavanda);
  padding: max(2.5rem, calc(5 * var(--uv))) max(1.5rem, calc(4 * var(--uv)));
  border-radius: var(--radio-l) 0 0 var(--radio-l);
}
.app__antetitulo {
  font-size: 16px;
  color: var(--tinta-suave);
  margin-bottom: var(--espacio-3);
}
.app__titulo {
  max-width: 15ch;
  font-size: 45px;
}
.app__texto {
  margin-top: var(--espacio-5);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta-suave);
  max-width: 44ch;
}

/* ============ 13 · Preguntas frecuentes ============ */

.faq { padding-bottom: var(--seccion); }
.faq__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: max(1.5rem, calc(4 * var(--uv)));
  align-items: start;
}
.faq__intro {
  align-self: start;
}
.faq__titulo {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.faq__lead {
  margin-top: var(--espacio-4);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.faq__ilustracion img { width: 100%; height: auto; }

.acordeon {
  display: grid;
  gap: var(--espacio-3);
  height: 23.5rem;
  align-content: start;
}
.acordeon__item {
  border: 1px solid var(--filete);
  border-radius: var(--radio-m);
  background: transparent;
  transition: background-color 280ms ease, border-color 280ms ease;
}
.acordeon__item:has(.acordeon__boton[aria-expanded="true"]) {
  background: var(--amarillo);
  border-color: transparent;
}
.acordeon__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  width: 100%;
  min-height: 56px;
  padding: var(--espacio-4) var(--espacio-5);
  text-align: left;
  font-size: 14px;
  line-height: 1.3;
}
.acordeon__signo {
  position: relative;
  flex: none;
  width: 14px; height: 14px;
}
.acordeon__signo::before,
.acordeon__signo::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 280ms ease;
}
.acordeon__signo::after { transform: rotate(90deg); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after { transform: rotate(0deg); }

.acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-inline: var(--espacio-5);
  transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 12px;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.acordeon__panel > p {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid transparent;
  opacity: 0;
  transition:
    opacity 240ms ease,
    padding 320ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 240ms ease;
}
.acordeon__item:has(.acordeon__boton[aria-expanded="true"]) .acordeon__panel {
  grid-template-rows: 1fr;
  color: var(--tinta);
}
.acordeon__item:has(.acordeon__boton[aria-expanded="true"]) .acordeon__panel > p {
  padding: var(--espacio-4) 0 var(--espacio-5);
  border-top-color: rgba(38, 40, 8, 0.14);
  opacity: 1;
}

/* ============ 14 · Pie ============ */

.pie { background: var(--amarillo); }
.pie__rejilla {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--espacio-5);
  /* Asimetrico, como en la referencia: la banda amarilla mide 185 a 1440 con
     83 px por arriba hasta la marca y 42 por abajo (medido en Eventos.png,
     que es el unico pie completo de las referencias). */
  padding-block: max(2rem, calc(5.76 * var(--uv))) max(1.25rem, calc(2.92 * var(--uv)));
}
.pie__logo {
  margin: 0;
  line-height: 0;
}

.pie__logo img {
  display: block;
  width: max(7.5rem, calc(11.5 * var(--uv)));
  height: auto;
}
.pie__lema {
  margin-top: var(--espacio-2);
  font-size: 11px;
  color: var(--tinta-suave);
}
.pie__legal { text-align: center; }
.pie__copy { font-size: 10px; }
.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-4);
  margin-top: var(--espacio-2);
}
.pie__enlaces .enlace-texto { font-size: 9px; }
.pie__redes { display: flex; gap: var(--espacio-2); justify-content: flex-end; }
.red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17.38px;
  height: 17.2px;
  padding: 0;
  background: transparent;
  color: var(--tinta);
  text-decoration: none;
  transition: opacity var(--transicion);
}
.red:hover { opacity: 0.75; }
.red svg {
  display: block;
  width: 17.38px;
  height: 17.2px;
}

/* ============ Responsive ============ */

@media (max-width: 1100px) {
  .faq__rejilla { grid-template-columns: 1fr 1fr; }
  .faq__ilustracion { justify-self: center; max-width: 26rem; }
  .acordeon { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  .blog__lista { grid-template-columns: repeat(2, 1fr); }
  .articulo:last-child { grid-column: 1 / -1; max-width: 36rem; }
}

/* Cabecera compacta y menu desplegable */
@media (max-width: 899px) {
  .cabecera { position: relative; }
  .cabecera__interior { gap: var(--espacio-3); min-height: 68px; }
  .cabecera__hamburguesa { display: inline-flex; }
  .marca { margin-right: auto; }

  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 40;
    display: none;
    flex: none;
    background: var(--crema);
    border-top: 1px solid var(--filete);
    padding: var(--espacio-2) var(--gutter) var(--espacio-5);
    box-shadow: 0 14px 28px rgba(38, 40, 8, 0.14);
  }
  .nav[data-abierto="true"] { display: block; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__enlace {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.9em 0;
    font-size: var(--paso-base);
    border-bottom: 1px solid var(--filete);
  }
  .nav__item:last-child .nav__enlace { border-bottom: 0; }
}

/* Reordenaciones de una sola columna */
@media (max-width: 859px) {
  .franja__texto { font-size: 9px; }

  .hero {
    --hero-radio: 14px;
    --hero-hueco: 20px;
    padding-top: var(--espacio-4);
  }

  .hero__slide,
  .hero__slide[data-variant="full"] {
    flex: 0 0 100%;
    grid-template-columns: 1fr;
    min-height: 0;
    border: 0;
  }

  .hero__slide[data-variant="split"] {
    display: flex;
    flex-direction: column;
    gap: var(--hero-hueco);
    background: transparent;
  }
  .hero__slide[data-variant="split"] .hero__panel--texto {
    flex: 0 0 auto;
    aspect-ratio: 351 / 310;
    background: var(--hero-fondo);
    border-radius: var(--hero-radio);
    padding: 16px 8px;
    justify-content: center;
  }
  .hero__slide[data-variant="split"] .hero__media {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 351 / 310;
    border-radius: var(--hero-radio);
    overflow: hidden;
  }

  .hero__slide[data-variant="full"] {
    display: flex;
    flex-direction: column;
    gap: var(--hero-hueco);
    background: transparent;
    border-radius: 0;
  }
  .hero__slide[data-variant="full"] .hero__panel--texto {
    display: flex;
    flex: 0 0 auto;
    aspect-ratio: 351 / 310;
    background: var(--azul);
    border-radius: var(--hero-radio);
    padding: 16px 8px;
    justify-content: center;
  }
  .hero__slide[data-variant="full"] .hero__media {
    position: static;
    flex: 0 0 auto;
    aspect-ratio: 351 / 310;
    background: var(--lima);
    border-radius: var(--hero-radio);
    padding: 16px 8px;
    display: grid;
    place-items: center;
    min-height: 0;
  }
  .hero__slide[data-variant="full"] .hero__imagen {
    width: min(85%, 298px);
    height: auto;
    max-height: 219px;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .hero__titulo {
    font-size: clamp(1.75rem, 11.5vw, 2.8125rem);
    line-height: 0.95;
  }
  .hero__texto {
    margin-top: var(--espacio-4);
    margin-inline: auto;
    max-width: 36ch;
    font-size: 0.6875rem;
    line-height: 1.21;
    text-align: center;
  }

  .hero__controles {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--espacio-4);
  }
  .hero__flecha { display: none; }
  .hero__puntos {
    position: static;
    transform: none;
    bottom: auto;
    background: transparent;
    padding: 0;
    gap: 8px;
  }
  .hero__puntos .punto {
    width: 8px;
    height: 8px;
    background: rgba(38, 40, 8, 0.26);
  }
  .hero__puntos .punto[aria-current="true"] {
    width: 22px;
    background: var(--tinta);
  }

  /* 3 · Tarjetas: carrusel con la siguiente asomando */
  .entrada { flex: 0 0 82%; }
  .entradas__puntos { display: flex; }
  .entrada__base {
    padding: var(--espacio-4);
    gap: var(--espacio-2);
  }
  .entrada__copy {
    font-size: 16px;
    line-height: 1;
    max-width: none;
    flex: 1;
  }
  button.circulo.entrada__flecha {
    width: 37.22px;
    height: 37.22px;
    background: var(--crema);
    background-image: none;
  }
  button.circulo.entrada__flecha .entrada__flecha-icono--escritorio {
    display: none !important;
  }
  button.circulo.entrada__flecha .entrada__flecha-icono--movil {
    display: block !important;
    width: 13px;
    height: 12px;
    max-width: none;
    transform: none;
  }

  /* 4 */
  .movimiento__rejilla { grid-template-columns: 1fr; }
  .movimiento__figura { max-width: 34rem; margin-inline: auto; }
  .movimiento .antetitulo { font-size: 13px; }
  .movimiento__texto { font-size: 11px; }
  .movimiento .insignias { display: none; }

  .beneficios {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .beneficio {
    display: grid;
    grid-template-columns: 3.5rem auto;
    justify-content: start;
    align-items: center;
    gap: var(--espacio-5);
    padding-inline-start: 0;
  }
  .beneficio__texto {
    text-align: left;
    font-size: 12px;
  }
  .beneficio:nth-child(1) .beneficio__icono,
  .beneficio:nth-child(2) .beneficio__icono,
  .beneficio:nth-child(3) .beneficio__icono {
    width: auto;
    height: 2.75rem;
    justify-self: center;
  }

  .blog > .contenedor {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "tabs"
      "lista"
      "cta"
      "vacio";
    justify-items: stretch;
  }
  .blog__controles {
    justify-content: center;
    justify-self: center;
  }
  .pestanas {
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .pestanas .pastilla {
    box-sizing: border-box;
    flex: none;
    width: 110px;
    min-width: 110px;
    height: 30px;
    min-height: 30px;
    padding: 10px;
    font-size: 10px;
    line-height: 1.21;
    border-width: 1px;
    border-radius: 200px;
  }
  .blog__lista { grid-template-columns: 1fr; }
  .articulo:last-child { grid-column: auto; max-width: none; }
  .articulo__fecha {
    margin-top: var(--espacio-5);
    font-size: 11px;
  }
  .articulo__titulo {
    margin-top: var(--espacio-3);
    font-size: 20px;
    font-family: var(--fuente-titulo);
    font-weight: 400;
  }
  .articulo__enlace {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
  }
  .articulo__flecha {
    display: inline-block;
  }
  .articulo__extracto,
  .articulo__mas { display: none; }
  .blog__ver-todo {
    margin-top: var(--espacio-7);
    justify-self: center;
    width: auto;
  }

  /* 6 · Libro del mes: la tarjeta precede al texto en el DOM */
  .libro__marco {
    --libro-pad: 16px;
    --libro-flecha: 32px;
    --libro-punto: 7px;
    --libro-portada-w: min(220px, 58vw);
    --libro-portada-h: calc(var(--libro-portada-w) * 380 / 250);
    --libro-hueco: 20px;
    --libro-card-h: calc(
      var(--libro-pad) * 2 +
      var(--libro-flecha) +
      var(--libro-hueco) +
      var(--libro-portada-h) +
      var(--libro-hueco) +
      var(--libro-punto)
    );
    --libro-portada-top: calc(var(--libro-pad) + var(--libro-flecha) + var(--libro-hueco));

    display: flex;
    flex-direction: column;
    position: relative;
  }
  .libro__pista {
    grid-column: auto;
    grid-row: auto;
    order: 0;
  }
  .libro__slide {
    grid-template-columns: 1fr;
    gap: var(--espacio-6);
  }
  .libro__tarjeta,
  .libro__cuerpo { grid-column: 1; grid-row: auto; }
  .libro__cuerpo { text-align: center; }
  .libro__cuerpo {
    max-width: 352px;
    margin-inline: auto;
  }
  .libro__titulo {
    font-size: 40px;
    line-height: 1.05;
  }
  .libro__lead,
  .libro__texto {
    margin-inline: auto;
    font-size: 11px;
    line-height: 1.45;
  }
  .libro__texto--escritorio { display: none; }
  .libro__texto--movil {
    display: block;
    text-align: left;
    margin-inline: 0;
  }
  .libro__obra {
    font-size: 16px;
    line-height: 1.25;
  }
  .libro__valoracion {
    justify-content: center;
    font-size: 11px;
  }
  .libro__genero { font-size: 11px; }
  .libro__cuerpo .pastilla {
    box-sizing: border-box;
    width: 185px;
    min-width: 185px;
    height: 36px;
    min-height: 36px;
    padding: 10px;
    border-radius: 200px;
    font-size: 10px;
    line-height: 1;
    background: #F2F0E4;
    color: var(--tinta);
  }
  .libro__tarjeta {
    width: 100%;
    max-width: 352px;
    margin-inline: auto;
    height: 467px;
    min-height: 467px;
    background: #F2F0E4;
    border: none;
    border-radius: 14px;
    padding: var(--libro-pad) 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .libro__tarjeta::before,
  .libro__tarjeta::after {
    display: block;
  }
  .libro__tarjeta::before {
    width: 70px;
    height: var(--libro-flecha);
  }
  .libro__tarjeta::after {
    width: 35px;
    height: var(--libro-punto);
  }
  .libro__portada {
    width: var(--libro-portada-w);
    height: var(--libro-portada-h);
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .libro__ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 352px;
    height: 467px;
    padding: var(--libro-pad) 0;
    z-index: 5;
    pointer-events: none;
  }
  .libro__controles {
    order: 0;
    position: static;
    justify-content: center;
    margin: 0;
    width: 70px;
    height: var(--libro-flecha);
    transform: none;
    left: auto;
    top: auto;
    pointer-events: auto;
  }
  .libro__controles .circulo,
  .libro__controles .circulo--linea {
    width: var(--libro-flecha);
    height: var(--libro-flecha);
    min-width: var(--libro-flecha);
  }
  .libro__puntos {
    order: 0;
    position: static;
    margin: 0;
    height: var(--libro-punto);
    transform: none;
    left: auto;
    bottom: auto;
    pointer-events: auto;
  }

  /* 7 · Encuentros: titulo, carrusel, texto y CTA centrados */
  .encuentros__rejilla {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "carrusel" "texto" "cta";
    justify-items: stretch;
    text-align: left;
    row-gap: 0;
  }
  .encuentros__titulo {
    align-self: auto;
    justify-self: center;
    font-size: 40px;
    line-height: 1.05;
    text-align: center;
    margin-bottom: var(--espacio-6);
  }
  .encuentros__carrusel {
    width: 100%;
    align-items: stretch;
    gap: var(--espacio-5);
    margin-bottom: var(--espacio-6);
  }
  .encuentros__pista-wrap {
    max-width: 100%;
  }
  .encuentros__pista {
    width: 100%;
    gap: 12px;
  }
  .encuentro {
    flex: 0 0 257px;
    width: 257px;
    border-radius: 14px;
  }
  .encuentro img {
    width: 257px;
    height: 250px;
    border-radius: 14px;
  }
  .encuentros__flecha {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: none;
    background: var(--crema);
    color: var(--tinta);
    box-shadow: 0 2px 8px rgba(38, 40, 8, 0.12);
  }
  .encuentros__flecha[hidden] { display: none; }
  .encuentros__puntos {
    margin-top: 0;
    margin-bottom: 0;
    gap: 8px;
    justify-content: center;
  }
  .encuentros__puntos .punto {
    width: 8px;
    height: 8px;
    background: rgba(38, 40, 8, 0.26);
  }
  .encuentros__puntos .punto[aria-current="true"] {
    width: 22px;
    background: var(--tinta);
  }
  .encuentros__texto {
    justify-self: center;
    font-size: 11px;
    line-height: 1.45;
    width: 100%;
    max-width: 284px;
    margin-inline: auto;
    text-align: left;
    margin-bottom: var(--espacio-5);
  }
  .encuentros__cta {
    justify-self: center;
    margin-top: 0;
  }
  .encuentros__cta .pastilla {
    box-sizing: border-box;
    width: 162px;
    min-width: 162px;
    height: 36px;
    min-height: 36px;
    padding: 10px;
    border-radius: 200px;
    font-size: 10px;
    background: #D1DF2F;
  }

  .testimonios__pista {
    margin-top: var(--espacio-6);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    gap: 12px;
  }
  .testimonios .testimonio {
    flex: 0 0 min(352px, calc(100vw - var(--gutter) * 2));
    width: min(352px, calc(100vw - var(--gutter) * 2));
    height: 266px;
    min-height: 266px;
    box-sizing: border-box;
    padding: 16px 8px 16px 16px;
    border-radius: 14px;
    background: #D5C2EF;
  }
  .testimonios .testimonio__comilla {
    font-size: 65px;
    line-height: 41px;
    height: 41px;
    margin-bottom: 8px;
    transform: scaleX(0.533);
    transform-origin: left top;
  }
  .testimonios .testimonio__cita p {
    font-size: 11px;
    line-height: 1.4;
  }
  .testimonios .testimonio__firma {
    margin-top: var(--espacio-4);
    font-size: 11px;
  }
  .testimonios .testimonio__adorno {
    width: 28%;
    right: 4%;
    transform: translateY(2%);
  }
  .testimonios__puntos {
    margin-top: var(--espacio-5);
    gap: 8px;
    justify-content: center;
  }
  .testimonios__puntos .punto {
    width: 8px;
    height: 8px;
    background: rgba(38, 40, 8, 0.26);
  }
  .testimonios__puntos .punto[aria-current="true"] {
    width: 22px;
    background: var(--tinta);
  }

  .galeria {
    --galeria-gap: 12px;
    --galeria-celda: 193px;
    gap: 12px;
    padding-bottom: var(--espacio-8);
  }
  .galeria__flecha { display: none !important; }
  .galeria__puntos {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 8px;
    margin: 14px 0 0;
  }
  .galeria__puntos[hidden] { display: none !important; }
  .galeria__puntos .punto {
    width: 8px;
    height: 8px;
    background: rgba(38, 40, 8, 0.26);
  }
  .galeria__puntos .punto[aria-current="true"] {
    width: 22px;
    background: var(--tinta);
  }
  .galeria__pista {
    grid-auto-columns: var(--galeria-celda);
    padding-inline: 0 var(--gutter);
    scroll-padding-inline: 0;
  }
  .galeria__fila:last-of-type .galeria__pista {
    width: calc(100% + 103px);
    max-width: none;
    margin-left: -103px;
  }
  .galeria__pieza {
    aspect-ratio: 193 / 198;
    border-radius: 14px;
  }

  .app__bloque {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
  }
  .app__figura,
  .app__panel {
    grid-column: 1;
    grid-row: auto;
  }
  .app__figura {
    z-index: 1;
    position: relative;
    width: 100%;
    margin: 0 0 -1.25rem;
    border-radius: 14px;
    min-height: 16rem;
    aspect-ratio: 352 / 334;
  }
  .app__figura img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .app__panel {
    border-radius: 0 0 14px 14px;
    padding-top: calc(max(2.5rem, calc(5 * var(--uv))) + 1.25rem);
  }
  .app__antetitulo { font-size: 13px; }
  .app__titulo { font-size: 40px; }
  .app__texto { font-size: 11px; }

  /* 13 */
  .faq__rejilla { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .faq__intro { max-width: 34rem; }
  .faq__titulo { font-size: 20px; }
  .faq__lead { font-size: 11px; }
  .faq__ilustracion { max-width: 22rem; }
  .acordeon { width: 100%; text-align: left; height: 26rem; }
  .acordeon__boton { font-size: 12px; }
  .acordeon__panel { font-size: 11px; }
}

@media (max-width: 700px) {
  .pie__rejilla {
    grid-template-columns: auto 1fr auto;
    align-items: start;
    justify-items: stretch;
    text-align: left;
    gap: 0.5rem;
    min-height: 98px;
    padding-block: 16px;
    padding-inline: 8px;
  }
  .pie__marca { text-align: left; }
  .pie__lema { display: none; }
  .pie__logo img {
    width: 5.5rem;
  }
  .pie__legal {
    text-align: center;
    justify-self: center;
  }
  .pie__copy {
    font-size: 7px;
    letter-spacing: 0.02em;
  }
  .pie__enlaces {
    gap: 0.5rem;
    margin-top: 0.2rem;
    flex-wrap: nowrap;
  }
  .pie__enlaces .enlace-texto { font-size: 7px; }
  .pie__redes {
    justify-content: flex-end;
    gap: 0.35rem;
  }
  .pie__redes .red {
    width: 12.08px;
    height: 11.96px;
  }
  .pie__redes .red svg {
    width: 12.08px;
    height: 11.96px;
  }
}

@media (max-width: 639px) {
  .blog__lista { grid-template-columns: 1fr; }
  .articulo:last-child { grid-column: auto; max-width: none; }
  .pestanas { justify-content: center; width: 100%; }

  /* 10 · El newsletter pasa de banda a tarjeta con margenes */
  .boletin { padding-inline: var(--gutter); }
  .boletin__panel {
    border-radius: var(--radio-l);
    max-width: 352px;
    margin-inline: auto;
  }
  .boletin__interior {
    padding: var(--espacio-6) var(--espacio-5);
  }
  .boletin__titulo { font-size: 20px; }
  .boletin__lead { font-size: 11px; }
  .boletin__nota { font-size: 11px; }
  .boletin__campo { max-width: none; }
  .boletin__input { flex: 1 1 100%; }
  .boletin__enviar { width: 100%; }

  .testimonio {
    flex: 0 0 min(352px, calc(100vw - var(--gutter) * 2));
    width: min(352px, calc(100vw - var(--gutter) * 2));
    height: 266px;
    min-height: 266px;
    padding-bottom: 16px;
  }
  .testimonio__adorno { width: 28%; right: 4%; transform: translateY(2%); }

  .social__titulo { font-size: 20px; }
  .social__lead { font-size: 11px; }
  .social__cabeza .pastilla,
  .social__cta {
    width: 110px;
    min-height: 32px;
    height: 32px;
    padding: 8px;
    font-size: 10px;
  }
  .social__hashtag { font-size: 12px; }
  .social__sub { font-size: 11px; }
  .social__pieza { flex: 0 0 8.5rem; }
}

@media (max-width: 380px) {
  .cabecera__iconos .icono:first-child { display: none; }
}

/* ============================================================
   PAGINA DE EVENTOS
   Medidas tomadas de _base/references/Eventos.png (1200 px de ancho,
   contenedor de 1124). Se expresan en cqw sobre .hero__marco o en rem.
   ============================================================ */

/* --- Entrada activa del menu --- */

.nav__enlace--activo,
.nav__enlace[aria-current="page"] { border-bottom-color: var(--tinta); }

/* --- Migas --- */

/* Ritmo de cabecera medido en Eventos.png, Blog_page.png y Evento_individual.png
   (identico en las tres): la cabecera acaba en 123,6 a 1440, la tinta de las
   migas cae en 172,8-183,6 y el primer bloque arranca en 213,6. Con la lista en
   una caja de 21 px eso son 45 arriba y 25 abajo. La lista ya iba centrada. */
.migas { padding-block: 2.8125rem 1.5625rem; }
.migas__lista {
  display: flex;
  justify-content: center;
  gap: var(--espacio-2);
  font-size: var(--paso-xs);
  color: var(--tinta-tenue);
}
.migas__item + .migas__item::before { content: "/"; margin-right: var(--espacio-2); }
.migas__item[aria-current="page"] { color: var(--tinta); }
.migas__enlace { color: inherit; text-decoration: none; }
.migas__enlace:hover { text-decoration: underline; }

/* --- Hero invertido: imagen a la izquierda, texto a la derecha ---
   Opcion del mismo componente. El hero del inicio no cambia. */

.hero--eventos {
  --hero-costura: 56.9%;   /* costura entre la foto (1.35fr) y el panel (1fr) */
  /* 375 de alto sobre 1124 en la referencia, con el mismo techo que el inicio:
     su reparto foto/panel es el suyo, no el del hero del inicio. */
  --hero-alto: min(33.4cqw, 735px);
  /* A diferencia del H1 de blog o de evento, el panel del hero de Eventos no
     arranca pegado a las migas: en Eventos.png empieza en 235,2 a 1440, o sea
     22 px mas abajo. Variante propia, no un margen igual para todos. */
  margin-top: 1.375rem;
}
.hero__slide[data-variant="split"][data-invertido] { grid-template-columns: 1.35fr 1fr; }
.hero__slide[data-variant="split"][data-invertido] .hero__media  { grid-column: 1; grid-row: 1; }
.hero__slide[data-variant="split"][data-invertido] .hero__panel--texto { grid-column: 2; grid-row: 1; }
.hero--eventos .hero__panel--texto { padding-inline: calc(7 * var(--uc)); }
.hero--eventos .hero__titulo { font-size: 50px; line-height: 1.1; }
.hero--eventos .hero__texto { font-size: 14px; line-height: 1.45; }

/* --- Proximos eventos --- */

.proximos { padding-block: var(--seccion); }
.proximos__titulo {
  text-align: center;
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.proximos__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 19-20 px sobre 1200 en Eventos.png, o sea 23 a 1440: con el contenedor de
     1352 salen tres tarjetas de 435, que es lo medido (433). */
  gap: max(1rem, calc(1.6 * var(--uv)));
  margin-top: var(--espacio-8);
}
.proximo { display: flex; flex-direction: column; }
.proximo__foto {
  width: 100%;
  /* 361x191 en la referencia, no 70/46: la foto era 43 px mas alta de la cuenta
     y estiraba la tarjeta entera. */
  aspect-ratio: 361 / 191;
  object-fit: cover;
  border-radius: var(--radio-m);
}
.proximo__titulo {
  margin-top: var(--espacio-4);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}
.proximo__cuando { margin-top: 0.625rem; font-size: 12px; }
.proximo__resumen { margin-top: 0.625rem; font-size: 12px; color: var(--tinta-suave); }
.proximo__lugar {
  margin-top: var(--espacio-3);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}
.proximo__mas { margin-top: 0.625rem; align-self: flex-start; font-size: 12px; }

/* --- Barra del calendario --- */

.calendario { padding-bottom: var(--seccion); }

/* El marco sigue al contenedor. Las celdas miden 255×320 (referencia Figma).
   El mes se reparte en 3 filas (~10–11 días); el lienzo hace scroll horizontal. */
.calendario__marco {
  --dia-ancho: 255px;
  --dia-alto: 320px;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Evita que la rejilla de 7×255 empuje el ancho del documento. */
  overflow-x: clip;
}
.calendario__barra {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espacio-5);
  padding-bottom: var(--espacio-4);
  border-bottom: 1px solid var(--filete);
}
.calendario__mes { display: flex; align-items: center; gap: var(--espacio-4); }
.calendario__titulo {
  /* Ancho fijo al mes mas largo («Septiembre 2026») para que las flechas
     no se corran al cambiar de mes. */
  flex: 0 0 14rem;
  width: 14rem;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1.2;
}
.calendario__nav {
  display: flex;
  gap: var(--espacio-2);
  flex: none;
}
.calendario__nav .circulo { width: 34px; height: 34px; }

.calendario__mascota {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: max(5rem, calc(9 * var(--uv)));
  height: auto;
  pointer-events: none;
}

.calendario__controles {
  display: flex;
  align-items: center;
  gap: var(--espacio-5);
  font-size: var(--paso-s);
}

.filtro { position: relative; }
.filtro__disparador {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: 36px;
  padding-inline: var(--espacio-2);
  font-size: var(--paso-s);
  border-radius: var(--radio-s);
}
.filtro__disparador:hover { background: rgba(38, 40, 8, 0.06); }
.filtro__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 12rem;
  padding: var(--espacio-2);
  border-radius: var(--radio-m);
  background: var(--crema);
  border: 1px solid var(--filete);
  box-shadow: 0 10px 28px rgba(38, 40, 8, 0.16);
}
.filtro__panel[hidden] { display: none; }
.filtro__opcion {
  padding: 0.55em 0.7em;
  border-radius: var(--radio-s);
  text-align: left;
  font-size: var(--paso-s);
}
.filtro__opcion:hover { background: rgba(38, 40, 8, 0.07); }
.filtro__opcion[aria-pressed="true"] { background: var(--lima); }

.vistas { display: flex; align-items: center; gap: var(--espacio-2); }
.vistas__boton { font-size: 14px; color: var(--tinta-tenue); }
.vistas__boton[aria-pressed="true"] { color: var(--tinta); }
.vistas__boton:hover { color: var(--tinta); }
.vistas__sep { color: var(--tinta-tenue); font-size: 14px; }

/* --- Selector de ciudad ---
   Mismo patron que .filtro, mas un buscador: la lista esta pensada para
   cientos de ciudades, asi que se filtra al escribir y tiene tope de alto. */

.ciudad { position: relative; }
.ciudad__disparador {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: 36px;
  padding-inline: var(--espacio-3);
  font-size: var(--paso-s);
  border: 1px solid var(--filete);
  border-radius: var(--radio-pill);
  white-space: nowrap;
}
.ciudad__disparador:hover { background: rgba(38, 40, 8, 0.06); }
.ciudad__pin { flex: none; color: var(--tinta-suave); }
.ciudad__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: grid;
  gap: var(--espacio-2);
  min-width: 16rem;
  padding: var(--espacio-2);
  border-radius: var(--radio-m);
  background: var(--crema);
  border: 1px solid var(--filete);
  box-shadow: 0 10px 28px rgba(38, 40, 8, 0.16);
}
.ciudad__panel[hidden] { display: none; }
.ciudad__campo {
  width: 100%;
  padding: 0.5em 0.7em;
  border: 1px solid var(--filete);
  border-radius: var(--radio-s);
  background: var(--crema);
  font-size: var(--paso-s);
}
.ciudad__campo::-webkit-search-cancel-button { cursor: pointer; }
.ciudad__lista {
  display: grid;
  gap: 2px;
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.ciudad__opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding: 0.55em 0.7em;
  border-radius: var(--radio-s);
  text-align: left;
  font-size: var(--paso-s);
}
.ciudad__opcion:hover { background: rgba(38, 40, 8, 0.07); }
.ciudad__opcion[aria-pressed="true"] { background: var(--lima); }
.ciudad__cuenta { flex: none; font-size: var(--paso-xs); color: var(--tinta-tenue); }
.ciudad__opcion[aria-pressed="true"] .ciudad__cuenta { color: var(--tinta-suave); }
.ciudad__vacio {
  padding: 0.55em 0.7em;
  font-size: var(--paso-xs);
  color: var(--tinta-suave);
}
.ciudad__vacio[hidden] { display: none; }

.calendario__vacio {
  margin-top: var(--espacio-7);
  text-align: center;
  color: var(--tinta-suave);
}

/* --- Vista calendario ---
   Los días del mes se parten en 3 filas (~10–11 por fila), no en semanas de 7.
   La rejilla es más ancha que el viewport: scroll horizontal. */

.calendario__lienzo {
  margin-top: var(--espacio-5);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.calendario__lienzo[hidden] { display: none; }
.calendario__rejilla {
  --cal-cols: 11;
  display: grid;
  grid-template-columns: repeat(var(--cal-cols), var(--dia-ancho));
  gap: var(--espacio-3);
  width: max-content;
  min-width: 100%;
  padding-bottom: var(--espacio-2);
}
.calendario__hueco {
  width: var(--dia-ancho);
  height: var(--dia-alto);
  min-height: var(--dia-alto);
}

.dia {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  box-sizing: border-box;
  width: var(--dia-ancho);
  height: var(--dia-alto);
  min-height: var(--dia-alto);
  padding: var(--espacio-4);
  border-radius: 14px;
  background: var(--lavanda);
  overflow: hidden;
}
.dia[data-hoy] {
  box-shadow: inset 0 0 0 2px var(--tinta);
}
.dia[data-hoy] .dia__numero {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.dia--vacio { background: var(--lavanda-suave); }
.dia[data-color="azul"]    { background: var(--azul); }
.dia[data-color="lima"]    { background: var(--lima); }
.dia[data-color="lavanda"] { background: var(--lavanda); }

.dia__cabecera {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  flex: none;
}
.dia__numero {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.dia__acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-left: auto;
}
.dia__categoria {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid var(--tinta);
  border-radius: 200px;
  background: var(--crema);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dia__flecha {
  width: 32px;
  height: 32px;
  flex: none;
  background: var(--crema);
  border: 0;
}
.dia__flecha:hover { background: #fff; }

.dia__eventos {
  display: grid;
  gap: var(--espacio-3);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  align-content: start;
}
.dia__eventos--scroll {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  touch-action: pan-y;
}
.dia__separador { height: 1px; margin: 0; border: 0; background: rgba(38, 40, 8, 0.22); }
.dia__evento {
  display: grid;
  gap: 3px;
  text-align: left;
  width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  border-radius: var(--radio-s);
  text-decoration: none;
  color: inherit;
}
.dia__evento:hover .dia__evento-titulo { text-decoration: underline; text-underline-offset: 0.2em; }
.dia__evento-titulo { font-size: 20px; font-weight: 500; line-height: 1.2; }
.dia__evento-cuando { font-size: 11px; line-height: 1.3; }
.dia__evento-lugar  { font-size: 12px; line-height: 1.3; }

.dia__foto {
  /* Pie de la tarjeta: object-fit cubre recortes chicos y fotos grandes. */
  display: block;
  width: calc(100% + var(--espacio-4) * 2);
  max-width: none;
  height: 171px;
  margin: var(--espacio-2) calc(var(--espacio-4) * -1) calc(var(--espacio-4) * -1);
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  flex: none;
  pointer-events: none;
}
.dia:not([data-eventos="1"]) .dia__foto {
  height: 85px;
}

/* --- Vista lista (agenda) --- */

.agenda { margin-top: var(--espacio-6); display: grid; gap: var(--espacio-6); }
.agenda[hidden] { display: none; }
.agenda__fecha {
  font-size: var(--paso-s);
  font-weight: 600;
  padding-bottom: var(--espacio-2);
  border-bottom: 1px solid var(--filete);
}
.agenda__filas { display: grid; }
.agenda__fila {
  display: grid;
  grid-template-columns: max(10.5rem, calc(11.7 * var(--uv))) 1fr auto auto;
  align-items: baseline;
  gap: var(--espacio-4);
  padding-block: var(--espacio-4);
  border-bottom: 1px solid var(--filete);
}
.agenda__hora { font-size: var(--paso-s); color: var(--tinta-suave); white-space: nowrap; }
.agenda__medio { display: grid; gap: 2px; }
.agenda__titulo { font-size: var(--paso-h4); }
.agenda__lugar { font-size: var(--paso-xs); color: var(--tinta-suave); }
.agenda__categoria {
  padding: 0.3em 0.85em;
  border-radius: var(--radio-pill);
  background: var(--lavanda);
  font-size: var(--paso-xxs);
  white-space: nowrap;
}
.agenda__mas { font-size: var(--paso-s); white-space: nowrap; }

/* --- Momentos que ya compartimos --- */

/* Medidas de references/Eventos.png, que es un frame de 1440 exportado a 1200:
   la banda amarilla cubre TODO el ancho (el hueco entre columnas de fotos
   tambien es amarillo) y sobre ella se apoyan la columna editorial, 485 px, y
   el collage, 715 px con dos columnas de 349 y hueco de 17. La seccion mide
   637 de alto y las fotos llegan a ras del borde superior y del inferior, con
   las cuatro esquinas redondeadas a 10: no hay recorte, el alto de cada hueco
   es el que es. Despues queda una franja crema de 58 antes del pie.
   El collage fija su alto con aspect-ratio, asi que la estructura esta
   reservada antes de que carguen las fotos y ninguna imagen la altera. Las
   filas van en fr con los valores medidos en px: como fr reparte lo que sobra
   tras los huecos, la suma cuadra sola (257+267+81 = 637 - 2x16). */
.momentos {
  --collage-gap: max(0.5rem, calc(1.333 * var(--uv)));
  display: grid;
  grid-template-columns: 40.4167% 1fr;
  align-items: center;
  background: var(--amarillo-calido);
  margin-bottom: max(2rem, calc(4.86 * var(--uv)));
}
.momentos__texto { text-align: center; padding-inline: var(--gutter); }
.momentos__titulo {
  max-width: 7.4em; /* 340 px al cuerpo de 1440 */
  margin-inline: auto;
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.momentos__parrafo {
  margin-top: 2.25rem;
  font-size: 14px;
  max-width: 23rem;
  margin-inline: auto;
}
/* La referencia encaja la ilustracion en 392x229. El dibujo sustituto tiene
   otra proporcion (1,44 frente a 1,71), asi que se acota por ALTO para no
   salirse de ese hueco ni deformar nada: sale 331x229. */
.momentos__ilustracion {
  height: max(9rem, calc(15.9 * var(--uv)));
  width: auto;
  max-width: 86%;
  margin: 1.8rem auto 0;
}

/* El aspect-ratio reserva el hueco visible del collage; overflow-y permite
   recorrer el resto de fotos en vertical sin estirar la banda amarilla.
   Las columnas apilan piezas por alto natural (cover) en vez de repartir fr. */
.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--collage-gap);
  align-content: start;
  align-items: start;
  aspect-ratio: 715 / 637;
  max-height: calc(53.08 * 23.5px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  justify-self: end;
  -webkit-overflow-scrolling: touch;
}
.mosaico__columna {
  display: flex;
  flex-direction: column;
  gap: var(--collage-gap);
  min-height: 0;
  min-width: 0;
}
.mosaico__pieza {
  border-radius: 0.75rem;
  overflow: hidden;
  width: 100%;
  flex: 0 0 auto;
}
.mosaico__pieza img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Modal de detalle --- */

/* --- Responsive de la pagina de eventos --- */

@media (max-width: 1023px) {
  .proximos__lista { grid-template-columns: repeat(2, 1fr); }
  .proximos__lista > .proximo:last-child { grid-column: 1 / -1; max-width: 34rem; }
  .agenda__fila { grid-template-columns: 9rem 1fr auto; }
  .agenda__mas { grid-column: 2 / -1; justify-self: start; }
}

@media (max-width: 859px) {
  /* El hero apilado vuelve al orden del DOM: texto y despues imagen. */
  .hero__slide[data-variant="split"][data-invertido] { grid-template-columns: 1fr; }
  .hero__slide[data-variant="split"][data-invertido] .hero__media,
  .hero__slide[data-variant="split"][data-invertido] .hero__panel--texto {
    grid-column: 1;
    grid-row: auto;
  }
  .hero--eventos { --hero-alto: auto; }
  .hero--eventos .hero__panel--texto { padding-inline: clamp(1.25rem, 6vw, 2.5rem); }
  .hero--eventos .hero__titulo { font-size: 40px; }
  .hero--eventos .hero__texto { font-size: 11px; }

  /* No hay frame movil de esta seccion en las referencias: se apila la columna
     editorial sobre el collage y se conservan las dos columnas y la jerarquia
     (una foto dominante en la columna B), redistribuyendo las filas para que
     ninguna quede en una franja ilegible. Decision de implementacion,
     anotada en docs/visual-review.md. */
  .momentos {
    grid-template-columns: 1fr;
    padding: clamp(2rem, 6vw, 3rem) var(--gutter) clamp(2rem, 6vw, 3rem);
  }
  .mosaico {
    aspect-ratio: 5 / 7;
    margin-top: clamp(1.5rem, 5vw, 2.5rem);
    max-height: min(70vh, 36rem);
  }
}

@media (max-width: 719px) {
  .calendario__barra {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-3);
  }
  .calendario__mascota { display: none; }
  .calendario__mes {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--espacio-2);
  }
  .calendario__titulo {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: 20px;
  }
  .calendario__nav .circulo { width: 32px; height: 32px; }
  .ciudad { width: 100%; }
  .ciudad__disparador { width: 100%; justify-content: space-between; }
  .ciudad__panel { width: 100%; min-width: 0; }
  .calendario__controles { width: 100%; justify-content: space-between; }

  /* Tarjetas más compactas: ~1,25 visibles + peek del siguiente día. */
  .calendario__marco {
    --dia-ancho: min(220px, calc(100vw - var(--gutter) * 2 - 2.25rem));
    --dia-alto: 278px;
    padding-inline: 0;
    overflow-x: clip;
  }
  .calendario__barra {
    padding-inline: var(--gutter);
  }
  .calendario__lienzo {
    margin-top: var(--espacio-4);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .calendario__rejilla {
    gap: 0.5rem;
  }
  .dia {
    scroll-snap-align: start;
    padding: 0.75rem;
    gap: 0.5rem;
    border-radius: 12px;
  }
  .dia__numero { font-size: 18px; }
  .dia__categoria {
    min-height: 26px;
    padding: 0 8px;
    font-size: 10px;
  }
  .dia__flecha { width: 28px; height: 28px; }
  .dia__eventos { gap: 0.5rem; }
  .dia__evento { gap: 2px; }
  .dia__evento-titulo { font-size: 15px; line-height: 1.2; }
  .dia__evento-cuando { font-size: 10px; }
  .dia__evento-lugar { font-size: 11px; }
  .dia__foto {
    width: calc(100% + 0.75rem * 2);
    height: 128px;
    margin: 0.35rem -0.75rem -0.75rem;
    border-radius: 12px;
  }
  .dia:not([data-eventos="1"]) .dia__foto {
    height: 64px;
  }

  .proximos__lista { grid-template-columns: 1fr; }
  .proximos__lista > .proximo:last-child { grid-column: auto; max-width: none; }

  /* Las filas de agenda se apilan sin perder la relacion entre campos. */
  .agenda__fila {
    grid-template-columns: 1fr auto;
    row-gap: var(--espacio-2);
    align-items: start;
  }
  .agenda__hora { grid-column: 1; grid-row: 1; }
  .agenda__categoria { grid-column: 2; grid-row: 1; justify-self: end; }
  .agenda__medio { grid-column: 1 / -1; grid-row: 2; }
  .agenda__mas { grid-column: 1 / -1; grid-row: 3; justify-self: start; }

}

/* ============================================================
   BLOG · listado y articulo
   Medidas de _base/references/Blog_page.png y Blog individual.png
   (1200 px de ancho, contenedor de 1124).
   ============================================================ */

/* Sin relleno arriba: en Blog_page.png el H1 arranca justo donde acaba la
   banda de migas (213,6 a 1440) y ese hueco ya lo pone .migas. */
.blog-cabecera { padding-block: 0 var(--espacio-7); }
.blog-cabecera__titulo {
  text-align: center;
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* --- Carrusel de destacados --- */

.destacados {
  --uc: min(1cqw, 22px);   /* igual que en el hero: 1 % del marco, techo 22 px */
  --hero-costura: 50%;
  padding-bottom: var(--seccion);
}
.destacados__marco { position: relative; container-type: inline-size; }
.destacados__pista { gap: var(--espacio-5); }

.destacado {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* mitad y mitad, sin hueco */
  align-items: stretch;
  min-height: min(30.5cqw, 671px);  /* 343 sobre 1124, con el techo de 2200 */
  border-radius: var(--radio-m);
  overflow: hidden;
}
.destacado__media { position: relative; min-width: 0; }
/* Igual que en el hero: en absoluto para que la foto no imponga su alto
   intrinseco y el slide respete su min-height. */
.destacado__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.destacado__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espacio-3);
  background: var(--lavanda);
  padding: max(1.75rem, calc(4.5 * var(--uc)));
}
.destacado__meta {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--paso-xs);
}
.destacado__meta > span:last-child { display: inline-flex; gap: var(--espacio-2); }
.destacado__sep { opacity: 0.55; }
.destacado__titulo {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.destacado__resumen {
  font-size: 12px;
  line-height: 1.45;
  max-width: 46ch;
}
.destacado__mas { align-self: flex-start; font-size: var(--paso-s); margin-top: var(--espacio-2); }

.destacados__controles { display: contents; }
.destacados__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 33px; height: 33px;
  box-shadow: 0 1px 6px rgba(38, 40, 8, 0.12);
}
.destacados__flecha:hover { transform: translateY(-50%) scale(1.07); }
.destacados__flecha--prev { left: calc(var(--gutter) + 1.1cqw); }
.destacados__flecha--next { right: calc(var(--gutter) + 1.1cqw); }
.destacados__puntos {
  position: absolute;
  left: var(--hero-costura);
  bottom: clamp(0.75rem, 3.3cqw, 2.3rem);
  transform: translateX(-50%);
  z-index: 5;
  gap: 6px;
  padding: 6px 9px;
  border-radius: var(--radio-pill);
  background: var(--crema);
}
.destacados__puntos .punto { width: 7px; height: 7px; background: rgba(38, 40, 8, 0.3); }
.destacados__puntos .punto[aria-current="true"] { width: 7px; background: var(--tinta); }

/* --- Cuadricula del listado --- */

.listado { padding-bottom: var(--seccion); }
.listado__vacio { text-align: center; color: var(--tinta-suave); padding-block: var(--espacio-8); }
.listado__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(1.25rem, calc(2.2 * var(--uv)));
}

/* Tarjeta horizontal: la foto a la izquierda y el panel montado sobre su borde */
.tarjeta-post {
  display: grid;
  /* En la referencia la foto mide 261 y el panel 301 (288-588 sobre 1200). */
  grid-template-columns: 0.9fr 1fr;
  align-items: stretch;
}
/* El minimo era 15rem fijos: al ensancharse la tarjeta la foto pasaba de 312x240
   a 554x240, un recorte cada vez mas apaisado. Con el minimo en proporcion de la
   ventana la relacion alto/ancho se queda donde esta (0,75): 240 px a 1440 y 392
   en el techo. */
.tarjeta-post__foto {
  width: 100%;
  height: 100%;
  min-height: max(15rem, calc(16.7 * var(--uv)));
  object-fit: cover;
  border-radius: var(--radio-m);
}
.tarjeta-post__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  /* El solape de la referencia: 12 px sobre la foto y 6 px arriba y abajo a
     1440. En proporcion, para que siga leyendose como un montaje deliberado y no
     como un desajuste cuando la tarjeta mide el doble. */
  margin-left: calc(-0.83 * var(--uv));
  margin-block: calc(-0.42 * var(--uv));
  padding: max(1.25rem, calc(2.2 * var(--uv)));
  border-radius: var(--radio-m);
  background: var(--azul);
}
.tarjeta-post[data-color="azul"]    .tarjeta-post__panel { background: var(--azul); }
.tarjeta-post[data-color="lima"]    .tarjeta-post__panel { background: var(--lima); }
.tarjeta-post[data-color="lavanda"] .tarjeta-post__panel { background: var(--lavanda); }

.tarjeta-post__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em;
  font-size: 12px;
}
.tarjeta-post__meta > span { white-space: nowrap; }
/* el separador y el contador van juntos: si la linea parte, lo hace entre los
   dos datos y el punto baja con el contador, no se queda colgando arriba */
.tarjeta-post__meta > span > span { white-space: nowrap; }
.tarjeta-post__meta > span:last-child { display: inline-flex; gap: 0.35em; }
.tarjeta-post__sep { opacity: 0.55; }
.tarjeta-post__titulo {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* 224 px es la medida que tiene el texto en la referencia (227), y es la que
     parte el titulo donde ella lo parte: «El regreso de las / ferias del
     libro». El panel se queda con su relleno, asi la linea de metadatos y el
     resumen siguen teniendo los 249 px que necesitan. Va en em, no en rem, para
     que la medida siga al cuerpo y el titulo parta igual a cualquier ancho. */
  max-width: 9.4em;
}
.tarjeta-post__resumen { font-size: 12px; line-height: 1.5; }
.tarjeta-post__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  margin-top: auto;         /* las acciones quedan alineadas entre tarjetas */
  padding-top: var(--espacio-4);
}
.tarjeta-post__pie .enlace-texto { font-size: 12px; }
.tarjeta-post__flecha { width: 38px; height: 38px; flex: none; }

/* --- Detalle del articulo --- */

.entrada-detalle { padding-bottom: var(--seccion); }
.entrada-detalle[hidden] { display: none; }

.entrada__encabezado { text-align: center; max-width: 44rem; margin-inline: auto; }
.entrada__titulo {
  font-size: 35px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.015em;
}
.entrada__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
  font-size: 12px;
}
.entrada__meta > span:last-child { display: inline-flex; gap: var(--espacio-2); }
.entrada__sep { opacity: 0.55; }

.entrada__portada { margin-top: var(--espacio-6); }
/* 1112 x 402 en la referencia, o 2,77:1. El max-height es el techo comun: la
   portada crece con la pagina pero no pasa de lo que mediria a 2350 px de
   ventana (2200 de contenedor). */
.entrada__portada-img {
  width: 100%;
  aspect-ratio: 1112 / 402;
  max-height: calc(2200px * 402 / 1112);
  object-fit: cover;
  border-radius: var(--radio-m);
}

/* Cuerpo ~54 %, hueco ~14 %, lateral ~32 %: proporciones de la referencia */
.entrada__rejilla {
  display: grid;
  grid-template-columns: 1.69fr 1fr;
  gap: 0 14%;
  margin-top: max(2.5rem, calc(6 * var(--uv)));
  align-items: start;
}

.entrada-cuerpo__titulo {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: var(--espacio-7);
}
.entrada-cuerpo__titulo:first-child { margin-top: 0; }
.entrada-cuerpo__parrafo {
  margin-top: var(--espacio-4);
  font-size: 12px;
  line-height: 1.65;
  max-width: 68ch;
}
.entrada-cuerpo__figura { margin-top: var(--espacio-6); }
.entrada-cuerpo__imagen {
  width: 100%;
  aspect-ratio: 615 / 374;
  object-fit: cover;
  border-radius: var(--radio-m);
}
.entrada-cuerpo__lista {
  margin-top: var(--espacio-4);
  padding-left: 1.1em;
  list-style: disc;
  font-size: 12px;
  line-height: 1.65;
}

.entrada__firma {
  margin-top: var(--espacio-8);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--filete);
}
.entrada__autor { font-size: 12px; }
.entrada__bio { font-size: 12px; color: var(--tinta-suave); }

/* --- Barra lateral --- */

.lateral__compartir { display: flex; align-items: center; gap: var(--espacio-3); }
.compartir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  box-sizing: border-box;
  width: 101.4px;
  height: 46.99px;
  padding: 0;
  border: 0.7px solid #262802;
  border-radius: var(--radio-m);
  color: #262808;
  font-size: 10px;
  transition: background-color var(--transicion);
}
.compartir img { display: block; flex: none; }
.compartir:hover { background: rgba(38, 40, 8, 0.06); }
.social-cuadro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 48.23px;
  height: 46.99px;
  padding: 0;
  border: 0.7px solid #262802;
  border-radius: var(--radio-m);
  transition: background-color var(--transicion);
}
.social-cuadro img { display: block; }
.social-cuadro:hover { background: rgba(38, 40, 8, 0.06); }

.lateral__titulo {
  margin-top: var(--espacio-7);
  font-size: 13px;
  font-weight: 500;
}
.recientes { display: grid; gap: var(--espacio-4); margin-top: var(--espacio-4); }
/* La miniatura y su medida de titulo eran 120 px y 7,5rem fijos junto a una
   columna lateral que crece: se expresan en proporcion de la ventana (120 px a
   1440, 196 en el techo). */
.reciente__enlace {
  display: grid;
  grid-template-columns: max(7.5rem, calc(8.33 * var(--uv))) 1fr;
  align-items: center;
  gap: var(--espacio-4);
  text-decoration: none;
  border-radius: var(--radio-m);
}
.reciente__foto {
  width: max(7.5rem, calc(8.33 * var(--uv)));
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radio-s);
}
.reciente__fecha { font-size: 10px; color: var(--tinta-suave); }
.reciente__titulo {
  margin-top: var(--espacio-1);
  font-size: 14px;
  line-height: 1.25;
  /* En la referencia estos titulos parten en dos lineas de ~110 px junto a la
     miniatura; la fecha se queda fuera de la medida para no partirse. */
  max-width: max(7.5rem, calc(8.33 * var(--uv)));
}
.reciente__enlace:hover .reciente__titulo { text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Artículo no encontrado --- */

.no-encontrado { padding-block: var(--espacio-10) var(--seccion); text-align: center; }
.no-encontrado[hidden] { display: none; }
.no-encontrado__texto { margin-top: var(--espacio-4); font-size: var(--paso-s); }
.no-encontrado__nota {
  margin-top: var(--espacio-3);
  font-size: var(--paso-xs);
  color: var(--tinta-tenue);
  max-width: 46ch;
  margin-inline: auto;
}
.no-encontrado .pastilla { margin-top: var(--espacio-6); }

/* --- Responsive del blog --- */

@media (max-width: 1023px) {
  .entrada__rejilla { grid-template-columns: 1.4fr 1fr; gap: 0 8%; }
  .reciente__enlace { grid-template-columns: 90px 1fr; }
  .reciente__foto { width: 90px; }
  .reciente__titulo { max-width: none; }
}

@media (max-width: 859px) {
  .blog-cabecera__titulo { font-size: 40px; }

  /* Carrusel apilado: la foto arriba y el panel lavanda debajo. */
  .destacado {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .destacado__media { aspect-ratio: 16 / 10; }
  .destacado__titulo { font-size: 24px; }
  .destacado__resumen { font-size: 11px; }
  .destacados__flecha {
    position: static;
    transform: none;
    width: 44px; height: 44px;
    box-shadow: none;
    border: 1px solid var(--filete);
  }
  .destacados__flecha:hover { transform: scale(1.07); }
  .destacados__puntos { position: static; transform: none; bottom: auto; }
  .destacados__controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-4);
    margin-top: var(--espacio-4);
  }

  .listado__rejilla { grid-template-columns: 1fr; }

  /* Detalle: el cuerpo ocupa el ancho y el lateral baja tras el articulo. */
  .entrada__rejilla { grid-template-columns: 1fr; gap: var(--espacio-8) 0; }
  .entrada__titulo { font-size: 24px; }
  .entrada__meta { font-size: 12px; }
  .entrada-cuerpo__titulo { font-size: 20px; }
  .entrada-cuerpo__parrafo,
  .entrada-cuerpo__lista { font-size: 11px; }
  .entrada-cuerpo__parrafo { max-width: none; }
  .entrada__autor,
  .entrada__bio { font-size: 11px; }
  .lateral__titulo { font-size: 13px; }
  .reciente__titulo { font-size: 20px; }
  .reciente__fecha { font-size: 11px; }
  .lateral { border-top: 1px solid var(--filete); padding-top: var(--espacio-6); }
  .recientes { grid-template-columns: 1fr 1fr; gap: var(--espacio-5); }
}

@media (max-width: 639px) {
  /* Si la tarjeta horizontal deja el texto ilegible, la foto pasa arriba. */
  .tarjeta-post { grid-template-columns: 1fr; }
  .tarjeta-post__titulo {
    max-width: none;
    font-size: 20px;
  }
  .tarjeta-post__meta { font-size: 12px; }
  .tarjeta-post__resumen { font-size: 11px; }
  .tarjeta-post__pie .enlace-texto { font-size: 11px; }
  .tarjeta-post__foto { min-height: 0; aspect-ratio: 16 / 10; }
  .tarjeta-post__panel {
    margin-left: 0;
    margin-top: -16px;
    margin-inline: var(--espacio-3);
    margin-bottom: 0;
  }
  .recientes { grid-template-columns: 1fr; }
  .lateral__compartir { flex-wrap: wrap; }
}

/* ============================================================
   POLITICA DE PRIVACIDAD
   Medidas de _base/references/politica.png (1200 px de ancho).
   Clases acotadas con el prefijo .legal para no tocar el blog.
   ============================================================ */

.legal {
  /* La columna de la referencia va de x 293 a x 906: 613 px de medida,
     centrados en el viewport (599,5 frente a los 600 de la pagina). */
  --legal-medida: 38.3rem;                       /* 613 px */
  --legal-gutter: clamp(1.25rem, 4vw, 2rem);     /* 20-32 px de margen lateral */
  padding-bottom: var(--seccion);
}
.legal__columna {
  /* box-sizing es border-box, asi que el tope incluye el relleno: se suma para
     que la MEDIDA del texto sea la de la referencia y no 64 px menos. */
  max-width: calc(var(--legal-medida) + 2 * var(--legal-gutter));
  margin-inline: auto;
  padding-inline: var(--legal-gutter);
}

.legal__encabezado { text-align: center; }
.legal__titular {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.legal__seccion { margin-top: var(--espacio-9); }
.legal__seccion:first-of-type { margin-top: var(--espacio-10); }

.legal__titulo {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: var(--espacio-5);
}

.legal__parrafo {
  font-size: 12px;
  line-height: 1.75;
  margin-top: var(--espacio-4);
}
.legal__parrafo:first-of-type { margin-top: 0; }

.legal__lista {
  margin-top: 0;
  padding-left: 1.1em;
  list-style: disc;
  font-size: 12px;
  line-height: 1.75;
}
.legal__lista li + li { margin-top: 0; }

/* Un parrafo que en la referencia continua sin hueco tras una lista. */
.legal__parrafo--seguido { margin-top: 0; }

.legal__datos {
  margin-top: var(--espacio-5);
  list-style: none;
  padding-left: 0;
}
.legal__dato {
  font-size: 12px;
  line-height: 1.6;
  padding-block: var(--espacio-2);
  border-bottom: 1px solid var(--tinta-tenue);
}

/* Marcadores que la propia referencia deja sin resolver (**, xxxx). Se
   conservan tal cual; ver docs/privacy-content-pending.md. */
.legal__pendiente { color: var(--tinta-suave); }

.legal__actualizacion {
  margin-top: var(--espacio-6);
  font-size: 12px;
  line-height: 1.75;
}

/* Ni los parrafos ni las URLs largas deben desbordar en pantallas estrechas. */
.legal__parrafo,
.legal__lista,
.legal__dato,
.legal__actualizacion { overflow-wrap: break-word; }

@media (max-width: 639px) {
  .legal__titular { font-size: 40px; }
  .legal__titulo { font-size: 20px; }
  .legal__parrafo,
  .legal__lista,
  .legal__dato,
  .legal__actualizacion { font-size: 11px; }
  .legal__lista { padding-left: 1em; }
  .legal__seccion { margin-top: var(--espacio-8); }
  .legal__seccion:first-of-type { margin-top: var(--espacio-8); }
}

/* ============================================================
   EVENTO · pagina individual
   Medidas de _base/references/Evento_individual.png (1200 px).
   Clases acotadas con el prefijo .ev- para no tocar el resto.
   ============================================================ */

.ev-detalle {
  padding-bottom: var(--seccion);
  /* Aqui habia un `--gutter: clamp(1.25rem, 3.2vw, 2.75rem)` para dar 20 px de
     margen lateral en movil. Ese minimo es ya el del token global, y su tope de
     2,75rem volveria a estrechar SOLO esta pagina en pantallas grandes, asi que
     la redefinicion se retira. */
}

/* El titulo es sans serif, NO el serif editorial del listado de eventos. */
.ev-detalle__encabezado { text-align: center; max-width: 46rem; margin-inline: auto; }
.ev-detalle__titulo {
  font-size: 35px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.ev-detalle__fecha {
  margin-top: var(--espacio-3);
  font-size: 12px;
  color: var(--tinta-suave);
}
.ev-detalle__fecha[hidden] { display: none; }

/* Portada panoramica: 1112 x 402 en la referencia, o 2,77:1. */
.ev-detalle__portada { margin-top: var(--espacio-6); }
.ev-detalle__portada[hidden] { display: none; }
.ev-detalle__portada-img {
  width: 100%;
  aspect-ratio: 1112 / 402;
  max-height: calc(2200px * 402 / 1112);   /* mismo techo que en el articulo */
  object-fit: cover;
  /* Punto de recorte configurable por registro (`coverPosition`). */
  object-position: var(--ev-pos, center);
  border-radius: var(--radio-m);
}

/* Cuerpo 615, hueco 153, lateral 356: proporciones de la referencia. */
.ev-detalle__rejilla {
  display: grid;
  grid-template-columns: 1.73fr 1fr;
  gap: 0 13.6%;
  margin-top: max(2.25rem, calc(5 * var(--uv)));
  align-items: start;
}
.ev-detalle__cuerpo { min-width: 0; }

.ev-detalle__parrafo {
  font-size: 12px;
  line-height: 1.65;
  margin-top: var(--espacio-4);
}
.ev-detalle__parrafo:first-child { margin-top: 0; }

/* Imagen interior: 615 x 327 en la referencia. Si el registro no la trae, el
   bloque va oculto y no deja hueco. */
.ev-detalle__secundaria { margin-top: var(--espacio-6); }
.ev-detalle__secundaria[hidden] { display: none; }
.ev-detalle__interior {
  width: 100%;
  aspect-ratio: 615 / 327;
  object-fit: cover;
  border-radius: var(--radio-m);
}

/* Filas de horario y lugar, con icono de linea. */
.ev-detalle__datos { margin-top: var(--espacio-6); }
.ev-detalle__dato {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: 14px;
}
.ev-detalle__dato + .ev-detalle__dato { margin-top: var(--espacio-2); }
.ev-detalle__dato svg { flex: none; color: var(--tinta-suave); }
.ev-detalle__sep { opacity: 0.55; }

/* --- Mapa --- */

/* 614 x 283 en la referencia: ocupa todo el ancho de la columna. */
.ev-mapa { margin-top: var(--espacio-6); }
.ev-mapa__marco {
  position: relative;
  width: 100%;
  aspect-ratio: 614 / 283;
  overflow: hidden;
  border-radius: var(--radio-m);
  background: rgba(38, 40, 8, 0.06);
}
.ev-mapa__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Estado provisional: ni finge un mapa ni deja un hueco vacio. */
.ev-mapa__pendiente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  width: 100%;
  aspect-ratio: 614 / 283;
  padding: var(--espacio-5);
  text-align: center;
  border: 1px solid var(--filete);
  border-radius: var(--radio-m);
  background: rgba(38, 40, 8, 0.03);
}
.ev-mapa__pendiente svg { color: var(--tinta-suave); }
.ev-mapa__lugar { font-size: var(--paso-s); font-weight: 500; }
.ev-mapa__nota { font-size: var(--paso-xs); color: var(--tinta-tenue); }

/* --- Barra lateral ---
   «Compartir» y los dos cuadros sociales reutilizan .compartir y
   .social-cuadro del detalle del blog: la referencia los dibuja iguales. */

.ev-relacionados { display: grid; gap: var(--espacio-4); margin-top: var(--espacio-4); }
.ev-relacionado__enlace {
  display: grid;
  grid-template-columns: max(7.5rem, calc(8.33 * var(--uv))) 1fr;   /* igual que .reciente__enlace */
  align-items: center;
  gap: var(--espacio-4);
  text-decoration: none;
  border-radius: var(--radio-m);
}
.ev-relacionado__foto {
  width: max(7.5rem, calc(8.33 * var(--uv)));
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radio-s);
}
.ev-relacionado__fecha { font-size: 10px; color: var(--tinta-suave); }
.ev-relacionado__titulo {
  margin-top: var(--espacio-1);
  font-size: 14px;
  line-height: 1.25;
  /* En la referencia estos titulos parten en dos lineas estrechas. */
  max-width: 7.5rem;
}
.ev-relacionado__enlace:hover .ev-relacionado__titulo { text-decoration: underline; text-underline-offset: 0.2em; }
.ev-relacionado__vacio { font-size: var(--paso-xs); color: var(--tinta-suave); }

/* --- Responsive del detalle --- */

@media (max-width: 1023px) {
  .ev-detalle__rejilla { grid-template-columns: 1.5fr 1fr; gap: 0 8%; }
  .ev-relacionado__enlace { grid-template-columns: 90px 1fr; }
  .ev-relacionado__foto { width: 90px; }
  .ev-relacionado__titulo { max-width: none; }
}

@media (max-width: 859px) {
  /* Una sola columna: el lateral baja tras el mapa, antes del pie. */
  .ev-detalle__rejilla { grid-template-columns: 1fr; gap: var(--espacio-8) 0; }
  .ev-detalle__portada-img { aspect-ratio: 16 / 10; }
  .ev-lateral { border-top: 1px solid var(--filete); padding-top: var(--espacio-6); }
  .ev-relacionados { grid-template-columns: 1fr 1fr; gap: var(--espacio-5); }
}

@media (max-width: 639px) {
  .ev-relacionados { grid-template-columns: 1fr; }
  .lateral__compartir { flex-wrap: wrap; }
  .ev-mapa__marco, .ev-mapa__pendiente { aspect-ratio: 4 / 3; }
}

/* ============================================================
   LIBROS · catalogo en circulacion
   Estructura tomada de fable.co/store (heroe mas filas tematicas en
   carrusel), con el estilo y los componentes de este sitio. Sin precios:
   RobinBook intercambia libros, no los vende.
   Clases acotadas con el prefijo .libros-/.libro-carta.
   ============================================================ */

.libros-cabecera { padding-block: var(--espacio-4) var(--espacio-7); }
.libros-cabecera__interior { max-width: 46rem; margin-inline: auto; text-align: center; }
.libros-cabecera__titulo { font-size: clamp(1.8rem, 3.47vw, 2.75rem); }
.libros-cabecera__lead {
  margin-top: var(--espacio-4);
  font-size: var(--paso-s);
  line-height: 1.65;
  color: var(--tinta-suave);
}

.libros__vacio { text-align: center; color: var(--tinta-suave); padding-block: var(--espacio-8); }

/* --- Fila tematica --- */

.libros-fila { padding-bottom: var(--seccion); }
.libros-fila__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-4);
  /* Sin max-width: el titulo de la fila se alinea con el gutter, igual que la
     pista de portadas que va debajo. El tope anterior era `var(--ancho-max)`
     SIN sumarle los gutters, asi que ya hoy dejaba el titulo 44 px por dentro
     de las portadas; a 1920 el desfase era de 280 px. */
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.libros-fila__intro { min-width: 0; }
.libros-fila__controles { display: flex; gap: var(--espacio-2); flex: none; }
.libros-fila__controles .circulo { width: 38px; height: 38px; }
.libros-fila__titulo {
  font-size: max(1.2rem, calc(1.9 * var(--uv)));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.libros-fila__lead { margin-top: var(--espacio-2); font-size: var(--paso-xs); color: var(--tinta-suave); }

/* La tira sangra hasta el borde de la ventana: se ve que hay mas a los lados. */
.libros-fila__pista {
  gap: var(--espacio-4);
  margin-top: var(--espacio-5);
  padding-inline: var(--gutter);
  scroll-padding-inline-start: var(--gutter);
  align-items: stretch;
}
.libros-fila__puntos { margin-top: var(--espacio-5); }

/* --- Tarjeta de libro --- */

.libro-carta {
  /* El tope de 12rem se alcanzaba ya a 1280 px: las estanterias dejaban de
     crecer y el carrusel se quedaba sin nada que desplazar. Ahora la portada
     sube con la pagina hasta el techo (192 px a 1280, 216 a 1440, 352 arriba). */
  flex: 0 0 max(9.5rem, calc(15 * var(--uv)));
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}

/* Portada de marcador: NO es una imagen. Las cubiertas reales tienen derechos
   de autor, asi que se dibuja el titulo y la autoria sobre un color de la
   paleta que viene en los datos (`coverVariant`). Ver docs/asset-sources.md. */
.libro-carta__portada {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--espacio-2);
  aspect-ratio: 2 / 3;
  padding: var(--espacio-4);
  border-radius: var(--radio-s);
  overflow: hidden;
  /* el lomo, como en un libro de verdad */
  border-left: 5px solid rgba(38, 40, 8, 0.22);
  background: var(--tinta);
  color: var(--crema);
}
.libro-carta__portada-titulo {
  font-family: var(--fuente-titulo);
  font-size: max(0.85rem, calc(1.2 * var(--uv)));
  line-height: 1.15;
  overflow-wrap: break-word;
}
.libro-carta__portada-autor {
  font-size: var(--paso-xxs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.82;
}
.libro-carta__portada[data-variante="naranja"] { background: var(--naranja); color: var(--crema); }
.libro-carta__portada[data-variante="lavanda"] { background: var(--lavanda); color: var(--tinta); }
.libro-carta__portada[data-variante="amarillo"] { background: var(--amarillo-calido); color: var(--tinta); }
.libro-carta__portada[data-variante="azul"]     { background: var(--azul); color: var(--tinta); }
.libro-carta__portada[data-variante="lima"]     { background: var(--lima); color: var(--tinta); }

/* El cuerpo crece y la accion se va al fondo: asi los «Proponer intercambio»
   quedan alineados aunque los metadatos ocupen una linea o dos. */
.libro-carta__cuerpo { display: flex; flex-direction: column; gap: var(--espacio-1); flex: 1; }
.libro-carta__titulo { font-size: var(--paso-s); font-weight: 500; line-height: 1.3; }
.libro-carta__autor { font-size: var(--paso-xs); color: var(--tinta-suave); }
.libro-carta__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em;
  margin-top: var(--espacio-1);
  font-size: var(--paso-xxs);
  color: var(--tinta-suave);
}
.libro-carta__sep { margin-right: 0.32em; opacity: 0.55; }
/* Donde una tienda pondria el precio, aqui va si se puede pedir. */
.libro-carta__dato--disponible { color: var(--tinta); font-weight: 500; }
.libro-carta__dato--reservado { color: var(--tinta-tenue); }
.libro-carta__accion {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--espacio-3);
  font-size: var(--paso-xs);
}
.libro-carta__grupo { white-space: nowrap; }
.libro-carta[data-estado="reservado"] .libro-carta__portada { opacity: 0.72; }

/* --- Responsive --- */

@media (max-width: 859px) {
  .libros-fila { padding-bottom: var(--espacio-9); }
}

@media (max-width: 639px) {
  /* En una tira que ya se arrastra con el dedo las flechas no aportan. */
  .libros-fila__controles { display: none; }
  .libro-carta { flex: 0 0 8.5rem; }
  .libros-cabecera__lead { font-size: var(--paso-xs); }
}

/* ============================================================
   CONTACTO
   No existe frame de referencia de esta pagina: se compone con los
   mismos componentes, tokens y ritmos ya medidos en el resto del
   sitio (tarjeta de .testimonio para los motivos, campos del
   boletin para el formulario, filas de .beneficio para los canales).
   Decision de implementacion, anotada en docs/visual-review.md.
   ============================================================ */

/* --- Encabezado --- */

/* Sin relleno arriba, igual que .blog-cabecera: ese hueco ya lo pone
   .migas, y las tres referencias con cabecera completa lo fijan en 214. */
.contacto-cabecera {
  padding-block: 0 var(--espacio-7);
  text-align: center;
}
.contacto-cabecera__titulo { max-width: 24ch; margin-inline: auto; }
.contacto-cabecera__lead {
  margin-top: var(--espacio-5);
  font-size: var(--paso-s);
  color: var(--tinta-suave);
  max-width: 58ch;
  margin-inline: auto;
}

/* --- Motivos para escribir --- */

/* Misma anatomia que .testimonio: panel de color, radio medio y adorno
   abajo a la derecha recortado por el borde inferior de la tarjeta. El
   tono va por data-tono y no por :nth-child, como pide docs/README.md,
   para que cada tarjeta siga siendo un hermano identico al factorizar. */
.motivos { padding-bottom: var(--seccion); }
.motivos__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* El mismo hueco medido para las tarjetas de «Proximos eventos». */
  gap: max(1rem, calc(1.6 * var(--uv)));
}
.motivo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: max(1.75rem, calc(2.4 * var(--uv)));
  /* Hueco reservado por abajo para el adorno: asi el boton nunca queda
     debajo del dibujo, aunque el copy crezca. */
  padding-bottom: max(5.75rem, calc(7.8 * var(--uv)));
  border-radius: var(--radio-m);
  overflow: hidden;
}
.motivo[data-tono="lavanda"]  { background: var(--lavanda); }
.motivo[data-tono="azul"]     { background: var(--azul); }
.motivo[data-tono="amarillo"] { background: var(--amarillo); }
.motivo__titulo {
  font-size: var(--paso-h3);
  font-weight: 500;
  line-height: 1.2;
}
.motivo__copy { font-size: var(--paso-s); }
.motivo__accion { margin-top: var(--espacio-2); }
.motivo__adorno {
  position: absolute;
  right: 6%;
  bottom: 0;
  width: 27%;
  height: auto;
  transform: translateY(22%);
  pointer-events: none;
}

/* --- Formulario y canales directos --- */

.contacto { padding-bottom: var(--seccion); }
.contacto__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: max(1.5rem, calc(3.4 * var(--uv)));
  align-items: start;
}
.contacto__panel {
  background: var(--durazno);
  border-radius: var(--radio-l);
  padding: max(1.75rem, calc(3.4 * var(--uv)));
}
.contacto__titulo {
  font-size: var(--paso-h2-sans);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.contacto__lead {
  margin-top: var(--espacio-4);
  font-size: var(--paso-s);
  color: var(--tinta-suave);
  max-width: 46ch;
}

.contacto__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-4);
  margin-top: var(--espacio-6);
}
.campo { display: grid; gap: var(--espacio-2); }
.campo--ancho { grid-column: 1 / -1; }
.campo__rotulo { font-size: var(--paso-xs); font-weight: 600; }

/* Mismo lenguaje que .boletin__input: pildora de un trazo sobre fondo
   transparente, y el borde se engorda cuando el campo queda invalido. */
.campo__control {
  /* Sin esto el campo no baja de su ancho intrinseco (unos 20 caracteres) y con
     el texto del sistema al 150 % se salia de su columna en movil. */
  min-width: 0;
  min-height: 48px;
  padding: 0 1.1em;
  border: 1px solid var(--tinta);
  border-radius: var(--radio-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--paso-s);
  transition: box-shadow var(--transicion);
}
.campo__control::placeholder { color: rgba(38, 40, 8, 0.5); }
.campo__control:focus,
.campo__control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(38, 40, 8, 0.12);
}
.campo__control[aria-invalid="true"] { border-width: 2px; }
.campo__control--menu {
  appearance: none;
  padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9.5 6 6 6-6' fill='none' stroke='%23262808' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 18px 18px;
}
.campo__control--area {
  padding: 0.85em 1.1em;
  border-radius: var(--radio-m);
  min-height: 9rem;
  line-height: var(--alto-texto);
  resize: vertical;
}

.contacto__consentimiento {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.32em;
  font-size: var(--paso-xs);
}
.contacto__check {
  width: 17px; height: 17px;
  accent-color: var(--tinta);
  align-self: center;
}
.contacto__error {
  grid-column: 1 / -1;
  font-size: var(--paso-xs);
  font-weight: 600;
}
.contacto__error[hidden] { display: none; }
.contacto__envio {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-4);
}
.contacto__enviar { background: var(--tinta); color: var(--crema); }
.contacto__nota { font-size: var(--paso-xs); color: var(--tinta-suave); max-width: 32ch; }

/* Filas de canal: misma anatomia que .beneficio (icono, filete superior y
   relleno vertical), con dos lineas de texto en vez de una. Los valores
   salen de los mismos tokens; no se repite ninguna medida suelta. */
.canales { padding-top: max(1.75rem, calc(3.4 * var(--uv))); }
.canales__titulo {
  font-size: var(--paso-h3);
  font-weight: 500;
  line-height: 1.2;
}
.canales__lista { margin-top: var(--espacio-5); }
.canal {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--espacio-5);
  padding-block: var(--espacio-4);
  border-top: 1px solid var(--filete);
}
.canal:first-child { border-top: 0; }
.canal__icono { color: var(--tinta-suave); }
.canal__rotulo {
  font-size: var(--paso-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.canal__valor { margin-top: 2px; font-size: var(--paso-s); }

.canales__prensa {
  margin-top: var(--espacio-6);
  padding: var(--espacio-5);
  border-radius: var(--radio-m);
  background: var(--lima);
}
.canales__rotulo { font-size: var(--paso-xs); font-weight: 600; }
.canales__copy { margin-top: var(--espacio-2); font-size: var(--paso-xs); }
.canales__prensa .enlace-texto { margin-top: var(--espacio-3); }

/* --- Responsive de contacto --- */

@media (max-width: 1023px) {
  /* El formulario deja de compartir fila con los canales antes de que la
     columna estrecha empiece a partir las etiquetas. */
  .contacto__rejilla { grid-template-columns: minmax(0, 1fr); }
  /* Apilado ya no hay nada con lo que alinear el titulo. */
  .canales { padding-top: 0; max-width: 34rem; }

  /* Dos motivos arriba y el tercero a lo ancho, como hace .proximos__lista:
     tres columnas por debajo de 1024 dejan el copy en columnas de 2 palabras. */
  .motivos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motivos__lista > .motivo:last-child { grid-column: 1 / -1; }
  .motivos__lista > .motivo:last-child .motivo__adorno { width: 14%; }
}

@media (max-width: 639px) {
  .motivos__lista { grid-template-columns: minmax(0, 1fr); }
  .motivos__lista > .motivo:last-child .motivo__adorno { width: 27%; }
  .contacto__form { grid-template-columns: minmax(0, 1fr); }
  .contacto__envio { align-items: flex-start; }
  .contacto__enviar { width: 100%; }
}