/* Kit de movimiento de landings (agente Movimiento e interacción). Catálogo y reglas: Plantillas/Movimiento/LEEME.md.
   Trabaja con Scripts/movimiento.js, que pone la clase js-mov y las variables --hp, --sp, --py, --pp, --mx, --my.
   Los colores salen de la marca de cada sitio; si no existen, usa los de respaldo. Solo transform y opacity en lo que se mueve. */
:root{
  --mv-acento:var(--miel,var(--acento,#d9a441));
  --mv-tinta:var(--azuki,var(--tinta,#3a2a28));
  --mv-suave:var(--sakura,#f3d6cb);
  --mv-linea:var(--linea,#e7e4dc);
  --mv-exito:var(--exito,var(--acento,#2f5d50));
  --mv-caja:var(--superficie,var(--caja,#fff))
}
/* Chips flotantes del hero (opcional: <span class="flota f1|f2|f3" aria-hidden="true"> dentro de .tel-hero, con números reales de esa captura) */
[data-tipo="hero"]{overflow-x:clip}
.tel-hero{position:relative}
.flota{position:absolute;z-index:2;background:var(--mv-caja);border:1px solid var(--mv-linea);border-radius:14px;padding:8px 12px;font-size:.82rem;line-height:1.25;color:var(--tinta-2,var(--suave,#666));box-shadow:0 10px 28px rgba(0,0,0,.12);white-space:nowrap}
.flota b{display:block;font-family:var(--f-display,inherit);font-size:1.15rem;color:var(--mv-tinta)}
.flota.f1{left:-34px;top:44%}
.flota.f2{right:-30px;top:66%}.flota.f2 b{color:var(--mv-exito)}
.flota.f3{right:-18px;top:9%;background:var(--mv-acento);border-color:var(--mv-acento);color:var(--sobre-miel,#2a1a10);font-weight:800}
@media (max-width:420px){.flota.f1{left:-4px}.flota.f2{right:-4px}.flota.f3{right:-2px}.flota{max-width:44vw;white-space:normal}}
.pin-tel{display:none}
@media print{.flota,.deco,.fondo-vivo{display:none}}

@media screen and (prefers-reduced-motion:no-preference){
  @keyframes mv-entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes mv-media{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes mv-chip{from{opacity:0;transform:translateY(16px) scale(.7)}to{opacity:1;transform:none}}
  @keyframes mv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes mv-brillo{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
  @keyframes mv-late{0%,100%{transform:scale(1)}40%{transform:scale(1.05)}70%{transform:scale(.99)}}

  /* ===== hero: texto en cascada, imagen que entra inclinada en 3D y se endereza al bajar, sigue al mouse ===== */
  .js-mov [data-tipo="hero"]{position:relative;isolation:isolate}
  .js-mov [data-tipo="hero"] .mv-texto{translate:0 calc(var(--hp,0) * 24px)}   /* sin desvanecer al bajar: el titular siempre se lee (Sergio, 2026-11-02) */
  .js-mov [data-tipo="hero"] .mv-texto>*{animation:mv-entra .6s cubic-bezier(.2,.8,.2,1) both}
  .js-mov [data-tipo="hero"] .mv-texto>:nth-child(1){animation-delay:.05s}.js-mov [data-tipo="hero"] .mv-texto>:nth-child(2){animation-delay:.14s}
  .js-mov [data-tipo="hero"] .mv-texto>:nth-child(3){animation-delay:.26s}.js-mov [data-tipo="hero"] .mv-texto>:nth-child(4){animation-delay:.38s}
  .js-mov [data-tipo="hero"] .mv-texto>:nth-child(5){animation-delay:.48s}.js-mov [data-tipo="hero"] .mv-texto>:nth-child(n+6){animation-delay:.56s}
  .js-mov [data-tipo="hero"] .mv-media{animation:mv-media .9s cubic-bezier(.2,.9,.25,1.1) .25s backwards;rotate:y calc(-16deg + var(--hp,0) * 16deg);translate:0 calc(var(--hp,0) * -50px);transform:rotateX(calc(var(--my,0) * -5deg)) rotateY(calc(var(--mx,0) * 7deg));transition:transform .35s ease-out}
  .js-mov [data-tipo="hero"]>*,.js-mov [data-tipo="hero"] .grid{perspective:1400px}
  .js-mov [data-tipo="hero"]::before,.js-mov [data-tipo="hero"]::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;z-index:-1;opacity:.55}
  .js-mov [data-tipo="hero"]::before{width:min(360px,70vw);height:min(360px,70vw);background:var(--mv-suave);right:0;top:30px;translate:0 calc(var(--hp,0) * 160px);scale:calc(1 + var(--hp,0) * .2)}
  .js-mov [data-tipo="hero"]::after{width:min(280px,60vw);height:min(280px,60vw);background:var(--mv-acento);left:0;bottom:-60px;opacity:.3;translate:0 calc(var(--hp,0) * -110px)}
  .js-mov .flota{animation:mv-chip .5s cubic-bezier(.2,.9,.25,1.4) backwards,mv-bob 5s ease-in-out infinite}
  .js-mov .flota.f3{animation-delay:.95s,1.45s}.js-mov .flota.f1{animation-delay:1.15s,1.65s}.js-mov .flota.f2{animation-delay:1.35s,2.4s}
  .js-mov .flota.f1{translate:calc(var(--hp,0) * -18px + var(--mx,0) * -10px) calc(var(--hp,0) * -90px + var(--my,0) * -8px)}
  .js-mov .flota.f2{translate:calc(var(--hp,0) * 18px + var(--mx,0) * 14px) calc(var(--hp,0) * -150px + var(--my,0) * 10px)}
  .js-mov .flota.f3{translate:calc(var(--hp,0) * 10px + var(--mx,0) * 8px) calc(var(--hp,0) * -40px + var(--my,0) * -6px)}

  /* ===== toda la página ===== */
  .js-mov .cab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--mv-acento),var(--mv-tinta));transform-origin:0 50%;transform:scaleX(var(--sp,0))}
  .fondo-vivo{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
  .fondo-vivo.activa{opacity:1}
  .f-suave{background:radial-gradient(120% 80% at 80% 10%,color-mix(in srgb,var(--mv-suave) 60%,transparent),transparent 70%)}
  .f-acento{background:radial-gradient(120% 80% at 15% 20%,color-mix(in srgb,var(--mv-acento) 26%,transparent),transparent 70%)}
  .f-linea{background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--mv-linea) 80%,transparent),transparent 70%)}
  .js-mov main section:not([data-tipo="hero"]){position:relative;isolation:isolate;overflow-x:clip}
  .js-mov [data-par]{translate:0 calc(var(--py,0) * 1px)}
  .js-mov .deco{position:absolute;z-index:-1;border-radius:50%;filter:blur(55px);pointer-events:none;opacity:.42}
  .js-mov .deco.d1{width:min(380px,60vw);height:min(380px,60vw);background:var(--mv-suave);right:0;top:10%}
  .js-mov .deco.d2{width:min(320px,55vw);height:min(320px,55vw);background:var(--mv-acento);left:0;top:30%;opacity:.25}
  .js-mov .rev{opacity:0;transform:translateY(56px) scale(.96);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
  .js-mov .rev.vis{opacity:1;transform:none}
  .js-mov h2.rev{transform:translateY(34px)}
  .js-mov .btn{transition:transform .12s ease,box-shadow .2s ease}
  .js-mov .btn:active{transform:scale(.97)}
  .js-mov [data-tipo="hero"] .btn:first-of-type{position:relative;overflow:hidden}
  .js-mov [data-tipo="hero"] .btn:first-of-type::after{content:"";position:absolute;inset:0 auto 0 0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-120%);animation:mv-brillo 1s ease-out 1.5s both;pointer-events:none}
  @media (hover:hover){.js-mov .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.14)}}

  /* ===== dolores: llegan como mensajes, uno tras otro ===== */
  .js-mov [data-tipo="dolores"] li.rev{transform:translateY(40px) scale(.55);transform-origin:12% 100%;transition:opacity .45s ease,transform .75s cubic-bezier(.2,1.4,.35,1);transition-delay:calc(var(--i,0) * 220ms + 150ms)}
  .js-mov [data-tipo="dolores"] li:nth-child(even).rev{transform-origin:88% 100%}
  .js-mov [data-tipo="dolores"] li.rev.vis{transform:none}
  .js-mov [data-tipo="dolores"] li span:not(.chapa){display:block;transition:opacity .5s ease;transition-delay:calc(var(--i,0) * 220ms + 650ms)}
  .js-mov [data-tipo="dolores"] li.rev:not(.vis) span{opacity:0}

  /* ===== pasos: números que giran; con pantallas reales, teléfono fijo en computador y por turno en celular ===== */
  .js-mov [data-tipo="pasos"] li.rev{transform:translateX(-40px)}
  /* pasos con capturas: la hoja entra girando, crece y queda inclinada apenas; el número late al llegar (Sergio, 2026-11-02) */
  .js-mov [data-tipo="pasos"] li .cuadro{transition:transform 1s cubic-bezier(.2,1.2,.3,1),opacity .7s ease,filter .7s ease;transition-delay:calc(var(--i,0) * 120ms + 200ms)}
  .js-mov [data-tipo="pasos"] li.rev:not(.vis) .cuadro{opacity:0;filter:blur(6px);transform:translateY(60px) rotate(-6deg) scale(.86)}
  .js-mov [data-tipo="pasos"] li:nth-child(even).rev:not(.vis) .cuadro{transform:translateY(60px) rotate(6deg) scale(.86)}
  .js-mov [data-tipo="pasos"] li.vis .cuadro{transform:rotate(-1.5deg)}.js-mov [data-tipo="pasos"] li:nth-child(even).vis .cuadro{transform:rotate(1.5deg)}
  .js-mov [data-tipo="pasos"] li .cuadro:hover{transform:rotate(0) scale(1.03)}
  .js-mov [data-tipo="pasos"] li .num{transition:transform .7s cubic-bezier(.2,1.6,.35,1);transition-delay:calc(var(--i,0) * 120ms + 300ms)}
  .js-mov [data-tipo="pasos"] li.rev:not(.vis) .num{transform:scale(0) rotate(-140deg)}
  .js-mov [data-tipo="pasos"] li.rev.vis{transform:none}
  .js-mov [data-tipo="pasos"] li h3::before{display:inline-grid;transition:transform .6s cubic-bezier(.2,1.5,.35,1);transition-delay:calc(var(--i,0) * 120ms + 200ms)}
  .js-mov [data-tipo="pasos"] li.rev:not(.vis) h3::before{transform:scale(0) rotate(-120deg)}
  .js-mov [data-tipo="pasos"] li .tel{transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .7s ease;transition-delay:calc(var(--i,0) * 120ms + 150ms)}
  .js-mov [data-tipo="pasos"] li.rev:not(.vis) .tel{opacity:0;transform:translateX(-60px) rotate(-6deg)}
  .js-mov [data-tipo="pasos"] li:nth-child(even).rev:not(.vis) .tel{transform:translateX(60px) rotate(6deg)}
  .js-mov [data-tipo="pasos"] ol.pin{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:72px;position:relative;padding-left:56px}
  .js-mov [data-tipo="pasos"] ol.pin>li{grid-column:1;min-height:68vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .5s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
  .js-mov [data-tipo="pasos"] ol.pin>li.rev.vis{opacity:.35}
  .js-mov [data-tipo="pasos"] ol.pin>li.actual,.js-mov [data-tipo="pasos"] ol.pin>li.rev.vis.actual{opacity:1}
  .js-mov [data-tipo="pasos"] ol.pin>li .tel{display:none}
  .js-mov [data-tipo="pasos"] ol.pin>li h3{font-size:1.7rem}.js-mov [data-tipo="pasos"] ol.pin>li p{font-size:1.12rem;max-width:30em}
  .js-mov [data-tipo="pasos"] ol.pin .pin-tel{display:block;grid-column:2;grid-row:1 / span 3;position:sticky;top:calc(50vh - 290px);align-self:start}
  .js-mov [data-tipo="pasos"] ol.pin .pin-tel .tel{position:relative;max-width:280px}
  .js-mov [data-tipo="pasos"] ol.pin .pin-tel img{transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
  .js-mov [data-tipo="pasos"] ol.pin .pin-tel img:not(:first-child){position:absolute;inset:12px;width:calc(100% - 24px)}
  .js-mov [data-tipo="pasos"] ol.pin .pin-tel img:not(.activa){opacity:0;transform:translateY(24px) scale(.96)}
  .js-mov [data-tipo="pasos"] ol.pin::before,.js-mov [data-tipo="pasos"] ol.pin::after{content:"";position:absolute;left:16px;top:34vh;bottom:34vh;width:3px;border-radius:3px;background:var(--mv-linea)}
  .js-mov [data-tipo="pasos"] ol.pin::after{background:linear-gradient(var(--mv-acento),var(--mv-tinta));transform-origin:50% 0;transform:scaleY(var(--pp,0))}

  /* ===== ejemplo: se imprime como boleta, los montos cuentan, el total se subraya y el precio cae como timbre ===== */
  .js-mov [data-tipo="ejemplo"] tr.rev{transform:translateX(-30px);transition-delay:calc(var(--i,0) * 120ms)}
  .js-mov [data-tipo="ejemplo"] tr.rev.vis{transform:none}
  .js-mov [data-tipo="ejemplo"] tr.total td{position:relative}
  .js-mov [data-tipo="ejemplo"] tr.total.rev td{border-top-color:transparent}
  .js-mov [data-tipo="ejemplo"] tr.total td::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--mv-tinta);transform-origin:0 50%;transform:scaleX(0);transition:transform .6s ease;transition-delay:calc(var(--i,0) * 120ms + 250ms)}
  .js-mov [data-tipo="ejemplo"] tr.total.vis td::before{transform:scaleX(1)}
  .js-mov [data-tipo="ejemplo"] tr.precio.rev{transform:scale(1.5) rotate(-4deg);transition:opacity .3s ease,transform .55s cubic-bezier(.2,1.6,.35,1);transition-delay:calc(var(--i,0) * 120ms + 200ms)}
  .js-mov [data-tipo="ejemplo"] tr.precio.rev.vis{transform:none}

  /* ===== incluye: cada check se dibuja cuando aparece su tarjeta ===== */
  .js-mov [data-tipo="incluye"] li.rev{transition-delay:calc(var(--i,0) * 70ms)}
  .js-mov [data-tipo="incluye"] li::before{transition:transform .45s cubic-bezier(.2,1.6,.35,1);transition-delay:calc(var(--i,0) * 70ms + 350ms)}
  .js-mov [data-tipo="incluye"] li.rev:not(.vis)::before{transform:rotate(-45deg) scale(0)}

  /* ===== compara: filas por turno y la columna propia (.nuestra) se ilumina de arriba abajo ===== */
  .js-mov [data-tipo="compara"] tr.rev{transform:translateY(18px);transition-delay:calc(var(--i,0) * 110ms)}
  .js-mov [data-tipo="compara"] tr.rev.vis{transform:none}
  .js-mov [data-tipo="compara"] .nuestra{position:relative}
  .js-mov [data-tipo="compara"] tr .nuestra::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-110%);pointer-events:none}
  .js-mov [data-tipo="compara"] tr.vis .nuestra::after{transition:transform .8s ease;transition-delay:calc(var(--i,0) * 110ms + 300ms);transform:translateX(110%)}

  /* ===== para-quien: los dos bloques entran desde lados opuestos ===== */
  .js-mov [data-tipo="para-quien"] .rev:not(h2):not(p):nth-child(odd){transform:translateX(-80px) rotate(-2deg)}
  .js-mov [data-tipo="para-quien"] .rev:not(h2):not(p):nth-child(even){transform:translateX(80px) rotate(2deg)}
  .js-mov [data-tipo="para-quien"] .rev.vis:not(h2):not(p){transform:none}

  /* ===== precio: la caja sube con un leve giro, el monto cuenta, el botón late una vez y el sello gira ===== */
  .js-mov [data-tipo="precio"] .rev:is(.precio-caja,.caja){transform:translateY(60px) scale(.9) rotate(-1.5deg)}
  .js-mov [data-tipo="precio"] .rev.vis:is(.precio-caja,.caja){transform:none}
  .js-mov [data-tipo="precio"] .vis .btn{animation:mv-late .8s ease 1.3s 1}
  .js-mov [data-tipo="precio"] .garantia.rev .sello{transition:transform .6s cubic-bezier(.2,1.6,.35,1);transition-delay:.5s}
  .js-mov [data-tipo="precio"] .garantia.rev:not(.vis) .sello{transform:scale(0) rotate(-90deg)}

  /* ===== faq: la respuesta se abre suave ===== */
  .js-mov [data-tipo="faq"] details[open]>:not(summary){animation:mv-entra .35s cubic-bezier(.2,.8,.2,1)}

  /* ===== cierre: el título crece cuando la sección entra ===== */
  .js-mov [data-tipo="cierre"] h2{transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .8s ease}
  .js-mov [data-tipo="cierre"]:not(.en-vista) h2{transform:scale(.9);opacity:0}

  @media (hover:hover){.js-mov .tarjeta.rev.vis:hover{transform:translateY(-4px);transition-delay:0s}}

  /* ===== celular: las entradas laterales pasan a verticales, nada parte fuera de la pantalla ===== */
  @media (max-width:760px){
    .js-mov [data-tipo="pasos"] li.rev{transform:translateY(40px)}
    .js-mov [data-tipo="pasos"] li.rev:not(.vis) .tel{transform:translateY(40px) rotate(-3deg) scale(.94)}
    .js-mov [data-tipo="pasos"] li:nth-child(even).rev:not(.vis) .tel{transform:translateY(40px) rotate(3deg) scale(.94)}
    .js-mov [data-tipo="para-quien"] .rev:not(h2):not(p):nth-child(odd),.js-mov [data-tipo="para-quien"] .rev:not(h2):not(p):nth-child(even){transform:translateY(50px)}
    .js-mov [data-tipo="ejemplo"] tr.rev{transform:translateY(16px)}
    .js-mov [data-tipo="ejemplo"] tr.precio.rev{transform:scale(.8)}
    .js-mov [data-tipo="precio"] .rev:is(.precio-caja,.caja){transform:translateY(60px) scale(.94)}
  }
}

/* Oferta de lanzamiento (fecha fija igual para todos; se oculta sola al terminar). Ver comun.oferta */
.oferta-banda{background:var(--tinta,#1d1d1b);color:var(--fondo,#fff);font-size:.88rem;line-height:1.3;position:relative;z-index:21}
.oferta-banda .wrap{display:flex;align-items:center;justify-content:center;gap:6px 12px;padding:8px 0;text-align:center;flex-wrap:wrap}
.oferta-banda .ob-chip{background:var(--acento,var(--miel,#f5b700));color:var(--tinta,#1d1d1b);font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.oferta-banda s{opacity:.7}.oferta-banda small{opacity:.75}
.oferta-banda a{color:inherit;font-weight:700}
@media(max-width:640px){.oferta-banda .ob-bono,.oferta-banda a{display:none}.oferta-banda{font-size:.8rem}}
/* Etiqueta flotante de la cuenta regresiva (en el héroe, fuera de la banda) */
.oferta-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 14px 8px 12px;border-radius:999px;background:var(--superficie,#fff);color:var(--tinta,#1d1d1b);
  border:1px solid color-mix(in srgb,var(--alerta,var(--teja,#c2492f)) 35%,transparent);box-shadow:0 10px 26px -10px rgba(0,0,0,.25);font-size:.9rem;font-weight:700;text-decoration:none;max-width:100%}
.oferta-tag .cuenta{color:var(--alerta,var(--teja,#c2492f));font-variant-numeric:tabular-nums;white-space:nowrap}
.oferta-tag .ot-ver{color:var(--bruma,#555);font-weight:700;white-space:nowrap}.oferta-tag:hover .ot-ver{color:var(--tinta,#1d1d1b)}
.oferta-tag .ot-punto{width:9px;height:9px;border-radius:50%;background:var(--alerta,var(--teja,#c2492f));flex:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--alerta,var(--teja,#c2492f)) 45%,transparent)}
@media (prefers-reduced-motion:no-preference){.oferta-tag{animation:ot-flota 5s ease-in-out infinite}.oferta-tag .ot-punto{animation:ot-late 2s ease-out infinite}
  @keyframes ot-flota{50%{translate:0 -4px}}@keyframes ot-late{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}}
/* Precio tachado dentro de los botones: es el precio que viene, rotulado en la banda y en la caja de precio */
.btn .btn-antes{font-weight:600;color:color-mix(in srgb,currentColor 62%,transparent);font-size:.86em;margin-right:2px;text-decoration-thickness:2px}
.oferta-precio{margin:6px 0 14px;padding:14px 16px;border-radius:16px;background:var(--acento-suave,var(--acento-fondo,#fff4d6));text-align:left;font-size:.95rem}
.oferta-precio p{margin:0 0 4px}.oferta-precio .op-tit{font-weight:800}.oferta-precio .op-despues{color:var(--bruma,var(--tinta-2,#555))}
.oferta-precio .cuenta{font-weight:800;color:var(--alerta,var(--error,#a8432f));font-variant-numeric:tabular-nums}.oferta-precio .op-bono{margin-top:8px}
[data-fin][hidden]{display:none!important}

/* Barra de compra flotante (comun.barra_compra + movimiento.js 0b) */
.barra-compra{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 12px 12px;visibility:hidden;transform:translateY(120%);transition:transform .35s ease,visibility 0s .35s;pointer-events:none}
.barra-compra.ver{visibility:visible;transform:none;transition:transform .35s ease}
.barra-compra .wrap{pointer-events:auto;display:flex;align-items:center;gap:14px 20px;max-width:980px;margin:0 auto;padding:12px 12px 12px 22px;border-radius:20px;
  background:var(--tinta,#1d1d1b);color:var(--fondo,#fff);box-shadow:0 22px 50px -12px rgba(0,0,0,.45)}
.barra-compra .bc-texto{flex:1;min-width:0}.barra-compra p{margin:0}
.barra-compra .bc-dolor{font-weight:800;font-size:1rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-compra .bc-oferta{font-size:.88rem}.barra-compra .bc-oferta s{color:color-mix(in srgb,currentColor 65%,transparent)}
.barra-compra .bc-oferta .cuenta{color:var(--acento,var(--miel,#f5b700));font-weight:800;font-variant-numeric:tabular-nums}
.barra-compra .bc-btn{background:var(--acento,var(--miel,#f5b700));border-color:var(--acento,var(--miel,#f5b700));color:var(--tinta,#1d1d1b);min-height:48px;white-space:nowrap}
.barra-compra .bc-cerrar{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:inherit;opacity:.7;font-size:1.5rem;line-height:1;cursor:pointer}
.barra-compra .bc-cerrar:hover{opacity:1;background:rgba(255,255,255,.1)}
@media(max-width:600px){.barra-compra{padding:0 8px 8px}.barra-compra .wrap{gap:10px;padding:10px 6px 10px 14px;border-radius:16px}.barra-compra .bc-dolor{font-size:.88rem}.barra-compra .bc-oferta{font-size:.8rem}.barra-compra .bc-btn{padding:10px 16px;min-height:44px}.barra-compra .bc-cerrar{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){.barra-compra,.barra-compra.ver{transition:none}}
/* Sellos de confianza del pago (comun.sellos_pago) */
.sellos-pago{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea,#e5e1d8);text-align:left}
.sellos-pago .sp-marcas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.sellos-pago .sp-por{font-size:.78rem;font-weight:700;color:var(--bruma,#666);letter-spacing:.02em}
.sellos-pago .sp-hotmart{height:22px;width:auto}.sellos-pago .sp-sep{width:1px;height:22px;background:var(--linea,#e5e1d8)}
.sellos-pago .sp-marcas img:not(.sp-hotmart){height:20px;width:auto}
.sellos-pago .sp-items{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:.9rem}
.sellos-pago .sp-items li{display:flex;gap:10px;align-items:flex-start}.sellos-pago .sp-items .ico{width:20px;height:20px;flex:none;color:var(--exito,var(--primario,#2e7d5b));margin-top:1px}
.sellos-pago.corto{border:0;padding:0;margin-top:22px}.sellos-pago.corto .sp-marcas{justify-content:center}
.sellos-pago.corto{text-align:center}.oscura .sellos-pago.corto .sp-por,.cta .sellos-pago.corto .sp-por{color:#4a4a48}
.oscura .sellos-pago.corto .sp-marcas{background:#fff;border-radius:14px;padding:10px 16px;display:inline-flex}

/* Dolor por sección (Estándar de página): la pregunta que la sección responde. Bloque de ancho justo: el texto fluye seguido. */
.sec-dolor{display:block;width:fit-content;max-width:min(100%,62ch);position:relative;margin:0 0 14px;padding:9px 16px 9px 44px;border-radius:12px;text-align:left;
  background:color-mix(in srgb,var(--alerta,var(--teja,#c2492f)) 10%,transparent);color:var(--tinta,#1d1d1b);font-weight:700;font-size:.98rem;line-height:1.4}
.sec-dolor::before{content:"!";position:absolute;left:12px;top:9px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--alerta,var(--teja,#c2492f));color:#fff;font-weight:800;font-size:.8rem;line-height:1}
.sec-dolor em{font-style:normal;color:var(--alerta,var(--teja,#c2492f))}
.oscura .sec-dolor,.cta .sec-dolor{background:rgba(255,255,255,.1);color:inherit}.oscura .sec-dolor em,.cta .sec-dolor em{color:var(--acento,var(--miel,#f5b700))}
.cierre .sec-dolor,.cta .sec-dolor,.centro.sec-dolor,[style*="text-align:center"]>.sec-dolor{margin-inline:auto}
/* La cuenta regresiva no hereda los estilos de la tabla .cuenta de las páginas */
.oferta-tag .cuenta,.barra-compra .cuenta,.oferta-banda .cuenta,.oferta-precio .cuenta{display:inline;width:auto;margin:0;border:0;font-size:inherit}
.oferta-tag{flex-wrap:nowrap;white-space:nowrap}
@media(max-width:420px){.oferta-tag{font-size:.82rem;gap:8px;padding:7px 12px 7px 10px}}

/* Quién está detrás (comun.fundador_html): persona real, foto real, correo de soporte */
.fundador{display:flex;gap:22px;align-items:flex-start;margin:36px auto 0;max-width:760px;padding:24px;border-radius:24px;text-align:left;
  background:var(--superficie,#fff);color:var(--tinta,#1d1d1b);border:1px solid var(--linea,#e5e1d8);box-shadow:0 18px 40px -22px rgba(0,0,0,.25)}
.fundador img{width:132px;height:132px;border-radius:50%;object-fit:cover;flex:none}
.fundador p{margin:0}.fundador .fd-kicker{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bruma,#666);margin-bottom:6px}
.fundador .fd-nombre{font-size:1.35rem;font-weight:800;line-height:1.2}.fundador .fd-rol{font-size:.92rem;color:var(--bruma,#666);margin:2px 0 10px}
.fundador .fd-texto{line-height:1.55}.fundador .fd-correo{margin-top:10px;font-weight:700}.fundador .fd-correo a{color:inherit}
@media(max-width:560px){.fundador{flex-direction:column;align-items:center;text-align:center;padding:22px 18px}.fundador img{width:112px;height:112px}}