/* Página de venta con el estilo de la portada G2 (12-nov noche): estudio rosa, letra ciruela gorda,
   la brocha de «TARROS», píldoras ciruela y fotos de Marianni del mismo estudio (fotos_g2/).
   Tres tonos de sección que se alternan: .tono-rosa (el rosa medido en la portada y las fotos),
   .tono-claro y .tono-ciruela. Cada tono fija sus variables locales (--fg, --btn-bg…) y los
   componentes solo usan esas. Colores: SOLO tokens de marca.css.
   Movimiento: entrada de la primera pantalla en CSS puro; lo de más abajo aparece al llegar
   (venta.js pone html.anima). Con prefers-reduced-motion todo queda quieto y visible. */

/* ── Tokens de ritmo (no son colores: pueden vivir aquí) ── */
body.venta {
  --t-xs: .8125rem;   /* 13px chips y etiquetas (siempre en negrita) */
  --t-sm: .9375rem;   /* 15px notas */
  --t-base: 1.0625rem;/* 17px cuerpo */
  --t-lead: 1.125rem; /* 18px entradillas */
  --t-h3: 1.0625rem;  /* 17px títulos de tarjeta (Archivo Black) */
  --t-h2: clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem);   /* 28 → 44px */
  --t-h1: clamp(2rem, 1.2rem + 3.6vw, 3.6rem);       /* 32 → 58px */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --r-s: 10px; --r-m: 16px; --r-l: 22px;
  --lectura: 38rem;   /* ~65 caracteres por línea */
  --curva: cubic-bezier(.2, .8, .2, 1);
  --rebote: cubic-bezier(.3, 1.5, .5, 1);
  background: var(--rosa-estudio); color: var(--ciruela); font-size: var(--t-base); line-height: 1.55;
  overflow-x: hidden;
}

/* ── Tonos: cada uno define sus colores locales ── */
.barra, .hero, .tono-rosa, .tono-claro {
  --fg: var(--ciruela); --fg-suave: var(--texto-ciruela-suave); --fuerte: var(--ciruela);
  --linea: var(--linea-ciruela); --linea-f: var(--linea-ciruela-fuerte);
  --sup: var(--papel); --sup-borde: var(--linea-ciruela);
  --btn-bg: var(--ciruela); --btn-fg: var(--rosa); --btn-hover: var(--ciruela-3); --btn-sombra: var(--sombra-rosa);
  --enlace: var(--ciruela); --foco: var(--ciruela);
  --pildora-bg: var(--ciruela); --pildora-fg: var(--rosa);
  --brocha-bg: var(--ciruela); --brocha-fg: var(--blanco);
  color: var(--fg);
}
.tono-ciruela, .pie, .barra-compra {
  --fg: var(--blanco); --fg-suave: var(--texto-claro-suave); --fuerte: var(--rosa);
  --linea: var(--linea-rosa); --linea-f: var(--linea-rosa-fuerte);
  --sup: var(--ciruela-3); --sup-borde: var(--linea-rosa);
  --btn-bg: var(--magenta); --btn-fg: var(--ciruela); --btn-hover: var(--rosa); --btn-sombra: var(--sombra-magenta);
  --enlace: var(--rosa); --foco: var(--magenta);
  --pildora-bg: var(--rosa); --pildora-fg: var(--ciruela);
  --brocha-bg: var(--rosa); --brocha-fg: var(--ciruela);
  color: var(--fg);
}
.tono-rosa { background: var(--rosa-estudio); }
.tono-claro { background: var(--rosa-estudio-claro); }
.tono-ciruela { background: var(--ciruela); }

.venta .envoltura { max-width: 1120px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.venta .estrecha { max-width: 800px; }
.venta section { padding: var(--e7) 0; }
.venta :where(h2) { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 var(--e3); text-wrap: balance; color: var(--fg); }
.venta :where(h3) { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: var(--t-h3); line-height: 1.2; margin: 0 0 var(--e1); }
.venta :where(p) { margin: 0 0 var(--e3); }   /* :where = no pisa los estilos del libro (.libro p, .row p…) */
.venta .lead { font-size: var(--t-lead); max-width: var(--lectura); color: var(--fg-suave); }
.venta a { color: var(--enlace); }
.venta b { color: var(--fuerte); }
.venta :focus-visible { outline-color: var(--foco); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }

/* ── La brocha de «TARROS»: trazo ciruela pintado a mano, letras blancas encima.
      La forma es una máscara (solo cuenta el alfa), el color sale del token. ── */
.brocha { position: relative; display: inline-block; color: var(--brocha-fg); padding: 0 .2em .04em; margin: 0 -.04em; isolation: isolate; white-space: nowrap; }
.brocha::before { content: ""; position: absolute; z-index: -1; inset: -.02em -.1em -.04em -.14em; background: var(--brocha-bg);
  -webkit-mask: var(--forma-brocha) center / 100% 100% no-repeat;
          mask: var(--forma-brocha) center / 100% 100% no-repeat;
  transform: rotate(-1.2deg); }
.brocha-rosa { --brocha-bg: var(--rosa); --brocha-fg: var(--ciruela); }

/* ── Píldora (la de «EDICIÓN CUBANA · 50 SEÑALES · EL TEST» de la portada) ── */
.sello { display: inline-block; margin: 0 0 var(--e3) !important; background: var(--pildora-bg); color: var(--pildora-fg); font-family: "Archivo Black", sans-serif; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; border-radius: 999px; padding: 6px 13px; }

/* ── Barra superior (no fija) ── */
.barra { background: var(--rosa-estudio); border-bottom: 1px solid var(--linea); }
.barra-in { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 50px; }
.venta .marca { font-family: "Archivo Black", sans-serif; font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ciruela); text-decoration: none; white-space: nowrap; }
/* «Ya la tengo» como enlace simple: que no compita con el botón de compra (revisión de conversión 13-nov) */
.venta .barra-leer { font-weight: 700; font-size: .8125rem; color: var(--fg-suave); text-decoration: underline; text-underline-offset: 3px; padding: 10px 2px; white-space: nowrap; }

/* ── Botones ── */
.cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--e2); }
.cta-error { margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--fg); background: var(--sup); border: 1px solid var(--linea-f); border-radius: var(--r-s); padding: 8px 12px; }
.venta .btn-comprar, .venta a.btn.btn-comprar { position: relative; overflow: hidden; isolation: isolate; font-size: 1.0625rem;
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 10px 26px var(--btn-sombra); transition: transform .2s var(--curva), background .2s; }
.venta .btn-comprar:hover, .venta a.btn.btn-comprar:hover { background: var(--btn-hover); color: var(--btn-fg); transform: translateY(-2px); }
.venta .tono-ciruela .btn-comprar:hover, .venta .barra-compra .btn-comprar:hover { color: var(--ciruela); }
/* Destello que cruza el botón de vez en cuando */
.venta .btn-comprar::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, var(--brillo-boton), transparent); transform: skewX(-18deg); animation: destello 5.5s ease-in-out 2.2s infinite; }
@keyframes destello { 0%, 70% { left: -60%; } 88%, 100% { left: 130%; } }

.confianza { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: var(--t-xs); font-weight: 700; color: var(--fg-suave); }
.confianza li { display: inline-flex; align-items: center; gap: 6px; }
.confianza .ico { color: var(--fuerte); }
/* Botón de la primera pantalla en dos líneas: la acción y, debajo, el precio (donde mira antes de tocar) */
.venta .btn-dos { flex-direction: column; gap: 3px; line-height: 1.1; padding-top: 12px; padding-bottom: 12px; min-height: 62px; }
.btn-dos small { font-size: .8125rem; font-weight: 700; letter-spacing: .02em; opacity: .88; }
.conf-precio { font-family: "Archivo Black", sans-serif; font-weight: 400; color: var(--fg); font-size: .9375rem; letter-spacing: .01em; }

/* ── Entrada de la primera pantalla (CSS puro, sin esperar al JS) ── */
@keyframes subir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pintar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes asomar { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.3) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); } }
@keyframes flota { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-7px) rotate(var(--rot, 0deg)); } }
@keyframes caer { from { opacity: 0; transform: translateY(-34px) rotate(-14deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sellar { 0% { opacity: 0; transform: scale(2.2) rotate(30deg); } 70% { opacity: 1; transform: scale(.92) rotate(6deg); } 100% { opacity: 1; transform: scale(1) rotate(9deg); } }
.ent { animation: subir .6s var(--curva) both; animation-delay: calc(var(--i, 0) * 40ms); }   /* casi todo a la vez: de noche y con poca señal no se espera */
.hero .brocha::before { animation: pintar .6s cubic-bezier(.6, 0, .2, 1) .3s both; }

/* ── 1. Primera pantalla ── */
.venta .hero { position: relative; padding: var(--e4) 0 var(--e6); background: var(--rosa-estudio); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "foto" "cta" "lista"; gap: var(--e4); }
.hero-txt { grid-area: txt; text-align: center; }
.hero-foto { grid-area: foto; position: relative; width: min(64vw, 280px); justify-self: center; }   /* = SIZES_HERO de build.py */
.hero-cta { grid-area: cta; display: grid; gap: var(--e3); }
.hero-lista { grid-area: lista; }
.kicker { margin: 0 0 var(--e3); font-family: "Archivo Black", sans-serif; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.45; }
.k-titulo, .k-guia { display: block; }
.k-guia { color: var(--fg-suave); }
.k-sep { display: none; }
.hero h1 { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 var(--e3); text-wrap: balance; }
.hero-sub { font-size: var(--t-base); line-height: 1.45; color: var(--fg-suave); margin: 0 auto !important; max-width: 34rem; }
.hero-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); font-size: var(--t-sm); font-weight: 700; line-height: 1.3; justify-self: center; }
.hero-lista li { display: flex; gap: var(--e2); align-items: flex-start; }
.hero-lista .ico { color: var(--ciruela); stroke-width: 2.8; margin-top: 1px; }
.cuba-link { justify-self: center; text-align: center; font-size: var(--t-sm); font-weight: 800; color: var(--ciruela); text-underline-offset: 3px; padding: 6px 0; }

/* La portada grande (13-nov noche): el libro es lo primero que se ve. Resplandor claro detrás,
   y el sello del precio AL LADO del libro, a media altura (ahí la portada solo tiene su brazo y fondo rosa):
   nunca encima del título ni de la píldora de abajo. */
.hero-foto::before { content: ""; position: absolute; z-index: 0; inset: 4% -22% -2%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--rosa-estudio-claro), transparent); }
.hero-portada { position: relative; z-index: 1; animation: asomar .7s var(--curva) .05s both; }
.hero-portada .libro3d { transform: rotate(-2.5deg); }
.sello-precio { position: absolute; z-index: 2; right: -17%; top: 54%; width: clamp(66px, 31%, 104px); aspect-ratio: 1; margin: 0; border-radius: 50%;
  display: grid; place-content: center; text-align: center; background: var(--blanco); color: var(--ciruela); border: 3px solid var(--ciruela);
  box-shadow: 0 8px 18px var(--sombra-rosa); animation: sellar .6s var(--curva) .6s both; }
.sello-precio b { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: 1.2rem; line-height: 1; color: var(--ciruela); }
.sello-precio small { font-size: .62rem; font-weight: 800; letter-spacing: .12em; }

/* Libro con volumen (solo CSS): lomo, cantos de página y sombra */
.libro3d { position: relative; width: 100%; aspect-ratio: 1000 / 1491; border-radius: 3px 7px 7px 3px;
  box-shadow: 2px 1px 0 var(--papel), 4px 2px 0 var(--rosa-suave), 6px 3px 0 var(--papel), 8px 4px 0 var(--rosa-suave),
              0 24px 40px -10px var(--sombra-libro); }
.libro3d picture, .libro3d img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.libro3d img { object-fit: cover; }
.libro3d::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, var(--lomo-sombra) 0%, transparent 3%, var(--lomo-brillo) 4%, transparent 7.5%, transparent 96%, var(--lomo-sombra) 100%); }

/* ── Cinta que corre (como la píldora de la portada) ── */
.cinta { position: relative; z-index: 4; background: var(--ciruela); color: var(--rosa); overflow: hidden; transform: rotate(-1.6deg); margin: -10px -12px 0; padding: 11px 0; box-shadow: 0 10px 24px var(--sombra-rosa); }
.cinta-pista { display: flex; width: max-content; gap: 18px; align-items: center; animation: correr 26s linear infinite; }
.cinta span { font-family: "Archivo Black", sans-serif; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.cinta i { font-style: normal; color: var(--blanco); font-size: .8rem; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Cabecera de sección (con foto en arco, o .sola sin foto) ── */
.cab { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: var(--e4); align-items: end; margin-bottom: var(--e4); }
.cab-txt .lead { margin-bottom: 0; }
.arco { margin: 0; position: relative; background: var(--rosa-estudio); border-radius: 999px 999px var(--r-l) var(--r-l); overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: 0 0 0 3px var(--ciruela), 0 14px 30px var(--sombra-rosa); }
.tono-ciruela .arco { box-shadow: 0 0 0 3px var(--rosa), 0 0 40px var(--sombra-magenta); }
.arco picture, .arco img { display: block; width: 100%; height: 100%; }
.arco img { object-fit: cover; object-position: 50% 8%; }
.cab.sola { grid-template-columns: minmax(0, 1fr); }

/* ── 2. ¿Te suena? ── */
.suena-lista { list-style: none; padding: 0; margin: 0 0 var(--e4); display: grid; gap: var(--e2); }
.suena-lista li { display: flex; align-items: center; gap: var(--e3); background: var(--sup); border: 1px solid var(--sup-borde); border-radius: var(--r-m); padding: 12px 14px; font-weight: 700; line-height: 1.35; box-shadow: 0 4px 0 var(--rosa-estudio-hondo); }
.sn { flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-content: center; background: var(--ciruela); color: var(--rosa); font-family: "Archivo Black", sans-serif; font-size: .8125rem; }
.sn-cuba { background: var(--rosa-estudio); font-family: inherit; font-size: 1rem; }
.suena-pie { max-width: var(--lectura); color: var(--fg-suave); }

/* ── 3. Lo que te llevas ── */
.cifras { list-style: none; padding: 0; margin: 0 0 var(--e5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.cifras li { display: flex; flex-direction: column; align-items: center; background: var(--sup); border: 1px solid var(--sup-borde); border-radius: var(--r-m); padding: 10px 2px; font-size: var(--t-xs); font-weight: 700; color: var(--fg-suave); }
.cifras b { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--fuerte); font-variant-numeric: tabular-nums; }
.llevas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.tarjeta { display: flex; gap: var(--e3); align-items: flex-start; background: var(--sup); border: 1px solid var(--sup-borde); border-radius: var(--r-m); padding: 14px; transition: transform .25s var(--curva), border-color .25s; }
.tarjeta:hover { transform: translateY(-3px); border-color: var(--linea-f); }
.tarjeta h3 { margin-top: 2px; }
.tarjeta p { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--fg-suave); }
.ico-c { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--rosa); color: var(--ciruela); }
.ed-cubana { margin-top: var(--e5); position: relative; border-radius: var(--r-l); padding: 22px 18px 18px; background: var(--rosa-estudio); color: var(--ciruela); }
.ed-cubana .sello { background: var(--ciruela); color: var(--rosa); }
.ed-cubana h3 { font-size: 1.3rem; line-height: 1.15; margin-bottom: var(--e3); color: var(--ciruela); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.chips li { font-size: var(--t-xs); font-weight: 800; line-height: 1.2; border-radius: 999px; padding: 7px 12px; background: var(--papel); color: var(--ciruela); border: 1px solid var(--linea-ciruela); }
.ed-cita { margin: var(--e4) 0 0 !important; font-style: italic; color: var(--texto-ciruela-suave); font-size: var(--t-sm); }
.indice { margin-top: var(--e4); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.indice summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: 12px 2px; font-weight: 800; cursor: pointer; list-style: none; min-height: 48px; }
.indice summary::-webkit-details-marker { display: none; }
.indice summary .ico { transition: transform .25s var(--curva); }
.indice[open] summary .ico { transform: rotate(180deg); }
.indice ol { list-style: none; margin: 0; padding: 0 0 var(--e3); display: grid; gap: 6px; }
.indice li { display: flex; gap: var(--e3); align-items: baseline; font-size: var(--t-sm); color: var(--fg-suave); }
.in-n { font-family: "Archivo Black", sans-serif; color: var(--fuerte); min-width: 1.2em; }
.cta-centro { max-width: 400px; margin: var(--e6) auto 0; text-align: center; }
.cta-precio { margin: 0 !important; font-size: var(--t-sm); color: var(--fg-suave); }
.cta-precio b { font-family: "Archivo Black", sans-serif; font-weight: 400; color: var(--fuerte); }

/* ── 4. Muestra (el libro en su tema claro, como una hoja sobre el estudio) ── */
.hoja { margin-top: var(--e4); background: var(--l-fondo); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 14px 16px 4px; box-shadow: 0 18px 40px var(--sombra-rosa); }
.hoja .libro .opener { margin: 0 -4px 1em; }
.hoja-senal { background: none; border: 0; padding: 0; margin-top: var(--e2); box-shadow: none; }
.hoja-senal .libro .card { margin: 0; box-shadow: 0 14px 30px var(--sombra-rosa); }
.muestra-k { margin: var(--e6) 0 0 !important; font-family: "Archivo Black", sans-serif; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ciruela); }
.corte-caja { --fg: var(--blanco); --fg-suave: var(--texto-claro-suave); --fuerte: var(--rosa); --btn-bg: var(--rosa); --btn-fg: var(--ciruela); --btn-hover: var(--blanco); --btn-sombra: var(--sombra-magenta); --sup: var(--ciruela-3); --linea-f: var(--linea-rosa-fuerte);
  margin-top: var(--e5); background: var(--ciruela); color: var(--blanco); border-radius: var(--r-l); padding: 24px 18px 22px; display: flex; flex-direction: column; gap: var(--e2); box-shadow: 0 20px 44px var(--sombra-rosa); }
.corte-caja p { margin: 0; }
.corte-k { font-family: "Archivo Black", sans-serif; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rosa); }
.corte-t { font-family: "Archivo Black", sans-serif; font-size: 1.25rem; line-height: 1.22; text-wrap: balance; }
.corte-sub { font-size: var(--t-sm); color: var(--texto-claro-suave); }
.corte-lista { margin: 0 0 var(--e2); padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--t-sm); line-height: 1.45; }
.corte-lista li::marker { color: var(--rosa); }
.corte-caja .btn { width: 100%; max-width: 400px; align-self: center; margin-top: var(--e2); }

/* ── 5. Marianni ── */
.quien-grid { display: grid; grid-template-columns: 1fr; gap: var(--e5); align-items: center; }
.arco-grande { width: min(62vw, 260px); justify-self: center; }
.venta .quien-cita { margin: var(--e4) 0 0; background: var(--ciruela-3); color: var(--rosa); border-left: 4px solid var(--rosa); border-radius: var(--r-m); }

/* ── 6. Cuba ── */
.cuba-caja { position: relative; border: 2.5px dashed var(--linea-ciruela-fuerte); border-radius: var(--r-l); padding: 22px 18px; background: var(--papel); text-align: center; }
.cuba-k { font-family: "Archivo Black", sans-serif; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ciruela); margin-bottom: var(--e2) !important; }
.cuba-caja h2 { font-size: 1.45rem; }
.cuba-caja > p { color: var(--fg-suave); }
.contactos { display: grid; gap: var(--e2); margin: var(--e4) 0 var(--e3); }
.btn .ico { width: 1.25em; height: 1.25em; }
.venta a.btn-wa { background: var(--whatsapp); color: var(--ciruela); }
.venta a.btn-borde { background: transparent; color: var(--ciruela); border: 1.5px solid var(--linea-ciruela-fuerte); }
.cuba-datos { font-size: var(--t-sm); overflow-wrap: anywhere; }
.cuba-regalo { margin: var(--e4) 0 0 !important; padding-top: var(--e4); border-top: 1px solid var(--linea-ciruela); font-size: var(--t-sm); }

/* ── 7. Preguntas ── */
.faq details { border-bottom: 1px solid var(--linea); }
.faq details:first-of-type { border-top: 1px solid var(--linea); }
.faq summary { padding: 15px 40px 15px 2px; min-height: 52px; font-weight: 800; color: var(--fg); position: relative; list-style: none; cursor: pointer; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: "Archivo Black", sans-serif; font-size: 1.4rem; color: var(--rosa); transition: transform .25s var(--curva); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0; padding: 0 2px 16px; line-height: 1.55; max-width: var(--lectura); color: var(--fg-suave); }
.faq-mas { margin: var(--e4) 0 0 !important; font-weight: 700; }
.faq-mas a { font-weight: 800; }
.seguridad { display: flex; gap: var(--e3); align-items: flex-start; margin: var(--e5) 0 0 !important; padding: 14px 16px; border-radius: var(--r-m); background: var(--ciruela-3); border-left: 4px solid var(--rosa); font-size: var(--t-sm); line-height: 1.5; }
.seguridad .ico { color: var(--rosa); width: 1.4em; height: 1.4em; margin-top: 1px; }

/* ── 8. Cierre y compra ── */
.final { position: relative; overflow: hidden; }
.final-grid { display: grid; gap: var(--e6); justify-items: center; }
.final-escena { width: min(56vw, 220px); }
.final-libro { transform: rotate(-6deg); }
.oferta { width: 100%; max-width: 30rem; text-align: center; display: grid; gap: var(--e3); }
.oferta h2 { margin: 0; }
.oferta-txt { margin: 0 !important; color: var(--fg-suave); }
.precio { display: flex; flex-direction: column; align-items: center; margin: var(--e2) 0 0 !important; }
.precio b { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--ciruela); }
.precio span { font-size: var(--t-sm); color: var(--fg-suave); margin-top: 4px; }
.pagos { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: var(--e2); flex-wrap: wrap; }
.pagos li { font-size: .75rem; font-weight: 800; color: var(--ciruela); border: 1px solid var(--linea-f); border-radius: 6px; padding: 4px 8px; background: var(--papel); }
.final-cuba { margin: var(--e2) 0 0 !important; font-size: var(--t-sm); font-weight: 700; }

.final-legal { margin: var(--e2) 0 0 !important; font-size: var(--t-xs); color: var(--fg-suave); }
.final-legal a { color: inherit; font-weight: 700; }

/* ── Páginas legales (privacidad, términos, pagos) ── */
.venta .legal { padding: var(--e6) 0 var(--e8); }
.legal-in { max-width: calc(var(--lectura) + 32px); }
.legal h1 { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: var(--t-h2); line-height: 1.08; margin: 0 0 var(--e3); text-wrap: balance; }
.venta .legal h2 { font-size: 1.25rem; margin: var(--e6) 0 var(--e2); }
.legal p, .legal li { line-height: 1.6; }
.legal ul { padding-left: 1.2em; margin: 0 0 var(--e3); display: grid; gap: 6px; }
.legal li::marker { color: var(--ciruela); }
.legal a { font-weight: 700; }
.legal-fecha { font-size: var(--t-sm); color: var(--fg-suave); }

/* ── Pie ── */
.pie { background: var(--ciruela); border-top: 1px solid var(--linea-rosa); }
.pie-in { display: grid; gap: var(--e4); padding-top: var(--e6); padding-bottom: calc(var(--e6) + env(safe-area-inset-bottom)); font-size: var(--t-sm); color: var(--texto-claro-suave); }
.pie p { margin: 0; }
.pie-t { font-weight: 800; color: var(--blanco); margin-bottom: var(--e1) !important; }
.pie-lista, .pie-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e4); }
.pie a { color: var(--rosa); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; overflow-wrap: anywhere; }
.pie-redes a { font-weight: 600; color: var(--texto-claro-suave); }
.pie-legal { font-size: var(--t-xs); }

/* ── Barra de compra fija ── */
.barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--ciruela-cristal); border-top: 1px solid var(--linea-rosa-fuerte);
  padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  transform: translateY(110%); transition: transform .3s var(--curva); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.barra-compra.visible { transform: none; }
.barra-compra-in { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; }
.barra-compra img { width: 32px; height: 48px; border-radius: 3px; object-fit: cover; flex: none; box-shadow: 0 4px 10px var(--sombra-libro); }
.barra-compra-txt { margin: 0 !important; flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.barra-compra-txt b { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: 1rem; color: var(--rosa); white-space: nowrap; }
.barra-compra-txt span { font-size: .75rem; color: var(--texto-claro-suave); white-space: nowrap; }
.barra-compra .btn { min-height: 48px; padding: 10px 16px; font-size: .9375rem; box-shadow: none; flex: none; }
.barra-compra .cta-error { max-width: 560px; margin: 0 auto 8px; }
@media (max-width: 359px) { .barra-compra img { display: none; } }

/* ── Aparecer al bajar (venta.js pone html.anima solo si hay IntersectionObserver y no se pidió quietud) ── */
.anima [data-aparece] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s var(--curva); }
.anima [data-aparece].visto { opacity: 1; transform: none; }
.anima .arco[data-aparece] img, .anima [data-aparece] .arco img { transform: translateY(26%) scale(1.04); transition: transform 1s var(--rebote) .1s; }
.anima .arco[data-aparece].visto img, .anima [data-aparece].visto .arco img { transform: none; }
.anima [data-escalonado] > * { opacity: 0; transform: translateY(20px) scale(.98); transition: opacity .55s ease, transform .6s var(--curva); transition-delay: calc(var(--i, 0) * 85ms); }
.anima [data-escalonado].visto > * { opacity: 1; transform: none; }
.anima [data-escalonado].hecho > * { transition-delay: 0s; }
.anima .tarjeta:hover { transform: translateY(-3px); }

/* ── Tablet ── */
@media (min-width: 600px) and (max-width: 959px) {
  .hero-foto { width: 300px; }
  .hero-lista { font-size: var(--t-base); }
}
@media (min-width: 720px) {
  .venta section { padding: var(--e8) 0; }
  .cab { grid-template-columns: minmax(0, 1fr) 190px; gap: var(--e6); }
  .llevas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras { max-width: 640px; }
  .quien-grid { grid-template-columns: 260px 1fr; gap: var(--e7); }
  .arco-grande { width: 260px; }
  .contactos { display: flex; flex-wrap: wrap; justify-content: center; }
  .cuba-caja { padding: 26px 32px 24px; }
  .barra-compra { left: 50%; right: auto; bottom: 16px; width: min(560px, calc(100% - 32px)); border: 1px solid var(--linea-rosa-fuerte); border-radius: 999px; padding: 8px 8px 8px 14px; translate: -50% 0; transform: translateY(160%); }
  .barra-compra.visible { transform: none; }
  .barra-compra img { width: 36px; height: 54px; }
  .barra-compra .btn { padding: 10px 22px; font-size: 1rem; }
}

/* ── Laptop (1440: contenido de 1120 centrado) ── */
@media (min-width: 960px) {
  .venta .hero { padding: var(--e7) 0 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 480px; grid-template-areas: "txt foto" "cta foto" "lista foto";
    column-gap: var(--e8); row-gap: var(--e5); align-items: start; align-content: start; }
  .hero-txt, .hero-cta, .hero-lista { text-align: left; max-width: 36rem; }
  .hero-txt { padding-top: var(--e5); }
  .hero-lista { justify-self: start; font-size: var(--t-base); padding-bottom: var(--e8); }
  .k-titulo, .k-guia, .k-sep { display: inline; }
  .hero-sub { font-size: var(--t-lead); margin: 0 !important; }
  .hero-foto { grid-row: 1 / span 3; align-self: center; justify-self: center; width: 400px; margin: var(--e4) 0 var(--e8); }
  .sello-precio { right: -15%; width: 112px; }
  .sello-precio b { font-size: 1.5rem; }
  .hero-cta .cta { align-items: flex-start; }
  .hero-cta .btn { min-width: 340px; }
  .hero-cta .confianza { justify-content: flex-start; font-size: var(--t-sm); }
  .cuba-link { justify-self: start; }
  .cinta { margin-top: -6px; }
  .cinta span { font-size: 1.05rem; }
  .cab { grid-template-columns: minmax(0, 1fr) 230px; }
  .suena .estrecha { max-width: 960px; }
  .suena-lista { grid-template-columns: 1fr 1fr; }
  .llevas-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .llevas-lista .tarjeta { flex-direction: column; padding: 18px 16px; }
  .ed-cubana { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--e2) var(--e6); padding: 30px 34px; align-content: start; }
  .ed-cubana .sello, .ed-cubana h3 { grid-column: 1; justify-self: start; align-self: start; }
  .ed-cubana h3 { margin: 0; }
  .ed-cubana .chips { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .ed-cita { grid-column: 1 / -1; }
  .quien-grid { grid-template-columns: 300px 1fr; }
  .arco-grande { width: 300px; }
  .final-grid { grid-template-columns: 340px minmax(0, 30rem); justify-content: center; align-items: center; gap: var(--e9); }
  .final-escena { width: 260px; }
  .oferta { text-align: left; }
  .precio { align-items: flex-start; }
  .oferta .cta { align-items: flex-start; }
  .oferta .btn { min-width: 320px; }
  .oferta .confianza, .pagos { justify-content: flex-start; }
  .pie-in { grid-template-columns: 1fr auto; align-items: end; }
  .pie-legal { grid-column: 1 / -1; }
}

/* Teléfonos bajitos (iPhone SE, navegador de Facebook con barras): el botón sigue a la vista sin bajar */
@media (max-width: 599px) and (max-height: 740px) {
  .venta .hero { padding-top: var(--e3); }
  .hero h1 { font-size: 1.75rem; }
  .hero-sub { font-size: var(--t-sm); }
  .kicker { margin-bottom: var(--e2); }
  .hero-foto { width: min(50vw, 200px); }
  .hero-grid { row-gap: var(--e3); }
}

/* Quien pide menos movimiento: todo quieto y visible desde el principio */
@media (prefers-reduced-motion: reduce) {
  .ent, .hero-portada, .sello-precio, .hero .brocha::before, .cinta-pista, .venta .btn-comprar::after { animation: none !important; }
  .venta .btn-comprar::after { display: none; }
  .barra-compra, .tarjeta, .venta .btn-comprar { transition: none; }
}