/* ============================================================================================
   guia.css — páginas de contenido (30 landings de regalo + blog).
   Rediseño 2026-09-07 (pedido de Jean: «se ven muy poco estéticas, dale un toque premium —
   transiciones, animaciones, layout y responsive — y la cabecera debe estar centralizada»).

   QUÉ CAMBIÓ Y POR QUÉ
   1. CABECERA: antes era una barra blanca sólida con los enlaces a la derecha y un botón violeta,
      con OTRO juego de opciones que la portada (Inicio·Tienda·Blog·Sobre mí·Mi pedido frente a
      Inicio·Tienda·Sobre mí). Ahora es ESPEJO de la barra de la portada (`.pp-topbar--landing` de
      posible-pedido.css → `navBarInner()` en posible-pedido.js): logo a la izquierda, enlaces
      CENTRADOS, píldora «Mi pedido» a la derecha, transparente arriba y de cristal al bajar.
      ⚠️ No se puede reusar la clase real: esa barra la inyecta el motor de la tienda (~200 KB gz)
      y estas páginas son la puerta de entrada desde Google — cargarlo aquí arruinaría el LCP.
      Es un espejo declarado: tocar la barra de la portada = tocar ésta.
   2. PIE: ya no hay un tercer pie propio. Las landings emiten el pie CANÓNICO de la portada
      (`#footer`), cuyos estilos viven en home.css — que estas páginas ya cargaban. Cero CSS nuevo.
   3. LAYOUT: se retiró la rejilla de dos columnas de tarjetas blancas idénticas (lo que hacía que
      se leyeran como un blog). Ahora: banda de portada a sangre + columna de lectura de 68ch con
      índice pegajoso en escritorio. Una sección se ve distinta de otra por lo que CONTIENE
      (las que traen diseños llevan panel lavanda), no por decoración repetida.
   4. MOVIMIENTO: revelados con `animation-timeline: view()` — fuera del hilo principal y sin JS,
      así que no hay parpadeo ni riesgo de quedarse en `opacity:0` para siempre (la trampa de
      `data-fade` en HTML sin su observador). Donde el navegador no lo soporta, todo se ve fijo.

   Tokens de home.css SIEMPRE; hex crudo nuevo NUNCA (@rules/diseno.md).
   ============================================================================================ */

.guide-body { min-height: 100vh; color: var(--ink-2);
  background: linear-gradient(180deg, var(--violet-50) 0%, var(--card) 34%, var(--card) 72%, var(--violet-50) 100%); }
.guide-body main { width: 100%; margin: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* Ancho de lectura común. 1180px es el mismo que centra la barra de la portada. */
.guide-wrap { width: min(100% - 40px, 1180px); margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   1 · CABECERA — espejo de `.pp-topbar--landing` (posible-pedido.css:1550)
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.guide-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; gap: 18px;
  padding: 6px max(18px, calc((100% - 1180px) / 2 + 26px));
  /* Estado por DEFECTO = cristal. `.is-top` (lo pone guia.js arriba del todo) lo vuelve
     transparente. Al revés —transparente por defecto— un fallo del JS dejaría la barra invisible
     sobre el texto blanco de más abajo; así el peor caso sigue siendo legible. */
  background: rgba(248,242,251,.86);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 8px 26px -16px rgba(90,58,168,.45);
  border-bottom: 1px solid rgba(124,79,208,.08);
  transition: background var(--t-sheet) var(--ease-out), box-shadow var(--t-sheet) var(--ease-out), border-color var(--t-sheet) var(--ease-out), padding var(--t-tr) var(--ease-out), -webkit-backdrop-filter var(--t-sheet) var(--ease-out), backdrop-filter var(--t-sheet) var(--ease-out);
}
.guide-nav.is-top { background: transparent; box-shadow: none; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: 10px; padding-bottom: 10px; }

.guide-logo { flex: none; display: inline-flex; align-items: center; padding: 2px 4px; border-radius: 999px;
  transition: transform var(--t-fb) var(--ease-out), background var(--t-pop) var(--ease-out); }
.guide-logo img { height: clamp(44px, 5.4vw, 68px); width: auto; display: block; object-fit: contain; }
.guide-logo:hover { background: rgba(124,79,208,.08); }
.guide-logo:active { transform: scale(.96); }

.guide-nav-links { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 46px); }
.guide-nav-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
  color: var(--ink); font-size: var(--fs-xl); font-weight: 700;
  transition: color var(--t-fb) var(--ease-out), background var(--t-pop) var(--ease-out); }
.guide-nav-links a:hover { color: var(--violet-700); background: rgba(162,134,221,.3); }
.guide-nav-links a[aria-current="page"] { color: var(--violet-700); background: rgba(162,134,221,.22); }

.guide-nav-act { flex: none; display: flex; align-items: center; gap: 12px; }
/* Medido contra la barra REAL de la portada (no contra la hoja de estilos: `.pp-cart-pill` tiene
   reglas posteriores que la ganan). Botón de 44×44 redondo con el gradiente de marca, y a su lado
   el icono de cuenta transparente del mismo tamaño. */
.guide-find, .guide-acct, .guide-order { position: relative; width: 44px; height: 44px; flex: none;
  display: inline-grid; place-items: center; border-radius: 50%;
  transition: transform var(--t-fb) var(--ease-out), box-shadow var(--t-pop) var(--ease-out), background var(--t-pop) var(--ease-out); }
/* La lupa es MÓVIL, como en el resto de la web (`.pp-mobile-search` nace en `display:none` y solo
   se enciende ≤720): en escritorio la búsqueda vive dentro de la tienda y aquí no hay nada que
   filtrar. Declararla oculta por defecto deja el header de escritorio EXACTAMENTE como estaba. */
.guide-find { display: none; }
.guide-find, .guide-acct { color: var(--ink); }
.guide-find:hover, .guide-acct:hover { background: var(--fill-soft); color: var(--ink); }
.guide-find svg, .guide-acct svg { width: 20px; height: 20px; }
/* Tanda 1b (Jean 2026-09-29): el carrito es un icono en TINTA, sin bola violeta — el único violeta de la
   cabecera es su CONTADOR (espejo de `.pp-cart-pill` en posible-pedido.css). */
.guide-order { background: none; color: var(--hdr-ic); box-shadow: none; }
.guide-order svg { width: 22px; height: 22px; }
.guide-order:hover { background: var(--fill-soft); }
/* Contador: lo rellena guia.js desde `vc-cart` (localStorage). Sin JS o con el carrito vacío no
   existe — un «0» permanente sería ruido. */
.guide-cart-n { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  display: none; place-items: center; border-radius: 999px; border: 2px solid var(--card);
  background: var(--hdr-count); color: var(--card); font: 700 11px/1 "Nunito Sans", sans-serif; }
.guide-cart-n.on { display: grid; }

/* Menú móvil: `<details>` NATIVO, sin JS — un desplegable que depende de un script podría quedar
   muerto si el script falla, y aquí es la única forma de navegar en el teléfono. */
.guide-menu { position: relative; display: none; }
.guide-menu > summary { list-style: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 14px; cursor: pointer; color: var(--ink); }
.guide-menu > summary::-webkit-details-marker { display: none; }
.guide-menu > summary:hover { background: rgba(162,134,221,.22); }
.guide-menu > summary svg { width: 24px; height: 24px; }
.guide-menu[open] > summary .gm-abre { display: none; }
.guide-menu:not([open]) > summary .gm-cierra { display: none; }
.guide-menu-panel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 232px; max-width: min(232px, calc(100vw - 24px)); padding: 8px;
  display: grid; gap: 2px; border: 1px solid var(--violet-100); border-radius: 20px; background: var(--card);
  box-shadow: 0 26px 60px -26px rgba(90,58,168,.5); }
.guide-menu-panel a { min-height: 46px; display: flex; align-items: center; padding: 10px 14px; border-radius: 13px;
  color: var(--ink); font-weight: 700; }
.guide-menu-panel a:hover { background: var(--violet-50); color: var(--violet-700); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   2 · PORTADA DE LA PÁGINA — banda a sangre bajo la barra
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.guide-hero-band { position: relative; isolation: isolate; overflow: clip;
  padding: calc(clamp(44px, 7vw, 92px) + 78px) 0 clamp(38px, 5.5vw, 74px);
  background:
    radial-gradient(1100px 480px at 88% -12%, var(--violet-100) 0%, transparent 62%),
    radial-gradient(760px 420px at 4% 8%, color-mix(in srgb, var(--pink) 12%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, var(--violet-50) 0%, color-mix(in srgb, var(--violet-50) 45%, transparent) 62%, transparent 100%);
}
/* Trazo suelto de fondo — el mismo lenguaje del doodle del pie de la portada. Decorativo puro. */
.guide-hero-doodle { position: absolute; right: 1.5%; bottom: 4%; width: min(38%, 440px); height: auto;
  z-index: -1; fill: none; stroke: var(--violet-200); stroke-width: 3.4; stroke-linecap: round; opacity: .55;
  pointer-events: none; }
@media (max-width: 1100px) { .guide-hero-doodle { opacity: .38; } }

.guide-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px;
  color: var(--muted); font-size: var(--fs-md); font-weight: 700; }
.guide-crumb a { color: var(--violet-700); }
.guide-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* La palabra manuscrita (Caveat) es el gesto que hermana estas páginas con la portada. */
.guide-kick { display: inline-block; margin-bottom: 4px; color: var(--pink-ink);
  font-family: "Caveat", "Segoe Script", cursive; font-size: clamp(23px, 2.6vw, 34px); font-weight: 700;
  line-height: 1.15; transform: rotate(-1.6deg); transform-origin: left center; }
.guide-hero-band h1 { max-width: 17ch; margin-top: 6px; color: var(--ink);
  font-family: "Fredoka", sans-serif; font-size: clamp(36px, 6vw, 68px); font-weight: 600; line-height: 1.04;
  letter-spacing: -.015em; text-wrap: balance; }
.guide-lead { max-width: 60ch; margin-top: 20px; color: var(--ink-2);
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.68; }
.guide-hero-cta { margin-top: 22px; }
.guide-hero-cta a { min-height: 48px; padding: 12px 24px; display: inline-flex; align-items: center; gap: 9px;
  border-radius: 999px; background: var(--grad); color: var(--card); font-weight: 900;
  transition: transform var(--t-pop) var(--ease-out); }
.guide-hero-cta a:hover { transform: translateY(-2px); }
.guide-hero-cta a:active { transform: scale(.97); }
.guide-hero-cta a:focus-visible { outline: 3px solid var(--violet-600); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .guide-hero-cta a { transition: none; } .guide-hero-cta a:hover { transform: none; } }
.guide-meta { margin-top: 20px; color: var(--muted); font-size: var(--fs-md); font-weight: 700; }
.guide-meta span { color: var(--violet-700); }

/* Tira de diseños reales asomando bajo el titular: la página deja de ser un muro de texto y se ve
   de inmediato que detrás hay producto. Las fotos ya vienen del catálogo (`{{IMG:Pxx}}`). */
.guide-peek { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; padding: 0; list-style: none; }
/* ⚠️ El ancho va en el <li>, que es el ITEM flex, no en el <a>. Con el ancho en el hijo, el
   porcentaje se resolvía contra un contenedor de ancho automático que a su vez dependía del hijo:
   el <li> se estiraba a toda la fila y las cuatro fotos se apilaban en vertical (medido a 390px). */
/* ⚠️ La franja anti-parpadeo va en el <li>, NO en el <a>: el enlace lleva `overflow: clip` para
   recortar la foto contra su esquina redondeada y recortaría también su propio ::after (la misma
   trampa del check de la mascota dentro de su chip). Por eso el hover se declara sobre el <li>:
   así la zona que mantiene la foto levantada incluye la que la levanta. */
.guide-peek li { position: relative; isolation: isolate; width: clamp(104px, 13vw, 158px); }
.guide-peek li::after { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 20px; }
.guide-peek li:hover::after { inset: -4px -4px -8px; }
.guide-peek a { display: block; width: 100%; border-radius: 18px; overflow: clip;
  border: 1px solid var(--violet-100); background: var(--violet-100);
  box-shadow: var(--shadow-sm); transition: transform var(--t-pop) var(--ease-out), box-shadow var(--t-pop) var(--ease-out); }
.guide-peek img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (hover: hover) { .guide-peek li:hover a { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow); } }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   3 · CUERPO — columna de lectura + índice pegajoso
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.guide-main { display: block; padding: clamp(30px, 4.5vw, 58px) 0 0; }
/* Cierre de la página: enlaces relacionados + banner del reto + llamada final. Fuera de la
   columna de lectura porque van a todo el ancho, no a 68ch. */
.guide-close { padding-bottom: clamp(48px, 6vw, 88px); }
.guide-art { max-width: 68ch; }

/* Índice: solo desde 1180px, que es el ancho al que la barra deja de tocar los bordes. Por debajo
   robaría el ancho de lectura. No es un cuarto tier responsive: es el corte del contenido. */
.guide-toc { display: none; }
/* Sin índice (índice del blog, páginas cortas) la columna se centra: si no, dejaba medio ancho
   muerto a la derecha reservado para un índice que no existe. */
.guide-main:not(.guide-main--toc) .guide-art { margin-inline: auto; }
@media (min-width: 1180px) {
  .guide-main--toc { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: clamp(34px, 4vw, 68px); align-items: start; }
  .guide-main--toc .guide-art { max-width: 68ch; }
  .guide-toc { display: block; position: sticky; top: 96px; grid-column: 2; grid-row: 1; }
  .guide-toc h2 { margin-bottom: 12px; color: var(--muted); font-family: "Nunito Sans", sans-serif;
    font-size: var(--fs-sm); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .guide-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px;
    border-left: 2px solid var(--violet-100); }
  .guide-toc a { display: block; padding: 7px 0 7px 15px; margin-left: -2px;
    border-left: 2px solid transparent; color: var(--muted); font-size: var(--fs-lg); font-weight: 700;
    line-height: 1.4; transition: color var(--t-pop) var(--ease-out), border-color var(--t-pop) var(--ease-out); }
  .guide-toc a:hover { color: var(--violet-700); }
  .guide-toc a.is-here { color: var(--violet-700); border-left-color: var(--violet-600); }
}

/* Secciones de prosa: sin tarjeta, sin borde, sin sombra. Lo que las separa es el aire y una
   línea de pelo — 8 tarjetas blancas iguales es exactamente lo que se leía como blog. */
.guide-sec { padding-top: clamp(30px, 4vw, 50px); scroll-margin-top: 100px; }
.guide-sec + .guide-sec { border-top: 1px solid var(--violet-100); }
.guide-sec > h2 { color: var(--ink); font-family: "Fredoka", sans-serif;
  font-size: clamp(24px, 2.7vw, 35px); font-weight: 600; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.guide-sec > p { margin-top: 14px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.78; }

/* Sección CON diseños: panel lavanda. La diferencia visual la marca el contenido, no el adorno. */
.guide-sec--prods { margin-top: clamp(30px, 4vw, 50px); padding: clamp(24px, 3.2vw, 40px);
  border: 1px solid var(--violet-100); border-radius: clamp(22px, 2.6vw, 30px); background: var(--violet-50); }
.guide-sec--prods + .guide-sec { border-top: 0; }
.guide-sec--prods > p { color: var(--ink-2); }

.guide-faqs { margin-top: clamp(34px, 4.5vw, 56px); padding: clamp(26px, 3.6vw, 44px);
  border: 1px solid color-mix(in srgb, var(--gold-500) 22%, transparent); border-radius: clamp(22px, 2.6vw, 30px);
  background: var(--cream); scroll-margin-top: 100px; }
.guide-faqs > h2 { color: var(--ink); font-family: "Fredoka", sans-serif; font-size: clamp(23px, 2.5vw, 32px); font-weight: 600; }
.guide-faq { padding-top: 18px; margin-top: 18px; border-top: 1px solid color-mix(in srgb, var(--gold-500) 20%, transparent); }
.guide-faq h3 { color: var(--ink); font-size: clamp(17px, 1.5vw, 20px); font-weight: 800; }
.guide-faq p { margin-top: 9px; line-height: 1.76; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   4 · LISTAS, IDEAS Y REJILLA DE DISEÑOS
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.guide-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.guide-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 11px 15px;
  border: 1px solid var(--violet-100); border-radius: 15px; background: var(--card); }
.guide-list a { min-height: 24px; color: var(--violet-700); font-weight: 800; }
.guide-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.guide-list span { color: var(--muted); font-size: var(--fs-md); }

.guide-ideas { margin: 30px 0 0; padding: 0 0 0 clamp(28px, 4vw, 46px); display: grid; gap: 16px; counter-reset: idea; }
.guide-idea { position: relative; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--violet-100);
  border-radius: 24px; background: var(--card); box-shadow: var(--shadow-sm); list-style: none;
  scroll-margin-top: 100px; }
.guide-idea::before { counter-increment: idea; content: counter(idea); position: absolute;
  left: clamp(-44px, -3.8vw, -32px); top: clamp(20px, 2.6vw, 28px); width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%; background: var(--grad); color: var(--card);
  font: 800 15px/1 "Nunito Sans", sans-serif; box-shadow: 0 8px 18px -10px rgba(124,79,208,.8); }

/* ── Artículo del blog: ritmo de LECTURA (Jean 2026-09-21: «no solo texto para cansar al lector»).
   La columna se estrecha y el cuerpo crece: 62 caracteres por línea y 19-20px con interlineado
   1.8 es el rango que usan las revistas largas. ⚠️ NO se añade una tipografía serif aunque sea lo
   propio del género: estas páginas son la puerta de entrada desde Google y su LCP ya va justo, así
   que una fuente más se paga en el peor sitio. El aire hace el trabajo que haría la serif. */
.guide-body--art .guide-art { max-width: 70ch; }
.guide-body--art .guide-sec > p,
.guide-body--art .guide-idea p { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.8; }
.guide-body--art .guide-lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.7; }
.guide-body--art .guide-sec { padding-top: clamp(34px, 4.6vw, 58px); }

/* Idea con foto: el texto manda y la foto acompaña a su derecha. Se apila bajo 640px del PROPIO
   contenedor (no del viewport: la columna de lectura es más angosta que la ventana). */
.guide-idea-txt { min-width: 0; }
/* ⚠️ Aquí NO se puede usar una consulta de contenedor, aunque sería lo natural: `container-type:
   inline-size` implica `contain: style`, y el contenimiento de estilo CONFINA LOS CONTADORES CSS —
   con él (en la idea o en la lista) `counter-increment` se reinicia y las diez ideas salen
   numeradas «1». Se vio en pantalla, no en la hoja: `getComputedStyle(li,'::before').content`
   devuelve `counter(idea)` sin resolver, así que solo lo caza una captura. El corte por viewport
   vale aquí porque la columna de lectura solo comparte ancho con el índice lateral a partir de
   1180px, donde sobra sitio. */
.guide-idea--foto .guide-idea-txt { display: contents; }
.guide-idea--foto { display: grid; grid-template-columns: minmax(0, 1fr) clamp(128px, 13vw, 172px);
  grid-template-areas: 'tit foto' 'txt foto' 'prod prod'; column-gap: clamp(16px, 1.8vw, 24px); align-items: start; }
.guide-idea--foto h3 { grid-area: tit; }
.guide-idea--foto > .guide-idea-txt > p:not(.guide-idea-prods) { grid-area: txt; }
.guide-idea--foto .guide-idea-prods { grid-area: prod; }
.guide-idea-foto { grid-area: foto; display: block; border-radius: 14px; overflow: clip;
  background: var(--violet-100); box-shadow: var(--shadow-sm); }
.guide-idea-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 640px) {
  .guide-idea--foto { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'foto' 'tit' 'txt' 'prod'; row-gap: 12px; }
  .guide-idea-foto { max-width: 100%; }
}

/* Frase destacada: el respiro entre las ideas y las secciones. Sin comillas dibujadas ni cursiva
   decorativa — una barra lavanda y tamaño, que es lo que de verdad corta el muro de texto. */
.guide-cita { margin: clamp(30px, 4vw, 48px) 0 0; padding: 4px 0 4px clamp(18px, 2.4vw, 28px);
  border-left: 3px solid var(--violet-300); }
.guide-cita blockquote { margin: 0; color: var(--ink); font-family: "Fredoka", sans-serif;
  font-size: clamp(19px, 2vw, 25px); font-weight: 500; line-height: 1.45; }

/* Progreso de lectura (lo enciende guia.js solo en artículos). `scaleX` sobre una barra fija: ni
   layout ni repintado, y con reduced-motion simplemente no hay transición. */
.guide-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 95;
  transform: scaleX(0); transform-origin: 0 50%; background: var(--grad); pointer-events: none; }

.guide-idea h3 { color: var(--ink); font-family: "Fredoka", sans-serif; font-size: clamp(19px, 2vw, 25px); font-weight: 600; }
.guide-idea p { margin-top: 9px; line-height: 1.74; }
.guide-idea-prods { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px !important; }
/* El diseño y su precio son UNA unidad: sueltos como dos ítems flex, el precio del último saltaba
   solo a la línea siguiente y quedaba huérfano («S/ 85» sin nada al lado, visto en el artículo de
   la novia). El envoltorio los mantiene juntos y deja que rompan juntos. */
.guide-pair { display: inline-flex; align-items: center; gap: 6px; }
.guide-idea-prods a { min-height: 24px; padding: 7px 13px; border: 1px solid var(--violet-200); border-radius: 999px;
  background: var(--violet-50); color: var(--violet-700); font-size: var(--fs-md); font-weight: 800;
  transition: background var(--t-pop) var(--ease-out), border-color var(--t-pop) var(--ease-out); }
.guide-idea-prods a:hover { background: var(--violet-100); border-color: var(--violet-400); }
.guide-idea-prods .guide-pair > span { color: var(--ink); font-size: var(--fs-md); font-weight: 800; white-space: nowrap; }


/* Rejilla de diseños con foto y precio (2026-09-07): en Perú estas consultas las gana una página de
   categoría comprable, no una lista de enlaces al final del texto.
   ⚠️ `repeat(auto-fill, minmax(0, …))`: con `1fr` la min-content de una tarjeta ensancha su columna
   y encoge las vecinas — la trampa que ya descuadró la tienda (@rules/frontend.md). */
.guide-prods { margin: 20px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr)); gap: 14px; }
.guide-prods li { min-width: 0; }
.guide-prods a { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px;
  border: 1px solid var(--violet-100); border-radius: 18px; background: var(--card); color: var(--violet-700);
  transition: transform var(--t-pop) var(--ease-out), border-color var(--t-pop) var(--ease-out), box-shadow var(--t-pop) var(--ease-out); }
.guide-prods a::after { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; }
.guide-prods a:hover::after { inset: -4px -4px -7px; }
/* ⚠️ `height:auto` es obligatorio: el atributo `height="360"` del HTML fija la altura y sin esto
   `aspect-ratio` se ignora (las fotos salían 210×360). Se mide en el valor computado, no leyendo. */
.guide-prods img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px;
  margin-bottom: 9px; background: var(--violet-100); }
.guide-prods .gg-n { color: var(--ink); font-weight: 800; line-height: 1.32; }
.guide-prods .gg-p { color: var(--violet-700); font-size: var(--fs-md); font-weight: 800; }
@media (hover: hover) { .guide-prods a:hover { transform: translateY(-3px); border-color: var(--violet-300); box-shadow: var(--shadow); } }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   5 · ENLACES RELACIONADOS Y CIERRE
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.guide-rel { margin-top: clamp(26px, 3.4vw, 40px); padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--violet-100); border-radius: 26px; background: var(--card); box-shadow: var(--shadow-sm); }
.guide-rel h2 { color: var(--ink); font-family: "Fredoka", sans-serif; font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; }
.guide-rel ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding: 0; list-style: none; }
.guide-rel a { min-height: 44px; padding: 9px 17px; display: inline-flex; align-items: center;
  border: 1px solid var(--violet-200); border-radius: 999px; background: var(--violet-50); color: var(--violet-700);
  font-size: var(--fs-md); font-weight: 800; transition: background var(--t-pop) var(--ease-out), border-color var(--t-pop) var(--ease-out); }
.guide-rel a:hover { border-color: var(--violet-400); background: var(--violet-100); }

.guide-cta { position: relative; overflow: clip; margin-top: clamp(26px, 3.4vw, 40px);
  padding: clamp(30px, 4.6vw, 58px); border-radius: 32px; color: var(--violet-200);
  background: radial-gradient(680px 320px at 12% 0%, color-mix(in srgb, var(--violet-600) 55%, transparent) 0%, transparent 62%), var(--violet-900); }
.guide-cta h2 { color: var(--card); font-family: "Fredoka", sans-serif;
  font-size: clamp(26px, 3.2vw, 42px); font-weight: 600; line-height: 1.1; text-wrap: balance; }
.guide-cta > p { max-width: 54ch; margin-top: 11px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; }
.guide-cta > div { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.guide-btn { min-height: 50px; padding: 12px 22px; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; border: 1px solid color-mix(in srgb, var(--card) 30%, transparent); border-radius: 999px;
  color: var(--card); font-weight: 900;
  transition: transform var(--t-pop) var(--ease-out), background var(--t-pop) var(--ease-out), border-color var(--t-pop) var(--ease-out); }
.guide-btn:hover { background: color-mix(in srgb, var(--card) 14%, transparent); transform: translateY(-2px); }
.guide-btn--primary { border-color: var(--card); background: var(--card); color: var(--violet-700); }
.guide-btn--primary:hover { background: var(--card); border-color: var(--card); }

/* Foco visible en todo lo interactivo (WCAG 2.2 AA). */
.guide-nav a:focus-visible, .guide-menu summary:focus-visible, .guide-crumb a:focus-visible,
.guide-peek a:focus-visible, .guide-toc a:focus-visible, .guide-list a:focus-visible,
.guide-find:focus-visible, .guide-acct:focus-visible, .guide-order:focus-visible,
.guide-idea-prods a:focus-visible, .guide-posts a:focus-visible, .guide-prods a:focus-visible,
.guide-rel a:focus-visible, .guide-btn:focus-visible, .guide-menu-panel a:focus-visible {
  outline: 3px solid var(--violet-600); outline-offset: 3px; border-radius: 8px; }
.guide-cta .guide-btn:focus-visible { outline-color: var(--card); }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   6 · MOVIMIENTO — revelado por scroll SIN JavaScript
   `animation-timeline: view()` corre fuera del hilo principal. Donde no existe (Firefox hoy) no
   pasa nada: el contenido se ve fijo, que es el estado correcto en reposo.
   ⚠️ Se anima `translate`, no `transform`: un `transform` que termina en `none` con `fill: both`
   deja una matriz IDENTIDAD persistente que crea contexto de apilamiento (@rules/frontend.md).
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@keyframes guideRise { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* `both` a propósito (Tanda 4): con una línea de tiempo de scroll el relleno sostiene el estado antes y
       después del tramo visible; `translate` (no `transform`) no deja matriz identidad. */
    .guide-rv { animation: guideRise linear both; animation-timeline: view();
      animation-range: entry 2% cover 20%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .guide-logo, .guide-order, .guide-peek a, .guide-posts a, .guide-prods a, .guide-rel a,
  .guide-idea-prods a, .guide-btn, .guide-nav, .guide-nav-links a, .guide-toc a { transition: none; }
  .guide-peek li:hover a, .guide-posts a:hover, .guide-prods a:hover, .guide-btn:hover { transform: none; }
  .guide-body { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   7 · RESPONSIVE — tiers de la web pública: móvil ≤720 · tablet 721-900 · laptop ≥901
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .guide-nav-links { display: none; }
  .guide-menu { display: block; }
  .guide-nav { gap: 10px; padding-inline: 16px; justify-content: space-between; }
  .guide-nav-act { gap: 6px; }
}
@media (max-width: 720px) {
  .guide-wrap { width: min(100% - 32px, 650px); }
  .guide-logo img { height: 46px; }
  .guide-hero-band { padding-top: calc(30px + 72px); }
  .guide-crumb { margin-bottom: 16px; }
  .guide-hero-doodle { display: none; }
  .guide-peek { gap: 9px; margin-top: 24px; }
  .guide-peek li { width: calc(33.333% - 6px); }
  /* Tres en una fila limpia. La cuarta caía sola en una segunda fila y parecía un descuadre; es
     decoración (esos mismos diseños están enlazados en el cuerpo), así que no se pierde nada. */
  .guide-peek li:nth-child(4) { display: none; }
  .guide-ideas { padding-left: 0; }
  /* ⚠️ Aquí el número deja de ser absoluto y pasa a ser un ítem más de la tarjeta; en una idea CON
     FOTO eso lo convierte en un ítem del grid y, al no tener área nombrada, el auto-placement lo
     mandaba al FINAL (el «1» salía debajo de los precios, medido en pantalla a 390px). Por eso la
     variante con foto declara su fila propia: foto, número, título, texto y precios. */
  .guide-idea::before { position: static; margin-bottom: 12px; }
  .guide-idea--foto { grid-template-areas: 'foto' 'num' 'tit' 'txt' 'prod'; }
  .guide-idea--foto::before { grid-area: num; margin-bottom: 2px; }
  .guide-cta { border-radius: 26px; }
  .guide-cta > div { flex-direction: column; }
}
/* Móvil compacto: DOS columnas de diseños. Con el `auto-fill` a 172px, a 390px cae a una sola
   columna y seis diseños se vuelven 1800px de scroll — lo contrario de una página que se ojea. */
@media (max-width: 560px) {
  .guide-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .guide-prods a { padding: 8px; border-radius: 14px; }
  .guide-prods img { border-radius: 10px; margin-bottom: 6px; }
  .guide-sec--prods { padding: 20px 16px; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
   8 · CABECERA MÓVIL ÚNICA (2026-09-18) — espejo EXACTO del bloque «CABECERA MÓVIL ÚNICA» de
   posible-pedido.css. Jean: «en versión mobile el header tiene diferentes diseños por cada
   página: en tienda, home, detalle de producto los iconos cambian; debe ser consistente el
   diseño del header». Estas 30 páginas no pueden cargar el motor de la tienda (~200 KB gz
   arruinarían su LCP, que es su razón de ser), así que la cabecera se espeja a mano: tocar una
   = tocar la otra. El canon es la cabecera de la TIENDA que Jean aprobó en su mock (ronda 6):
   banda BLANCA a todo el ancho, 64px, sin sombra arriba, rejilla hamburguesa | logo | acciones,
   iconos de trazo de 25px en `--hdr-ic` (token de home.css, que estas páginas SÍ cargan) y el
   contador del carrito del mismo tono. La cuenta se va al menú de la hamburguesa, como en el
   resto de la web: en el header móvil solo viven lupa y carrito.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .guide-body .guide-nav {
    --hdr-side: 92px;   /* 44 + 4 + 44 = lupa + carrito; el logo queda centrado en la PÁGINA */
    display: grid; grid-template-columns: var(--hdr-side) minmax(0, 1fr) var(--hdr-side);
    align-items: center; gap: 4px; justify-content: initial;
    min-height: 64px; padding: 6px var(--pp-gut, 12px);   /* margen lateral común de la web pública (home.css) */
    background: var(--card); border-bottom: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 6px 20px -14px rgba(45,23,82,.55); transition: box-shadow var(--t-tr) var(--ease-out);
  }
  /* `.is-top` lo pone guia.js arriba del todo; es el espejo de `.is-scrolled` al revés (el estado
     por defecto es CON sombra, para que un fallo del script nunca deje la barra sin separar). */
  .guide-body .guide-nav.is-top { background: var(--card); box-shadow: none; padding-top: 6px; padding-bottom: 6px; }
  /* Simetría medida sobre el DIBUJO (espejo de la cabecera de la tienda): las rayas y el carrito caen en
     el margen lateral; cada botón conserva su área y se corre hacia fuera su aire interno. */
  .guide-body .guide-nav .guide-menu > summary { margin-left: calc((40px - 24px) / -2 - 3px); }   /* 8 de aire + 3 del trazo (las rayas van de x=4 a 20 con punta redonda) */
  .guide-body .guide-nav .guide-nav-act > :last-child { margin-right: calc((44px - 25px) / -2); }
  .guide-body .guide-nav .guide-menu { display: block; grid-column: 1; grid-row: 1; justify-self: start; }
  .guide-body .guide-nav .guide-menu > summary { width: 40px; height: 40px; border-radius: 12px; }
  .guide-body .guide-nav .guide-logo { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; padding: 0; justify-content: center; }
  .guide-body .guide-nav .guide-logo img { display: block; height: 42px; max-height: 42px; max-width: 100%; margin: 0 auto; }
  .guide-body .guide-nav .guide-nav-act { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
  .guide-body .guide-nav .guide-acct { display: none; }   /* vive en el menú de la hamburguesa */
  .guide-body .guide-nav .guide-find,
  .guide-body .guide-nav .guide-order { display: inline-grid; width: 44px; height: 44px; border-radius: 50%; background: none; color: var(--hdr-ic); box-shadow: none; }
  .guide-body .guide-nav .guide-find svg,
  .guide-body .guide-nav .guide-order svg { width: 25px; height: 25px; color: var(--hdr-ic); }
  .guide-body .guide-nav .guide-find:hover,
  .guide-body .guide-nav .guide-order:hover { background: var(--fill-soft); color: var(--hdr-ic); transform: none; box-shadow: none; }
  .guide-body .guide-nav .guide-cart-n { top: -1px; right: -1px; min-width: 21px; height: 21px; padding: 0 5px;
    border: 0; background: var(--hdr-count); color: var(--card); font: 600 11.5px/1 "Nunito Sans", sans-serif; }
  /* El hero empieza donde termina la cabecera: 64 + su aire propio (antes reservaba los 72 del
     header viejo, que era 6px más alto y llevaba su propio padding). */
  .guide-hero-band { padding-top: calc(30px + 64px); }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   9 · BLOG — interfaz de publicación (Jean 2026-09-21: «replicar el estilo de Medium para la
   sección de blog, no solo texto para cansar al lector» + «quita el uso de morado, no es
   necesario que todo sea morado: iconos, fondo de los números»)

   Alcance: SOLO el blog (`.guide-body--blog` = índice + artículos). Las 22 landings de VENTA
   conservan su lenguaje violeta — ahí el acento vende; en una publicación, distrae.
   Qué cambia y por qué:
   · El violeta deja de ser decoración y queda para los ENLACES. Los números de idea eran globos
     con gradiente y sombra, las pastillas de producto violeta sobre violeta, los separadores
     lavanda y hasta el panel de preguntas iba en crema con filo dorado: cinco acentos compitiendo
     con el texto, que es lo único que la lectora vino a leer.
   · Las ideas salen de su tarjeta. Una caja con borde, radio y sombra por idea convierte el
     artículo en una lista de fichas; en una publicación el separador es aire y una línea de pelo.
   · El índice pasa de rejilla de dos tarjetas a FEED vertical con miniatura. Ver `.guide-feed`.
   Los hairlines se derivan de `--ink` con `color-mix` (nada de hex nuevo, @rules/diseno.md).
   ══════════════════════════════════════════════════════════════════════════════════════════ */
/* Fondo limpio: el degradado lavanda del resto de páginas tiñe la lectura y es justo el «todo
   morado» que Jean pidió quitar. Aquí manda el papel blanco. */
.guide-body--blog { background: var(--card);
  --blog-line: color-mix(in srgb, var(--ink) 11%, transparent);
  --blog-line-fuerte: color-mix(in srgb, var(--ink) 20%, transparent);
  --blog-tenue: color-mix(in srgb, var(--ink) 4%, transparent); }

/* ── Índice: feed vertical. Cada artículo ocupa la columna entera, con su miniatura a la derecha y
   su meta debajo. ⚠️ El ítem NO se mueve al pasar el cursor (solo se subraya el título), así que
   aquí no hace falta franja anti-parpadeo: sin desplazamiento no hay borde que se escape. */
.guide-feed { margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; list-style: none; }
.guide-fitem + .guide-fitem { border-top: 1px solid var(--blog-line); }
.guide-flink { display: grid; grid-template-columns: minmax(0, 1fr) clamp(104px, 12vw, 148px);
  gap: clamp(18px, 2.6vw, 34px); align-items: start; padding: clamp(22px, 3vw, 34px) 0; color: inherit; }
.guide-ftxt { min-width: 0; }
.guide-ftxt h2 { color: var(--ink); font-family: "Fredoka", sans-serif;
  font-size: clamp(21px, 2.1vw, 29px); font-weight: 600; line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; }
.guide-flink:hover h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.guide-ftxt > p { margin-top: 9px; color: var(--ink-2); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.62;
  /* tres líneas: el extracto orienta, no sustituye al artículo (y así las entradas miden parecido) */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.guide-fmeta { margin-top: 12px !important; color: var(--muted); font-size: var(--fs-md); font-weight: 700;
  -webkit-line-clamp: none; display: block; }
.guide-ffoto { display: block; border-radius: 10px; overflow: clip; background: var(--blog-tenue); }
.guide-ffoto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 560px) {
  .guide-flink { grid-template-columns: minmax(0, 1fr) clamp(84px, 24vw, 104px); gap: 14px; }
  .guide-ftxt > p { -webkit-line-clamp: 2; }
}

/* ── Portada del artículo: sin la banda lavanda ni el garabato. El titular se sostiene solo. */
.guide-body--blog .guide-hero-band { background: none; padding-bottom: clamp(20px, 2.6vw, 32px); }
.guide-body--blog .guide-hero-doodle { display: none; }

/* ── Ideas: fuera de la caja. El número deja de ser un globo violeta y pasa a ser un rótulo. */
.guide-body--art .guide-ideas { padding-left: 0; gap: 0; }
.guide-body--art .guide-idea { padding: clamp(26px, 3.4vw, 40px) 0 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; }
.guide-body--art .guide-idea + .guide-idea { margin-top: clamp(26px, 3.4vw, 40px); border-top: 1px solid var(--blog-line); }
/* ⚠️ Pasa de `absolute` a `static`, así que dentro de la rejilla de una idea CON foto necesita su
   propia área declarada o el auto-placement lo manda al final (bajo los precios). */
.guide-body--art .guide-idea::before { content: "Idea " counter(idea); position: static;
  width: auto; height: auto; margin: 0 0 10px; display: block; grid-area: num;
  background: none; box-shadow: none; color: var(--muted);
  font: 800 var(--fs-sm)/1 "Nunito Sans", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.guide-body--art .guide-idea--foto { grid-template-areas: 'num foto' 'tit foto' 'txt foto' 'prod prod'; }
.guide-body--art .guide-idea-foto { background: var(--blog-tenue); box-shadow: none; }
/* la foto pesa más que una miniatura: es la mitad del «no solo texto» */
.guide-body--art .guide-idea--foto { grid-template-columns: minmax(0, 1fr) clamp(150px, 17vw, 228px); }
@media (max-width: 640px) {
  .guide-body--art .guide-idea--foto { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'foto' 'num' 'tit' 'txt' 'prod'; }
}

/* ── Pastillas de diseño: neutras. El precio y el nombre ya dicen lo que son. */
.guide-body--blog .guide-idea-prods a { border-color: var(--blog-line-fuerte); background: transparent; color: var(--ink); }
.guide-body--blog .guide-idea-prods a:hover { background: var(--blog-tenue); border-color: var(--ink-2); }

/* ── Separadores, cita, preguntas y panel de diseños: todo en neutro. */
.guide-body--blog .guide-sec + .guide-sec { border-top-color: var(--blog-line); }
.guide-body--blog .guide-cita { border-left-color: var(--blog-line-fuerte); }
.guide-body--blog .guide-sec--prods { border-color: var(--blog-line); background: var(--blog-tenue); }
.guide-body--blog .guide-faqs { border-color: var(--blog-line); background: transparent; }
.guide-body--blog .guide-faq { border-top-color: var(--blog-line); }
.guide-body--blog .guide-list li { border-color: var(--blog-line); }
.guide-body--blog .guide-peek a { border-color: var(--blog-line); background: var(--blog-tenue); }
/* Índice lateral: la marca de «estás aquí» se hace con TINTA y peso, no con color. */
@media (min-width: 1180px) {
  .guide-body--blog .guide-toc ol { border-left-color: var(--blog-line); }
  .guide-body--blog .guide-toc a:hover { color: var(--ink); }
  .guide-body--blog .guide-toc a.is-here { color: var(--ink); border-left-color: var(--ink); }
}
/* Progreso de lectura: una línea de tinta, no el gradiente de marca. */
.guide-body--blog .guide-prog { background: var(--ink); }

/* ≤620 home.css reserva 72 px en el <body> para la cabecera fija de la PORTADA, y el hero de estas
   páginas ya reserva la suya (64 + aire): sumadas dejaban ~100 px vacíos antes de las migas
   (revisión GPT-6 Astra 2026-09-29, medido: 102 px). Aquí manda la reserva del hero. */
@media (max-width: 620px) {
  html body.guide-body { padding-top: 0; }
}