/* Guías Gentium. Pensado primero para celular.
   Tipografía: Archivo (Omnibus-Type, Argentina). Colores de la marca: naranja, negro, gris y blanco. */

@font-face {
  font-family: "Archivo";
  src: url("/fuentes/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fuentes/archivo-latin-standard-italic.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap;
}

:root {
  --naranja: #CA5B26;
  --naranja-osc: #A9451C;
  --tinta: #2B2724;        /* la tinta de las guías: marrón muy oscuro, no negro */
  --tinta-2: #5A534D;
  --tinta-3: #8A8279;
  --linea: #D9D0C2;
  --linea-2: #C4BAAA;
  --gris: #E4DCCF;
  --papel: #F5EFE8;        /* el color de las tapas */
  --blanco: #FFFFFF;
  --rojo: #B3261E;

  --letra: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --titulo: "Lora", Georgia, "Times New Roman", serif;
  --titulo-peso: 500;
  --titulo-espacio: -.022em;
  --fondo: #E6DED1;        /* la mesa: un tono más oscuro que las hojas */
  --escena: transparent;
  --cab: 60px;
  --margen: 20px;
  --suave: cubic-bezier(.22,.8,.26,1);
  --radio: 12px;
}

@font-face {
  font-family: "Lora";
  src: url("/fuentes/lora-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/fuentes/lora-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

/* Versión de comparación ("?tema=blanco"): títulos en Archivo sobre blanco. */
.tema-blanco {
  --titulo: var(--letra);
  --titulo-peso: 620;
  --titulo-espacio: -.04em;
  --fondo: #FFFFFF;
  --escena: #F1EBE2;
  --gris: #F4F1EC;
  --linea: #E6E1D9;
  --linea-2: #D3CCC0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--fondo) url("/img/papel.webp") 0 0 / 128px 128px; color: var(--tinta);
  font: 400 17px/1.5 var(--letra); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
s { text-decoration-thickness: 1.5px; }
strong { font-weight: 600; }
:focus-visible { outline: 2.5px solid var(--naranja); outline-offset: 3px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nobr { white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -70px; z-index: 100; background: var(--naranja); color: #fff; padding: 12px 16px; border-radius: var(--radio); }
.saltar:focus { top: 12px; }

.ancho { display: block; width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--margen); }

h1, h2, h3 { font-weight: 620; letter-spacing: -.03em; text-wrap: balance; }
h1, h2 { font-family: var(--titulo); font-weight: var(--titulo-peso); letter-spacing: var(--titulo-espacio); }
h1 { font-size: clamp(2.05rem, 9vw, 5.1rem); line-height: 1.04; }
h1 .acento { font-style: italic; }
h2 { font-size: clamp(1.9rem, 7.6vw, 3.2rem); line-height: 1.06; }
h3 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -.015em; }
.tema-blanco body { background-image: none; }
.tema-blanco h1 { font-size: clamp(2rem, 8.7vw, 4.9rem); line-height: 1; }
.tema-blanco h1 .acento { font-style: normal; }
.tema-blanco h2 { line-height: 1.02; }
.acento { color: var(--naranja); }

/* ── Botones ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border-radius: var(--radio);
  font: 600 16px/1 var(--letra); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: background-color .18s, color .18s, border-color .18s, transform .15s var(--suave);
}
.btn:active { transform: translateY(1px); }
.btn--grande { min-height: 58px; padding: 0 30px; font-size: 17px; }
.btn--chico { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--ancho { width: 100%; }
.btn--principal { background: var(--naranja); color: #fff; }
.btn--principal:hover { background: var(--naranja-osc); }
.btn--linea { background: var(--papel); color: var(--naranja-osc); box-shadow: inset 0 0 0 1.5px var(--naranja); }
.btn--linea:hover { background: var(--naranja); color: #fff; }
.btn--blanco { background: #fff; color: var(--naranja-osc); }
.btn--blanco:hover { background: var(--papel); }
.btn[disabled] { opacity: .8; cursor: progress; }

/* ── Navbar: logo, respaldo y comprar ──── */
.cab { position: sticky; top: 0; z-index: 40; background: rgba(230,222,209,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.tema-blanco .cab { background: rgba(255,255,255,.94); }
.cab__in { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; min-height: var(--cab); }
.cab__logo img { height: 34px; width: auto; }
.cab__comprar { grid-column: 2; grid-row: 1; }
.cab__respaldo {
  grid-column: 1 / -1; overflow: hidden; max-height: 60px; padding: 8px 0 10px; border-top: 1px solid var(--linea);
  font-size: 12px; line-height: 1.38; color: var(--tinta-2); text-wrap: balance;
  transition: max-height .35s var(--suave), padding .35s var(--suave), opacity .25s, border-color .25s;
}
.cab__respaldo strong { color: var(--tinta); }
.cab__respaldo span { white-space: nowrap; }
.cab.es-compacta .cab__respaldo { max-height: 0; padding-block: 0; opacity: 0; border-color: transparent; }

/* ── Portada ───────────────────────────── */
.portada { padding: 26px 0 0; }
.portada__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.renglon { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.renglon > span { display: block; }
.bajada { margin-top: 14px; font-size: 1.06rem; line-height: 1.45; color: var(--tinta-2); max-width: 34ch; }

/* escena con las dos guías en 3D: objetos finos, con canto de papel */
.escena3d {
  --g-w: 42vw;
  position: relative; height: calc(var(--g-w) * 1.4143 + 92px);
  margin-inline: calc(var(--margen) * -1); background: var(--escena); overflow: hidden;
}
.g3d {
  position: absolute; left: 50%; top: 30px; width: var(--g-w); max-width: 270px; aspect-ratio: 700 / 990;
  margin-left: calc(min(var(--g-w), 270px) / -2); perspective: 1300px; will-change: transform;
  transform: translate3d(-36%, 6%, 0);
}
.g3d--2 { transform: translate3d(44%, -6%, 0); }
.g3d__obj {
  position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform;
  transform: translateZ(40px) rotateX(9deg) rotateY(-30deg) rotateZ(-4deg);
}
.g3d--2 .g3d__obj { transform: translateZ(-70px) rotateX(7deg) rotateY(-22deg) rotateZ(5deg); }
.g3d__obj > span { position: absolute; display: block; }
/* Cada guía es un cuadernillo anillado: tapa, hojas y espiral al costado.
   La tapa gira sobre el anillado y se entreabre (--ab va de 0 a 1). */
:root { --espiral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' preserveAspectRatio='none'%3E%3Crect x='12.6' y='5.2' width='4.6' height='5.6' rx='1.6' fill='rgba(74,52,34,.3)'/%3E%3Cpath d='M15.2 5.7H5.3a2.3 2.3 0 0 0 0 4.6h9.9' fill='none' stroke='%238B8076' stroke-width='1.75' stroke-linecap='round'/%3E%3Cpath d='M14.8 5.25H5.4a2.5 2.5 0 0 0-2 1' fill='none' stroke='%23E2DAD0' stroke-width='.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.g3d__hoja {
  inset: 0; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(74,52,34,.18), 0 1px 2px rgba(74,52,34,.1);
}
.g3d__hoja img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.g3d__hoja--3 { transform: translate3d(1.5%, 1%, -6px); box-shadow: 0 0 0 .5px rgba(74,52,34,.18), 0 14px 26px -12px rgba(74,52,34,.45); }
.g3d__hoja--2 { transform: translate3d(.7%, .5%, -3px); }
.g3d__hoja--2::after { /* sombra que deja la tapa al levantarse */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(74,52,34,.3) 0, rgba(74,52,34,.08) 30%, rgba(74,52,34,0) 70%); opacity: calc(var(--ab, 0) * .8);
}
.g3d__hoja--1 {
  background: var(--papel); transform-origin: 0 50%;
  transform: rotateY(calc(var(--ab, 0) * var(--abre, -16deg)));
  box-shadow: 0 0 0 .5px rgba(74,52,34,.2), 0 2px 5px -2px rgba(74,52,34,.3);
}
.g3d__hoja--1::after { /* brillo suave del papel, acompaña el giro */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 66%);
  background-size: 260% 100%; background-position: var(--luz, 80%) 0; opacity: .5;
}
.g3d__espiral, .libro__espiral {
  position: absolute; left: -3.2%; width: 8.4%; top: 2.4%; bottom: 2.4%; pointer-events: none;
  background: var(--espiral) 0 0 / 100% calc(100% / 24) repeat-y;
}
.g3d__espiral { transform: translateZ(3px); }
.libro__espiral { z-index: 60; }
.g3d__sombra { inset: 6% 4% -1% 6%; transform: translate3d(3%, 5%, -34px); background: rgba(74,52,34,.3); filter: blur(18px); border-radius: 4px; }
.g3d__pie {
  position: absolute; left: -2%; right: -2%; top: calc(100% + 16px); text-align: center; pointer-events: none;
  font-size: 12.5px; line-height: 1.3; color: var(--tinta-2); opacity: 0;
}
.g3d__pie strong { display: block; color: var(--tinta); font-size: 13px; letter-spacing: -.01em; text-wrap: balance; margin-bottom: 2px; }
.g3d:focus-visible { outline: none; }
.g3d:focus-visible .g3d__hoja--1 { outline: 3px solid var(--naranja); outline-offset: 3px; }

.oferta__que { font: 500 15px/1.2 var(--letra); color: var(--tinta-2); }
.oferta__monto { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.oferta__precio { font: 640 2.7rem/1 var(--letra); letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums; }
.oferta__antes { color: var(--tinta-3); font-size: 1.15rem; }
.oferta__ahorro { margin-top: 6px; font: 600 15px/1.2 var(--letra); color: var(--naranja-osc); }
.portada__acciones { margin-top: 20px; }
.portada__acciones .btn { width: 100%; }
.enlace { display: flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 4px; font: 600 15.5px/1 var(--letra); text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.enlace:hover { text-decoration-color: var(--naranja); }

.portada__notas { margin-top: 22px; }
.notas { border-top: 1px solid var(--linea-2); }
.notas li { padding: 15px 0; border-bottom: 1px solid var(--linea); font-size: 15px; line-height: 1.4; color: var(--tinta-2); }
.notas strong { display: block; font-size: 16px; color: var(--tinta); letter-spacing: -.01em; }

/* ── Guías ─────────────────────────────── */
.guia { padding: 64px 0 60px; }
.guia__n { font: 600 15px/1.2 var(--letra); color: var(--naranja-osc); margin-bottom: 12px; }
.guia__para { margin-top: 12px; font-size: 1.08rem; line-height: 1.4; color: var(--tinta-2); max-width: 36ch; }

/* librito */
.librito { margin-top: 30px; }
.librito__escena {
  --pag: min(72vw, 330px);
  display: grid; place-items: center; padding: 36px 0 46px; background: var(--gris);
  overflow: hidden; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.librito__escena:focus-visible { outline-offset: -3px; }
.libro { position: relative; width: var(--pag); aspect-ratio: 1100 / 1556; container-type: inline-size; transition: transform 1s var(--suave); }
.libro__espera { position: absolute; inset: 0; background: #ECEAE6; }
.libro__sombra { position: absolute; inset: 0; background: #fff; box-shadow: 0 0 0 .5px rgba(74,52,34,.16), 0 30px 44px -26px rgba(74,52,34,.5), 0 8px 16px -10px rgba(74,52,34,.22); }
.libro__sombra--izq { left: -100%; right: 100%; opacity: 0; transition: opacity .5s .45s; }
.libro__base { position: absolute; inset: 0; background: #fff; overflow: hidden; }
.hoja3d {
  position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d;
  transform: perspective(2600px) rotateY(0deg);
  transition: transform 1.05s cubic-bezier(.42,.04,.2,1);
}
.hoja3d.es-pasada { transform: perspective(2600px) rotateY(-180deg); }
.hoja3d.es-pista { transform: perspective(2600px) rotateY(-26deg); transition-duration: .55s; }
.libro--simple .hoja3d.es-oculta { visibility: hidden; }
.cara { position: absolute; inset: 0; background: #fff; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cara--d { transform: rotateY(180deg); }
.cara img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.cara::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 .5px rgba(74,52,34,.14); }
.libro--doble .cara--f::after { background: linear-gradient(90deg, rgba(74,52,34,.1) 0, rgba(74,52,34,0) 4%); }
.libro--doble .cara--d::after { background: linear-gradient(270deg, rgba(74,52,34,.1) 0, rgba(74,52,34,0) 4%); }

/* interior de tapa y página final (los tamaños siguen al ancho de la página) */
.guarda, .fin { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 10cqw 9cqw; }
.guarda { background: var(--papel); justify-content: space-between; }
.guarda p { font: 500 4.2cqw/1.3 var(--letra); color: var(--tinta-2); }
.guarda strong { display: block; font: 620 8.4cqw/1.02 var(--letra); letter-spacing: -.03em; color: var(--tinta); margin-bottom: 2.4cqw; }
.guarda img { width: 38cqw; height: auto; }
.fin { align-items: center; justify-content: center; text-align: center; gap: 3.2cqw; background: #fff; }
.fin__pila { position: relative; width: 34cqw; aspect-ratio: 220 / 311; margin-bottom: 3cqw; }
.fin__pila img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 1px 2px rgba(74,52,34,.14), 0 8px 18px -8px rgba(74,52,34,.35); }
.fin__pila img:nth-child(1) { transform: rotate(-9deg) translateX(-20%); }
.fin__pila img:nth-child(2) { transform: rotate(7deg) translateX(20%); }
.fin__pila img:nth-child(3) { transform: rotate(-1deg); }
.fin__n { font: 640 12cqw/.95 var(--letra); letter-spacing: -.045em; }
.fin__t { font: 400 4.6cqw/1.3 var(--letra); color: var(--tinta-2); margin-top: -1.4cqw; }
.fin__precio { font: 640 9cqw/1 var(--letra); letter-spacing: -.04em; margin-top: 3cqw; }
.fin .btn { min-height: 0; height: 15cqw; max-height: 56px; padding: 0 7cqw; font-size: clamp(14px, 4.8cqw, 17px); }
.fin__titulo { font: 620 7.4cqw/1.04 var(--letra); letter-spacing: -.03em; text-wrap: balance; }
.fin--izq { background: var(--gris); }
.fin--izq .fin__pila { width: 44cqw; }

.librito { position: relative; }
.librito__lupa {
  position: absolute; right: 14px; top: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--papel); color: var(--naranja-osc);
  box-shadow: 0 0 0 1px var(--linea-2), 0 6px 14px -8px rgba(74,52,34,.4); transition: background-color .18s, color .18s;
}
.librito__lupa:hover { background: var(--naranja); color: #fff; }
.librito__lupa svg, .lupa__btn svg, .cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.librito__donde { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; padding-top: 14px; font-size: 15px; line-height: 1.3; text-align: center; }
.librito__donde strong { letter-spacing: -.01em; }
.librito__donde span { font-size: 13.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.librito__ayuda { flex-basis: 100%; }
.lupa__flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.guia__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 40px; }
.guia__resumen { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; text-wrap: balance; }
.trae { margin-top: 22px; border-top: 1px solid var(--linea-2); }
.trae li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--linea); font-size: 16px; line-height: 1.4; }
.trae li::before {
  content: ""; position: absolute; left: 3px; top: 18px; width: 14px; height: 7px;
  border-left: 2px solid var(--naranja); border-bottom: 2px solid var(--naranja); transform: rotate(-45deg);
}
.trae--simple li { color: var(--tinta-2); }

.ficha { border-top: 1px solid var(--linea-2); }
.ficha > div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: 15.5px; line-height: 1.35; }
.ficha dt { color: var(--tinta-3); }

.compra { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.precio { font: 640 2.1rem/1 var(--letra); letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums; }
.sugerencia { display: block; min-height: 44px; margin-top: 8px; font-size: 15px; color: var(--tinta-2); text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.sugerencia strong { color: var(--naranja-osc); }
.sugerencia:hover { text-decoration-color: var(--naranja); }

/* ── Criterio de lectura ───────────────── */
.criterio { padding: 64px 0; }
.criterio__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.criterio h2 { font-size: clamp(2.1rem, 9vw, 3.9rem); line-height: 1.04; }
.criterio__bajada { margin-top: 16px; font-size: 1.08rem; line-height: 1.45; color: var(--tinta-2); max-width: 34ch; }
.criterio__lista { border-top: 1px solid var(--linea-2); }
.criterio__lista li { display: grid; grid-template-columns: 40px 1fr; padding: 18px 0; border-bottom: 1px solid var(--linea-2); }
.criterio__n { grid-row: span 2; font: 640 1.5rem/1.15 var(--letra); letter-spacing: -.03em; color: var(--naranja); }
.criterio__lista p { margin-top: 4px; font-size: 15.5px; line-height: 1.45; color: var(--tinta-2); }

/* ── Las dos juntas ────────────────────── */
.combo { background: var(--naranja); color: #fff; padding: 60px 0 0; overflow: hidden; }
.combo__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; }
.combo__n { font: 600 15px/1.2 var(--letra); margin-bottom: 12px; color: rgba(255,255,255,.9); }
.combo h2 { font-size: clamp(2.2rem, 9.4vw, 3.9rem); line-height: .98; letter-spacing: -.04em; }
.combo__bajada { margin: 16px 0 26px; font-size: 1.1rem; line-height: 1.4; color: rgba(255,255,255,.95); max-width: 30ch; }
.combo .btn { width: 100%; }
.combo__nota { margin-top: 14px; font-size: 14.5px; color: rgba(255,255,255,.9); }
.combo__tapas { display: flex; justify-content: center; margin-bottom: -16%; }
.combo__tapas img { width: 42%; max-width: 260px; box-shadow: 0 26px 46px -16px rgba(60,20,0,.75), 0 2px 4px rgba(60,20,0,.25); -webkit-user-drag: none; user-select: none; }
.combo__tapas img:first-child { transform: rotate(-5deg) translateX(7%); z-index: 1; }
.combo__tapas img:last-child { transform: rotate(5deg) translate(-7%, 6%); }

/* ── Autor ─────────────────────────────── */
.autor { padding: 64px 0; }
.autor__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.autor__quien { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.autor__foto { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; }
.autor__quien .guia__n { margin-bottom: 6px; }
.autor__rol { margin-top: 8px; font-size: 1.05rem; color: var(--tinta-2); }
.ficha--autor > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; font-size: 16px; line-height: 1.45; }
.ficha--autor dt { font-size: 14px; font-weight: 600; color: var(--naranja-osc); }

/* ── Pasos ─────────────────────────────── */
.pasos { padding: 60px 0; }
.pasos__lista { margin-top: 26px; border-top: 1px solid var(--linea-2); }
.pasos__lista li { display: grid; grid-template-columns: 44px 1fr; padding: 18px 0; border-bottom: 1px solid var(--linea-2); }
.pasos__n { grid-row: span 2; font: 640 1.5rem/1.15 var(--letra); letter-spacing: -.03em; color: var(--naranja); }
.pasos__lista p { color: var(--tinta-2); font-size: 15.5px; margin-top: 3px; }

/* ── Preguntas ─────────────────────────── */
.preguntas { padding: 64px 0; }
.preguntas__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.acordeon { border-top: 1px solid var(--linea-2); }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  position: relative; display: block; padding: 19px 44px 19px 0; min-height: 60px;
  font: 600 17px/1.3 var(--letra); letter-spacing: -.012em; cursor: pointer; list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::before, .acordeon summary::after {
  content: ""; position: absolute; right: 6px; top: 29px; width: 16px; height: 2px; background: var(--tinta);
  transition: transform .25s var(--suave), opacity .2s;
}
.acordeon summary::after { transform: rotate(90deg); }
.acordeon details[open] summary::after { transform: rotate(0deg); opacity: 0; }
.acordeon details p { padding: 0 20px 22px 0; color: var(--tinta-2); font-size: 16px; line-height: 1.5; max-width: 62ch; }
.acordeon details a, .inconveniente a { color: var(--naranja-osc); font-weight: 600; text-underline-offset: 4px; }

.cierre { padding: 44px 0 60px; }
.cierre__in { display: grid; gap: 18px; }
.cierre__texto { font: 500 1.5rem/1.15 var(--letra); letter-spacing: -.025em; }
.cierre__texto strong { font-weight: 640; }

/* ── Pie ───────────────────────────────── */
.pie { background: var(--gris); padding: 48px 0 116px; border-top: 1px solid var(--linea-2); }
.pie__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.pie__logo { width: 180px; }
.pie__respaldo { margin-top: 20px; font-size: 15px; line-height: 1.45; color: var(--tinta-2); max-width: 36ch; }
.pie__respaldo strong { color: var(--tinta); }
.pie__contacto { border-top: 1px solid var(--linea-2); }
.pie__contacto a { display: grid; grid-template-columns: 24px 92px 1fr; gap: 12px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--linea-2); font-size: 15px; text-decoration: none; transition: color .18s; }
.pie__contacto svg { width: 22px; height: 22px; fill: none; stroke: var(--naranja); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pie__contacto span { color: var(--tinta-3); }
.pie__contacto strong { font-weight: 500; }
.pie__contacto a:hover { color: var(--naranja-osc); }
.pie__legal { font-size: 13px; line-height: 1.6; color: var(--tinta-3); }

/* ── Barra fija de compra (celular) ────── */
.fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(245,239,232,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
  transform: translateY(110%); transition: transform .35s var(--suave);
}
.fija.es-visible { transform: none; }
.fija__in { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 560px; margin-inline: auto; }
.fija__texto { display: grid; }
.fija__que { font: 500 13px/1.2 var(--letra); color: var(--tinta-2); }
.fija__precio { font: 640 1.4rem/1.1 var(--letra); letter-spacing: -.04em; }
.fija__precio s { font: 400 13.5px/1 var(--letra); letter-spacing: 0; color: var(--tinta-3); margin-left: 4px; }
.fija .btn { min-width: 140px; }

/* ── Compra ────────────────────────────── */
.capa { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.capa[hidden], .lupa[hidden] { display: none; }
.capa__fondo { position: absolute; inset: 0; background: rgba(74,52,34,.5); opacity: 0; transition: opacity .28s; }
.hoja-compra {
  position: relative; width: 100%; max-width: 520px; max-height: 95dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--papel); border-radius: 22px 22px 0 0;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .36s var(--suave);
}
.capa.es-abierta .capa__fondo { opacity: 1; }
.capa.es-abierta .hoja-compra { transform: none; }
.hoja-compra__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hoja-compra__cab h2 { font-size: 1.7rem; }
.cerrar { width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; border-radius: var(--radio); }
.cerrar:hover { background: var(--gris); }

/* qué se lleva: tres tarjetas, una elegida.
   Cada guía se reconoce por su número y por el dibujo de su tapa (la mancha o la casa, el árbol y la persona). */
.opciones { display: grid; gap: 8px; margin-bottom: 20px; }
.opcion {
  position: relative; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 12px;
  min-height: 78px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #fff; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--linea); transition: box-shadow .18s, background-color .18s, opacity .18s;
}
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion__sena { position: relative; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }
.opcion__sena img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.opcion__sena--dos { display: grid; grid-template-rows: 1fr 1fr; }
.opcion__sena--dos img { height: 29px; }
.opcion__sena--dos img + img { border-top: 1px solid var(--linea); }
.opcion__texto { display: grid; gap: 2px; min-width: 0; }
.opcion__n { font: 600 12px/1.2 var(--letra); color: var(--naranja-osc); }
.opcion__nombre { font: 600 15px/1.2 var(--letra); letter-spacing: -.01em; }
.opcion__detalle { font: 400 13px/1.25 var(--letra); color: var(--tinta-2); }
.opcion__detalle--ahorro { color: var(--naranja-osc); font-weight: 600; }
.opcion__precio { font: 640 1.1rem/1 var(--letra); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opcion__tilde {
  position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--naranja);
  display: grid; place-items: center; transform: scale(0); transition: transform .2s var(--suave);
}
.opcion__tilde::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.opcion:has(input:checked) { background: #FFF7F1; box-shadow: inset 0 0 0 2px var(--naranja); }
.opcion:has(input:checked) .opcion__tilde { transform: none; }
.opcion:has(input:focus-visible) { outline: 2.5px solid var(--naranja); outline-offset: 2px; }
.llevas { margin: 16px 2px 10px; font-size: 14px; line-height: 1.35; color: var(--tinta-2); }
.llevas strong { color: var(--tinta); }

/* campos: grandes, de esquinas suaves y con la etiqueta flotante */
.campo { position: relative; margin-bottom: 12px; }
.campo input {
  width: 100%; height: 60px; padding: 24px 46px 8px 16px; border: 0; border-radius: 14px;
  background: #fff; color: var(--tinta); font: 400 17px/1.2 var(--letra);
  box-shadow: inset 0 0 0 1.5px var(--linea-2); transition: box-shadow .18s; -webkit-appearance: none; appearance: none;
}
.campo label {
  position: absolute; left: 16px; top: 19px; font: 400 17px/1.25 var(--letra); color: var(--tinta-3); pointer-events: none;
  transform-origin: 0 0; transition: transform .18s var(--suave), color .18s;
}
.campo input:focus + label, .campo input:not(:placeholder-shown) + label, .campo input:-webkit-autofill + label {
  transform: translateY(-10px) scale(.74); color: var(--tinta-2);
}
.campo input::placeholder { color: transparent; }
.campo input:focus::placeholder { color: #B3AA9F; }
.campo input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--naranja), 0 0 0 4px rgba(202,91,38,.16); }
.campo input:focus + label { color: var(--naranja-osc); }
.campo__ayuda { margin: 6px 4px 0; font-size: 13px; line-height: 1.35; color: var(--tinta-3); }
.campo__ayuda:empty { display: none; }
.campo::after { /* tilde cuando el dato está bien */
  content: ""; position: absolute; right: 18px; top: 22px; width: 15px; height: 8px;
  border-left: 2.2px solid #2F7D4F; border-bottom: 2.2px solid #2F7D4F; transform: rotate(-45deg) scale(0); transition: transform .2s var(--suave);
}
.campo.es-bien::after { transform: rotate(-45deg) scale(1); }
.campo.es-error input { box-shadow: inset 0 0 0 2px var(--rojo); }
.campo.es-error label { color: var(--rojo); }
.campo.es-error .campo__ayuda { color: var(--rojo); font-weight: 500; }

.aviso { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: #FBECEA; color: var(--rojo); font-size: 14.5px; line-height: 1.4; }
.seguro { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 13.5px; line-height: 1.4; color: var(--tinta-2); }
.seguro svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--tinta); stroke-width: 1.7; }
.inconveniente { margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--tinta-2); }
.giro { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; animation: giro .7s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ── Página ampliada ───────────────────── */
.lupa { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr auto; background: #E9E1D5 url("/img/papel.webp") 0 0 / 128px 128px; color: var(--tinta); }
.lupa__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 18px; padding-top: calc(8px + env(safe-area-inset-top)); }
.lupa__rotulo { font-size: 15px; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lupa__rotulo span { color: var(--tinta-3); margin-left: 10px; font-variant-numeric: tabular-nums; }
.lupa__botones { display: flex; flex: none; }
.lupa__btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radio); }
.lupa__btn:hover { background: rgba(74,52,34,.1); }
.lupa__pista { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.lupa__pista::-webkit-scrollbar { display: none; }
.lamina { flex: none; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: auto; display: grid; place-items: center; padding: 4px 12px 12px; -webkit-overflow-scrolling: touch; }
.lamina__papel { box-shadow: 0 0 0 .5px rgba(74,52,34,.16), 0 24px 40px -24px rgba(74,52,34,.45); position: relative; width: 100%; max-width: min(100%, calc((100dvh - 190px) * 1100 / 1556)); background: #fff; overflow: hidden; cursor: zoom-in; }
.lamina__papel img { width: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.lamina__papel::after { content: ""; position: absolute; inset: 0; }
.lamina.es-cerca { place-items: start; }
.lamina.es-cerca .lamina__papel { width: 230%; max-width: none; cursor: zoom-out; }
.lamina--fin { text-align: center; }
.lamina--fin .fin { position: static; background: none; gap: 14px; padding: 0; }
.lamina--fin .fin__pila { width: 130px; margin-bottom: 14px; }
.lamina--fin .fin__n { font-size: 2.6rem; }
.lamina--fin .fin__t { font-size: 1.05rem; color: var(--tinta-2); margin-top: -6px; }
.lupa__flecha { display: none; position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: var(--radio); background: var(--papel); color: var(--naranja-osc); box-shadow: 0 0 0 1px var(--linea-2); place-items: center; }
.lupa__flecha:hover { background: var(--naranja); color: #fff; }
.lupa__flecha--izq { left: 18px; } .lupa__flecha--der { right: 18px; }
.lupa__pie { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: center; }
.lupa__pie .btn { width: 100%; max-width: 420px; }

/* ── Apariciones ───────────────────────── */
.con-js .ver { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--suave), transform .6s var(--suave); }
.con-js .ver.es-vista { opacity: 1; transform: none; }

/* ── Pantallas anchas ──────────────────── */
@media (min-width: 640px) {
  :root { --margen: 32px; }
  .portada__acciones { display: flex; align-items: center; gap: 26px; }
  .portada__acciones .btn { width: auto; }
  .enlace { display: inline-flex; margin: 0; }
  .escena3d { --g-w: 240px; }
  .notas { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; border-top: 0; }
  .notas li { border-bottom: 0; border-top: 1px solid var(--linea-2); }
  .librito__escena { --pag: 340px; }
  .librito__lupa { right: 24px; top: 24px; }
  .guia__info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
  .combo .btn { width: auto; }
  .pasos__lista { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; border-top: 0; }
  .pasos__lista li { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--linea-2); padding: 18px 0 0; }
  .pasos__n { margin-bottom: 14px; }
  .cierre__in { grid-template-columns: 1fr auto; align-items: center; }
  .capa { align-items: center; }
  .hoja-compra { border-radius: 22px; padding: 22px 30px 28px; transform: translateY(20px); opacity: 0; transition: transform .3s var(--suave), opacity .3s; }
  .capa.es-abierta .hoja-compra { opacity: 1; }
}

@media (min-width: 900px) {
  html { scroll-padding-top: 96px; }
  .cab__in { grid-template-columns: auto 1fr auto; column-gap: 28px; }
  .cab__logo img { height: 46px; }
  .cab__comprar { grid-column: 3; }
  .cab__respaldo, .cab.es-compacta .cab__respaldo {
    grid-column: 2; grid-row: 1; max-height: none; opacity: 1; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--linea-2);
    font-size: 13.5px; line-height: 1.35; max-width: 46ch;
  }
  .cab__respaldo strong { display: block; }

  :root { --cab: 84px; }
  .portada { padding: 0; }
  .portada__fija { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--cab)); padding: 40px 0 34px; }
  .portada__in { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); grid-template-areas: "titulo escena" "compra escena"; column-gap: 40px; row-gap: 30px; align-items: center; }
  .portada__titulo { grid-area: titulo; align-self: end; }
  .portada__compra { grid-area: compra; align-self: start; }
  .escena3d { grid-area: escena; --g-w: clamp(200px, 17.4vw, 250px); --abre: -20deg; margin: 0; height: min(66vh, 620px); min-height: 480px; overflow: visible; background: none; }
  .escena3d::before { content: ""; position: absolute; inset: 0; background: var(--escena); }
  .g3d { top: calc(50% - var(--g-w) * .72); }
  .g3d__sombra { filter: blur(24px); }
  .g3d__pie { font-size: 14px; top: calc(100% + 22px); }
  .g3d__pie strong { font-size: 15px; }
  .bajada { font-size: 1.3rem; max-width: 34ch; margin-top: 24px; }
  .oferta__precio { font-size: 3.4rem; }
  .portada__notas { margin-top: 34px; }
  .notas li { padding: 18px 0 0; font-size: 16px; }
  .notas strong { font-size: 18px; margin-bottom: 2px; }

  .guia { padding: 110px 0 100px; }
  .guia__para { font-size: 1.3rem; }
  .librito { margin-top: 44px; }
  .librito__escena { --pag: min(34vw, 430px); padding: 56px 0 68px; }
  .libro--doble.es-abierto { transform: translateX(50%); }
  .libro--doble.es-abierto .libro__sombra--izq { opacity: 1; }
  .guia__info { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 88px; margin-top: 64px; }
  .guia__resumen { font-size: 1.75rem; line-height: 1.2; }
  .trae { margin-top: 30px; }

  .criterio { padding: 110px 0; }
  .criterio__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 88px; align-items: start; }
  .criterio__bajada { font-size: 1.3rem; }
  .criterio__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
  .criterio__lista li { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--linea-2); padding: 18px 0 30px; }
  .criterio__n { margin-bottom: 12px; }
  .combo { padding: 96px 0; }
  .combo__in { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; }
  .combo__tapas { margin-bottom: 0; }
  .combo__bajada { font-size: 1.3rem; }
  .autor, .preguntas { padding: 110px 0; }
  .autor__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .autor__quien { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .autor__foto { width: 200px; height: 200px; }
  .ficha--autor > div { grid-template-columns: 150px 1fr; gap: 24px; font-size: 17px; }
  .ficha--autor dt { font-size: 15px; padding-top: 2px; }
  .pasos { padding: 96px 0; }
  .pasos__lista { margin-top: 40px; }
  .preguntas__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .cierre { padding: 60px 0 80px; }
  .cierre__texto { font-size: 2rem; }
  .pie { padding: 72px 0 60px; }
  .pie__in { grid-template-columns: 1fr 1fr; column-gap: 88px; row-gap: 44px; }
  .pie__legal { grid-column: 1 / -1; }
  .fija { display: none; }
  .lupa__flecha { display: grid; }
  .lamina.es-cerca .lamina__papel { width: 150%; }
  .lupa__pie .btn { width: auto; }
}

@media (min-width: 900px) and (min-height: 660px) {
  .con-js .portada { height: calc(100vh - var(--cab) + 70vh); }
  .con-js .portada__fija { position: sticky; top: var(--cab); height: calc(100vh - var(--cab)); min-height: 0; }
}

/* scroll suave (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .con-js .portada { height: auto; }
  .con-js .portada__fija { position: static; height: auto; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .con-js .ver { opacity: 1; transform: none; }
}

@media print { .cab, .fija, .capa, .lupa { display: none !important; } }


/* ══════════════ Hojas de papel ══════════════
   Cada sección es una hoja apoyada sobre la mesa, apenas montada sobre la anterior. */
.papel {
  position: relative; z-index: 1; margin: -14px auto 0; max-width: 1244px;
  background: var(--hoja, var(--papel)) url("/img/papel.webp") 0 0 / 128px 128px;
  box-shadow: 0 0 0 1px rgba(74,52,34,.07), 0 -18px 36px -26px rgba(74,52,34,.5), 0 30px 50px -40px rgba(74,52,34,.45);
}
#guia-2, #criterio, #como { --hoja: #EFE7DB; }
.con-js .papel { transform: translateY(44px); transition: transform .9s var(--suave); }
.con-js .papel.es-vista { transform: none; }
.combo { position: relative; z-index: 1; margin: -14px auto 0; max-width: 1244px; box-shadow: 0 -18px 36px -26px rgba(74,52,34,.5); }
.portada { padding-bottom: 46px; }

/* ══════════════ Bloque de cada guía ══════════════ */
.guia { padding: 54px 0 56px; }
.guia__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.guia__objeto { display: grid; place-items: center; padding: 12px 0 26px; }
.cuaderno { position: relative; width: min(62vw, 290px); aspect-ratio: 700 / 990; }
.cuaderno__ver.g3d { position: absolute; inset: 0; left: 0; top: 0; width: 100%; max-width: none; margin: 0; transform: none; cursor: pointer; }
.cuaderno .g3d__obj { transform: rotateX(8deg) rotateY(-24deg) rotateZ(-2deg); }
.cuaderno .g3d__sombra { filter: blur(22px); }
.capa-tapa { display: none; }
.guia__texto { display: grid; gap: 24px; align-content: start; }
.guia__resumen { margin: 0; }
.guia .trae, .guia .ficha { margin-top: 0; }
.guia__acciones { display: grid; gap: 10px; }
.guia__acciones .precio { margin-bottom: 4px; }
.guia__acciones .btn { width: 100%; }
.guia .sugerencia { margin-top: -12px; text-align: left; }

/* ══════════════ Ver por dentro ══════════════ */
.visor { position: fixed; inset: 0; z-index: 66; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #E9E1D5 url("/img/papel.webp") 0 0 / 128px 128px; }
.visor[hidden] { display: none; }
.visor__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 4px 18px; padding-top: calc(8px + env(safe-area-inset-top)); }
.visor__titulo { font: 500 1.05rem/1.2 var(--titulo); letter-spacing: -.01em; min-width: 0; text-wrap: balance; }
.visor .librito__escena { --pag: min(78vw, calc((100dvh - 262px) * 1100 / 1556)); background: none; padding: 10px 0 18px; min-height: 0; }
.visor__pie { display: grid; justify-items: center; gap: 10px; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); }
.visor__pie .librito__donde { padding-top: 0; }
.visor__pie .btn { width: 100%; max-width: 420px; }

/* ══════════════ Regla de lectura y línea de compra ══════════════ */
.regla, .linea-compra { display: none; }
.fija__avance { position: absolute; left: 0; right: 0; top: -1.5px; height: 2px; background: var(--naranja); transform-origin: 0 50%; transform: scaleX(var(--avance, 0)); }

@media (min-width: 640px) {
  .guia__acciones { grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: 14px; }
  .guia__acciones .precio { margin: 0 8px 0 0; }
  .guia__acciones .btn { width: auto; }
}

@media (min-width: 900px) {
  .papel, .combo { margin-top: -18px; }
  .guia { padding: 96px 0 100px; }
  .guia__in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 72px; align-items: start; }
  #guia-2 .guia__in { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
  #guia-2 .guia__objeto { order: 2; }
  .guia__objeto { position: sticky; top: calc(var(--cab) + 40px); padding: 30px 0 50px; }
  .cuaderno { width: min(27vw, 350px); }
  .guia__texto { gap: 30px; }
  .visor .librito__escena { --pag: min(38vw, calc((100dvh - 236px) * 1100 / 1556)); }
  .visor__pie { grid-template-columns: 1fr auto; justify-items: start; align-items: center; padding-inline: 28px; }
  .visor__pie .librito__donde { justify-content: flex-start; text-align: left; }
  .visor__pie .btn { width: auto; }
  .visor__titulo { font-size: 1.25rem; }
}

@media (hover: hover) and (min-width: 900px) {
  /* efecto sobre la tapa: al pasar el mouse, la guía se endereza y aparece su ficha */
  .capa-tapa {
    position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 20px; text-align: center; background: rgba(245,239,232,.93); color: var(--naranja-osc);
    opacity: 0; pointer-events: none; transition: opacity .26s;
  }
  .cuaderno:hover .capa-tapa, .cuaderno:focus-within .capa-tapa { opacity: 1; pointer-events: auto; }
  .capa-tapa__titulo { font: italic 500 1.55rem/1.14 var(--titulo); letter-spacing: -.01em; text-wrap: balance; }
  .capa-tapa__para { font-size: 14.5px; line-height: 1.35; color: var(--tinta-2); max-width: 24ch; }
  .capa-tapa__precio { font: 640 1.7rem/1 var(--letra); letter-spacing: -.04em; margin: 4px 0; }
  .capa-tapa__ver { font: italic 500 1.08rem/1.2 var(--titulo); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; min-height: 40px; }
  .capa-tapa__ver:hover { color: var(--naranja); }
}

@media (min-width: 1400px) and (min-height: 640px) {
  .regla { --canal: calc((100vw - 1244px) / 2); display: block; position: fixed; left: 0; top: var(--cab); bottom: 0; width: var(--canal); z-index: 5; overflow: hidden; pointer-events: none; }
  .regla__cinta {
    position: absolute; left: 16px; right: 0; top: 0; height: var(--largo, 1200px); margin: 0; padding: 0; will-change: transform;
    background: repeating-linear-gradient(to bottom, var(--linea-2) 0 1px, transparent 1px 11px) left top / 8px 100% no-repeat;
  }
  .regla__cinta li { position: absolute; left: 0; right: 0; top: var(--t, 0); height: 0; }
  .regla__cinta li::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 1.5px; background: var(--tinta-3); }
  .regla__cinta a { position: absolute; left: 26px; top: -9px; font: 500 11.5px/18px var(--letra); color: var(--tinta-3); white-space: nowrap; text-decoration: none; pointer-events: auto; transition: color .2s; }
  .regla__cinta a:hover { color: var(--tinta); }
  .regla__cinta li.es-actual a { color: var(--naranja-osc); font-weight: 600; }
  .regla__cinta li.es-actual::before { background: var(--naranja); width: 22px; }
  .linea-compra { --canal: calc((100vw - 1244px) / 2); display: block; position: fixed; left: 0; right: 0; top: calc(var(--cab) + 44vh); height: 0; z-index: 6; pointer-events: none; }
  .linea-compra::before, .linea-compra::after { content: ""; position: absolute; top: 0; height: 1.5px; background: var(--naranja); }
  .linea-compra::before { left: 0; width: calc(var(--canal) - 8px); }
  .linea-compra::after { right: 0; width: calc(var(--canal) - 8px); }
  .linea-compra .btn { position: absolute; right: 10px; top: -20px; z-index: 1; min-height: 40px; padding: 0 12px; font-size: 14px; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .con-js .papel { transform: none; }
}

/* pie: el correo largo no se corta en celular */
.pie__contacto a { grid-template-columns: 24px 78px minmax(0, 1fr); }
.pie__contacto strong { overflow-wrap: anywhere; }


/* ══════════════ Ajustes tras la revisión de Azul ══════════════ */
/* menos líneas: listas y datos sin renglones */
.trae { border-top: 0; margin-top: 0; }
.trae li { border-bottom: 0; padding: 7px 0 7px 32px; }
.trae li::before { top: 12px; }
.guia__datos { font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.notas { border-top: 0; display: grid; gap: 12px; }
.notas li { border: 0; padding: 0; }
.ficha--autor { border-top: 0; }
.ficha--autor > div { border-bottom: 0; padding: 9px 0; }
.preguntas { padding-bottom: 80px; }
.pie { border-top: 0; }

@media (min-width: 640px) {
  .notas { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .notas li { border: 0; padding: 0; }
}

@media (min-width: 900px) {
  /* portada: el título entra en dos renglones y todo el bloque cabe en la pantalla */
  h1 { font-size: clamp(2.5rem, min(4.1vw, 7.6vh), 3.7rem); line-height: 1.08; }
  .renglon { white-space: nowrap; }
  .portada__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: 32px; row-gap: clamp(18px, 3vh, 30px); }
  .portada__fija { padding: clamp(18px, 3.4vh, 40px) 0 clamp(16px, 3vh, 34px); }
  .escena3d { --g-w: clamp(170px, min(15.2vw, 26vh), 220px); height: min(60vh, 560px); min-height: 380px; }
  .bajada { margin-top: clamp(12px, 2.2vh, 24px); font-size: clamp(1.08rem, 2.3vh, 1.3rem); max-width: 38ch; }
  .oferta__precio { font-size: clamp(2.4rem, 6.4vh, 3.4rem); }
  .portada__notas { margin-top: clamp(16px, 3.4vh, 38px); }
  .notas li { padding: 0; font-size: 15.5px; }
  .notas strong { font-size: 17px; }
  .preguntas { padding-bottom: 110px; }
}

/* la portada queda fija mientras las guías se acomodan solo si la pantalla es alta */
@media (min-width: 900px) and (max-height: 699px) {
  .con-js .portada { height: auto; }
  .con-js .portada__fija { position: static; height: auto; min-height: 0; }
}

/* portada: el valor acompaña al botón, sin competir con el título */
.portada__acciones { margin-top: 0; }
.portada__valor { margin-top: 14px; font-size: 15.5px; line-height: 1.4; color: var(--tinta-2); text-align: center; }
.portada__valor strong { color: var(--tinta); }
@media (min-width: 640px) { .portada__valor { text-align: left; } }

/* sin recuadros: las secciones van directo sobre el fondo (pedido de Azul) */
.papel { background: none; box-shadow: none; max-width: none; margin-top: 0; }
.con-js .papel { transform: none; }
.combo { max-width: none; margin-top: 0; box-shadow: none; }
@media (min-width: 900px) { .papel, .combo { margin-top: 0; } }

/* aviso breve de que la guía se abre con un clic: aparece unos segundos y se va */
.toque {
  position: absolute; right: 6%; bottom: 14%; z-index: 6; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 8px; pointer-events: none;
  background: var(--naranja); color: #fff; font: 600 14px/1.15 var(--letra);
  box-shadow: 0 12px 24px -10px rgba(202,91,38,.85);
  opacity: 0; transform: scale(.5); transition: opacity .3s, transform .45s var(--suave);
}
.toque::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(202,91,38,.5); }
.toque.es-visible { opacity: 1; transform: none; }
.toque.es-visible::after { animation: onda 1.3s ease-out infinite; }
@keyframes onda { to { box-shadow: 0 0 0 18px rgba(202,91,38,0); } }
.librito__escena { position: relative; }
.toque--visor { right: auto; left: 50%; bottom: 18%; margin-left: -42px; }
@media (prefers-reduced-motion: reduce) { .toque.es-visible::after { animation: none; } }


/* ══════════════ Aire y orden (revisión de Azul) ══════════════ */
/* notas de la portada: tres datos centrados, cada uno con su ícono */
.notas { display: grid; gap: 16px; justify-content: center; border-top: 0; }
.notas li { display: grid; grid-template-columns: 30px auto; column-gap: 12px; align-items: center; padding: 0; border: 0; font-size: 14.5px; line-height: 1.3; color: var(--tinta-2); }
.notas svg { grid-row: span 2; width: 28px; height: 28px; fill: none; stroke: var(--naranja); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.notas strong { display: block; font-size: 15.5px; color: var(--tinta); letter-spacing: -.01em; }
.notas span { display: block; }

/* más separación entre secciones, sin líneas */
.guia { padding: 76px 0; }
.combo { margin-top: 40px; padding-top: 64px; }
.autor { padding: 92px 0 76px; }
.preguntas { padding: 76px 0 56px; }
.pie { padding-top: 56px; }

/* el autor sí lleva renglones */
.ficha--autor { border-top: 1px solid var(--linea-2); }
.ficha--autor > div { border-bottom: 1px solid var(--linea); padding: 15px 0; }

@media (min-width: 640px) {
  .notas { grid-template-columns: repeat(3, auto); justify-content: center; column-gap: clamp(28px, 5vw, 72px); }
  .notas li { grid-template-columns: auto; justify-items: center; text-align: center; row-gap: 3px; }
  .notas svg { grid-row: auto; margin-bottom: 6px; }
}

@media (min-width: 900px) {
  .guia { padding: 150px 0; }
  #guia-1 { padding-top: 120px; }
  .combo { margin-top: 30px; padding: 92px 0; }
  /* franja naranja: texto y tapas juntos, al centro */
  .combo__in { grid-template-columns: auto auto; justify-content: center; gap: clamp(48px, 7vw, 110px); }
  .combo__tapas { width: 420px; }
  .autor { padding: 150px 0 120px; }
  .preguntas { padding: 110px 0 80px; }
  .pie { padding: 64px 0 56px; }
  .notas li { font-size: 15px; }
  .notas strong { font-size: 16.5px; }
}


/* ══════════════ Ver por dentro, ordenado en una columna al centro ══════════════ */
.visor { display: block; }
.visor__botones { position: absolute; right: 8px; top: calc(8px + env(safe-area-inset-top)); z-index: 5; display: flex; }
.visor__centro {
  display: grid; justify-items: center; align-content: center; gap: 12px;
  height: 100dvh; padding: 58px 16px calc(18px + env(safe-area-inset-bottom));
}
.visor__titulo { max-width: 26ch; text-align: center; font: 500 1.2rem/1.2 var(--titulo); letter-spacing: -.01em; text-wrap: balance; }
.visor .librito__escena { --pag: min(74vw, calc((100dvh - 292px) * 1100 / 1556)); width: 100%; padding: 6px 0 16px; background: none; }
.visor__donde { display: flex; gap: 10px; align-items: baseline; justify-content: center; font-size: 14.5px; line-height: 1.3; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.visor__donde strong { color: var(--tinta); }
.visor__centro .btn { width: 100%; max-width: 360px; }
.toque--visor { left: 50%; right: auto; bottom: 26%; width: 96px; height: 96px; margin-left: -48px; font-size: 15px; }
@media (min-width: 900px) {
  .visor .librito__escena { --pag: min(36vw, calc((100dvh - 312px) * 1100 / 1556)); }
  .visor__titulo { font-size: 1.5rem; max-width: 34ch; }
  .visor__centro { gap: 14px; padding-top: 34px; }
  .visor__centro .btn { width: auto; min-width: 300px; }
  .libro--doble.es-abierto ~ .toque--visor { margin-left: -48px; }
}


/* ══════════════ «Tu compra», según la referencia de Azul ══════════════ */
.hoja-compra { padding-top: 20px; }
.hoja-compra__cab { align-items: flex-start; margin-bottom: 22px; }
.hoja-compra__cab h2 { font-size: 1.9rem; line-height: 1.05; }
.hoja-compra__bajada { margin-top: 6px; font-size: 15px; color: var(--tinta-2); }
.cerrar { width: 40px; height: 40px; margin: 2px 0 0; border-radius: 50%; background: var(--gris); }
.cerrar:hover { background: var(--linea-2); }

.opciones { gap: 10px; margin-bottom: 22px; }
.opcion { grid-template-columns: 54px minmax(0, 1fr) auto 26px; column-gap: 12px; min-height: 82px; padding: 12px 14px 12px 12px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--linea); }
.opcion__sena { width: 54px; height: 54px; border-radius: 12px; }
.opcion__sena--dos img { height: 27px; }
.opcion__precio { padding-left: 12px; border-left: 1px solid var(--linea); align-self: stretch; display: flex; align-items: center; font-size: 1.12rem; }
.opcion__casilla { width: 26px; height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--linea-2); background: #fff; display: grid; place-items: center; transition: background-color .18s, box-shadow .18s; }
.opcion__casilla::after { content: ""; width: 12px; height: 6px; border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .18s var(--suave); }
.opcion:has(input:checked) { background: #FFF4EC; box-shadow: inset 0 0 0 2px var(--naranja); }
.opcion:has(input:checked) .opcion__casilla { background: var(--naranja); box-shadow: none; }
.opcion:has(input:checked) .opcion__casilla::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.opcion__tilde { display: none; }
.opcion--conveniente { margin-top: 12px; }
.opcion__insignia {
  position: absolute; left: 14px; top: -12px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 12px 0 9px;
  border-radius: 999px; background: var(--naranja); color: #fff; font: 600 12.5px/1 var(--letra);
}
.opcion__insignia svg { width: 13px; height: 13px; fill: #fff; }
.opcion__ahorro { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 3px; padding: 4px 10px 4px 8px; border-radius: 999px; background: #FBE3D3; color: var(--naranja-osc); font: 600 13px/1.1 var(--letra); }
.opcion__ahorro svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

.tus-datos { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font: 600 1.15rem/1.2 var(--titulo); letter-spacing: -.01em; }
.tus-datos::after { content: ""; flex: 1; height: 1px; background: var(--linea-2); }

.campo input { padding-left: 50px; }
.campo label { left: 50px; }
.campo__icono { position: absolute; left: 16px; top: 18px; width: 24px; height: 24px; color: var(--tinta-2); pointer-events: none; }
.campo__icono svg, .campo__ayuda--info::before { width: 24px; height: 24px; }
.campo__icono svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.campo input:focus ~ .campo__icono { color: var(--naranja-osc); }
.campo.es-error .campo__icono { color: var(--rojo); }
.campo__ayuda--info { position: relative; padding-left: 24px; }
.campo__ayuda--info::before {
  content: "i"; position: absolute; left: 2px; top: 1px; width: 15px; height: 15px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.2px currentColor; font: 600 10.5px/15px var(--letra); text-align: center;
}

.resumen { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 12px; padding: 14px 18px; border-radius: 14px; background: #F8E9DD; }
.resumen__que { display: grid; gap: 2px; min-width: 0; }
.resumen__que span { font-size: 13.5px; color: var(--tinta-2); }
.resumen__que strong { font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.resumen__valor { padding-left: 16px; border-left: 1px solid rgba(74,52,34,.16); font: 640 1.45rem/1.5 var(--letra); letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.llevas { display: none; }

#btn-pagar { min-height: 62px; font-size: 18px; border-radius: 14px; }
#btn-pagar svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seguro { align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linea-2); font-size: 13.5px; }
.seguro strong { display: block; color: var(--tinta); }
.seguro svg { width: 30px; height: 30px; margin: 0; stroke: var(--tinta-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.inconveniente { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 0 4px; }
.inconveniente svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--naranja); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


/* ══════════════ Franja de los tres datos: separada de la portada ══════════════ */
.franja { background: #F3ECE2; padding: 26px 0; }
.franja .notas { margin: 0 auto; }
.portada { padding-bottom: 40px; }

/* guías: separadas, pero sin un hueco tan grande */
.guia { padding: 60px 0; }

@media (min-width: 900px) {
  .franja { padding: 34px 0; }
  .portada { padding-bottom: 0; }
  .guia { padding: 92px 0; }
  #guia-1 { padding-top: 104px; }
  .combo { margin-top: 20px; }
}


/* ══════════════ Portada según la referencia: insignia y franja de datos ══════════════ */
.insignia {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px 0 11px; margin-bottom: 16px; border-radius: 999px;
  background: #FAE8DB; box-shadow: inset 0 0 0 1.2px rgba(202,91,38,.5); color: var(--naranja-osc);
  font: 600 12.5px/1 var(--letra); letter-spacing: .08em; text-transform: uppercase;
}
.insignia svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
h1 { font-weight: 600; }

.franja { padding: 22px 0; }
.franja .notas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-content: stretch; }
.franja .notas li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: center; justify-items: start; text-align: left; padding: 0; }
.notas__icono { width: 46px; height: 46px; border-radius: 12px; background: #F5DCCB; display: grid; place-items: center; color: var(--naranja-osc); }
.franja .notas svg { grid-row: auto; margin: 0; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.notas__texto { display: grid; gap: 1px; }
.notas__texto strong { font-size: 15.5px; line-height: 1.25; color: var(--tinta); }
.notas__texto span { font-size: 14px; color: var(--tinta-2); }

@media (min-width: 760px) {
  .franja { padding: 26px 0; }
  .franja .notas { grid-template-columns: repeat(3, auto); justify-content: center; gap: 0; }
  .franja .notas li { padding: 2px clamp(20px, 3.6vw, 52px); }
  .franja .notas li + li { box-shadow: -1px 0 0 var(--linea-2); }
  .franja .notas li:first-child { padding-left: 0; }
  .franja .notas li:last-child { padding-right: 0; }
}
@media (min-width: 900px) {
  .insignia { margin-bottom: 20px; }
}


/* ══════════════ Bloque de cada guía, organizado como la referencia ══════════════ */
.insignia--chica { height: 30px; margin-bottom: 14px; font-size: 12px; }
.guia__texto { gap: 22px; }
.guia__para { margin-top: 10px; font-size: 1.08rem; font-weight: 500; color: var(--tinta-2); max-width: none; }
.guia__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.guia__resumen { font-size: 1.06rem; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--tinta); text-wrap: pretty; }
.guia .trae { margin-top: 14px; }
.guia .trae li { padding: 6px 0 6px 36px; font-size: 15.5px; }
.guia .trae li::before { left: 0; top: 6px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: #F6DDCB; transform: none; }
.guia .trae li::after { content: ""; position: absolute; left: 6px; top: 12px; width: 10px; height: 5px; border-left: 2px solid var(--naranja-osc); border-bottom: 2px solid var(--naranja-osc); transform: rotate(-45deg); }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin: 0; border: 0; }
.datos > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; padding: 0; border: 0; }
.datos > div + div { padding-left: 0; border-left: 0; }
.datos svg { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--naranja); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.datos dt { margin: 0; font: 600 13.5px/1.3 var(--letra); color: var(--tinta); }
.datos dd { font: 400 13.5px/1.4 var(--letra); letter-spacing: 0; color: var(--tinta-2); white-space: normal; }
.guia__acciones .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.guia__promo { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px 10px; align-items: start; padding-top: 16px; border-top: 1px solid var(--linea-2); font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); }
.guia__promo svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--naranja); stroke-width: 1.6; stroke-linejoin: round; }
.guia__promo strong { color: var(--tinta); }
.guia__promo b { color: var(--naranja-osc); font-weight: 600; }
.guia__promo a { grid-column: 2; color: var(--naranja-osc); font-weight: 600; text-underline-offset: 4px; }
.guia__promo a::after { content: " \2192"; }

@media (min-width: 900px) {
  .guia__in, #guia-2 .guia__in { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 56px; }
  #guia-2 .guia__in { grid-template-columns: minmax(0, 1.38fr) minmax(0, .62fr); }
  .cuaderno { width: min(24vw, 310px); }
  .guia__cuerpo { grid-template-columns: minmax(0, 1fr) 208px; gap: 34px; align-items: start; }
  .datos { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-left: 26px; border-left: 1px solid var(--linea-2); }
  .guia__promo { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; }
  .guia__promo a { grid-column: auto; }
}

/* ══════════════ Pie discreto: sin fondo ni tarjetas ══════════════ */
.pie { background: none; padding: 34px 0 110px; border-top: 1px solid var(--linea-2); }
.pie__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pie__logo { width: 118px; }
.pie__respaldo { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--tinta-2); max-width: 44ch; }
.pie__resolucion { margin-top: 4px; font-size: 14px; color: var(--tinta); }
.pie__titulo { font: 600 14.5px/1.3 var(--letra); margin-bottom: 8px; }
.pie__contacto { border-top: 0; }
.pie__contacto ul { display: grid; gap: 2px; }
.pie__contacto li { display: block; min-height: 0; border: 0; }
.pie__contacto a { display: inline-flex; grid-template-columns: none; align-items: center; gap: 10px; min-height: 40px; border: 0; font-size: 14.5px; color: var(--tinta-2); text-decoration: none; }
.pie__contacto a:hover { color: var(--naranja-osc); }
.pie__contacto svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pie__legal { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--tinta-3); }
@media (min-width: 900px) {
  .pie { padding: 44px 0 40px; }
  .pie__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 60px; }
}


/* ══════════════ Franja de las dos guías, según la referencia ══════════════ */
.insignia--clara { background: none; box-shadow: inset 0 0 0 1.4px rgba(255,255,255,.85); color: #fff; }
.combo { padding: 56px 0 44px; margin-top: 30px; }
.combo__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.combo h2 { font-size: clamp(2.1rem, 9vw, 3.6rem); line-height: 1.04; }
.combo__bajada { margin: 14px 0 22px; font-size: 1.1rem; line-height: 1.6; max-width: none; }
.combo__bajada strong { display: inline-block; padding: 1px 12px 2px; border-radius: 999px; background: #FBE3D3; color: var(--naranja-osc); font-weight: 600; white-space: nowrap; }
.combo__acciones { display: grid; gap: 14px; }
.combo .btn { width: 100%; }
.combo .btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.combo__nota { display: flex; align-items: center; gap: 10px; margin: 0; text-align: left; font-size: 15px; line-height: 1.3; color: #fff; }
.combo__nota svg { flex: none; width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.combo__guias { --g-w: min(40vw, 190px); position: relative; height: calc(var(--g-w) * 1.4143 + 70px); }
.combo__guias::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(92vw, 480px); height: 82%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.2), rgba(255,255,255,0)); }
.combo__guias .g3d { animation: flota 5.5s ease-in-out infinite alternate; }
.combo__guias .g3d--2 { animation-delay: -2.6s; }
.combo__guias .g3d__sombra { background: rgba(74,30,6,.5); }
@keyframes flota { from { translate: 0 5px; } to { translate: 0 -7px; } }

/* ══════════════ Preguntas frecuentes, según la referencia ══════════════ */
.preguntas__icono { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 16px; border-radius: 14px; background: #F5DCCB; color: var(--naranja-osc); }
.preguntas__icono svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.preguntas__cab h2::after { content: ""; display: block; width: 46px; height: 4px; margin-top: 16px; border-radius: 4px; background: var(--naranja); }
.preguntas__bajada { margin-top: 14px; font-size: 1.06rem; line-height: 1.45; color: var(--tinta-2); max-width: 22ch; }
.acordeon { display: grid; gap: 8px; border-top: 0; }
.acordeon details { border: 0; border-radius: 12px; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px var(--linea-2); }
.acordeon summary { min-height: 56px; padding: 16px 52px 16px 18px; font-size: 16.5px; }
.acordeon summary::before, .acordeon summary::after { right: 20px; top: 27px; }
.acordeon details p { padding: 0 18px 18px; }

@media (min-width: 640px) {
  .combo__acciones { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 24px; }
  .combo .btn { width: auto; }
  .combo__nota { padding-left: 24px; box-shadow: -1px 0 0 rgba(255,255,255,.4); max-width: 17ch; }
}
@media (min-width: 900px) {
  .combo { padding: 76px 0; margin-top: 20px; }
  .combo__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); justify-content: stretch; align-items: center; gap: 40px; }
  .combo__bajada { font-size: 1.3rem; }
  .combo__guias { --g-w: 220px; }
  .preguntas__in { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 64px; }
  .preguntas__cab { padding-right: 48px; box-shadow: 1px 0 0 var(--linea-2); min-height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .combo__guias .g3d { animation: none; } }

/* «Tu compra» en pantallas angostas: más lugar para el nombre de cada guía */
.hoja-compra:focus, .visor:focus { outline: none; }
.opcion { grid-template-columns: 44px minmax(0, 1fr) auto 24px; column-gap: 10px; padding: 12px 12px 12px 10px; }
.opcion__sena { width: 44px; height: 44px; border-radius: 10px; }
.opcion__sena--dos img { height: 22px; }
.opcion__nombre { font-size: 14.5px; }
.opcion__detalle { font-size: 12.5px; }
.opcion__precio { padding-left: 10px; font-size: 1rem; }
.opcion__casilla { width: 24px; height: 24px; }
.opcion__ahorro { white-space: nowrap; padding: 4px 9px 4px 7px; font-size: 12.5px; }
@media (min-width: 480px) {
  .opcion { grid-template-columns: 54px minmax(0, 1fr) auto 26px; column-gap: 12px; padding: 12px 14px 12px 12px; }
  .opcion__sena { width: 54px; height: 54px; border-radius: 12px; }
  .opcion__sena--dos img { height: 27px; }
  .opcion__nombre { font-size: 15.5px; }
  .opcion__detalle { font-size: 13.5px; }
  .opcion__precio { padding-left: 12px; font-size: 1.12rem; }
  .opcion__casilla { width: 26px; height: 26px; }
}


/* ══════════════ Revisión de experiencia de usuario ══════════════ */
/* contraste: sobre naranja con texto blanco chico se usa un tono apenas más oscuro (4,6:1 en lugar de 4,2:1) */
:root { --naranja-fondo: #BF5522; }
.btn--principal, .combo, .opcion__insignia, .toque, .saltar, .opcion:has(input:checked) .opcion__casilla { background-color: var(--naranja-fondo); }
.btn--principal:hover { background-color: var(--naranja-osc); }
.cab__comprar { background: none; }
.cab__comprar:hover { background: var(--naranja-fondo); color: #fff; }
.guia__entrega { margin-top: -6px; font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); }
.lamina--fin .btn { margin-top: 10px; }
.fija .btn { min-width: 0; padding: 0 18px; }

/* franja: íconos centrados dentro de su recuadro (una regla general de ".notas span" los corría) */
.franja .notas .notas__icono { display: grid; place-items: center; }
.franja .notas .notas__icono svg { display: block; }
.franja .notas .notas__texto { display: grid; }

/* portada: queda fija mientras las guías se acomodan también en pantallas bajas (desde 560 px de alto) */
@media (min-width: 900px) and (min-height: 560px) {
  .con-js .portada { height: calc(100vh - var(--cab) + 70vh); }
  .con-js .portada__fija { position: sticky; top: var(--cab); height: calc(100vh - var(--cab)); min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .con-js .portada { height: auto; }
  .con-js .portada__fija { position: static; height: auto; }
}

/* bloque de guía: sin hueco entre los puntos y el valor */
.guia__cuerpo { align-items: start; }
.guia__texto { gap: 20px; }
@media (min-width: 900px) {
  .guia__cuerpo { grid-template-columns: minmax(0, 1fr) 232px; gap: 30px; }
  .datos { gap: 14px; padding-left: 24px; }
  .guia__acciones { margin-top: 4px; }
}

/* preguntas: sin fondo blanco, solo el borde */
.acordeon details { background: none; }


/* ══════════════ Orden general (último pedido de Azul) ══════════════ */
/* bloque de guía: una sola columna de texto, centrada frente al cuadernillo */
.guia__texto { display: grid; gap: 22px; max-width: 600px; }
.guia__n { margin-bottom: 10px; }
.guia__para { margin-top: 10px; font-size: 1.08rem; font-weight: 400; }
.guia__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -6px 0 0; font-size: 14.5px; line-height: 1.35; color: var(--tinta-2); }
.guia__meta li { display: inline-flex; align-items: center; gap: 8px; }
.guia__meta svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--naranja); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.guia__resumen { font-size: 1.1rem; line-height: 1.5; }
.guia .trae { margin-top: -4px; }
.guia .trae li { padding: 6px 0 6px 30px; }
.guia .trae li::before { left: 2px; top: 13px; width: 14px; height: 7px; border-radius: 0; background: none; border-left: 2px solid var(--naranja); border-bottom: 2px solid var(--naranja); transform: rotate(-45deg); }
.guia .trae li::after { content: none; }
.guia__acciones { margin-top: 6px; }
.guia__promo { display: block; padding-top: 0; border-top: 0; font-size: 15px; color: var(--tinta-2); }
.guia__promo a { margin-left: 6px; }
.guia__promo a::after { content: none; }

/* franja de datos: íconos sin fondo pintado */
.franja .notas .notas__icono--simple { width: 30px; height: 30px; background: none; border-radius: 0; color: var(--naranja); }
.franja .notas .notas__icono--simple svg { width: 30px; height: 30px; }
.franja .notas li { grid-template-columns: 30px minmax(0, 1fr); }

/* franja naranja: sin pastillas; la frase, en una línea */
.combo__n { margin-bottom: 12px; font: 600 15px/1.2 var(--letra); color: rgba(255,255,255,.92); }
.combo__bajada strong { display: inline; padding: 0; border-radius: 0; background: none; color: #fff; font-weight: 600; }
.combo .btn { width: 100%; }
.combo__nota { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 0; box-shadow: none; max-width: none; white-space: nowrap; font-size: 15px; color: #fff; }
.combo__nota svg { width: 22px; height: 22px; }
.combo__guias .g3d { animation: none; }

/* compra: el ahorro como texto, sin pastilla */
.opcion__ahorro { padding: 0; background: none; border-radius: 0; margin-top: 2px; }

/* preguntas: título simple */
.preguntas__cab h2::after { content: none; }

/* pie centrado */
.pie__in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; text-align: center; }
.pie__logo { width: 118px; }
.pie__respaldo { margin: 6px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.pie__contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 26px; border: 0; }
.pie__contacto li { display: block; }
.pie__legal { width: 100%; margin-top: 8px; }

@media (min-width: 640px) {
  .combo .btn { width: auto; }
}
@media (min-width: 900px) {
  .guia__in, #guia-2 .guia__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
  #guia-2 .guia__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  #guia-2 .guia__texto { justify-self: end; }
  .guia__objeto { position: static; padding: 0; }
  .cuaderno { width: min(27vw, 340px); }
  .guia__texto { gap: 24px; }
  .pie__in { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .preguntas__cab { box-shadow: none; padding-right: 0; }
}


/* ══════════════ Ajustes del 14/11: portada, menos texto, preguntas ══════════════ */
/* sin marco naranja alrededor de la guía; con teclado, se marca con la sombra */
.g3d:focus-visible .g3d__hoja--1 { outline: none; }
.g3d:focus-visible .g3d__sombra { background: rgba(169,69,28,.62); }
.g3d { -webkit-tap-highlight-color: transparent; }
.g3d__pag { display: block; }

/* franja naranja */
.combo__nota svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* preguntas: una sola columna centrada, renglones separados por una línea (sin recuadros) */
.preguntas { padding: 72px 0 52px; }
.preguntas__in { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 840px; }
.preguntas__cab { padding: 0; min-height: 0; box-shadow: none; text-align: center; }
.preguntas__bajada { max-width: none; margin-top: 10px; }
.acordeon { display: block; border-top: 1px solid var(--linea-2); }
.acordeon details { border: 0; border-bottom: 1px solid var(--linea-2); border-radius: 0; background: none; box-shadow: none; }
.acordeon summary { min-height: 60px; padding: 19px 44px 19px 2px; font-size: 17px; }
.acordeon summary::before, .acordeon summary::after { right: 8px; top: 29px; }
.acordeon details p { padding: 0 24px 22px 2px; }

/* cabecera en pantallas angostas: la leyenda del Colegio queda siempre a la vista, al lado del logo */
@media (max-width: 899px) {
  :root { --cab: 64px; }
  .cab__in { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; height: var(--cab); min-height: 0; }
  .cab__logo img { height: clamp(28px, 8.4vw, 36px); }
  .cab__respaldo, .cab.es-compacta .cab__respaldo {
    grid-column: 2; grid-row: 1; max-height: none; overflow: visible; opacity: 1; padding: 0 0 0 12px;
    border-top: 0; border-left: 1px solid var(--linea-2); font-size: clamp(10px, 2.9vw, 12.5px); line-height: 1.28;
    text-wrap: pretty; transition: none;
  }
}
@media (max-width: 639px) { .cab__comprar { display: none; } }
@media (min-width: 640px) and (max-width: 899px) {
  .cab__in { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 20px; }
  .cab__comprar { grid-column: 3; }
  .cab__respaldo, .cab.es-compacta .cab__respaldo { padding-left: 20px; max-width: 46ch; }
}

/* celular: la portada entra en la pantalla y queda fija mientras las guías se acomodan */
@media (max-width: 899px) {
  .portada { padding: 0; }
  .portada__fija { padding: 18px 0 14px; }
  .portada__in { gap: 12px; }
  .portada .insignia { display: none; }
  .portada .bajada { margin-top: 12px; }
  .portada .btn--grande { min-height: 54px; }
  .portada .enlace { min-height: 44px; margin-top: 2px; }
  h1 { font-size: clamp(1.65rem, 8.6vw, 2.9rem); }
  .escena3d { --g-w: min(42vw, 240px); height: calc(var(--g-w) * 1.4143 + 66px); }
  .escena3d .g3d { top: 12px; }
  .g3d__pie { top: calc(100% + 10px); }
  .g3d__pie strong { margin: 0; font-size: 12.5px; line-height: 1.25; }
  .g3d__pag { display: none; }
  .con-js.cel-fija .portada::after { content: ""; display: block; height: 52vh; }
  .con-js.cel-fija .portada__fija { position: sticky; top: var(--cab); }
  /* cada guía: lo justo */
  .guia__promo { display: none; }
  .guia { padding: 52px 0; }
}
@supports (height: 100svh) {
  @media (max-width: 899px) {
    .escena3d { --g-w: clamp(104px, calc((100svh - 426px) / 1.4143), min(44vw, 240px)); }
    .con-js.cel-fija .portada::after { height: 52svh; }
  }
}

/* franja de los tres datos en celular: tres columnas parejas, ícono arriba y texto centrado */
@media (max-width: 759px) {
  .franja { padding: 20px 0 22px; }
  .franja .notas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .franja .notas li { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; row-gap: 8px; padding: 2px 4px; text-align: center; }
  .franja .notas li + li { box-shadow: -1px 0 0 var(--linea-2); }
  .franja .notas .notas__icono--simple, .franja .notas .notas__icono--simple svg { width: 28px; height: 28px; }
  .franja .notas .notas__texto { justify-items: center; gap: 2px; }
  .notas__texto strong { font-size: clamp(11px, 3.3vw, 14px); line-height: 1.25; font-stretch: 94%; text-wrap: balance; }
  .notas__texto span { font-size: clamp(10.5px, 3.15vw, 13px); line-height: 1.3; }
}

@media (min-width: 900px) {
  /* portada: las guías, más grandes; ocupan la mitad de la pantalla */
  .ancho { max-width: 1320px; }
  h1 { font-size: clamp(2.5rem, min(4.1vw, 7.6vh), 4rem); }
  .portada__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 32px; }
  .escena3d { --g-w: clamp(180px, min(22vw, 38vh), 318px); height: calc(var(--g-w) * 1.4143 + 100px); min-height: 0; }
  .escena3d .g3d { max-width: none; margin-left: calc(var(--g-w) / -2); }
  /* cada guía: el cuadernillo, más grande */
  .guia__in { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 56px; }
  #guia-2 .guia__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; }
  .cuaderno { width: max(240px, min(31vw, 420px, 52vh)); }
  .combo__guias { --g-w: 244px; }
  .preguntas { padding: 96px 0 64px; }
  .preguntas__in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .preguntas__cab { padding-right: 0; box-shadow: none; }
}
/* la portada queda fija mientras las guías se acomodan, también en ventanas bajas */
@media (min-width: 900px) and (min-height: 480px) {
  .con-js .portada { height: calc(100vh - var(--cab) + 70vh); }
  .con-js .portada__fija { position: sticky; top: var(--cab); height: calc(100vh - var(--cab)); min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .con-js .portada, .con-js.cel-fija .portada { height: auto; }
  .con-js .portada__fija, .con-js.cel-fija .portada__fija { position: static; height: auto; }
}

/* el texto de cada guía nunca empuja la página a lo ancho: los botones bajan de renglón si no entran */
.guia__texto { grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 640px) {
  .guia__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
}

/* preguntas: la respuesta ocupa todo el ancho del renglón; al navegar con teclado se marca la pregunta con color, sin marco */
.acordeon details p { max-width: none; padding: 0 2px 22px 2px; }
.acordeon summary:focus-visible { outline: none; color: var(--naranja-osc); }