/* Landing compacta y dinámica (estetica-landing.md § 13 y § 14). Solo la usa index.html; todo bajo body.lp.
   Tokens de color, .boton, .chev, mark.verificar, .campo y .resultado vienen de estilos.css. */
:root {
  --curva-casa: cubic-bezier(.2,.7,.2,1);
  --curva-resaltador: cubic-bezier(.65,0,.35,1);
  --curva-rebote: cubic-bezier(.34,1.56,.64,1);
  --curva-salida: cubic-bezier(.4,0,1,1);
  --curva-suelta: cubic-bezier(.16,1,.3,1);
  --dur-entra: 420ms;
  --dur-resalta: 520ms;
  --dur-play: 320ms;
  --dur-chev: 200ms;
  --dur-abre-panel: 340ms; --dur-cierra-panel: 160ms; --dur-panel-txt: 220ms; --espera-panel-txt: 80ms;
  --dur-ficha: 200ms; --dur-toque: 100ms;
  --dur-abre: 240ms; --dur-abre-txt: 180ms; --espera-abre-txt: 60ms;
  --dur-cierra: 180ms;
  --dur-visor-abre: 240ms; --dur-visor-cierra: 180ms;
  --dur-latido: 2s;
}

body.lp { font-size: 16px; line-height: 1.5; overflow-x: hidden; }
.lp .contenedor { max-width: calc(720px + 2 * var(--margen)); padding: 0 var(--margen); }
.lp { --margen: 16px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 20px 0 0; isolation: isolate; }
.lp .triangulo { width: 40px; height: 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-txt { display: contents; }
.chip { order: 1; justify-self: center; display: inline-flex; align-items: center; gap: 8px; background: var(--gris-1); border-radius: 999px; padding: 4px 12px 4px 4px; margin: 0 0 12px; font-size: 13px; line-height: 1.3; font-weight: 600; flex-wrap: wrap; justify-content: center; }
.foto.s28 { width: 28px; height: 28px; }
.foto.s40 { width: 40px; height: 40px; }
.hero-kicker { order: 2; font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--texto-2); margin: 0 0 6px; }
.lp h1 { order: 3; font-size: 32px; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; position: relative; isolation: isolate; }
.bajada { order: 4; font-size: 16px; line-height: 1.4; margin: 0 0 16px; color: var(--texto-2); }
.hero-vid { order: 5; }
.hero .e5 { order: 6; margin: 16px 0 8px; }
.hero .e6 { order: 7; }
.nota-video { font-size: 14px; line-height: 1.4; color: var(--texto-2); margin: 0 0 8px; }

.video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; border: 4px solid var(--gris-2); background: var(--gris-1); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.video .pendiente-video { font-size: 15px; }
.video .play { inset: 0; margin: auto; top: 0; left: 0; width: 56px; height: 56px; transform: none; transition: transform 160ms var(--curva-casa); }
.video .play::after { left: 21px; top: 16px; border-left-width: 18px; border-top-width: 12px; border-bottom-width: 12px; }
.video .aviso { left: 8px; bottom: 8px; font-size: 12px; font-weight: 600; line-height: 1.2; padding: 5px 10px; animation: latido var(--dur-latido) ease-in-out infinite; }

.lp .boton { position: relative; min-height: 48px; height: 48px; padding: 14px 24px; font-size: 16px; }
.lp .boton .flecha { font-size: 16px; }
.lp .boton:active { transform: scale(0.97); }
/* #27 · resplandor: degradado (no blur) detrás del botón; sube al pasar el mouse */
.lp .boton::before { content: ""; position: absolute; inset: -14px -12px; z-index: -1; border-radius: 999px; pointer-events: none; opacity: .58; background: radial-gradient(closest-side, rgba(247,147,30,.6), rgba(247,147,30,0)); transition: opacity 200ms var(--curva-casa); }
.cierre, .panel-caja { isolation: isolate; }
.hero .micro { font-size: 13px; line-height: 1.4; margin: 0 0 12px; color: var(--texto-2); }
.garantia { font-size: 13px; line-height: 1.4; text-align: left; margin: 0; }
.garantia svg { width: 16px; height: 16px; margin-top: 2px; }
.cond { font: inherit; font-weight: 600; color: var(--texto); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.cond:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }

/* ---------- Prueba ---------- */
.prueba { background: var(--gris-1); margin-top: 32px; padding: 20px 0; }
.prueba-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
.prueba-izq { display: contents; }
.prueba-izq > .frase-grande { order: 1; }
.capturas { order: 2; }
.prueba-izq > .pie-prueba { order: 3; }
.frase-grande { font-size: 20px; line-height: 1.2; margin: 0; }
.capturas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.captura { background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px; padding: 8px; margin: 0; min-width: 0; }
.captura .rotulo { font-size: 11px; display: block; margin: 0 0 6px; line-height: 1.2; }
.captura .img { display: flex; width: 100%; aspect-ratio: 4 / 3; min-height: 0; padding: 8px; margin: 0; font: inherit; font-size: 12px; line-height: 1.3; color: var(--texto-2); text-align: center; align-items: center; justify-content: center; border-radius: 8px; background: var(--gris-2); border: 1px solid var(--borde); cursor: zoom-in; }
.captura .img:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
.captura.c .img { aspect-ratio: 16 / 7; }
.lp .pie-prueba { font-size: 12px; line-height: 1.45; color: var(--texto-3); margin: 0; }

/* ---------- Plegables chicos (fila "Últimos 7 días", "Letra chica completa", preguntas) ---------- */
.pleg { background: var(--gris-1); border-radius: 16px; }
.pleg-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 56px; padding: 0 16px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.25; text-align: left; color: var(--texto); background: none; border: 0; border-radius: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pleg-fila:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
.pleg .chev { width: 18px; height: 18px; transition: transform var(--dur-chev) var(--curva-casa); }
.pleg .chev::before { left: 2px; top: 5px; }
.pleg.abierto > .pleg-fila .chev { transform: rotate(180deg); }
.pleg.abierto > .pleg-fila .chev::before { border-top-color: var(--naranja); }
.pleg-cuerpo { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-cierra) var(--curva-salida), visibility 0s linear var(--dur-cierra); }
.pleg.abierto > .pleg-cuerpo { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dur-abre) var(--curva-casa), visibility 0s; }
.pleg-int { overflow: hidden; min-height: 0; }
.pleg-txt { padding: 0 16px 16px; font-size: 15px; line-height: 1.55; opacity: 0; transition: opacity 100ms var(--curva-salida); }
.pleg.abierto > .pleg-cuerpo > .pleg-int > .pleg-txt { opacity: 1; transition: opacity var(--dur-abre-txt) var(--curva-casa) var(--espera-abre-txt); }
.pleg-txt > :last-child { margin-bottom: 0; }
.pleg-txt p { margin: 0 0 12px; }

.pleg.mini .captura.c { border: 0; padding: 0; margin: 0 0 8px; }

.pleg.mini { background: var(--fondo); border-radius: 12px; }
.pleg.mini > .pleg-fila { height: auto; min-height: 44px; padding: 8px 12px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.4; border-radius: 12px; }
.pleg.mini .pleg-txt { padding: 0 12px 12px; font-size: 14px; line-height: 1.5; }
.pleg.mini .pleg-txt p { margin: 0; }

/* ---------- Antes de aplicar: fichas + paneles (§ 14.1) ---------- */
.antes { margin-top: 32px; }
.lp h2 { font-size: 20px; line-height: 1.2; font-weight: 700; margin: 0 0 12px; }

.fichas { display: flex; flex-direction: column; }           /* sin JS: todos abiertos, uno bajo otro */
.f1 { order: 1; } .pn1 { order: 2; } .f2 { order: 3; } .pn2 { order: 4; } .f3 { order: 5; }
.pn3 { order: 6; } .f4 { order: 7; } .pn4 { order: 8; } .f5 { order: 9; } .pn5 { order: 10; }

.ficha { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 64px; margin: 0 0 8px; padding: 15px 6px 15px 12px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; line-height: 1.3; text-align: left; color: var(--texto); background: var(--gris-1); border: 0; border-radius: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--dur-ficha) var(--curva-salida); }
.ficha.f5 { height: 48px; margin-bottom: 0; }
.ficha:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
.ficha .q { flex: 1; min-width: 0; }
/* capas: gris-2 (hover, #15) y petróleo (abierta, #17); solo opacidad */
.ficha::before, .ficha::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--dur-ficha) var(--curva-salida); }
.ficha::before { background: var(--gris-2); z-index: -2; }
.ficha::after { background: var(--texto); z-index: -1; }
.mas { position: relative; flex: none; width: 14px; height: 14px; color: var(--texto); transition: transform var(--dur-ficha) var(--curva-casa), color var(--dur-ficha) var(--curva-casa); }
.mas::before, .mas::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; }
.mas::before { left: 0; top: 6px; width: 14px; height: 2px; }
.mas::after { left: 6px; top: 0; width: 2px; height: 14px; }
@media (hover: hover) {
  .ficha:hover::before { opacity: 1; transition-timing-function: var(--curva-casa); }
  .ficha:hover .mas { transform: rotate(90deg); }
}
.ficha[aria-expanded="true"] { color: #fff; transition-timing-function: var(--curva-casa); }
.ficha[aria-expanded="true"]::after { opacity: 1; transition-timing-function: var(--curva-casa); }
.ficha[aria-expanded="true"] .mas { transform: rotate(45deg); color: var(--naranja); }
html:not(.js) .ficha { pointer-events: none; }
html:not(.js) .ficha .mas { display: none; }

.panel { display: grid; grid-template-rows: 1fr; }
.panel-int { overflow: hidden; min-height: 0; }
.panel-caja { margin: 0 0 8px; padding: 16px; background: var(--gris-1); border-radius: 16px; font-size: 15px; line-height: 1.55; }
.panel-caja > :last-child, .panel-caja p:last-child { margin-bottom: 0; }
.panel-caja p { margin: 0 0 12px; }

/* con JS: grilla de 2 columnas (390), un panel abierto a la vez */
.js .fichas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.js .f1 { order: 1; } .js .f2 { order: 2; } .js .pn1 { order: 3; } .js .pn2 { order: 4; }
.js .f3 { order: 5; } .js .f4 { order: 6; } .js .pn3 { order: 7; } .js .pn4 { order: 8; }
.js .f5 { order: 9; grid-column: 1 / -1; } .js .pn5 { order: 10; }
.js .panel { display: none; grid-template-rows: 0fr; grid-column: 1 / -1; transition: grid-template-rows var(--dur-cierra-panel) var(--curva-salida); }
.js .panel.montado { display: grid; }
.js .panel.abierto { grid-template-rows: 1fr; transition: grid-template-rows var(--dur-abre-panel) var(--curva-suelta); }
.js .panel .panel-caja { opacity: 0; transition: opacity 100ms var(--curva-salida); }
.js .panel.abierto .panel-caja { opacity: 1; transition: opacity var(--dur-panel-txt) var(--curva-suelta) var(--espera-panel-txt); }
.panel.pn5 .panel-caja { margin: 8px 0 0; }

/* #18 · hijos del panel en cascada de 40 ms */
@keyframes hijo { from { opacity: 0; transform: translateY(8px); } }
.js .panel.abierto .panel-caja > *, .js .panel.abierto .p1-izq > *, .js .panel.abierto .calc-izq > *, .js .panel.abierto .calc-der > * { animation: hijo var(--dur-panel-txt) var(--curva-suelta) calc(var(--espera-panel-txt) + var(--i, 0) * 40ms) backwards; }
.panel-caja > :nth-child(2), .p1-izq > :nth-child(2), .calc-izq > :nth-child(2), .calc-der > :nth-child(2) { --i: 1; }
.panel-caja > :nth-child(3), .calc-izq > :nth-child(3), .calc-der > :nth-child(3) { --i: 2; }
.panel-caja > :nth-child(4), .calc-izq > :nth-child(4), .calc-der > :nth-child(4) { --i: 3; }
.panel-caja > :nth-child(5), .calc-der > :nth-child(5) { --i: 4; }

/* Panel 1 · "Cómo sigue" horizontal */
.pn1 .panel-caja { display: flex; flex-direction: column; }
.p1-izq { display: contents; }
.p1-izq > p { order: 1; }
.p1-der { order: 2; }
.p1-izq > .boton { order: 3; margin-top: 4px; }
.p1-der > p { margin-bottom: 8px; }
.pasos.h { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 16px; margin: 0; }
.pasos.h li { position: relative; padding: 0; margin: 0; font-size: 13px; line-height: 1.35; }
.pasos.h li::before { position: static; display: flex; width: 28px; height: 28px; margin-bottom: 8px; font-size: 14px; position: relative; z-index: 1; }
.pasos.h li:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 32px; right: -12px; height: 2px; background: var(--borde); transform-origin: left center; }
@keyframes linea-pasos { from { transform: scaleX(0); } }
@keyframes circulo-pasos { from { opacity: 0; transform: scale(.6); } }
.js .pn1.abierto .pasos.h li::after { animation: linea-pasos 420ms var(--curva-resaltador) 120ms backwards; }
.js .pn1.abierto .pasos.h li::before { animation: circulo-pasos 300ms var(--curva-rebote) 120ms backwards; }
.js .pn1.abierto .pasos.h li:nth-child(2)::before { animation-delay: 260ms; }
.js .pn1.abierto .pasos.h li:nth-child(3)::before { animation-delay: 400ms; }

/* Panel 2 · método */
.pn2 .panel-caja { font-size: 14px; line-height: 1.45; }
.pn2 .pasos { margin: 0 0 12px; }
.pn2 .pasos li { margin-bottom: 8px; }
.pn2 .pasos li:last-child { margin-bottom: 0; }
@keyframes paso-entra { from { opacity: 0; transform: translateY(12px); } }
.js .pn2.abierto .pasos li { animation: paso-entra 320ms var(--curva-suelta) calc(var(--espera-panel-txt) + var(--k, 0) * 50ms) backwards; }
.pn2 .pasos li:nth-child(2) { --k: 1; } .pn2 .pasos li:nth-child(3) { --k: 2; }
.pn2 .pasos li:nth-child(4) { --k: 3; } .pn2 .pasos li:nth-child(5) { --k: 4; }

/* Panel 3 · la cuenta */
.h3-chico { font-size: 18px; margin: 0 0 12px; }
.pn3 .calc-entrada { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.pn3 .campo { display: grid; grid-template-columns: minmax(0, 1fr) 128px; column-gap: 12px; align-items: center; margin: 0 0 8px; }
.pn3 .campo label { grid-column: 1; grid-row: 1; margin: 0; font-size: 14px; line-height: 1.3; font-weight: 600; }
.pn3 .campo input[type=text] { grid-column: 2; grid-row: 1; width: 128px; min-height: 44px; height: 44px; font-size: 18px; padding: 0 12px; }
.pn3 .campo input:focus { padding-left: 11px; }
.pn3 .campo .ayuda { grid-column: 1 / -1; grid-row: 2; font-size: 13px; line-height: 1.35; margin: 4px 0 0; }
.pn3 .campo .error { grid-column: 1 / -1; grid-row: 3; font-size: 13px; margin-top: 4px; }
@keyframes aparece { from { opacity: 0; } }
.js .pn3 .campo .ayuda { display: none; }
.js .pn3 .campo:focus-within .ayuda { display: block; animation: aparece var(--dur-ficha) var(--curva-casa); }
.pn3 .resultado { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; margin: 12px 0; border-radius: 16px; }
.pn3 .resultado p { margin: 0; }
.pn3 .resultado .r-hoy, .pn3 .resultado .r-mas { background: rgba(255,255,255,.1); border-radius: 12px; padding: 10px; font-size: 13px; line-height: 1.35; }
.pn3 .resultado .deja { grid-column: 1 / -1; padding: 6px 6px 4px; font-size: 20px; }
.pn3 .resultado .deja .cola { font-size: 14px; }
.pn3 .letra-chica { font-size: 12px; line-height: 1.45; margin: 0 0 12px; }
.pn3 .boton { margin-top: 4px; }
.pn3 .calc-nota { font-size: 13px; margin: 8px 0 0; }
/* #23 · "Dejas de vender" late una vez cuando cambia la cifra */
@keyframes late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes cifra-cambia { from { opacity: .35; } }
.deja.late { animation: late 280ms var(--curva-rebote) 200ms; }
.resultado.cambia .cifra, .resultado.cambia .r-hoy span, .resultado.cambia .r-mas span { animation: cifra-cambia 200ms var(--curva-casa); }

/* Panel 4 · garantía */
.garantia-tarjetas { display: grid; gap: 8px; margin: 0 0 12px; }
.garantia-tarjetas .tarjeta { padding: 14px; border-radius: 16px; background: var(--fondo); }
.garantia-tarjetas h3 { font-size: 15px; margin-bottom: 8px; }
.garantia-tarjetas p { font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
.garantia-tarjetas p:last-child { margin-bottom: 0; }
.pn4 .pleg.lc { margin: 0 0 12px; }
.pn4 .pleg.lc .letra-chica { font-size: 12px; line-height: 1.5; color: var(--texto-2); margin: 0; }
.pn4 .ultima { font-size: 12px; line-height: 1.45; color: var(--texto-2); }

/* Panel 5 · preguntas */
.preguntas { display: contents; }
.col-q { display: contents; }
.pn5 .panel-caja { padding: 12px; }
.pn5 .pleg.mini { margin-top: 6px; }
.pn5 .col-q:first-child .pleg.mini:first-child { margin-top: 0; }

/* ---------- Cierre y pie ---------- */
.cierre { margin-top: 32px; }
.cierre-fila { display: flex; align-items: center; gap: 12px; margin: 0; }
.cierre-fila .boton { flex: 1; }
.lp .pie { margin-top: 32px; padding: 18px 16px; font-size: 12px; line-height: 1.5; border-radius: 48px 48px 0 0; }
.lp .pie p { margin: 0 auto 4px; }
.lp .pie p:last-child { margin-bottom: 0; }

/* ---------- Visor de capturas ---------- */
.visor { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(30,47,56,0.9); opacity: 0; visibility: hidden; transition: opacity var(--dur-visor-cierra) var(--curva-salida), visibility 0s linear var(--dur-visor-cierra); }
.visor[hidden] { display: flex; }
.visor.abierto { opacity: 1; visibility: visible; transition: opacity var(--dur-visor-abre) var(--curva-casa), visibility 0s; }
.visor-caja { width: 100%; max-width: 720px; transform: scale(0.96); transition: transform var(--dur-visor-cierra) var(--curva-salida); }
.visor.abierto .visor-caja { transform: none; transition: transform var(--dur-visor-abre) var(--curva-casa); }
.visor-img { background: var(--gris-2); border-radius: 12px; min-height: 240px; padding: 24px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--texto-2); font-size: 15px; line-height: 1.4; }
.visor-leyenda { color: #fff; font-size: 13px; line-height: 1.45; margin: 12px 0; }
.visor-cerrar { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: var(--texto); background: #fff; border: 0; border-radius: 999px; padding: 10px 20px; min-height: 44px; cursor: pointer; }
.visor-cerrar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Movimiento ---------- */
/* 1 · Entrada del hero en cascada (al cargar). Sin JS no hay clase .js: todo se ve completo. */
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes entra-h1 { from { transform: translateY(8px); } }
.js .e1, .js .ek, .js .e3, .js .e4, .js .e5, .js .e6 { animation: entra var(--dur-entra) var(--curva-casa) backwards; }
.js .e1 { animation-delay: 0ms; }
.js .ek { animation-delay: 30ms; }
.js .e2 { animation: entra-h1 var(--dur-entra) var(--curva-casa) 60ms backwards; }
.js .e3 { animation-delay: 120ms; }
.js .e4 { animation-delay: 180ms; }
.js .e5 { animation-delay: 240ms; }
.js .e6 { animation-delay: 300ms; }
/* 2 · Resaltador: capas absolutas por línea, scaleX 0 → 1 desde la izquierda (el texto no se mueve) */
.resaltado { white-space: nowrap; }
.js .resaltado { background: none; padding: 0; }
.rs-capa { position: absolute; z-index: -1; background: var(--naranja); border-radius: 6px; transform-origin: left center; animation: dibuja-resaltador var(--dur-resalta) var(--curva-resaltador) 380ms backwards; pointer-events: none; }
.rs-capa.quieta { animation: none; }
@keyframes dibuja-resaltador { from { transform: scaleX(0); } }
/* 3 · Play */
@keyframes entra-play { from { opacity: 0; transform: scale(0.8); } }
.js .video .play { animation: entra-play var(--dur-play) var(--curva-rebote) 420ms backwards; }
.video:hover .play { transform: scale(1.08); }
/* 26 · triángulo entra desde su esquina */
@keyframes entra-triangulo { from { opacity: 0; transform: translate(-24px, -24px); } }
.js .triangulo.tl { animation: entra-triangulo 600ms var(--curva-suelta) 500ms backwards; }
/* 28 · la flecha del botón del hero avisa dos veces */
@keyframes avisa { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.lp .boton .flecha.avisa { animation: avisa 300ms var(--curva-casa) 2; }
/* 4-7, 14, 29 · Entradas al entrar en vista (una vez) */
.js .ent { opacity: 0; transform: translateY(var(--dy, 12px)) rotate(var(--rot, 0deg)); }
.js .ent.visto { opacity: 1; transform: none; transition: opacity var(--dur, var(--dur-entra)) var(--curva, var(--curva-casa)) var(--espera, 0ms), transform var(--dur, var(--dur-entra)) var(--curva, var(--curva-casa)) var(--espera, 0ms); }
.js .captura.ent.visto { transform: rotate(var(--rot-fin, 0deg)); }
.js .ent.fin { transition: none; }
.js .boton.ent.fin { transition: background 150ms var(--curva-casa), transform 100ms var(--curva-casa); }
/* 25 · capturas quedan inclinadas; 24 · se enderezan al pasar el mouse */
.js .captura.ent.fin { transition: transform 220ms var(--curva-casa); }
@media (hover: hover) {
  .js .captura.ent.fin:hover { transform: translateY(-6px) scale(1.04); }
  .lp .boton:hover { transform: translateY(-2px); }
  .lp .boton:hover::before { opacity: 1; }
}
/* 15 · 16 · fichas ya entradas: sube 4 px al pasar el mouse, 0,97 al tocar */
.js .ficha.ent.fin { transition: transform var(--dur-ficha) var(--curva-casa), color var(--dur-ficha) var(--curva-salida); }
@media (hover: hover) { .js .ficha.ent.fin:hover { transform: translateY(-4px); } }
.js .ficha.ent.fin:active { transform: scale(0.97); transition-duration: var(--dur-toque); }
/* 12 · botón al tocar */
.lp .boton:active { transform: scale(0.97); }

@media (min-width: 1024px) {
  /* v8: escritorio = celular en una columna centrada (estetica-landing.md § 18) */
  .lp { --margen: 24px; }
  .lp .contenedor { max-width: calc(760px + 2 * var(--margen)); }
  .hero { padding-top: 32px; }
  .lp .triangulo { width: 72px; height: 72px; }
  .hero .contenedor { text-align: center; }
  .chip { font-size: 14px; }
  .foto.s28 { width: 32px; height: 32px; }
  .lp h1 { font-size: 44px; margin-bottom: 14px; }
  .bajada { font-size: 20px; margin-bottom: 20px; }
  .nota-video { font-size: 15px; margin-bottom: 10px; }
  .video { border-radius: 20px; border-width: 6px; max-width: 600px; margin-left: auto; margin-right: auto; }
  .video .play { width: 72px; height: 72px; }
  .video .play::after { left: 28px; top: 21px; border-left-width: 22px; border-top-width: 15px; border-bottom-width: 15px; }
  .video .aviso { font-size: 13px; }
  .hero .e5 { margin: 20px auto 10px; max-width: 560px; }
  .lp .boton { height: 52px; min-height: 52px; padding: 16px 32px; font-size: 17px; }
  .lp .boton .flecha { font-size: 18px; }
  .hero .micro { font-size: 14px; margin-bottom: 12px; }
  .garantia { font-size: 15px; line-height: 1.45; max-width: 560px; margin: 0 auto; }
  .garantia svg { width: 18px; height: 18px; }
  .prueba { margin-top: 48px; padding: 32px 0; }
  .frase-grande { font-size: 28px; }
  .captura { border-radius: 14px; padding: 10px; }
  .captura .rotulo { font-size: 12px; }
  .captura .img { font-size: 14px; }
  .lp .pie-prueba { font-size: 13px; }
  .antes, .cierre { margin-top: 48px; }
  .lp h2 { font-size: 28px; margin-bottom: 16px; }
  .cierre-fila { max-width: 760px; margin: 0 auto; }
  .lp .pie { margin-top: 48px; padding: 24px; font-size: 13px; border-radius: 80px 80px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .ent { opacity: 1 !important; transform: none !important; }
  .js .captura.ent, .js .ficha.ent, .js .captura.ent:hover, .js .ficha.ent:hover { transform: none !important; }
  .video:hover .play, .lp .boton:hover { transform: none !important; }
}

/* ---------- Copy v3 (estetica-landing.md § 15) ---------- */
/* 15.2 · ¿Te suena? */
.tesuena { margin-top: 32px; }
.ts-fila { padding: 12px 0; border-top: 1px solid var(--borde); }
.ts-fila:last-child { border-bottom: 1px solid var(--borde); }
.ts-dolor { font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--texto); margin: 0; }

/* 15.3 · origen de Benja junto a la foto del cierre */
.cierre-fila { display: block; }
.origen { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; }
.origen-txt p { font-size: 14px; line-height: 1.45; color: var(--texto); margin: 0; }
.origen-txt .origen-firma { font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 500; font-size: 14px; color: var(--texto-2); margin-top: 4px; }

@media (min-width: 1024px) {
  .tesuena { margin-top: 48px; }
  .ts-dolor { font-size: 17px; }
  .ts-fila { padding: 14px 0; }
}

/* ---------- v3.1 (estetica-landing.md § 16) ---------- */
/* 16.2 · escena del hero: solo desde 1024 px; abajo no se ve ni se descarga */
.escena-p { display: none; }
.escena { display: none; }
@media (min-width: 1024px) {
  .escena-p { display: block; order: 2; max-width: 420px; width: 100%; justify-self: center; margin: 0 0 12px; }
  .escena { display: block; width: 100%; height: auto; aspect-ratio: 1519 / 479; mix-blend-mode: multiply; }
  .chip { margin-bottom: 12px; }
}
/* v4: la entrada chica queda en el DOM solo para el lector de pantalla, en los dos anchos (§ 17.1) */
.hero-kicker { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 16.3 · flechas a mano: trazo + cortina (scale) + punta; solo transform y opacity */
.fl { color: var(--texto-2); overflow: visible; }
.fl path { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fl1 { display: inline-block; vertical-align: top; width: 28px; height: 34px; margin: 2px 0 -34px 6px; position: relative; z-index: 2; --ox: 14%; --oy: 9%; }
.fl2 { position: absolute; z-index: 3; color: #C3CCD1; }
.fl2-c { display: block; width: 30px; height: 30px; left: calc(50% - 7px); top: -18px; --ox: 13%; --oy: 10%; }
.fl2-d { display: none; width: 48px; height: 36px; --ox: 8%; --oy: 83%; }
.capturas { position: relative; }
.fl .cortina { transform-box: fill-box; }
.fl1 .cortina { transform-origin: top; }
.fl2 .cortina { transform-origin: left; }
.fl .punta { transform-box: fill-box; transform-origin: center; }
.js .fl { opacity: 0; transform: rotate(-14deg); transform-origin: var(--ox) var(--oy); }
.js .fl1 .cortina { transform: scaleY(0); }
.js .fl2 .cortina { transform: scaleX(0); }
.js .fl .punta { opacity: 0; transform: scale(.6); }
.js .fl.dib { opacity: 1; transform: none; transition: opacity 360ms var(--curva-suelta), transform 360ms var(--curva-suelta); }
.js .fl.dib .cortina { transform: none; transition: transform 420ms var(--curva-suelta) 80ms; }
.js .fl.dib .punta { opacity: 1; transform: none; transition: opacity 160ms var(--curva-rebote) 500ms, transform 160ms var(--curva-rebote) 500ms; }

/* 16.4 · íconos de línea de ¿Te suena? */
.ico { display: block; width: 24px; height: 24px; color: var(--texto); }
.ico * { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ts-fila { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
.ts-fila .ico { margin-top: -2px; }
.js .ts-fila .ico { opacity: 0; transform: scale(.8); }
.js .ts-fila.visto .ico { opacity: 1; transform: none; transition: opacity 300ms var(--curva-suelta), transform 300ms var(--curva-suelta); }
.js .ts-fila .ts-txt { opacity: 0; }
.js .ts-fila.visto .ts-txt { opacity: 1; transition: opacity 300ms var(--curva-suelta) 60ms; }

/* 16.5 · prueba: franja petróleo con bordes en onda */
.prueba { background: var(--texto); position: relative; }
.prueba::before, .prueba::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V12C240 0 480 0 720 12S1200 24 1440 12V24Z' fill='%231E2F38'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.prueba::before { top: -12px; }
.prueba::after { bottom: -12px; transform: scaleY(-1); }
.prueba .frase-grande { color: #fff; }
.prueba .frase-grande .nt { color: var(--naranja); }
.prueba-izq > .pie-prueba { color: #C3CCD1; }
.prueba .captura { border-color: transparent; }
.prueba .captura .img:focus-visible { outline-color: #fff; }
.prueba .pleg-fila:focus-visible { outline-color: var(--texto); }
.prueba .capturas { margin-top: 0; }
/* 16.3 · hueco de la flecha 2 a 390: 10 → 30 px */
.prueba-izq > .frase-grande { margin-bottom: 18px; }
@media (min-width: 1024px) {
  .prueba::before, .prueba::after { height: 20px; }
  .prueba::before { top: -20px; }
  .prueba::after { bottom: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .fl, .js .fl .cortina, .js .fl .punta, .js .ts-fila .ico, .js .ts-fila .ts-txt { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* v6 · hero tipo iUROP (estetica-landing.md § 19) */
.lp h1 { margin-bottom: 10px; }
.credencial { order: 4; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--texto-2); text-align: center; max-width: 340px; justify-self: center; margin: 0 0 12px; }
.credencial b { font-weight: 600; color: var(--texto); }
.marcas { order: 4; display: flex; justify-content: center; align-items: center; margin: 0 0 16px; padding: 14px 0 12px; --w: 118px; --solape: 4px; }
.marca-t { width: var(--w); height: var(--w); border-radius: 12px; box-shadow: 0 8px 20px rgba(16,24,40,.22); object-fit: cover; background: var(--gris-1); position: relative; }
.marca-t + .marca-t { margin-left: calc(var(--solape) * -1); }
.marca-t.t1 { transform: rotate(-8deg) translateY(8px); z-index: 1; }
.marca-t.t2 { transform: translateY(-6px); z-index: 3; }              /* la del centro va encima: ChickenProtein+ */
.marca-t.t3 { transform: rotate(8deg) translateY(8px); z-index: 2; }
@media (min-width: 1024px) {
  .credencial { font-size: 19px; max-width: 620px; margin-bottom: 14px; }
  .marcas { margin-bottom: 18px; --w: 172px; --solape: 8px; }
  .marca-t { border-radius: 16px; }
}

/* v6.1 — dos familias (Poppins 600/700 · Inter 400/600), sin cursivas ni pesos sueltos */
.credencial{font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.45;color:var(--texto-2);max-width:340px}
.credencial b{font-weight:600;color:var(--texto)}
@media (min-width:1024px){.credencial{font-size:19px;max-width:620px}}
strong,b{font-weight:600}
em{font-style:normal}
.hero-kicker{font-weight:400}
.frase-grande .nt,.video .pendiente-video,.semana .esta strong,.resultado .deja strong{font-weight:700}
.origen-txt .origen-firma{font-family:'Inter',system-ui,sans-serif;font-style:normal;font-weight:600}

/* v7 (06-10-2026) · estetica-landing.md § 20. Va al final de landing.css; reemplaza las reglas de .fichas/.ficha/.panel/.pn1-5,
   .p1-*, .calc-izq/.calc-der, .garantia-tarjetas, .preguntas/.col-q, .origen*, .cierre-fila (se borran al programar). */
.v7 { margin-top: 32px; }
.v7 h2 { margin-bottom: 12px; }
.v7 h3 { font-size: 15px; line-height: 1.3; font-weight: 600; margin: 0; }
.v7-sub { font-size: 15px; line-height: 1.45; color: var(--texto-2); margin: -4px 0 12px; }
.v7-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* A · la cuenta */
.calc { background: var(--gris-1); border-radius: 16px; padding: 12px; }
.calc-res { background: var(--texto); color: #fff; border-radius: 12px; padding: 14px 14px 12px; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.calc-res p { margin: 0; }
.calc-eti { font-size: 13px; line-height: 1.3; color: #C3CCD1; }
.calc-cifra { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 34px; line-height: 1.15; margin: 2px 0 10px !important; }
.calc-cifra #rDif { color: var(--naranja); }
.calc-mes { font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap; }
.calc-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-par p { background: rgba(255,255,255,.1); border-radius: 8px; padding: 6px 10px; font-size: 14px; line-height: 1.3; }
.calc-k { display: block; font-size: 12px; color: #C3CCD1; }
.calc-campo { margin: 0 0 10px; }
.calc-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calc-fila label { font-size: 14px; font-weight: 600; line-height: 1.3; }
.calc-fila input { width: 120px; height: 44px; padding: 0 12px; font: inherit; font-size: 17px; font-weight: 600; text-align: right; color: var(--texto); background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; font-variant-numeric: tabular-nums; }
.calc-fila input:focus { outline: none; border: 2px solid var(--texto); padding: 0 11px; }
.calc-fila input[aria-invalid=true] { border-color: #A3281C; }
.calc-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.calc-chips button { height: 40px; font: inherit; font-size: 14px; font-weight: 600; color: var(--texto); background: var(--fondo); border: 1px solid var(--borde); border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 150ms var(--curva-casa), color 150ms var(--curva-casa); }
.calc-chips button[aria-pressed=true] { background: var(--texto); border-color: var(--texto); color: #fff; }
.calc-chips button:focus-visible, .riel-b:focus-visible, .calc-desliza:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
.calc-desliza { width: 100%; height: 32px; margin: 4px 0 0; accent-color: var(--naranja); cursor: pointer; }
.calc-error { color: #A3281C; font-size: 13px; margin: 4px 0 0; }
.calc-nota { font-size: 13px; line-height: 1.4; color: var(--texto-2); margin: 4px 0 12px; }

/* B · método: riel con scroll-snap; la tarjeta mide 78% del ancho para que asome la siguiente */
.riel-wrap { overflow: hidden; }
.riel-pasos { list-style: none; margin: 0; padding: 0 var(--margen) 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margen); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.riel-pasos::-webkit-scrollbar { display: none; }
.riel-pasos:focus-visible { outline: 3px solid var(--texto); outline-offset: -3px; }
.paso-t { scroll-snap-align: start; background: var(--gris-1); border-radius: 16px; padding: 14px; min-height: 132px; }
.paso-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--naranja); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; margin: 0 0 10px; }
.paso-t h3 { margin-bottom: 4px; }
.paso-t p { font-size: 14px; line-height: 1.45; color: var(--texto-2); margin: 0; }
.riel-ctl { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 0; min-height: 24px; }
.riel-puntos { display: flex; gap: 6px; }
.riel-puntos i { width: 6px; height: 6px; border-radius: 3px; background: var(--borde); transition: width 200ms var(--curva-casa), background 200ms var(--curva-casa); }
.riel-puntos i.on { width: 18px; background: var(--texto); }
.riel-flechas { display: none; gap: 8px; }
.riel-b { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); font-size: 18px; cursor: pointer; }
.riel-b:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .riel-flechas { display: flex; } }
.v7-extra { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--texto-2); margin: 12px 0 0; }
.v7-extra .v7-ico { color: var(--texto); margin-top: -1px; }

/* C · garantía */
.g-tarjetas { display: grid; gap: 8px; margin: 0 0 14px; }
.g-t { display: flex; gap: 12px; align-items: flex-start; background: var(--gris-1); border-radius: 16px; padding: 14px; }
.g-t .v7-ico { width: 26px; height: 26px; color: var(--naranja-texto); margin-top: 1px; }
.g-t p { font-size: 14px; line-height: 1.45; color: var(--texto-2); margin: 2px 0 0; }
.g-eti { font-size: 13px; font-weight: 600; color: var(--texto-2); margin: 0 0 8px; }
.g-linea { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.g-linea::before { content: ""; position: absolute; left: 7px; right: calc(33.33% - 7px); top: 6px; height: 2px; background: var(--borde); }
.g-linea li { position: relative; padding: 22px 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.g-linea li::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--texto); box-sizing: border-box; }
.g-linea li:nth-child(2)::before { background: var(--naranja); border-color: var(--naranja); }
.g-linea li:nth-child(3)::before { background: var(--texto); }
.g-linea b { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: var(--texto); }
.g-linea span { display: block; }
.g-nota { font-size: 13px; line-height: 1.45; color: var(--texto-2); margin: 0 0 10px; }
.v7-garantia .pleg.mini { background: var(--gris-1); }
.v7-garantia .letra-chica { font-size: 12px; line-height: 1.5; color: var(--texto-2); margin: 0 0 8px; }
.v7-garantia .letra-chica:last-child { margin-bottom: 0; }

/* D · preguntas: las mismas filas .pleg.mini, sobre gris */
.faq { display: grid; gap: 6px; }
.v7-faq .pleg.mini { background: var(--gris-1); }

/* cierre: botón + lo que pasa al aplicar, en fila de tres */
.v7-cierre { margin-top: 32px; }
.sigue { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: sigue; }
.sigue li { counter-increment: sigue; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; line-height: 1.3; color: var(--texto-2); }
.sigue .v7-ico { width: 24px; height: 24px; color: var(--texto); }
.sigue li span::before { content: counter(sigue) ". "; font-weight: 600; color: var(--texto); }

@media (min-width: 1024px) {
  .v7 { margin-top: 48px; }
  .v7-sub { font-size: 16px; }
  .calc { padding: 16px; }
  .calc-res { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 16px; padding: 16px 18px; }
  .calc-res .calc-eti { grid-column: 1 / -1; }
  .calc-cifra { font-size: 40px; margin: 2px 0 0 !important; }
  .calc-par { width: 300px; }
  .calc .boton { max-width: 420px; margin: 0 auto; }
  /* en escritorio caben las 5: fila de 5, sin deslizar y sin controles */
  .riel-wrap { max-width: calc(1100px + 2 * var(--margen)); margin: 0 auto; }
  .riel-pasos { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .riel-ctl { display: none; }
  .g-tarjetas { grid-template-columns: 1fr 1fr; }
  .faq { grid-template-columns: 1fr 1fr; align-items: start; }
  .v7-cierre .boton { max-width: 420px; margin: 0 auto; }
  .sigue { max-width: 560px; margin: 16px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .riel-pasos { scroll-behavior: auto; } }

/* ---------- v7.9 (07-10-2026, estetica-landing.md § 28): el método y la garantía doble en una sola sección ----------
   La garantía pasa a ser un bloque dentro de #metodo, separado por una línea. Su título es h3 a 20px (el tamaño de h3 del
   sitio, no el de 15px de .v7 h3); las tarjetas usan h4. Sale la letra chica: la regla de medición va en .g-medida.
   Quedan sin uso y no se borran: .tesuena/.ts-*, .g-eti, .g-linea, .g-nota, .lc-*, .v7-garantia .pleg.mini / .letra-chica. */
.g-junto { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--borde); }
.g-junto .g-titulo { font-family: 'Poppins', sans-serif; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--texto); margin: 0 0 12px; }
.g-t h4 { font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--texto); margin: 0; }
.g-junto .g-tarjetas { margin-bottom: 0; }
.g-t .g-medida { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borde); font-size: 13px; line-height: 1.45; color: var(--texto-2); }
@media (min-width: 1024px) {
  .g-junto { margin-top: 40px; padding-top: 32px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; gap: 0 32px; align-items: start; }
  .g-junto .g-titulo { font-size: 24px; grid-column: 1; }
  .g-junto .ilu { grid-column: 1; margin-bottom: 0; }
  .g-junto .g-tarjetas { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr 1fr; }
}

/* v8.1 · prueba CP+ con las tarjetas de Shopify (estetica-landing.md § 30): cada imagen a su tamaño real (no se agranda: son capturas 1x),
   sobre blanco como el panel. En la tarjeta va solo la tasa; el visor muestra la fila completa. La captura de los $98,38 M no ocupa
   lugar: se abre desde «(ver captura)» en la línea de facturación. A 390 la fila completa se ve a su tamaño y se desliza de lado. */
.prueba-izq > .prueba-fact { order: 1; }
.prueba-fact { margin: -8px 0 0; font-size: 15px; line-height: 1.45; color: #C3CCD1; }
.prueba-fact b { color: #fff; font-weight: 600; white-space: nowrap; }
.capturas.v81 .captura .img { aspect-ratio: auto; min-height: 0; padding: 6px; background: #fff; }
.capturas.v81 .captura .img img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ver-cap { font: inherit; color: #C3CCD1; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: zoom-in; white-space: nowrap; }
.ver-cap:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ver-cap img.solo-visor { display: none; }
.capturas.v81 .captura .img img.solo-visor { display: none; }
.visor-img img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.visor-img:has(img) { background: #fff; min-height: 0; padding: 12px; }
.visor-img .solo-tarjeta { display: none; }
.visor-img .solo-visor { display: block; }
@media (max-width: 1023px) {
  .visor-img:has(img) { overflow-x: auto; justify-content: flex-start; }
  .visor-img .solo-visor { max-width: none; }
}
@media (min-width: 1024px) {
  .prueba-fact { font-size: 17px; }
  .capturas.v81 { max-width: 720px; margin-left: auto; margin-right: auto; width: 100%; }
}

/* v8.2 · globo de Instagram en la tarjeta de ChickenProtein+ (estetica-landing.md § 31). Paleta de la landing: blanco, borde gris,
   petróleo (--texto) en el anillo y la pista; sin naranja (va solo en el botón, § 28). El globo es absoluto: no mueve el hero. */
.marca-t.ig { display: block; padding: 0; overflow: visible; background: none; box-shadow: none; transition: transform 220ms var(--c-casa); }
.ig-tarjeta { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--gris-1); border-radius: inherit; box-shadow: 0 8px 20px rgba(16,24,40,.22); cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.ig-tarjeta > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ig-tarjeta:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
.ig-pista { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--texto); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(16,24,40,.25); }
.ig-pista svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; }
.ig-pista svg .pt { fill: #fff; stroke: none; }

.ig-globo { position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 20; width: 268px; padding: 12px 14px 10px; background: #fff; border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: 0 14px 32px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.08); color: var(--texto); text-decoration: none; text-align: left; font-family: 'Inter', system-ui, sans-serif;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px) scale(.96); transform-origin: 50% 100%;
  transition: opacity 160ms var(--c-sale), transform 160ms var(--c-sale), visibility 0s linear 160ms; }
.ig-globo::before { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: #fff; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); transform: translateX(-50%) rotate(45deg); border-bottom-right-radius: 3px; }
.ig-globo::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
.ig-cab { display: flex; align-items: center; gap: 10px; }
.ig-foto { width: 44px; height: 44px; border-radius: 50%; flex: none; padding: 2px; background: #fff; box-shadow: 0 0 0 2px var(--texto); }
.ig-nombres { display: flex; flex-direction: column; min-width: 0; }
.ig-usuario { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.25; }
.ig-nombre { font-size: 12px; line-height: 1.3; color: var(--texto-2); }
.ig-cifras { display: flex; justify-content: space-between; gap: 6px; margin: 10px 0 8px; padding-top: 9px; border-top: 1px solid var(--gris-2); font-size: 11.5px; line-height: 1.3; color: var(--texto-2); }
.ig-cifras span { display: flex; flex-direction: column; }
.ig-cifras b { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: var(--texto); }
.ig-ir { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ig-globo:hover .ig-ir { text-decoration-thickness: 2px; }
.ig-globo:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
/* puente bajo el globo (::after): el mouse cruza de la tarjeta al globo sin cerrarlo. Se abre con el mouse encima (solo puntero fino),
   con el foco de teclado, o con toque o clic (clase .abierto, ig-marca.js) */
@media (hover: hover) and (pointer: fine) {
  .marca-t.ig:hover .ig-globo { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); transition: opacity 200ms var(--c-casa), transform 260ms var(--c-rebote), visibility 0s; }
  .marca-t.t2.ig:hover { transform: translateY(-12px) scale(1.04); }
}
.marca-t.ig:focus-within .ig-globo, .marca-t.ig.abierto .ig-globo { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); transition: opacity 200ms var(--c-casa), transform 260ms var(--c-rebote), visibility 0s; }
.marca-t.t2.ig.abierto, .marca-t.t2.ig:focus-within { transform: translateY(-12px) scale(1.04); }
.marca-t.ig:hover, .marca-t.ig:focus-within, .marca-t.ig.abierto { z-index: 5; }

@media (min-width: 1024px) {
  .ig-globo { width: 292px; padding: 14px 16px 12px; }
  .ig-foto { width: 50px; height: 50px; }
  .ig-pista { width: 32px; height: 32px; }
  .ig-pista svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .marca-t.ig, .ig-globo, .marca-t.ig .ig-globo { transition: opacity 120ms linear, visibility 0s !important; }
  .ig-globo, .marca-t.ig.abierto .ig-globo, .marca-t.ig:focus-within .ig-globo, .marca-t.ig:hover .ig-globo { transform: translate(-50%, 0) !important; }
  .marca-t.t2.ig, .marca-t.t2.ig.abierto, .marca-t.t2.ig:focus-within, .marca-t.t2.ig:hover { transform: translateY(-6px) !important; }
}

/* ---------- v8.3 (07-10-2026, estetica-landing.md § 32): prueba en tres hitos y página al largo de iUROP ----------
   Prueba: enero → marzo → agosto, cada cifra pegada a su mes y a su captura (la celda «Ventas totales» recortada, 1x, sin
   agrandar). A 390 la línea de tiempo baja en vertical (las capturas no caben en tres columnas); a 1440, tres tarjetas en fila.
   Quedan sin uso y no se borran: .prueba-grid/.prueba-izq/.prueba-fact/.ver-cap/.capturas.v81/.fl2, .riel-*, .ilu-garantia, .g-junto, .sigue. */
.prueba.v83 .frase-grande { margin: 0 0 14px; }
.hitos { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; position: relative; }
.hitos::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 18px; width: 2px; background: #3D5260; border-radius: 1px; }
.hito { position: relative; padding-left: 22px; margin: 0; }
.hito::before { content: ""; position: absolute; left: 1px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--texto); border: 2px solid #C3CCD1; box-sizing: border-box; }
.hito.h3::before { background: var(--naranja); border-color: var(--naranja); }
.hito-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px 8px 14px; margin: 0; font: inherit; text-align: left; color: var(--texto); background: #fff; border: 0; border-radius: 12px; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.hito-b:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hito.h3 .hito-b { box-shadow: inset 0 0 0 2px var(--naranja); }
.hito-txt { display: flex; flex-direction: column; min-width: 0; }
.hito-mes { font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.hito-cifra { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hito-sub { font-size: 13px; line-height: 1.3; color: var(--texto-2); white-space: nowrap; }
.hito-cap { display: block; flex: none; height: 44px; width: auto; border-radius: 6px; box-shadow: 0 0 0 1px var(--borde); }
.hito-b img.solo-visor { display: none; }
.visor-img .hito-txt { display: none; }
.prueba.v83 .pie-prueba { color: #C3CCD1; }

/* Si trabajamos juntos: garantía + tarjetas plegables (la cuenta, los 5 pasos y 4 preguntas) */
.v83-juntos .g-titulo { font-family: 'Poppins', sans-serif; font-size: 17px; line-height: 1.25; font-weight: 700; color: var(--texto); margin: 14px 0 8px; }
.v83-juntos .g-tarjetas { margin: 0; }
.v83-juntos .g-t { padding: 12px 14px; }
.v83-juntos .v7-extra { margin: 10px 0 14px; }
.v83-juntos .faq { gap: 8px; }
.v83-juntos .pleg-cuenta:not(.abierto) { border-color: var(--naranja); }
/* v8.5 (estetica-landing.md § 34): la cuenta abierta usa casi todo el ancho de su tarjeta */
.v7-faq .pleg.mini.pleg-cuenta .pleg-txt { padding: 0 8px 8px; }
.pleg-cuenta .cx-intro { padding: 0 8px; }
.pasos-lista { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 7px; }
.pasos-lista li { counter-increment: paso; position: relative; padding-left: 28px; font-size: 14px; line-height: 1.4; }
.pasos-lista li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--naranja); color: var(--texto); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11px; line-height: 20px; text-align: center; }
.pasos-lista h3 { display: inline; font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--texto); margin: 0; }
.pasos-lista p { display: inline; margin: 0 !important; font-size: 14px; line-height: 1.4; }
.sigue-linea { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--texto-2); text-align: center; }
.v83-juntos ~ .cierre { margin-top: 24px; }
.lp .pie { margin-top: 24px; padding: 14px 16px; }
.lp .pie p { margin: 0 auto; }

@media (min-width: 1024px) {
  .prueba.v83 .frase-grande { margin-bottom: 22px; }
  .hitos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 22px; margin-bottom: 14px; }
  .hitos::before { left: 16.6%; right: 16.6%; top: 5px; bottom: auto; width: auto; height: 2px; }
  .hito { padding-left: 0; }
  .hito::before { left: 50%; top: -22px; margin: 0 0 0 -6px; }
  .hito-b { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 14px; height: 100%; transition: transform 220ms var(--curva-casa); }
  .hito-cifra { font-size: 32px; }
  .hito-sub { font-size: 14px; }
  .hito-cap { height: auto; }
  .js .hito.ent.fin:hover .hito-b { transform: translateY(-4px); }
  .v83-juntos .j-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 40px; align-items: start; }
  .v83-juntos .faq { grid-template-columns: 1fr; padding-top: 4px; }
  .v83-juntos .g-titulo { font-size: 20px; margin-top: 18px; }
  .v83-juntos .g-tarjetas { grid-template-columns: 1fr; }
  .v83-juntos ~ .cierre { margin-top: 36px; }
  .sigue-linea { font-size: 14px; }
  .lp .pie { margin-top: 36px; padding: 16px 24px; }
}
@media (prefers-reduced-motion: reduce) { .hito-b { transition: none; } }

/* v8.3 · ajuste tras medir: a 390 la tarjeta lleva solo la fila del valor (1x, sin el rótulo), la fila plegable baja a 48 px */
.hito-cap img { display: block; height: 26px; width: auto; }
.hito-cap { height: auto; border-radius: 4px; overflow: hidden; }
.hito-b { padding: 7px 10px 7px 14px; }
.hito-cifra { font-size: 19px; }
.hito-sub { font-size: 12px; }
.pasos-intro { margin: 0 0 8px !important; font-size: 13px; }
.v83-juntos .g-titulo { margin-top: 0; }
.v7-faq.v83-juntos .pleg.mini > .pleg-fila { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
.v83-juntos .pleg-fila .dz-corchetes { font-weight: 600; }
@media (min-width: 1024px) {
  .hito-cap img { height: auto; }
  .hito-cifra { font-size: 32px; }
  .hito-sub { font-size: 14px; }
  .hito-b { padding: 16px 18px; }
  .v7-faq.v83-juntos .pleg.mini > .pleg-fila { min-height: 54px; }
}

/* v8.3 · el mes y su conversión en una línea; la cifra con «al mes» en la segunda */
.hito-mes .hito-sub { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.hito-cifra small { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; color: var(--texto-2); }
@media (min-width: 1024px) { .hito-mes .hito-sub { font-size: 13px; } .hito-cifra small { font-size: 14px; } }
.hito-mes { white-space: nowrap; }
@media (max-width: 1023px) { .hito-mes { letter-spacing: .04em; } .hito-b { gap: 8px; } }
@media (min-width: 1024px) { .hitos { padding-top: 18px; margin-bottom: 10px; } .hito::before { top: -18px; } .hito-b { gap: 6px; padding: 12px 18px; } }
/* La cuenta plegada vive en una columna de ~420 px: se queda con su forma de una columna también en escritorio. */
/* (v8.5: el bloque de escritorio de la cuenta salió; calculadora.css tiene una sola forma, ver su Historial) */

/* v8.4 (estetica-landing.md § 33): el globo de Instagram también en ALTUREX (t1) y PARASUBEBE (t3). Mismo dibujo que § 31.
   1) El globo de los costados se alinea al borde de su tarjeta (centrado se saldría de la pantalla a 390) y el pico queda al centro de la tarjeta.
   2) Al abrirse, la tarjeta se endereza y sube como la de CP+, así el globo queda derecho.
   3) Visto azul junto al usuario, solo en las cuentas que lo tienen.
   4) Uno abierto a la vez: con el mouse sobre una tarjeta, se esconde el globo de las otras (además de ig-marca.js). */
.ig-globo { --gx: -50%; transform: translate(var(--gx), 8px) scale(.96); }
.marca-t.t1 .ig-globo { --gx: 0px; left: 0; transform-origin: calc(var(--w) / 2) 100%; }
.marca-t.t3 .ig-globo { --gx: 0px; left: auto; right: 0; transform-origin: calc(100% - var(--w) / 2) 100%; }
.marca-t.t1 .ig-globo::before { left: calc(var(--w) / 2); }
.marca-t.t3 .ig-globo::before { left: calc(100% - var(--w) / 2); }
@media (hover: hover) and (pointer: fine) {
  .marca-t.ig:hover .ig-globo { transform: translate(var(--gx), 0) scale(1); }
  .marca-t.t1.ig:hover, .marca-t.t3.ig:hover { transform: translateY(-12px) scale(1.04); }
  .marcas:hover .marca-t.ig:not(:hover) .ig-globo { opacity: 0; visibility: hidden; pointer-events: none; }
}
.marca-t.ig:focus-within .ig-globo, .marca-t.ig.abierto .ig-globo { transform: translate(var(--gx), 0) scale(1); }
.marca-t.t1.ig.abierto, .marca-t.t1.ig:focus-within, .marca-t.t3.ig.abierto, .marca-t.t3.ig:focus-within { transform: translateY(-12px) scale(1.04); }
.ig-usuario { display: flex; align-items: center; gap: 4px; }
.ig-visto { width: 14px; height: 14px; flex: none; }
.ig-visto circle { fill: #0095F6; }
.ig-visto path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) {
  .ig-visto { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-globo, .marca-t.ig.abierto .ig-globo, .marca-t.ig:focus-within .ig-globo, .marca-t.ig:hover .ig-globo { transform: translate(var(--gx), 0) !important; }
  /* la tarjeta de un costado se endereza sin animación, para que el globo no quede inclinado */
  .marca-t.t1.ig.abierto, .marca-t.t1.ig:focus-within, .marca-t.t3.ig.abierto, .marca-t.t3.ig:focus-within { transform: translateY(-6px) !important; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .marca-t.t1.ig:hover, .marca-t.t3.ig:hover { transform: translateY(-6px) !important; }
}
/* v8.4: cerrado, el globo de t1/t3 gira con su tarjeta y su esquina asoma fuera de la pantalla a 390 (medido: 404 px de ancho). Se recorta solo a lo ancho; arriba y abajo nada cambia. */
.hero { overflow-x: clip; }

/* v8.12 — rótulo «Caso de éxito:» arriba de la frase de la prueba (estetica-landing.md § 41). El mismo .rotulo de la nota de
   /aplicar/ (mayúscula chica, 600, espaciado), en el gris claro del pie de la prueba: sobre petróleo, sin naranja. */
.prueba.v83 .rotulo-caso { display: block; margin: 0 0 6px; color: #C3CCD1; }
@media (min-width: 1024px) { .prueba.v83 .rotulo-caso { font-size: 13px; margin-bottom: 8px; } }