/* ==========================================================================
   /agenda/ — landing permanente de las agendas ONIKIX
   Namespace .ag-*  ·  Light premium, tokens de onikix-custom.css
   ========================================================================== */

/* Reset de caja para toda la página: el theme no lo trae global, y sin
   él un min-height es el alto del CONTENIDO —el relleno se suma encima y
   un botón de 52 se sirve a 71 (03/08/2026). Scoped, como personaje-v7. */
.ag, .ag *, .ag *::before, .ag *::after { box-sizing: border-box; }

.ag { background: var(--bg); }
.ag-wrap { width: min(1180px, 92vw); margin-inline: auto; }

/* --- Tipografía de sección --------------------------------------------- */
.ag-kicker {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--deep, var(--ink-muted));
  margin-bottom: 1.1rem;
}
.ag-h1 {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  line-height: 1.02; letter-spacing: -.035em; color: var(--ink);
}
/* Una palabra en Fraunces itálica por bloque: es firma, no estilo */
.ag-h1 em {
  font-family: var(--h2-font-display, 'Fraunces'), serif;
  font-style: italic; font-weight: 500;
  white-space: nowrap;
}
.ag-h2 {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.12; letter-spacing: -.03em; color: var(--ink);
}
.ag-lead {
  max-width: 34em;            /* medida de 65-75 caracteres */
  font-size: clamp(1rem, 1.5vw, 1.13rem); line-height: 1.62;
  color: var(--ink-soft); margin-top: 1.4rem;
}
.ag-lead--fina { color: var(--ink); font-weight: 500; }
.ag-sub {
  max-width: 42em; margin-top: .9rem;
  font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft);
}

/* --- Hero --------------------------------------------------------------- */
/* El hero se tiñe de la chica elegida en el gate (JS cambia --soft/--deep
   y la portada). El fundido hace el cambio premium, no un salto. */
/* El aire de arriba NO es decorativo: la barra global es `position: fixed` y
   su borde inferior queda en 85 px en todos los anchos medidos. Con los
   48-88 px de antes, lo primero de la página se servía DEBAJO de la barra:
   el antetítulo del hub (60 px) y la miga de las cinco landings (48 px)
   eran invisibles de 320 a 1200, y el H1 de las landings entraba 4 px por
   debajo del borde en 320/390/430. Medido en producción el 05/08/2026 y
   fotografiado en `DATOS Y ARCHIVOS/auditoria-2026-08-05/`.
   El valor es el que el diario ya usaba desde su publicación: 96 px en
   móvil y tablet (11 de holgura sobre la barra), hasta 120 en escritorio.
   Si alguien cambia la altura de la barra, este número va detrás. */
.ag-hero {
  background: var(--soft);
  padding: clamp(6rem, 12vw, 7.5rem) 0 clamp(3rem, 7vw, 5.5rem);
}
@media (prefers-reduced-motion: no-preference) {
  .ag-hero { transition: background-color .45s ease; }
  .ag-hero__visual img { transition: opacity .28s ease; }
}
.ag-hero__visual img.is-cambiando { opacity: 0; }
.ag-hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}
.ag-hero__visual img {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: 0 22px 48px rgba(31, 27, 22, .16);
}

/* --- Muro de correo ----------------------------------------------------- */
.ag-gate {
  --gate-deep: var(--deep);
  box-sizing: border-box;
  max-width: 39rem;
  margin-top: 2rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  scroll-margin-top: 6rem;
  background: var(--surface, #fff);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(31, 27, 22, .12);
}
.ag-gate__title {
  margin: 0 0 1.1rem;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--ink);
}
.ag-gate__fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ag-gate__fieldset legend,
.ag-gate__email-label {
  display: block;
  margin: 0 0 .55rem;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
}
.ag-gate__choices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .45rem;
  margin-bottom: 1.1rem;
}
.ag-gate__choice { min-width: 0; cursor: pointer; }
.ag-gate__choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ag-gate__choice-ui {
  min-height: 76px;
  padding: .42rem .2rem .35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  border-radius: 14px;
  background: var(--choice-soft);
  color: var(--choice-deep);
  box-shadow: inset 0 0 0 1px transparent;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.ag-gate__face {
  width: 50px;
  height: 50px;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--choice-soft);
}
.ag-gate__face img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}
.ag-gate__choice-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.1;
}
.ag-gate__choice input:checked + .ag-gate__choice-ui {
  box-shadow: inset 0 0 0 2px var(--choice-deep);
}
.ag-gate__choice input:focus-visible + .ag-gate__choice-ui {
  outline: 3px solid var(--choice-deep);
  outline-offset: 3px;
}
.ag-gate__email-label { margin-top: .1rem; }
.ag-gate__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
}
.ag-gate__email,
.ag-gate__submit {
  box-sizing: border-box;
  min-height: 52px;
  border-radius: 14px;
  font: 600 1rem/1.2 var(--h2-font-body, 'DM Sans'), sans-serif;
}
.ag-gate__email {
  width: 100%;
  min-width: 0;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.ag-gate__email::placeholder { color: var(--ink-muted); opacity: 1; }
.ag-gate__submit {
  max-width: 17rem;
  padding: .8rem 1.1rem;
  border: 0;
  background: var(--gate-deep);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, opacity 180ms ease;
}
.ag-gate__submit:disabled { cursor: wait; opacity: .62; }
/* Por qué pedimos el correo, dicho ANTES de pedirlo. Solo la usa el gate del
   sticker book: es el único que entrega dos cosas y el único cuya página
   prometía descarga directa hasta el 23/08/2026 — si el cambio no se explica,
   se lee como peaje. */
.ag-gate__porque {
  max-width: 46ch;
  margin: .6rem 0 1.4rem;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.ag-gate__meta {
  margin: .55rem 0 0;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
/* Consentimiento: una línea, casilla discreta y alineada con el texto.
   El área táctil sigue siendo de 44px por el min-height; lo que baja es
   el peso visual, no la accesibilidad (decisión de dirección 03/08). */
.ag-gate__consent {
  min-height: 44px;
  margin-top: .6rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.ag-gate__consent input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--gate-deep);
}
.ag-gate__consent a { color: inherit; text-underline-offset: 2px; }
.ag-gate__message {
  min-height: 1.3em;
  margin: .4rem 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--error, #8A2E20); /* tokenizado 04/08/2026 — mismo terracota, ahora compartido con :user-invalid */
}
.ag-gate__message.is-success { color: var(--gate-deep); }
.ag-gate__noscript {
  margin: 0;
  color: var(--ink-muted);
  font-size: .82rem;
  line-height: 1.5;
}
.ag-gate__done { padding: .25rem 0; }
.ag-gate__done[hidden] { display: none; }
.ag-gate__done-kicker {
  margin: 0 0 .45rem;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gate-deep);
}
.ag-gate__done-text {
  margin: 0;
  max-width: 34em;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
.ag-gate__email:focus-visible,
.ag-gate__submit:focus-visible,
.ag-gate__consent input:focus-visible,
.ag-card__cta:focus-visible,
.ag-card__ficha:focus-visible,
.ag-anual a:focus-visible,
.ag-faq a:focus-visible,
/* ⚠️ `.agl-cta` faltaba en esta lista y se queda con el `outline: none` que
   hereda: al tabular no se veía dónde estaba el foco. Medido en navegador el
   27/08/2026 sobre el botón enfocado — `outline: none`, `box-shadow: none`.
   Afecta también a pegatinas y al diario, que usan este mismo botón. El
   anillo cae fuera del botón, sobre el crema, así que se ve aunque el relleno
   sea ese mismo `--deep`. */
.agl-cta:focus-visible {
  outline: 3px solid var(--gate-deep, var(--deep, var(--ink)));
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .ag-gate__choice:hover .ag-gate__choice-ui,
  .ag-gate__submit:hover,
  .ag-card__cta:hover { transform: translateY(-2px); }
}
.ag-gate__choice:active .ag-gate__choice-ui,
.ag-gate__submit:active,
.ag-card__cta:active { transform: translateY(0); }

/* --- Qué es ------------------------------------------------------------- */
.ag-que { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.ag-que__lista {
  list-style: none; margin: 2.4rem 0 0; padding: 0;
  display: grid; gap: 1.6rem 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ag-que__lista li { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.ag-que__lista h3 {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em;
  margin-bottom: .5rem; color: var(--ink);
}
.ag-que__lista p { font-size: .96rem; line-height: 1.58; color: var(--ink-soft); }

/* --- Las cinco ---------------------------------------------------------- */
.ag-cast { padding: clamp(3.2rem, 7vw, 5.5rem) 0; background: var(--surface-2); }
.ag-cast__grid {
  list-style: none; margin: 2.6rem 0 0; padding: 0;
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
/* La tarjeta es SU portada, en vivo: cara en medallón, título en Fraunces
   itálica, su frase sobre la pincelada Mid (el gesto que firma los PDF) y
   el nombre fantasma en Mid detrás — los tres tonos del Brand Book juntos.
   Elevación una sola vez: color de fondo; la sombra solo existe al hover. */
.ag-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--soft); border-radius: 20px;
  padding: 1.7rem 1.6rem 1.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .ag-card { transition: transform .28s ease, box-shadow .28s ease; }
}
@media (hover: hover) and (pointer: fine) {
  .ag-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px rgba(31, 27, 22, .14);
  }
}
/* Nombre fantasma: marca de agua Mid recortada por la esquina inferior —
   textura, no elemento. Nunca compite con el texto real. */
.ag-card::before {
  content: attr(data-nombre);
  position: absolute; right: -.45rem; bottom: -1rem;
  font-family: var(--h2-font-display, 'Fraunces'), serif;
  font-style: italic; font-weight: 550; font-size: 4.8rem;
  line-height: 1; letter-spacing: -.03em;
  color: var(--mid); opacity: .5;
  pointer-events: none; user-select: none;
}
.ag-card > * { position: relative; }

.ag-card__cab {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1.15rem;
}
.ag-card__face {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
}
.ag-card__face img {
  width: 56px; height: 56px; border-radius: 50%;
  display: block; object-fit: cover;
}
.ag-card__nombre {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: .78rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--deep);
}
/* El título de su agenda, como en la portada del PDF: Fraunces itálica. */
.ag-card__tipo {
  font-family: var(--h2-font-display, 'Fraunces'), serif;
  font-style: italic; font-weight: 550;
  font-size: 2rem; line-height: 1.02; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 .3rem;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.ag-card__ano {
  font-size: 1.15rem; font-weight: 500; color: var(--deep);
}
/* Qué agenda es, en lenguaje de búsqueda («Agenda de estudio digital 2027»).
   Texto secundario sobre superficie con color: se tiñe del Deep, no gris. */
/* Vive DENTRO del H3 (segunda línea) para que el encabezado contenga la
   intención de búsqueda sin quitarle el titular al nombre de producto.
   `flex-basis: 100%` la baja de línea; hay que reponer estilo y cuerpo
   porque el H3 es Fraunces itálica a 2rem. */
.ag-card__uso {
  flex-basis: 100%;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-style: normal;
  font-weight: 600; font-size: .78rem; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--deep); margin-top: .35rem;
}
/* Su frase, sobre la pincelada Mid — el mismo trazo que firma las portadas. */
.ag-card__frase { margin: 0 0 .9rem; }
.ag-card__frase span {
  display: inline-block;
  font-family: var(--h2-font-display, 'Fraunces'), serif;
  font-style: italic; font-size: 1.02rem; line-height: 1.35;
  color: var(--deep); background: var(--mid);
  padding: .38em .85em .42em;
  clip-path: polygon(2% 8%, 99% 0, 97% 92%, 0 100%);
}
.ag-card__reclamo {
  font-size: .95rem; line-height: 1.5; color: var(--ink-soft);
  margin-bottom: 1rem; max-width: 30ch;
}
/* Lo que SU agenda añade — las páginas reales del PDF, no marketing.
   Es la función propia de esta sección: el hero convierte, esto compara. */
.ag-card__dentro {
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  display: grid; gap: .45rem;
}
.ag-card__dentro li {
  position: relative; padding-left: 1rem;
  font-size: .88rem; line-height: 1.45; color: var(--ink-soft);
}
.ag-card__dentro li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--deep);
}
.ag-card__cta {
  margin-top: auto; align-self: flex-start;
  margin-block-start: 1.4rem;
  min-height: 48px; line-height: 1.3; padding: .55rem 1.15rem;
  display: inline-flex; align-items: center;
  border: 0;
  background: var(--deep); color: #fff; border-radius: 11px;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: .88rem; line-height: 1.3;
  text-align: left; cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease;
}
/* Acción silenciosa, sin filete: la raya sobre el enlace se leía como un
   subrayado perdido y competía con el CTA. La jerarquía es píldora sólida
   (pedir) + enlace con flecha (conocer), y nada más. */
.ag-card__ficha {
  margin-top: .5rem;
  min-height: 48px; display: inline-flex; align-items: center;
  align-self: flex-start;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .86rem;
  color: var(--deep); text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ag-card__ficha::after { content: " →"; margin-left: .4rem; }
@media (hover: hover) and (pointer: fine) {
  .ag-card__ficha:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* --- La cita anual ------------------------------------------------------ */
.ag-anual { padding: clamp(3.2rem, 7vw, 5rem) 0; }
.ag-anual__caja { max-width: 46em; }
.ag-anual p {
  margin-top: 1.2rem; font-size: 1.05rem; line-height: 1.62;
  color: var(--ink-soft);
}
.ag-anual__fina { font-size: .95rem !important; }
.ag-anual a { color: var(--ink); text-underline-offset: 3px; }

/* --- Preguntas ---------------------------------------------------------- */
.ag-faq { padding: 0 0 clamp(3.5rem, 8vw, 6rem); }
/* Acordeón. Trece preguntas desplegadas eran un muro que empujaba el pie de
   página a otro planeta; plegadas se recorren de un vistazo y se abre la que
   interesa. ⚠️ Y no esconde nada de Google: el texto va entero en el HTML —
   `display:none` sigue siendo legible para el buscador—, el criterio del
   máster es que plegar vale «cuando el resto de la página ya sostiene la
   keyword», y esta página ahora la sostiene con ocho H2, la definición, la
   compatibilidad y la comparativa. Además el FAQPage del JSON-LD lleva las
   trece preguntas pase lo que pase. Mismo patrón <details> que /quiz/,
   /personajes/, /faq/ y /juegos/. */
.ag-faq__lista { margin-top: 2rem; max-width: 52em; }
.ag-faq__item { border-top: 1px solid var(--line); }
.ag-faq__q {
  /* 44px de alto táctil, contando el relleno. */
  display: flex; align-items: center; gap: 1rem;
  min-height: 44px; padding: 1.05rem 0;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: 1.04rem; line-height: 1.4; color: var(--ink);
  cursor: pointer; list-style: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ag-faq__q::-webkit-details-marker { display: none; }
/* El chevron: cuadrado de dos filos girado. Se dibuja, no se importa. */
.ag-faq__q::after {
  content: ''; flex: 0 0 auto; margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .45;
  transition: transform .2s ease, opacity .2s ease;
}
.ag-faq__item[open] > .ag-faq__q::after {
  transform: rotate(-135deg) translateY(-2px);
  opacity: .75;
}
.ag-faq__item[open] > .ag-faq__q { color: var(--deep, var(--ink)); }
.ag-faq__q:focus-visible {
  outline: 2px solid var(--deep, var(--ink)); outline-offset: 3px; border-radius: 4px;
}
.ag-faq__q:active::after { opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .ag-faq__q:hover::after { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-faq__q::after { transition: none; }
}
.ag-faq__a {
  margin: 0 0 1.25rem; padding-right: 1.6rem; max-width: 62ch;
  font-size: .98rem; line-height: 1.6; color: var(--ink-soft);
}
.ag-faq__a p { margin: 0 0 .7rem; }
.ag-faq__a p:last-child { margin-bottom: 0; }
.ag-faq a { color: var(--ink); text-underline-offset: 3px; }

/* --- Móvil primero: es el activo --------------------------------------- */
@media (max-width: 880px) {
  .ag-hero__grid { grid-template-columns: 1fr; }
  .ag-hero__visual { max-width: 280px; margin-inline: auto; }

  /* Al plegarse a una columna, la portada se centraba pero el texto y la
     tarjeta NO: conservaban su `max-width` sin márgenes automáticos y se
     quedaban pegados a la izquierda. En un iPad eso dejaba 243px de vacío
     a la derecha del párrafo con la portada centrada justo debajo —
     descuadre visible, señalado por dirección el 03/08/2026.

     Se acota y centra la COLUMNA entera, no cada pieza por separado: así
     el titular, el párrafo y la tarjeta comparten el mismo borde
     izquierdo. Centrar cada bloque por su cuenta los habría desalineado
     entre sí, que es peor que el problema original.

     39rem = el `max-width` de `.ag-gate`, para que la tarjeta llene la
     columna exacta y no quede un escalón. */
  .ag-hero__texto {
    max-width: 39rem;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .ag-gate__row { grid-template-columns: 1fr; }
  .ag-gate__submit { width: 100%; max-width: none; }
  .ag-gate__choices { gap: .3rem; }
  .ag-gate__choice-ui { min-height: 70px; padding-inline: .1rem; }
  .ag-gate__face { width: 46px; height: 46px; }
  .ag-gate__choice-name { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-gate__choice-ui,
  .ag-gate__submit,
  .ag-card__cta { transition: none; }
}

/* ==========================================================================
   LANDINGS /agenda/<chica>/ — una plantilla, cinco pieles (agl-)
   La página entera vive en la paleta de la chica (vars en <main>).
   Móvil e iPad primero: nada se adapta «por defecto», todo se decide.
   ========================================================================== */

.agl-miga {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--deep);
  margin-bottom: 1.2rem;
}
.agl-miga a {
  color: inherit; text-decoration: none;
  /* Zona de toque de 44 px sin mover ni un píxel del texto: el rótulo mide
     14 px de alto y el dedo pide 44. Se agranda con un pseudoelemento
     centrado, no con padding, para no descuadrar la línea. */
  position: relative;
  touch-action: manipulation;
}
.agl-miga a::before {
  content: "";
  position: absolute; left: -6px; right: -6px;
  top: 50%; transform: translateY(-50%);
  height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  .agl-miga a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.agl-miga span[aria-hidden] { opacity: .55; }
.agl-miga > span:last-child { color: var(--ink-soft); letter-spacing: .06em; }

/* H1 largo de intención de búsqueda: un punto más contenido que el del hub */
.agl-h1 { font-size: clamp(1.7rem, 4.6vw, 2.7rem); }

/* La promesa, en su voz: el momento Fraunces de la página */
.agl-promesa {
  font-family: var(--h2-font-display, 'Fraunces'), serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.35;
  color: var(--deep);
  margin: 1rem 0 1.1rem; max-width: 34ch;
}

.agl-hero__acciones { margin-top: 1.6rem; }
.agl-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; line-height: 1.2; padding: .6rem 1.5rem;
  background: var(--deep); color: #fff;
  border-radius: 12px; text-decoration: none;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: .95rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Bajo la misma guarda que el hero y las tarjetas de esta hoja: quien pide
   menos movimiento no recibe ninguno. Estaba suelta. */
@media (prefers-reduced-motion: no-preference) {
  .agl-cta { transition: transform 180ms ease; }
}
@media (hover: hover) and (pointer: fine) {
  .agl-cta:hover { transform: translateY(-2px); }
}
.agl-cta:active { transform: translateY(0); }
.agl-compat {
  margin-top: .85rem;
  font-size: .82rem; line-height: 1.5; color: var(--ink-soft);
  max-width: 46ch;
}

/* --- Ella, en tres líneas: tarjeta clara sobre el campo ----------------- */
.agl-ella { padding: clamp(2.2rem, 5vw, 3.4rem) 0 0; }
.agl-ella__caja {
  /* border-box obligatorio: con content-box, 92vw + padding = 396px y
     21px de scroll lateral a 375 (hallazgo de la auditoría del 03/08). */
  box-sizing: border-box;
  background: #fff; border-radius: 20px;
  padding: 1.5rem 1.6rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.4rem;
}
.agl-ella__face {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  background: var(--soft); display: grid; place-items: center;
}
.agl-ella__face img { width: 64px; height: 64px; border-radius: 50%; display: block; }
.agl-ella__texto { flex: 1 1 16rem; min-width: 0; }
.agl-ella__nombre {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: .78rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--deep);
}
.agl-ella__reclamo {
  font-size: .98rem; line-height: 1.45; color: var(--ink-soft);
  margin: .3rem 0 .6rem;
}
.agl-ella__frase { margin: 0; }
.agl-ella__link { margin: 0; flex: none; }

/* --- Qué hay dentro + capturas reales ----------------------------------- */
.agl-dentro { padding: clamp(3rem, 6.5vw, 5rem) 0 0; }
.agl-dentro__lista { max-width: 34rem; margin-top: 1.4rem; }

/* Capturas: fila con desplazamiento y ajuste en móvil, tres columnas
   desde tablet. Elevación una sola vez: filo fino, sin sombra. */
.agl-capturas {
  list-style: none; padding: 0;
  margin: 1.8rem 0 0;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(72vw, 300px);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .6rem;
  -webkit-overflow-scrolling: touch;
}
.agl-captura { scroll-snap-align: start; }
.agl-captura img {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}
.agl-captura__pie {
  margin-top: .55rem;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--deep);
}
@media (min-width: 760px) {
  .agl-capturas {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: unset;
    overflow-x: visible;
    gap: 1.6rem;
  }
}

/* --- Para quién ---------------------------------------------------------- */
.agl-quien { padding: clamp(3rem, 6.5vw, 5rem) 0 0; }
.agl-quien__lista {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; gap: .7rem; max-width: 36rem;
}
.agl-quien__lista li {
  position: relative; padding-left: 1.7rem;
  font-size: 1rem; line-height: 1.5; color: var(--ink);
}
/* Check dibujado (no tipográfico: el subset no lo garantiza) */
.agl-quien__lista li::before {
  content: ""; position: absolute; left: .1rem; top: .42em;
  width: .65rem; height: .34rem;
  border-left: 2.5px solid var(--deep);
  border-bottom: 2.5px solid var(--deep);
  transform: rotate(-45deg);
}
.agl-quien__no {
  margin-top: 1.2rem;
  font-size: .95rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 52ch;
}

/* --- Cómo se usa (reutiliza .ag-que__lista) ------------------------------ */
.agl-como { padding: clamp(3rem, 6.5vw, 5rem) 0 0; }

/* --- Gate en modo solo --------------------------------------------------- */
.agl-gate { padding: clamp(3.2rem, 7vw, 5.5rem) 0 0; }
.agl-gate__caja { max-width: 620px; }
.ag-gate--solo { margin-top: 0; }
.agl-gate__anual {
  margin-top: 1rem; text-align: center;
  font-size: .85rem; line-height: 1.5; color: var(--ink-muted);
}
/* La segunda edición se menciona, no se propone: nota al pie del gate,
   sin botón ni color de acento (dirección 03/08/2026). */
.agl-gate__nota {
  margin-top: .9rem; text-align: center;
  font-size: .82rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 40em; margin-inline: auto;
}

/* --- La invitación al test (hub) ----------------------------------------
   Cierra el bloque de elegir —las cinco tarjetas y la tabla— justo antes de
   que la página cambie de asunto con la cita anual. Va CENTRADA y con botón,
   no con enlace de texto, por lo que se vio en pantalla ancha: dentro de una
   banda de 1280 px un texto alineado a la izquierda se queda flotando contra
   el margen, y un enlace subrayado no se lee como el paso siguiente que es
   (dirección, 27/08/2026).

   ⭐ El botón reutiliza `.agl-cta`, que toma su color de `--deep`, y la
   plantilla se lo pasa EN LÍNEA con el Deep de la agenda destacada — la misma
   que manda en el hero (dirección, 27/08/2026). Así la página abre y cierra
   con la misma chica en lugar de meter un sexto color por el medio, y el
   botón cambia solo cuando cambia la destacada.

   El jade de la paleta «Marca» se queda aquí de red: si algún día la
   destacada llegara sin Deep, el botón sale en el color de lo-que-no-es-de-
   nadie en vez de salir sin fondo. En el hub `--deep` solo está definido
   dentro del hero, así que sin una de las dos cosas no habría color. */
.ag-cual {
  margin-top: 56px;
  padding: 56px 0;
  background: var(--surface-2);
  text-align: center;
}
.ag-cual__texto {
  max-width: 56ch;
  margin: 16px auto 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
/* ⚠️ La red del color va AQUÍ y no en `.ag-cual`. Declarar `--deep` en la
   sección no es una red: es un override, y gana a lo que hereda de `<main>`.
   Se vio en producción el 27/08/2026 — la landing de Isabela sacaba el botón
   en jade en vez de en su oliva, porque `.ag-cual` se pisaba a sí misma el
   color de la página. En el hub no se notó: allí el valor va en línea y por
   especificidad ganaba igual.

   Con la red en el consumidor, cada página sale sola en su color: la chica en
   su landing y Melisa en el diario lo heredan de `<main>`, el hub lo recibe en
   línea con la agenda destacada, y el jade solo aparece donde no hay ninguno. */
/* Línea fina: un dato de apoyo, no la peticion. Baja de tamaño pero NO de
   color a `--ink-muted`, que sobre esta banda da 4,6:1 —pasa el AA por los
   pelos—. La jerarquía la pone el tamaño, que es más robusto que apurar el
   contraste. Con `--ink-soft` son 6,42:1. */
.ag-cual__nota {
  max-width: 52ch;
  margin: 12px auto 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.ag-cual .agl-cta { background: var(--deep, var(--marca-deep)); }
.ag-cual__cta { margin: 26px 0 0; }

/* --- Las otras cuatro ---------------------------------------------------- */
.agl-otras { padding: clamp(3.2rem, 7vw, 5.5rem) 0 0; }
.agl-otras .ag-sub a { color: var(--deep); }
/* La línea del diario, bajo la rejilla: es otra intención de búsqueda, así
   que se separa en vez de entrar como una tarjeta más (20/08/2026). */
.agl-otras__diario { margin-top: clamp(1.4rem, 3vw, 2rem); }
.agl-otras__grid {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.agl-otra {
  display: flex; align-items: center; gap: .8rem;
  min-height: 64px; padding: .7rem .95rem;
  background: var(--soft); border-radius: 16px;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .agl-otra { transition: transform .22s ease, box-shadow .22s ease; }
}
@media (hover: hover) and (pointer: fine) {
  .agl-otra:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(31, 27, 22, .12);
  }
}
.agl-otra:active { transform: translateY(-1px); }
.agl-otra__face {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
}
.agl-otra__face img { width: 38px; height: 38px; border-radius: 50%; display: block; }
.agl-otra__texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.agl-otra__texto b {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  color: var(--deep);
}
.agl-otra__texto i {
  font-style: normal; font-size: .8rem; color: var(--ink-soft);
}

/* --- FAQ y cierre -------------------------------------------------------- */
.agl-faq { padding-bottom: clamp(3.2rem, 7vw, 5.5rem); }

/* ==========================================================================
   DIARIO DE LECTURA — /diario-de-lectura/
   Comparte hoja con las agendas a propósito: es la misma familia visual y
   el mismo gate. Aquí solo va lo que esa landing añade.
   ========================================================================== */

/* (El arranque del hero por debajo de la barra fija vivía aquí, solo para el
   diario. Desde el 05/08/2026 está en `.ag-hero`, porque el hub y las cinco
   landings sufrían lo mismo sin que nadie lo hubiera medido.) */

/* Las cuatro páginas de cada libro son CUATRO, no tres: la rejilla de
   capturas de la agenda se queda corta. En tablet van 2×2 (los pies son
   frases, y a cuatro columnas se rompen en columnas de una palabra). */
@media (min-width: 760px) {
  .dl-landing .dl-cuatro { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .dl-landing .dl-cuatro { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
}

/* El pie de estas cuatro es una explicación, no una etiqueta: en versalitas
   se leería como un grito. El rótulo lo lleva el <b>. */
.dl-landing .dl-cuatro .agl-captura__pie {
  font-family: inherit;
  font-weight: 400;
  font-size: .86rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--ink-soft);
}
.dl-landing .dl-cuatro .agl-captura__pie b {
  display: block;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--deep);
  margin-bottom: .2rem;
}

/* La cuña del producto se lee mejor con los «sin» destacados. */
.dl-landing .agl-quien__lista b { color: var(--deep); }

/* --- Cierre: la otra cosa suya ------------------------------------------
   Aquí hay UN destino, no cuatro. Con la rejilla `auto-fit` de las landings
   de agenda, esa única tarjeta se estiraba a 1178 px con un medallón de
   44 px pegado al borde izquierdo y el resto vacío (medido en producción el
   04/08/2026), y la sección cerraba la página con padding-bottom 0, pegada
   al pie. La tarjeta pasa a ser una fila con contenido —qué es y qué
   promete— y su afordancia al final; la sección recupera su aire. */
.dl-otras { padding-bottom: clamp(3.2rem, 7vw, 5.5rem); }

.dl-otra {
  /* border-box por el mismo motivo que .agl-ella__caja: sin él, el padding
     se suma al ancho y aparece scroll lateral en móvil. */
  box-sizing: border-box;
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "face  titulo"
    "desc  desc"
    "ir    ir";
  align-items: center;
  gap: .55rem 1rem;
  padding: 1.15rem 1.3rem;
  background: var(--soft);
  border-radius: 20px;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dl-otra__face {
  grid-area: face;
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
}
.dl-otra__face img { width: 56px; height: 56px; border-radius: 50%; display: block; }
.dl-otra__titulo {
  grid-area: titulo; min-width: 0;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
  line-height: 1.25; color: var(--deep);
}
.dl-otra__desc {
  grid-area: desc; min-width: 0; max-width: 46ch;
  font-size: .94rem; line-height: 1.5; color: var(--ink-soft);
}
.dl-otra__ir {
  grid-area: ir; justify-self: start;
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .88rem; color: var(--deep);
}
.dl-otra__ir::after { content: " →"; margin-left: .4rem; }

/* Desde tablet la cara acompaña a las dos líneas y la acción cierra la fila
   por la derecha, que es donde termina de leerse.

   El ancho se topa en la misma medida que el párrafo de la sección (~685 px
   con `.ag-sub`): a 1440 px la tarjeta ocupaba los 1180 del contenedor con el
   texto llenando un tercio, y una línea suelta de 970 px de caja se sale de
   los 65-75 caracteres de lectura en cuanto el texto crece. El cierre es una
   columna, no una banda.

   El corte está en 500 px y no en 640 porque a partir de ahí la columna de
   texto de la fila mide ya ~250 px: por debajo se apretaría, por encima
   sobraba sitio y la tarjeta apilada se estiraba a 208 px de alto con el
   rótulo flotando solo (medido a 600 px el 04/08/2026). */
@media (min-width: 500px) {
  .dl-otra {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "face titulo ir"
      "face desc   ir";
    gap: .2rem 1.3rem;
    padding: 1.25rem 1.5rem;
    max-width: 43rem;
  }
  .dl-otra__ir { justify-self: end; align-self: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .dl-otra { transition: transform .22s ease, box-shadow .22s ease; }
}
@media (hover: hover) and (pointer: fine) {
  .dl-otra:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(31, 27, 22, .12); }
  .dl-otra:hover .dl-otra__ir { text-decoration: underline; text-underline-offset: 3px; }
}
.dl-otra:active { transform: translateY(-1px); }
.dl-otra:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }

/* La tarjeta de pegatinas es la única de esta familia SIN retrato: no es de
   una chica, es de las cinco. Sin esto, la columna «face» sigue reservando su
   hueco vacío más el gap, y el texto arranca 24 px más a la derecha que en la
   tarjeta del diario que tiene justo encima. Se quita la columna, no la cara:
   el hueco es lo que descuadra, no la ausencia de imagen. */
.pg-otras .dl-otra {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "titulo"
    "desc"
    "ir";
}
@media (min-width: 500px) {
  .pg-otras .dl-otra {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "titulo ir"
      "desc   ir";
  }
}

/* El test es el segundo destino y se dice como tal: una línea, no una
   tarjeta que compita con la agenda. */
.dl-otras__test {
  margin-top: 1.15rem;
  font-size: .95rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 52ch;
}
.dl-otras__test a {
  color: var(--deep); text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Previsualizador — páginas reales del PDF, dentro de la página
   Componente compartido: hub (con pestañas de chica) y landing (sin ellas).
   template-parts/agenda-previsualizador.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ritmo vertical: en el hub las secciones se turnan el aire para no sumarlo
   dos veces. `.ag-que` ya cierra con su relleno inferior, así que esta abre a
   cero y pone el suyo abajo. ⚠️ Con relleno solo arriba —como está en las
   landings, donde todas comparten fondo— la última línea moría pegada al
   crema de `.ag-cast`, que sí cambia de superficie (visto por dirección
   el 10/08/2026). */
.ag-ver--hub { padding: 0 0 clamp(3.2rem, 7vw, 5.5rem); }
.ag-ver--landing { padding: clamp(3rem, 6.5vw, 5rem) 0 0; }

/* --- Pestañas de chica (solo en el hub) --- */
.ag-ver__chicas {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.6rem 0 0; padding: 0;
}
.ag-ver__chip {
  /* 44px de alto táctil: no ceden ni en 320px. */
  min-height: 44px; padding: .5rem 1.1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink);
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .92rem; letter-spacing: -.01em;
  cursor: pointer; touch-action: manipulation;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ag-ver__chip[aria-selected="true"] {
  background: var(--soft); border-color: var(--mid); color: var(--deep);
}
.ag-ver__chip:focus-visible {
  outline: 2px solid var(--deep); outline-offset: 2px;
}
.ag-ver__chip:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .ag-ver__chip:hover { border-color: var(--mid); background: var(--soft); }
}
@media (prefers-reduced-motion: reduce) {
  .ag-ver__chip { transition: none; }
  .ag-ver__chip:active { transform: none; }
}

/* --- Panel de una agenda --- */
.ag-ver__panel { margin-top: 1.4rem; }
.ag-ver__panel[hidden] { display: none; }
.ag-ver__panel:focus-visible { outline: 2px solid var(--deep); outline-offset: 4px; }

.ag-ver__cual {
  margin: 0 0 .2rem; font-size: .95rem; color: var(--deep);
}
.ag-ver__cual strong { font-weight: 600; }

/* --- Las hojas: hojeador horizontal en todos los anchos ---
   Siete hojas no caben en una rejilla sin estirar la página; el
   desplazamiento lateral es además el gesto que la gente espera de un
   previsualizador. Elevación una sola vez: filo fino, nunca filo + sombra. */
.ag-ver__hojas {
  list-style: none; padding: 0 0 .7rem;
  margin: 1rem 0 0;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(78vw, 300px);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.ag-ver__hoja { scroll-snap-align: start; }
.ag-ver__hoja figure { margin: 0; }
.ag-ver__hoja img {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}
.ag-ver__pie {
  margin-top: .55rem;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--deep);
  /* En mayúsculas y a este cuerpo, dos líneas es el techo cómodo. */
  line-height: 1.45;
}
.ag-ver__nota {
  margin: .9rem 0 0; max-width: 60ch;
  font-size: .93rem; line-height: 1.55; color: var(--ink-soft);
}

@media (min-width: 760px) {
  .ag-ver__hojas { grid-auto-columns: 280px; gap: 1.2rem; }
}
@media (min-width: 1100px) {
  .ag-ver__hojas { grid-auto-columns: 300px; gap: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Definición, compatibilidad y comparativa — los bloques que faltaban
   Añadidos el 10/08/2026 tras desmontar el SERP de «agenda digital 2027»:
   la página no definía qué es una agenda digital, no decía en qué
   dispositivos funciona y no comparaba las cinco.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Medida de lectura: la definición es prosa, no un titular. */
.ag-que__def { max-width: 62ch; margin-top: .9rem; }

/* --- Dónde funciona --- */
.ag-donde { padding: 0 0 clamp(3.2rem, 7vw, 5.5rem); }
.ag-donde__nota {
  margin: 1.3rem 0 0; max-width: 60ch;
  font-size: .93rem; line-height: 1.55; color: var(--ink-soft);
}

/* --- Las cinco, comparadas ---
   Tabla de verdad, con sus th y su caption: es un dato tabular y trocearlo
   en tarjetas con CSS le quita la semántica a los lectores de pantalla. En
   móvil se desplaza dentro de su caja, nunca empuja la página. */
/* Esta sí abre con aire propio: viene después de `.ag-cast`, cuyo relleno
   inferior queda DENTRO de su fondo crema y por tanto no separa nada. */
.ag-tabla { padding: clamp(3.2rem, 7vw, 5.5rem) 0 0; }
.ag-tabla__scroll {
  margin-top: 1.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.ag-tabla__t {
  width: 100%; min-width: 34rem;
  border-collapse: collapse;
  font-size: .95rem;
}
.ag-tabla__cap {
  caption-side: top; text-align: left;
  margin-bottom: .9rem;
  font-size: .88rem; line-height: 1.5; color: var(--ink-soft);
}
.ag-tabla__t th,
.ag-tabla__t td {
  text-align: left; vertical-align: top;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--line);
}
.ag-tabla__t thead th {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom-width: 2px;
  white-space: nowrap;
}
.ag-tabla__t tbody th {
  font-weight: 600; color: var(--ink); white-space: nowrap;
}
.ag-tabla__t tbody th a {
  color: inherit; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.ag-tabla__t tbody th a:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .ag-tabla__t tbody th a:hover { text-decoration-thickness: 2px; }
}
.ag-tabla__t tbody tr:last-child th,
.ag-tabla__t tbody tr:last-child td { border-bottom: 0; }
.ag-tabla__fina {
  display: block; margin-top: .2rem;
  font-size: .8rem; color: var(--ink-muted);
}

/* --- ¿Qué es? (landings) -------------------------------------------------
   Nació como ficha de nueve filas y dirección la cortó el mismo día: la mitad
   ya estaba dicha más arriba en la página, y una tabla que repite lo que
   acabas de leer cansa. Queda un párrafo con lo que solo puede decir esta
   página. La ficha entera sigue en el JSON-LD, donde no ocupa sitio. */
.agl-ficha { padding: clamp(3rem, 6.5vw, 5rem) 0 0; }
.agl-ficha__texto { max-width: 60ch; margin-top: 1.1rem; }


/* ══════════════════════════════════════════════════════════════════
   ONIKIX · /pegatinas/ — solo lo propio de esta página.

   La familia visual (hero, wrap, h1/h2, botones, FAQ) viene de esta misma
   hoja, que la plantilla carga entera. Aquí abajo va únicamente lo que no
   existe arriba, bajo el prefijo `.pg-`.

   ⚠️ Vocabulario: los mismos tokens que el resto del fichero —`--ink`,
   `--ink-soft`, `--ink-muted`, `--surface-2`, `--line`, y `--soft`/`--deep`
   por pieza— y las fuentes con la forma `var(--h2-font-*, 'Nombre')`. No se
   inventan tokens nuevos: los `--onikix-*` que había aquí en el primer
   borrador NO existen en `:root`, así que caían siempre al literal y con
   colores que no eran los del sistema.

   Suelo de acabado (`impeccable-onikix`):
   · elevación una sola vez — borde O sombra, nunca las dos
   · sin degradados decorativos, sin neón, sin gris frío
   · `:hover` solo en puntero fino; `:active` para el táctil
   ══════════════════════════════════════════════════════════════════ */

/* ── La sexta tarjeta de la rejilla: las pegatinas ─────────────── */
/* Se lee como «y además esto», no como una sexta agenda: en vez de una cara
   lleva las cinco solapadas, y usa el neutro del sistema. */
.ag-card--extra .ag-card__face--cinco {
  display: flex;
  width: auto;
  height: 48px;
  background: none;
  overflow: visible;
}
.ag-card--extra .ag-card__face--cinco img {
  width: 40px; height: 40px;
  border-radius: 50%;
  /* Un filo del color de la tarjeta las separa entre sí sin meter una sombra
     por cara: elevación una sola vez, y aquí ni siquiera es elevación. */
  border: 2px solid var(--surface, #fff);
  object-fit: cover;
}
.ag-card--extra .ag-card__face--cinco img + img { margin-left: -14px; }

/* El CTA de las cinco agendas es un <button> que abre el gate; el de esta es
   un enlace a su página. Se le da el mismo aspecto para que la fila se lea
   pareja. */
.ag-card__cta--enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ── Hero con selector de chica ────────────────────────────────── */
/* ⭐ Sin JavaScript: radios ocultos + `:has()`. El hero está arriba del todo y
   una pieza que depende de JS ahí parpadea o llega tarde. Baseline, y ya en
   uso en `page-checkout.css`. */

/* Los tres colores por defecto de la página: la paleta «Marca», para cuando
   no manda ninguna chica. Van AQUÍ y no en un `style` del <main>, porque un
   estilo en línea gana a estas reglas y bloquearía el cambio de acento. */
.pg-landing {
  --soft: var(--marca-soft);
  --mid:  var(--marca-mid);
  --deep: var(--marca-deep);
}

/* ⭐ EL ACENTO DE TODA LA PÁGINA sigue a la chica elegida, no solo el hero
   (dirección, 23/08/2026: «ese negro no me gusta el contraste que hace ahí»).
   Se cambia `--deep` y `--mid` en el <main> entero, así que el botón del
   cierre, el enlace al cast y cualquier acento futuro se tiñen solos.
   ⚠️ `--soft` NO se toca aquí: si el fondo de toda la página siguiera a la
   chica, las bandas y las tarjetas perderían su jerarquía. El Soft solo
   cambia dentro del hero, que es donde está la hoja que lo justifica. */
.pg-landing:has(#pg-sel-amalia:checked) { --deep: #7B2053; --mid: #E5C3D6; }
.pg-landing:has(#pg-sel-isabela:checked) { --deep: #3F530F; --mid: #DBE3C5; }
.pg-landing:has(#pg-sel-sofia:checked) { --deep: #6C3B10; --mid: #E2CFBF; }
.pg-landing:has(#pg-sel-melisa:checked) { --deep: #0A5261; --mid: #C4DEE2; }
.pg-landing:has(#pg-sel-camila:checked) { --deep: #4A1A7A; --mid: #D5C7EC; }

/* El fondo y el acento del hero entero siguen a la chica elegida. */
.pg-hero:has(#pg-sel-amalia:checked) { --soft: #F7DFED; --mid: #E5C3D6; --deep: #7B2053; }
.pg-hero:has(#pg-sel-isabela:checked) { --soft: #F6FAE2; --mid: #DBE3C5; --deep: #3F530F; }
.pg-hero:has(#pg-sel-sofia:checked) { --soft: #F5E7DA; --mid: #E2CFBF; --deep: #6C3B10; }
.pg-hero:has(#pg-sel-melisa:checked) { --soft: #E0F4F7; --mid: #C4DEE2; --deep: #0A5261; }
.pg-hero:has(#pg-sel-camila:checked) { --soft: #EAE3FE; --mid: #D5C7EC; --deep: #4A1A7A; }

/* Las cinco hojas están en el HTML; el CSS enseña la que toca. Sin `:has()`
   —navegador muy viejo— se verían las cinco apiladas: largo, pero nunca vacío.

   ⚠️ DOS CLASES EN EL SELECTOR, y no es capricho: `.ag-hero__visual img` del
   bloque base ya declara `display: block` y tiene especificidad (0,1,1). Con
   `.pg-hero__hoja` a secas (0,1,0) perdía, y se veían las cinco hojas
   apiladas a la vez. Pasó en el primer despliegue del 23/08. */
.pg-hero__visual .pg-hero__hoja { display: none; }
.pg-hero:has(#pg-sel-amalia:checked) .pg-hero__visual .pg-hero__hoja--amalia { display: block; }
.pg-hero:has(#pg-sel-isabela:checked) .pg-hero__visual .pg-hero__hoja--isabela { display: block; }
.pg-hero:has(#pg-sel-sofia:checked) .pg-hero__visual .pg-hero__hoja--sofia { display: block; }
.pg-hero:has(#pg-sel-melisa:checked) .pg-hero__visual .pg-hero__hoja--melisa { display: block; }
.pg-hero:has(#pg-sel-camila:checked) .pg-hero__visual .pg-hero__hoja--camila { display: block; }

.pg-hero__visual {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* ⛔ El selector propio se retiró el 23/08/2026: ahora vive DENTRO del gate y
   reutiliza `.ag-gate__choice`, el mismo componente que el hub de agendas.
   Un segundo selector con otro aspecto en la misma familia de páginas era
   justo lo que dirección señaló como incoherente. */

.pg-hero__hojas { position: relative; }
.pg-hero__hoja {
  width: 100%;
  height: auto;
  border-radius: 14px;
  /* Elevación una sola vez: sombra, sin filo encima. */
  box-shadow: 0 22px 48px rgba(31, 27, 22, .16);
}

@media (max-width: 900px) {
  /* En móvil el visual va DEBAJO del texto: primero se lee qué es, después se
     ve. Y la hoja se acota, que a pantalla completa una A4 vertical empuja
     todo lo demás fuera de la primera pantalla. */
  .pg-hero__visual { max-width: 340px; margin-inline: auto; }
}


/* ── El gate, dentro del hero ──────────────────────────────────── */
/* Igual que en el hub de agendas: la tarjeta blanca se apoya sobre el Soft de
   la chica elegida y se lee como la acción de la página. El componente entero
   es `.ag-gate`; aquí solo se le da su sitio. */
.pg-hero .ag-gate {
  margin-top: 1.8rem;
}

/* ── Llamada principal ─────────────────────────────────────────── */
.pg-cta {
  margin: 28px 0 0;
}

.pg-cta__nota {
  margin: 10px 0 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* Estado mientras el PDF no está subido. Es un aviso, no una tarjeta:
   por eso lleva un filo a la izquierda de 1px y ningún fondo de color. */
.pg-pronto {
  max-width: 60ch;
  margin: 22px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 1px solid var(--line);
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ── Qué son: la respuesta directa ─────────────────────────────── */
.pg-que { padding: 64px 0 8px; }

.pg-que__def {
  max-width: 66ch;
  margin: 16px 0 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* La ficha: etiqueta y dato, no tarjetas. Una sola línea horizontal entre
   filas —ni caja, ni sombra, ni fondo— porque es una tabla de datos
   disfrazada de lista, y ahí la retícula la hace el filo. */
.pg-ficha {
  max-width: 64ch;
  margin: 26px 0 0;
}

.pg-ficha__fila {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.pg-ficha__fila:last-child { border-bottom: 1px solid var(--line); }

.pg-ficha dt {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: .2em;            /* alinea la versalita con la primera línea */
}

.pg-ficha dd {
  margin: 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--ink);
}

/* El puente hacia la sección siguiente: una línea, en cursiva de marca,
   para que la definición no mate el arranque del relato sino que lo monte. */
.pg-que__puente {
  max-width: 52ch;
  margin: 24px 0 0;
  font-family: var(--h2-font-display, 'Fraunces'), Georgia, serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ── Las cinco marcas ──────────────────────────────────────────── */
.pg-marcas {
  padding: 64px 0 8px;
}

/* La escena. Es el único párrafo de la página con voz de relato, así que
   se lee un punto más grande y en Ink pleno: lo demás es explicación, esto
   es el motivo. Medida corta (58ch) para que respire. */
.pg-marcas__escena {
  max-width: 58ch;
  margin: 18px 0 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink);
}

.pg-marcas__lead {
  max-width: 62ch;
  margin: 18px 0 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.pg-marcas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.pg-marca > a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100%;
  padding: 20px 18px;
  border-radius: 20px;               /* radio canónico de panel */
  background: var(--soft);
  color: var(--deep);
  text-decoration: none;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* La cara. Va arriba del todo y en redondo, como en el resto del sitio: es
   reconocimiento de personaje, no adorno — ONIKIX es una IP de personajes y
   una tarjeta de solo texto no construye memoria visual. */
.pg-marca__cara {
  display: block;
  width: 46px; height: 46px;
  margin-bottom: 8px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--deep) 10%, transparent);
}
.pg-marca__cara img { width: 100%; height: 100%; display: block; object-fit: cover; }

.pg-marca__nombre {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.pg-marca__simbolo {
  font-family: var(--h2-font-display, 'Fraunces'), serif;
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.25;
}

.pg-marca__que {
  margin-top: 2px;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 0.93rem;
  line-height: 1.5;
  /* El secundario se tiñe del Deep de la pieza, nunca gris frío. */
  color: color-mix(in srgb, var(--deep) 74%, transparent);
}

/* La microhistoria: el porqué de la marca. Va más apagada que el «qué»
   —es apoyo, no etiqueta— y con un filo arriba que la separa sin meter una
   segunda caja dentro de la tarjeta. */
.pg-marca__historia {
  /* `auto` y no una medida fija: empuja la microhistoria al pie de la
     tarjeta, así los cinco filos quedan a la misma altura aunque el «qué»
     de arriba ocupe una línea o dos. Sin esto la fila se lee desordenada. */
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--deep) 16%, transparent);
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 0.84rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--deep) 62%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .pg-marca > a:hover { transform: translateY(-3px); }
}
.pg-marca > a:active { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .pg-marca > a { transition: none; }
  .pg-marca > a:hover,
  .pg-marca > a:active { transform: none; }
}

/* ── Cuál de las cinco: el giro de la página ───────────────────── */
/* La ÚNICA banda con fondo propio de toda la página, y por eso funciona:
   marca el punto en que se deja de explicar qué son y se empieza a
   preguntar cuál es la tuya. Si algún día se le pone fondo a otra sección,
   esta deja de significar nada — una banda es un acento, dos son una
   gramática que nadie eligió. */
/* Centrada como las otras cuatro invitaciones al test (dirección, 27/08/2026).
   Lo que NO se copia de ellas es el texto corto: aquí el párrafo se conserva
   entero porque lleva estrategia SEO dentro —es el único sitio del proyecto
   que dice que las hojas del nicho se ordenan por estética o por función y
   estas por quién eres—. Por eso mantiene 62ch en vez de los 56 de `.ag-cual`:
   con un texto largo, una medida más ancha da menos líneas. */
.pg-cual {
  margin-top: 56px;
  padding: 52px 0;
  background: var(--surface-2);
  text-align: center;
}

.pg-cual__texto {
  max-width: 62ch;
  margin: 16px auto 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Solo el aire: dentro va `.agl-cta`, que trae tipografía, tamaño, alto táctil
   y color. Antes esto vestía un enlace de texto con flecha; al pasar a botón
   (27/08/2026) esas reglas ganaban por especificidad al propio botón y lo
   dejaban plano, así que se han retirado en vez de apilar !important. */
.pg-cual__cta { margin: 24px 0 0; }
/* ── Las dos hojas ─────────────────────────────────────────────── */
.pg-hojas { padding: 56px 0 8px; }

.pg-hojas__lead {
  max-width: 62ch;
  margin: 14px 0 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pg-hojas__par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 26px 0 0;
}

.pg-hoja {
  padding: 22px 20px;
  border-radius: 20px;
  background: var(--surface-2);
}

.pg-hoja__tit {
  margin: 0 0 8px;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pg-hoja p {
  margin: 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ── La tira de pegatinas sueltas ──────────────────────────────── */
/* ⛔ NO se mueve sola. `impeccable-onikix` da UN momento autoral por página, y
   una tira automática aleja justo lo que quieres mirar. Se arrastra: es lo que
   la gente ya hace con el dedo, y sale gratis con `scroll-snap`. */
.pg-tira { padding: 56px 0 8px; }

.pg-tira__lead {
  max-width: 60ch;
  margin: 14px 0 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pg-tira__lista {
  display: flex;
  gap: 14px;
  margin: 26px 0 0;
  padding: 4px 4px 18px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* no arrastra la página al llegar al final */
  scroll-snap-type: x proximity;    /* `proximity`, no `mandatory`: dejar mirar
                                       entre dos piezas es legítimo */
  scrollbar-width: thin;
}
.pg-tira__lista:focus-visible {
  outline: 3px solid var(--focus, #1F1B16);
  outline-offset: 4px;
  border-radius: 20px;
}

.pg-tira__item {
  flex: none;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  width: 150px; height: 150px;
  border-radius: 20px;              /* radio canónico de panel */
  background: var(--soft);
}
.pg-tira__item img {
  max-width: 76%;
  max-height: 76%;
  width: auto;
  display: block;
}

@media (max-width: 640px) {
  .pg-tira      { padding-top: 40px; }
  .pg-tira__item { width: 126px; height: 126px; }
}

/* ── Cómo se imprimen ──────────────────────────────────────────── */
.pg-imprimir { padding: 56px 0 8px; }

.pg-imprimir__lead {
  max-width: 62ch;
  margin: 14px 0 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pg-pasos {
  max-width: 66ch;
  margin: 24px 0 0;
  padding-left: 1.25em;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.pg-pasos li + li { margin-top: 10px; }

/* El previsualizador reutiliza `.ag-ver` entero; aquí solo se le da el aire
   que en el hub le daban las secciones vecinas. */
.pg-ver { padding: 56px 0 0; }

/* ⛔ AQUÍ HUBO UN OVERRIDE Y SE RETIRÓ EL 23/08/2026. Intentaba apilar las dos
   hojas en móvil con `grid-template-columns: 1fr`, y rompió la sección: la
   base es `grid-auto-flow: column` con `grid-auto-columns: min(78vw,300px)`,
   así que declarar UNA columna explícita de 1fr mandaba la segunda hoja a una
   columna implícita de 300 px — primera hoja diminuta, segunda gigante y el
   pie partido palabra a palabra en vertical.
   La base ya hace lo correcto: deslizable con el dedo y con `scroll-snap`.
   No hacía falta tocar nada. */

/* ── La versión digital ────────────────────────────────────────── */
.pg-digital { padding: 56px 0 8px; }

.pg-digital__texto {
  max-width: 64ch;
  margin: 14px 0 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* La línea que quita la duda de «¿tengo que elegir?». Va en Ink pleno porque
   es la respuesta, no el desarrollo. */
.pg-digital__nota {
  max-width: 56ch;
  margin: 14px 0 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

/* ── No solo en la agenda ──────────────────────────────────────── */
.pg-donde { padding: 56px 0 8px; }

.pg-donde__texto {
  max-width: 64ch;
  margin: 14px 0 0;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ── Cierre ────────────────────────────────────────────────────── */
/* ⚠️ `.ag-cierre` NO existe en esta hoja: el aire de esta sección tiene que
   ponerlo `.pg-cierre` o el bloque queda pegado al anterior. */
.pg-cierre {
  padding: 56px 0 8px;
}

.pg-cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

/* Misma jerarquía que en el diario: la pregunta es texto normal y solo el
   destino va subrayado. `.pg-link` se retiró — subrayaba la frase entera y
   competía con el botón que tiene justo encima. */
.pg-cierre__test {
  margin-top: 1.15rem;
  font-family: var(--h2-font-body, 'DM Sans'), sans-serif;
  font-size: .95rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 52ch;
}
.pg-cierre__test a {
  color: var(--deep); text-underline-offset: 3px;
}

/* ── Móvil ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pg-que      { padding-top: 44px; }
  .pg-marcas   { padding-top: 44px; }

  /* Apilada: a 390px la etiqueta en columna dejaba al dato 12 caracteres
     por línea. La versalita encima ya separa lo suficiente. */
  .pg-ficha__fila { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pg-ficha dt    { padding-top: 0; }
  .pg-hojas,
  .pg-imprimir,
  .pg-donde    { padding-top: 40px; }
  .ag-cual     { margin-top: 44px; padding: 44px 0; }
  .pg-cual     { margin-top: 44px; padding: 40px 0; }
  .pg-marcas__escena { font-size: 1.05rem; }

  /* Dos por fila a 360-430px: las tarjetas son cortas y así se ven las
     cinco de un vistazo, que es lo que explica el sistema. */
  .pg-marcas__lista { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pg-marca > a     { padding: 16px 14px; border-radius: 18px; }

  .pg-cierre__acciones { gap: 14px; }
}

/* A 320px una sola columna: dos no caben sin que el texto se parta mal. */
@media (max-width: 359px) {
  .pg-marcas__lista { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /amigo-invisible/ — landing con el sorteo de protagonista (27/08/2026)

   ⚠️ Replanteada el mismo día por dirección: la primera versión ponía a las
   cinco en BANDAS apiladas a todo ancho y el sorteo abajo. Las dos cosas eran
   peores que lo que la casa ya tenía. Ahora:

   - Las cinco van en `.ag-card` — LA tarjeta de las cinco del hub de agendas,
     con medallón, pincelada Mid y nombre fantasma. Cero CSS aquí para ellas.
   - El sorteo sube al hero, dentro de `.ag-hero__grid` (la rejilla de dos
     columnas que ya usa el hero de la agenda).

   Lo que queda propio de esta página es poco a propósito: la caja del sorteo,
   los sellos, la banda del 0 € y la revelación.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El hero hereda el aire de `.ag-hero`, que es el que libra la navbar fija —
   NO se toca el padding-top (se rompió una vez, el 27/08, y el kicker se metió
   debajo de la barra). */
.inv-hero { padding-bottom: clamp(2.4rem, 6vw, 3.6rem); }
/* La máquina pesa más que el texto: se le da la columna ancha, al revés que en
   el hero de la agenda. En móvil la rejilla base ya apila a una sola columna. */
.inv-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
/* Arriba, no centrado: la caja crece con cada nombre que se añade, y con
   `center` el titular se hundía hasta el pie de la columna. Alineados por la
   cabeza, los dos bloques empiezan a la misma altura pase lo que pase. */
.inv-hero__texto { align-self: start; }

/* Los tres sellos: el «sin» que vende esta herramienta. Texto, no iconos —
   un icono de candado aquí sería de plantilla, y esto se lee de un vistazo. */
/* Los tres en UNA fila también en móvil (dirección, 27/08): partidos en dos
   líneas parecían tres etiquetas sueltas; en una sola se leen como lo que son,
   una promesa de tres partes. Por eso `nowrap` y tamaños que ceden con el
   ancho — el texto es corto y aguanta bien la reducción. */
.inv-sellos {
  list-style: none; display: flex; flex-wrap: nowrap;
  gap: clamp(.3rem, 1.4vw, .5rem); margin: 1.6rem 0 0; padding: 0;
}
.inv-sellos li {
  flex: 0 1 auto; min-width: 0; white-space: nowrap;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: clamp(.68rem, 2.1vw, .8rem); letter-spacing: 0;
  color: var(--deep); background: var(--surface);
  border-radius: 999px;
  padding: .4rem clamp(.5rem, 2vw, .85rem);
}

/* ── La caja del sorteo ── */
/* Blanca sobre el Soft del hero: es el único objeto de la página que se puede
   USAR, y el contraste de superficie es lo que lo dice sin un rótulo. */
.inv-caja {
  background: var(--surface); border-radius: 24px;
  padding: clamp(1.3rem, 3.5vw, 2rem);
  box-shadow: 0 22px 44px rgba(31, 27, 22, .10);
}
.inv-caja__titulo {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.42rem);
  line-height: 1.15; letter-spacing: -.02em; color: var(--ink);
  margin: 0;
}
.inv-caja__intro {
  margin: .55rem 0 1.2rem;
  font-size: .95rem; line-height: 1.55; color: var(--ink-soft);
}
.inv-caja__nota {
  margin: 1.2rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .82rem; line-height: 1.5; color: var(--ink-soft);
}

.inv-form__lista { display: grid; gap: .55rem; }
.inv-input {
  width: 100%; min-height: 48px; padding: .55rem .9rem;
  border: 1px solid var(--line); border-radius: 12px;
  font: inherit; color: var(--ink); background: var(--surface);
}
.inv-input:focus-visible,
.inv-btn2:focus-visible {
  outline: 3px solid var(--deep); outline-offset: 3px;
}
.inv-form__acciones {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .7rem .8rem; margin: 1rem 0 0;
}
.inv-form__acciones .agl-cta { flex: 1 1 auto; }
.inv-btn2 {
  min-height: 48px; padding: .5rem 1.05rem;
  border: 1.5px solid var(--deep); border-radius: 12px;
  background: transparent; color: var(--deep);
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 600; font-size: .92rem; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* Marrón rojizo cálido: el rojo de sistema no existe en esta paleta. */
.inv-form__error { margin: .85rem 0 0; font-weight: 600; font-size: .9rem; color: #8A2A19; }

.inv-resultado { margin: 1.3rem 0 0; }
.inv-resultado__titulo {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 0;
}
.inv-resultado__sub {
  margin: .4rem 0 0; font-size: .88rem;
  line-height: 1.5; color: var(--ink-soft);
}
.inv-resultado__lista {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: grid; gap: .5rem;
}
.inv-persona {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem .8rem;
  background: var(--bg); border-radius: 14px; padding: .6rem .8rem;
}
.inv-persona__nombre {
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 700; font-size: .92rem; color: var(--ink);
  overflow-wrap: anywhere;
}
.inv-persona__acciones { display: flex; gap: .45rem; flex-wrap: wrap; }
.inv-persona .agl-cta,
.inv-persona .inv-btn2 {
  min-height: 44px; padding: .35rem .85rem; font-size: .84rem; flex: 0 0 auto;
}

/* ── Los cinco retratos ──────────────────────────────────────────────
   Aquí es donde la lectora decide, así que manda la presencia. Cada retrato
   ocupa el ancho útil sobre el Soft de su chica: el cambio de superficie es
   lo que los separa — sin borde y sin sombra, que sería volver a la tarjeta.
   Los rótulos de precio son el ancla de lectura, porque quien llega tiene un
   tope acordado y ese es su primer filtro. */
.inv-cinco { padding-top: clamp(2.8rem, 7vw, 4.4rem); }

/* ⚠️⚠️ SIN FONDO DE COLOR, y es la corrección más importante de esta página.
   La versión anterior daba a cada retrato el Soft de su chica a todo ancho:
   cinco bandas de color seguidas. Dirección lo vio y lo dijo exacto — «la
   página está sobrecargada de colores, hemos perdido la elegancia y hemos
   entrado en una monotonía».

   Se midió por qué /el-universo/ sí es elegante y la respuesta no admite
   discusión: tiene UN SOLO FONDO en toda la página, y el color de personaje
   aparece únicamente en piezas de 1 a 12 px — puntos de 8×8, filetes de 36×1,
   barras de 36×3. Su botón principal ni siquiera es de chica: es tinta.

   ⭐ La regla, que vale para toda la marca: el color de personaje es un
   ACENTO —un filete, una viñeta, una palabra—, NUNCA una superficie. La
   elegancia sale de un fondo continuo y de que el color aparezca en pequeño.

   Aquí eso significa: los cinco retratos viven sobre el crema de la página y
   se separan con un filete corto en su Deep, igual que `u8-rule__line`. El
   color sigue estando —en el halo del retrato, el filete, el lema, el rótulo
   de precio, las viñetas y la firma— pero deja de ser un muro. */
.inv-retrato__caja {
  padding: clamp(2.6rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--line);
}
/* El filete corto de su color, encima del retrato: es el device de El Universo
   y es lo que sustituye a la banda. Marca de quién es el bloque sin pintar
   media pantalla. */
.inv-retrato__caja::before {
  content: ""; display: block;
  width: 36px; height: 3px; border-radius: 2px;
  background: var(--deep);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
/* El primero no lleva filete superior: ya lo separa la entradilla. */
.inv-retrato:first-of-type .inv-retrato__caja { border-top: 0; }

.inv-retrato__cab {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.6rem);
}
/* Sin esto el bloque de texto no puede encogerse por debajo de su contenido
   mínimo —el lema va en `nowrap`— y a 320 px empujaba 10 px fuera de pantalla.
   Es la trampa clásica de flex: un hijo no baja de `min-content` salvo que se
   le diga. Detectado midiendo, no a ojo. */
.inv-retrato__quien { min-width: 0; }
/* El retrato es protagonista, no icono: 128 px con halo de su Mid. */
.inv-retrato__face {
  flex: none; display: grid; place-items: center;
  width: clamp(84px, 16vw, 128px); aspect-ratio: 1;
  border-radius: 50%; background: var(--soft);
}
.inv-retrato__face img {
  width: 88%; height: 88%; border-radius: 50%;
  object-fit: cover; display: block;
}
.inv-retrato__def {
  margin: 0;
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 800; font-size: clamp(1.35rem, 3.2vw, 2.05rem);
  line-height: 1.08; letter-spacing: -.025em; color: var(--ink);
}
/* La frase de reconocimiento: es LA línea que hace el trabajo — convierte a la
   chica en una manera de reconocer a alguien. El lema va en Fraunces itálica,
   que es la firma de marca, y en su Deep. */
/* Solo el lema desde el 27/08: sube de tamaño porque ya no acompaña a una
   frase introductoria, la encabeza. */
.inv-retrato__frase {
  margin: .45rem 0 0; max-width: 44ch;
  font-size: clamp(1.1rem, 2vw, 1.32rem); line-height: 1.35;
  color: var(--ink-soft);
}
.inv-retrato__frase em {
  font-family: var(--h2-font-display, 'Fraunces'), serif;
  font-style: italic; font-weight: 500; color: var(--deep);
  white-space: nowrap;
}
/* En pantallas muy estrechas el lema sí puede partirse: preferimos dos líneas
   a que la cabecera se salga. Por encima de 380 px cabe entero y se mantiene
   en una, que es como se lee mejor. */
@media (max-width: 380px) {
  .inv-retrato__frase em { white-space: normal; }
}
.inv-retrato__desc {
  margin: 1.15rem 0 0; max-width: 62ch;
  font-size: 1.02rem; line-height: 1.62; color: var(--ink-soft);
}

/* ── Las dos franjas de precio ── */
.inv-franja { margin-top: clamp(1.5rem, 3.5vw, 2.1rem); }
/* Filete + rótulo grande: separa por aire y jerarquía, no por otra caja. */
.inv-franja__precio {
  margin: 0 0 .9rem; padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-family: var(--h2-font-head, 'Bricolage Grotesque'), sans-serif;
  font-weight: 800; font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: .01em; color: var(--deep);
}
.inv-franja__ideas {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .62rem;
  /* Dos columnas en cuanto hay sitio: cinco viñetas en una sola columna
     obligan a un scroll largo justo donde hay que comparar. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
}
.inv-franja__ideas li {
  position: relative; padding-left: 1.05rem;
  font-size: .96rem; line-height: 1.5; color: var(--ink-soft);
  max-width: 46ch;
}
.inv-franja__ideas li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--deep);
}
/* El nombre del objeto es el ancla que se escanea: por eso va en la tinta
   fuerte y no en el gris del cuerpo. Hace de icono sin necesitar iconos. */
.inv-franja__ideas b { color: var(--ink); font-weight: 700; }

/* ── La firma ── */
/* Cierra el bloque a la derecha, sola. Antes compartía pie con un enlace a su
   agenda y dirección lo quitó: los retratos son editoriales y la petición vive
   en el bloque de abajo. Es un sello, no un botón — sin caja y sin enlace. */
.inv-retrato__firma {
  margin: clamp(1.6rem, 3.5vw, 2.2rem) 0 0;
  text-align: right;
  font-family: var(--h2-font-display, 'Fraunces'), serif;
  font-style: italic; font-weight: 550;
  font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1;
  letter-spacing: -.02em; color: var(--deep); opacity: .55;
}

/* ── El tramo de 0 € ── */
/* También sin banda: el énfasis lo dan el aire, el centrado y el botón, que
   es el único jade de la sección. Antes era una superficie más del arcoíris. */
.inv-cero {
  --deep: var(--marca-deep);
  text-align: center;
  padding: clamp(3.2rem, 8vw, 5rem) 0;
  border-top: 1px solid var(--line);
}
.inv-cero__texto {
  max-width: 56ch; margin: 16px auto 0;
  font-size: 1.02rem; line-height: 1.65; color: var(--ink-soft);
}
.inv-cero__cta { margin: 26px 0 0; }
.inv-cero__peg { margin: 14px auto 0; font-size: .92rem; color: var(--ink-soft); }
.inv-cero__peg a { color: var(--deep); text-underline-offset: 3px; }

/* ⚠️ La franja que sobraba (vista por dirección el 27/08). `.ag-cual` —la
   invitación al test— trae `margin-top: 56px`, y en las otras siete páginas
   eso es solo aire: la sección de antes está sobre el crema de fondo. Aquí la
   de antes es una BANDA de color a todo ancho, así que ese margen se convertía
   en una tira de 56 px de fondo asomando entre el jade y el crema del test.
   Dos bandas seguidas se tocan; el aire va DENTRO de cada una, en su relleno. */
.inv-cero + .ag-cual { margin-top: 0; }

/* ── Revelación (misma URL, #r=…) ── */
.inv-reveal {
  background: var(--marca-soft); text-align: center;
  /* El aire de arriba libra la navbar fija, como .ag-hero. */
  padding: clamp(6.5rem, 14vw, 8.5rem) 0 clamp(2.4rem, 7vw, 4.2rem);
}
/* Con revelación el hero se aparta: quien abre el enlace viene a una sola
   cosa. El resto de la página sigue debajo — ese ES el pasillo. */
.inv-landing.inv-tiene-reveal .inv-hero { display: none; }
.inv-reveal__para { margin: 1rem 0 0; font-size: 1.05rem; color: var(--ink-soft); }
.inv-reveal__nombre {
  /* Es un <h1>: se resetean los estilos de encabezado del tema. */
  margin: .35rem 0 0;
  font-family: var(--h2-font-display, 'Fraunces'), serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(2.7rem, 13vw, 5.6rem);
  line-height: 1.04; color: var(--marca-deep);
  overflow-wrap: anywhere;
}
.inv-reveal__pregunta {
  margin: 1.4rem auto 0; max-width: 46ch;
  line-height: 1.6; color: var(--ink-soft);
}
.inv-reveal__cta { margin: 1.6rem 0 0; }
/* Único momento de motion autoral. Sin JS la sección no existe, así que nada
   puede quedarse invisible. */
@media (prefers-reduced-motion: no-preference) {
  .inv-reveal__nombre {
    opacity: 0; letter-spacing: .12em;
    transition: opacity .7s ease, letter-spacing .9s cubic-bezier(.2, .7, .2, 1);
  }
  .inv-reveal.es-visible .inv-reveal__nombre { opacity: 1; letter-spacing: normal; }
}

/* ── Tablet y móvil ── */
@media (max-width: 900px) {
  /* Una columna antes de que la máquina se estreche de más. */
  .inv-hero__grid { grid-template-columns: minmax(0, 1fr); }
  /* Y los sellos centrados (dirección, 27/08): apilado el hero, la fila ocupa
     casi todo el ancho y centrada queda equilibrada. En escritorio NO se
     centran — ahí viven dentro de una columna alineada a la izquierda y
     centrarlos los dejaría flotando. */
  .inv-sellos { justify-content: center; }
}