/* Canción de Fe — marca La Biblioteca del Católico · estructura modelada de prayersong.com */
@font-face{font-family:'Lora';src:url(fonts/lora-normal.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url(fonts/lora-italic.woff2) format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/inter-normal.woff2) format('woff2');font-weight:300 800;font-display:swap}
@font-face{font-family:'Montserrat';src:url(fonts/montserrat-normal.woff2) format('woff2');font-weight:400 800;font-display:swap}
:root{
  --bg:#FBF8F3;--bg-2:#F2EAE0;--bg-3:#F7F1E8;--ink:#1C1917;--mute:#6B6259;--line:#E4DACB;
  --red:#A8261B;--red-2:#C0392B;--red-3:#8E1E14;--gold:#C9A24B;--green:#1F8F52;--dark:#141210;
  --serif:'Lora',Georgia,'Times New Roman',serif;--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--mont:'Montserrat','Inter',Arial,sans-serif;
  --r:14px;--wrap:1040px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.18}

/* barra + nav */
.topbar{background:var(--red);color:#fff;text-align:center;font-family:var(--serif);font-style:italic;font-size:14px;padding:9px 12px}
.topbar a{text-decoration:none;font-style:normal;font-family:var(--mont);font-weight:600;font-size:13px;margin-left:6px}
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink)}
.brand .cruz{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-size:16px;line-height:1}
.nav-links{display:flex;align-items:center;gap:18px;font-size:14px}
.nav-links a.txt{text-decoration:none;color:var(--ink)}
@media(max-width:560px){.brand{font-size:15px}.nav-links a.txt{display:none}}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--red);color:#fff;border:0;border-radius:10px;padding:15px 30px;font-family:var(--mont);font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 8px 20px -8px rgba(168,38,27,.55);transition:.18s transform,.18s background}
.btn:hover{background:var(--red-3);transform:translateY(-1px)}
.btn.sm{padding:10px 18px;font-size:13px;box-shadow:none;white-space:nowrap}
.brand{white-space:nowrap}
@media(max-width:400px){.brand{font-size:13px;gap:6px}.brand .cruz{width:24px;height:24px;font-size:13px}.btn.sm{padding:9px 12px;font-size:12px}}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--bg-2);transform:none}

/* hero */
.hero{padding:26px 0 34px;text-align:center}
.hero-media{position:relative;max-width:520px;margin:0 auto 26px;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 30% 20%,#5b1a13 0,#2a0f0b 55%,#140a08 100%);box-shadow:0 22px 50px -22px rgba(20,18,16,.55)}
.hero-media .disco{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%)}
.hero-media .ex{position:absolute;right:14px;bottom:14px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);color:var(--ink);border:0;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}
.pill i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-size:9px;font-style:normal}
.eyebrow{font-family:var(--mont);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.hero h1{font-size:clamp(32px,6vw,52px);max-width:760px;margin:0 auto 14px}
.hero .sub{font-family:var(--serif);font-size:clamp(16px,2.4vw,19px);color:#3a342f;max-width:560px;margin:0 auto 24px}
.hero .entrega{margin-top:14px;font-size:13px;color:var(--mute)}
.estrellas{color:var(--gold);letter-spacing:3px;font-size:17px;margin-top:18px}
.garantias{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-top:10px;font-size:13px;color:var(--mute)}
.garantias span::before{content:"✓ ";color:var(--green);font-weight:700}

/* cómo funciona */
.como{position:relative;color:#fff;text-align:center;padding:64px 0;background:linear-gradient(180deg,rgba(20,18,16,.86),rgba(20,18,16,.92)),repeating-linear-gradient(45deg,#3a1511 0 30px,#2a0f0b 30px 60px)}
.como h2{font-size:clamp(26px,4vw,34px);margin-bottom:30px}
.pasos{max-width:380px;margin:0 auto 30px;text-align:left;display:grid;gap:18px}
.paso{display:flex;gap:16px;align-items:center;font-size:17px;font-weight:600}
.paso small{display:block;font-weight:400;font-size:13px;opacity:.85}
.num{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--red-2);font-family:var(--mont);font-weight:700}

/* reseñas + canciones */
.sec{padding:64px 0}
.sec.alt{background:var(--bg-3)}
.sec h2{text-align:center;font-size:clamp(26px,4vw,36px);margin-bottom:30px}
.sec h2 em{color:var(--red)}
.carrusel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 18px;margin:0 -20px;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.card-cancion{flex:0 0 min(78vw,270px);scroll-snap-align:center;position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;color:#fff;border:0;text-align:left;padding:0;box-shadow:0 14px 34px -18px rgba(20,18,16,.6)}
.card-cancion .fondo{position:absolute;inset:0}
.card-cancion .disco-mini{position:absolute;left:50%;top:38%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%)}
.card-cancion .tag{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:999px;font-size:11px;font-family:var(--mont);font-weight:600;letter-spacing:.04em}
.card-cancion .pie{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:12px;background:rgba(20,18,16,.78);backdrop-filter:blur(6px);padding:11px 12px;border-radius:12px}
.play{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;border:0;font-size:13px}
.card-cancion .t{font-family:var(--serif);font-weight:600;font-size:14px;line-height:1.2}
.card-cancion .s{font-size:11px;opacity:.75}
.card-cancion.sonando .play{background:var(--gold);color:#1C1917}
.card-cancion.sonando .disco-mini,.vinilo.sonando{animation:gira 5s linear infinite}
@keyframes gira{to{transform:translate(-50%,-50%) rotate(360deg)}}
.vinilo.sonando{animation:giraplano 5s linear infinite}
@keyframes giraplano{to{transform:rotate(360deg)}}
.puntos{display:flex;gap:7px;justify-content:center;margin-top:6px}
.puntos i{width:7px;height:7px;border-radius:50%;background:#d8cdbd}
.puntos i.on{background:var(--red)}
.resena-slot{display:none} /* reseñas reales de clientes: se activan solo cuando existan (no se copian las de otra empresa) */
.resena{flex:0 0 min(78vw,300px);scroll-snap-align:center;background:#fff;border-radius:16px;padding:22px;box-shadow:0 14px 34px -18px rgba(20,18,16,.35)}

/* para quién */
.negra{background:var(--dark);color:#fff;padding:64px 0}
.negra h2{text-align:center;font-size:clamp(24px,4vw,34px);margin-bottom:28px}
.grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:820px;margin:0 auto 32px}
.tile{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:12px 8px;font-family:var(--serif);font-weight:600;font-size:14px;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.tile::before{content:"";position:absolute;inset:0;background:var(--g);opacity:.95}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.65))}
.tile span{position:relative;z-index:1}
@media(max-width:560px){.grilla{grid-template-columns:repeat(2,1fr)}.tile{aspect-ratio:3/2;font-size:13px}}
.centro{text-align:center}

/* qué recibes */
.recibes{background:var(--bg-2);padding:64px 0;text-align:center}
.recibes h2{font-size:clamp(26px,4vw,34px);margin-bottom:10px}
.recibes .lead{font-family:var(--serif);color:#3a342f;max-width:480px;margin:0 auto 26px}
.reproductor{max-width:340px;margin:0 auto 30px;background:#fff;border-radius:26px;padding:26px 24px 22px;box-shadow:0 26px 60px -30px rgba(20,18,16,.5)}
.vinilo{width:100%;aspect-ratio:1;margin-bottom:18px}
.barra{height:6px;border-radius:3px;background:#ece4d8;overflow:hidden;cursor:pointer}
.barra b{display:block;height:100%;width:0;background:var(--red)}
.tiempos{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin:6px 0 12px}
.ctl{display:flex;justify-content:center;align-items:center;gap:22px}
.ctl .play{width:58px;height:58px;font-size:20px;box-shadow:0 10px 24px -10px rgba(168,38,27,.7)}
.ctl .mini{background:none;border:0;color:var(--mute);font-size:16px}
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:820px;margin:0 auto 32px}
.check i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;margin:0 auto 10px;font-style:normal;font-size:15px}
.check h3{font-size:17px;margin-bottom:4px}
.check p{font-size:14px;color:var(--mute)}
@media(max-width:640px){.checks{grid-template-columns:1fr}}
.banda{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;padding:12px;font-size:14px}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 4px;font-family:var(--serif);font-size:18px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .resp{padding:0 4px 22px;color:#3a342f;font-size:16px}
.faq .resp p+p{margin-top:12px}
.mas{text-align:center;margin-top:30px;color:var(--mute);font-size:15px}

/* footer */
footer{background:var(--dark);color:#fff;padding:54px 0 40px;text-align:center}
footer p.mision{max-width:560px;margin:0 auto 28px;font-family:var(--serif);font-size:17px;opacity:.9}
footer .cols{display:flex;flex-wrap:wrap;gap:20px 56px;justify-content:center;font-size:14px;opacity:.85;margin-bottom:26px}
footer .cols a{display:block;text-decoration:none;margin-top:6px}
footer small{opacity:.55;font-size:12px}

/* popup */
.velo{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.55);display:none;align-items:center;justify-content:center;padding:18px}
.velo.on{display:flex}
.modal{position:relative;width:100%;max-width:440px;max-height:92vh;overflow:hidden;background:var(--bg);border-radius:22px;padding:34px 28px 0;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:sube .35s ease}
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.modal .x{position:absolute;right:14px;top:12px;background:none;border:0;font-size:24px;color:var(--mute);line-height:1}
.modal .brand{justify-content:center;margin-bottom:14px}
.modal h2{font-size:28px;margin-bottom:20px}
.opciones{display:grid;gap:12px;max-width:340px;margin:0 auto}
.op-1{background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff;border:0;border-radius:999px;padding:15px;font-family:var(--mont);font-weight:700;font-size:15px}
.op-2{background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:14px;font-family:var(--mont);font-weight:700;font-size:15px}
.modal .indeciso{display:inline-block;margin:16px 0 0;font-size:13px;color:var(--mute);background:none;border:0;text-decoration:underline}
.modal .disco-modal{width:300px;max-width:80%;margin:10px auto -150px;display:block}

/* quiz */
.quiz-body{background:linear-gradient(180deg,#FFFBF0,#FBF8F3 40%);min-height:100vh}
.q-wrap{max-width:640px;margin:0 auto;padding:22px 20px 60px}
.prog{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);margin-top:8px}
.prog-bar{height:4px;border-radius:2px;background:#e8e2d6;overflow:hidden}
.prog-bar b{display:block;height:100%;width:20%;background:var(--red);transition:width .35s}
.paso-q{padding-top:min(14vh,110px);animation:sube .3s ease}
.paso-q h1{font-size:clamp(28px,5vw,36px);text-align:center}
.paso-q .sub{text-align:center;color:#4a423b;margin:6px 0 26px;font-size:15px}
.paso-q label.t{display:block;font-size:14px;font-weight:600;margin:20px 0 10px}
.paso-q label.t .req{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid #d9d1c3;background:#fff;color:var(--ink);border-radius:999px;padding:10px 20px;font-size:14px;transition:.15s}
.chip:hover{border-color:var(--red)}
.chip.on{background:#f5ddd8;border-color:var(--red);color:var(--red-3);font-weight:600}
.campo,.area{width:100%;border:1px solid #d9d1c3;background:#fff;border-radius:10px;padding:14px 16px;font-family:var(--sans);font-size:15px;color:var(--ink)}
.area{min-height:112px;resize:vertical}
.campo:focus,.area:focus{outline:2px solid var(--red);outline-offset:1px}
.tip{font-size:12px;color:var(--mute);margin-top:6px}
.nota-voz{font-size:13px;color:var(--mute);margin:-4px 0 10px}
.nav-q{display:flex;justify-content:space-between;align-items:center;margin-top:30px}
.err{color:var(--red);font-size:13px;margin-top:10px;display:none}
.legal{text-align:center;font-size:12px;color:var(--mute);margin-top:26px}

/* carga + pre-checkout */
.carga{min-height:70vh;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:40px 20px}
.carga h2{font-size:24px}
.carga p{color:var(--mute)}
.spin{width:42px;height:42px;border:3px solid #eadfce;border-top-color:var(--red);border-radius:50%;animation:rota .9s linear infinite}
@keyframes rota{to{transform:rotate(360deg)}}
.pre{display:none;padding:34px 0 60px;text-align:center}
.pre h1{font-size:clamp(26px,4.4vw,36px);max-width:680px;margin:0 auto 16px}
.pre .loved{font-size:15px;color:#3a342f;margin-bottom:24px;font-family:var(--serif)}
.resumen{max-width:440px;margin:0 auto 26px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;text-align:left;box-shadow:0 14px 34px -24px rgba(20,18,16,.4)}
.resumen h3{font-size:13px;font-family:var(--mont);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.resumen .fila{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid #f0e8db;font-size:14px}
.resumen .fila:first-of-type{border-top:0}
.resumen .fila span:first-child{color:var(--mute)}
.resumen .fila b{text-align:right}
.garantia{max-width:440px;margin:18px auto 22px;background:#EDF8F1;border:1px solid #BFE5CD;border-radius:12px;padding:14px 18px;font-size:14px;text-align:center;color:#17492f}
.garantia strong{display:block;margin-bottom:2px}
.pre .btn{width:100%;max-width:440px;font-size:18px;padding:18px}
.pre .aviso{margin-top:12px;font-size:12px;color:var(--mute)}

/* ===== QUIZ v2: inmersivo, visual, inspirador ===== */
.quiz-body{background:radial-gradient(1200px 600px at 50% -10%,#fff3df 0,#FBF8F3 55%,#F2EAE0 100%);min-height:100vh;position:relative;overflow-x:hidden}
.q-top{display:flex;align-items:center;justify-content:space-between;max-width:760px;margin:0 auto;padding:14px 20px 0}
.q-top .brand{font-size:15px}
.q-top .brand .cruz{width:26px;height:26px;font-size:14px}
.q-pasos{display:flex;gap:8px;max-width:760px;margin:14px auto 0;padding:0 20px}
.q-pasos i{flex:1;height:5px;border-radius:3px;background:#e6dccd;position:relative;overflow:hidden}
.q-pasos i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--red));transform:scaleX(0);transform-origin:left;transition:transform .5s}
.q-pasos i.ok::after{transform:scaleX(1)}
.q-meta{max-width:760px;margin:8px auto 0;padding:0 20px;display:flex;justify-content:space-between;font-size:12px;color:var(--mute);font-family:var(--mont);letter-spacing:.06em;text-transform:uppercase}
.q-wrap{max-width:760px;margin:0 auto;padding:6px 20px 80px}
.q-disco{position:relative;width:132px;height:132px;margin:18px auto 6px}
.q-disco .d{position:absolute;inset:0;animation:giraplano 14s linear infinite;filter:drop-shadow(0 14px 22px rgba(20,18,16,.35))}
.q-disco .d svg{width:100%;height:100%}
.q-disco .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:30px;color:var(--red);pointer-events:none;transition:.3s}
.paso-q{padding-top:8px;text-align:center;animation:sube .45s ease}
.verso{display:block;font-family:var(--serif);font-style:italic;color:#8a6a1f;font-size:15px;margin:2px auto 14px;max-width:460px}
.verso small{display:block;font-style:normal;font-family:var(--mont);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.paso-q h1{font-size:clamp(30px,6vw,44px);margin-bottom:8px}
.paso-q .sub{font-family:var(--serif);font-size:17px;color:#4a423b;max-width:520px;margin:0 auto 26px}
.paso-q label.t{text-align:left}
.opc{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;text-align:left;margin-top:6px}
.o{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:16px 10px;border-radius:18px;border:1.5px solid #e4d9c8;background:#fff;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:16px;text-align:center;transition:.2s;box-shadow:0 10px 24px -20px rgba(20,18,16,.5);overflow:hidden}
.o .e{font-size:30px;line-height:1;transition:.2s}
.o:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 18px 30px -20px rgba(20,18,16,.55)}
.o.on{border-color:var(--red);color:#fff;background:linear-gradient(160deg,var(--red-2),var(--red-3));box-shadow:0 18px 34px -16px rgba(168,38,27,.7);transform:translateY(-3px)}
.o.on .e{transform:scale(1.15)}
.o.on::after{content:"✓";position:absolute;right:10px;top:8px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#1C1917;font-size:12px;font-weight:800;display:grid;place-items:center;font-family:var(--sans)}
.o.gen{min-height:128px;color:#fff;border:0;background:var(--g)}
.o.gen.on{background:var(--g);outline:3px solid var(--gold);outline-offset:-3px}
.o.gen small{font-family:var(--sans);font-weight:400;font-size:12px;opacity:.85}
.o .oir{position:absolute;left:8px;top:8px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);border:0;color:#fff;font-size:11px;display:grid;place-items:center}
.o .oir:hover{background:rgba(255,255,255,.4)}
.voces{grid-template-columns:repeat(3,1fr)}
.voces .o{min-height:86px;font-size:14px}
.campo,.area{border-radius:14px;border:1.5px solid #e4d9c8;padding:16px 18px;font-size:16px;box-shadow:0 10px 24px -22px rgba(20,18,16,.5)}
.campo{text-align:center;font-family:var(--serif);font-size:22px}
.area{min-height:150px;font-family:var(--serif);font-size:17px;line-height:1.6;text-align:left}
.ideas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 16px}
.ideas button{border:1px dashed #cdbd9f;background:rgba(255,255,255,.7);border-radius:999px;padding:8px 14px;font-size:13px;color:#5b4a2a;transition:.15s}
.ideas button:hover{background:#fff;border-style:solid;border-color:var(--gold)}
.ideas-t{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-family:var(--mont);margin-bottom:10px}
.nav-q{margin-top:34px}
.nav-q .btn{padding:15px 30px;font-size:15px}
.btn.sm{font-size:14px}
.paso-q .tip{text-align:center}
.paso-q .nota-voz{text-align:left;margin:-2px 0 10px}
@media(max-width:480px){.opc{grid-template-columns:repeat(2,1fr)}.voces{grid-template-columns:repeat(3,1fr)}.q-disco{width:104px;height:104px}}
.fondo-paso{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;transition:background 1s;background:radial-gradient(700px 420px at 90% 10%,rgba(201,162,75,.20),transparent 70%),radial-gradient(600px 400px at 5% 90%,rgba(168,38,27,.12),transparent 70%)}

/* espacios de video (los nuestros, cuando existan) */
.videos{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 18px;margin:0 -20px;scrollbar-width:none}
.videos::-webkit-scrollbar{display:none}
.video-card{flex:0 0 min(62vw,230px);scroll-snap-align:center;position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#141210;box-shadow:0 14px 34px -18px rgba(20,18,16,.6)}
.video-card video{width:100%;height:100%;object-fit:cover}
.video-card{cursor:pointer}
.video-card .vt{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:10px;background:rgba(20,18,16,.78);backdrop-filter:blur(6px);color:#fff;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.25;pointer-events:none}
.video-card .vt b{font-family:var(--serif);font-weight:600}
.video-card .vt small{opacity:.75;font-size:11px}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.tile{background-size:cover;background-position:center}.tile::before{display:none}
.o.foto{background-size:cover;background-position:center;color:#fff;border:0;min-height:120px;justify-content:flex-end;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.o.foto::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72))}
.o.foto .e{position:absolute;left:10px;top:8px;font-size:22px;z-index:1}.o.foto{z-index:0}
.o.foto.on{background-color:var(--red);outline:3px solid var(--gold);outline-offset:-3px;transform:translateY(-3px)}
.portada{position:relative;margin-bottom:14px}
.portada img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;box-shadow:0 18px 36px -18px rgba(20,18,16,.6)}
.portada .vin{position:absolute;right:-6px;bottom:-6px;width:34%;aspect-ratio:1;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.portada.sonando .vin{animation:giraplano 5s linear infinite}
.ficha-cancion{text-align:center;margin-bottom:14px}.ficha-cancion b{display:block;font-family:var(--serif);font-size:20px}.ficha-cancion span{font-size:13px;color:var(--mute)}
@media(max-width:560px){.grilla .tile:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:3/1.2}}
/* PRE-CHECKOUT v2 */
.pre-eyebrow{font-family:var(--mont);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:10px}
.pre .loved{margin-bottom:26px}
.pedido{max-width:460px;margin:0 auto 40px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 20px 22px;text-align:left;box-shadow:0 30px 60px -34px rgba(20,18,16,.55)}
.pedido-top{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.pedido-foto{position:relative;width:84px;height:84px;flex:none;border-radius:16px;background:#2a0f0b center/cover;overflow:hidden}
.pedido-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
.pfn{position:absolute;left:0;right:0;bottom:4px;z-index:1;text-align:center;color:#fff;font-family:var(--serif);font-size:26px;font-weight:600}
.pedido-tit small{display:block;font-family:var(--mont);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pedido-tit b{display:block;font-family:var(--serif);font-size:21px;line-height:1.2;margin:2px 0}
.pedido-tit span{font-size:13px;color:var(--mute)}
.pedido .filas{border-top:1px solid #f0e8db}
.pedido .fila{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid #f0e8db;font-size:14px}
.pedido .fila span{color:var(--mute)}.pedido .fila b{text-align:right}
.precio{display:flex;justify-content:space-between;align-items:center;margin:16px 0 4px}
.precio s{color:var(--mute);font-size:18px;margin-right:10px}.precio b{font-family:var(--serif);font-size:38px;color:var(--red)}
.sello{background:#FFF3D6;color:#7a5a10;border:1px solid #E8D08A;border-radius:999px;font-size:12px;font-weight:700;padding:6px 12px}
.incluye{list-style:none;margin:12px 0 18px;padding:0;display:grid;gap:7px;font-size:14px}
.incluye li::before{content:"✓";color:var(--green);font-weight:800;margin-right:9px}
.pedido .btn{width:100%;max-width:none;font-size:18px;padding:18px}
.seguro{text-align:center;font-size:12.5px;color:var(--mute);margin-top:10px}
.pre .pedido .aviso{text-align:center}
.pre-h{font-size:clamp(22px,4vw,28px);margin:44px auto 18px;max-width:560px}
.pre .videos{margin-bottom:6px}
.sigue{list-style:none;max-width:460px;margin:0 auto;padding:0;text-align:left;display:grid;gap:0}
.sigue li{display:flex;gap:14px;padding:0 0 22px;position:relative}
.sigue li:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:2px;width:2px;background:#e4d9c8}
.sigue i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-weight:700;display:grid;place-items:center;font-size:14px}
.sigue b{display:block;font-family:var(--serif);font-size:17px}.sigue span{font-size:14px;color:var(--mute)}
.garantia-g{max-width:460px;margin:12px auto 34px;display:flex;gap:16px;align-items:center;text-align:left;background:#EDF8F1;border:1px solid #BFE5CD;border-radius:18px;padding:20px;color:#17492f}
.garantia-g .escudo{flex:none;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;font-size:28px;font-weight:800;display:grid;place-items:center;box-shadow:0 10px 22px -10px rgba(31,143,82,.8)}
.garantia-g strong{display:block;font-family:var(--serif);font-size:19px;margin-bottom:4px}.garantia-g p{font-size:14px;line-height:1.5}
.pre-faq{max-width:560px;margin:0 auto 30px;text-align:left}
.pre .btn.grande{width:100%;max-width:460px;font-size:18px;padding:18px}
.barra-fija{display:none}
@media(max-width:700px){.en-pre .barra-fija{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,248,243,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line)}.barra-fija .btn{width:100%;padding:15px;font-size:16px}.pre{padding-bottom:96px}}
/* paso 1 en texto plano, pre-checkout como el original */
.o.plano{min-height:54px;padding:14px 12px;font-size:16px;font-family:var(--sans);font-weight:500}
.garantia-p{max-width:460px;margin:22px auto 18px;display:flex;gap:12px;align-items:center;text-align:left;background:#EDF8F1;border:1px solid #BFE5CD;border-radius:12px;padding:14px 16px;color:#17492f;font-size:13.5px;line-height:1.45}
.garantia-p .esc{flex:none;font-size:24px}.garantia-p strong{display:block;font-size:15px;margin-bottom:2px}
.pre .loved{font-weight:600;font-family:var(--sans);font-size:15px;margin-bottom:18px}
.pre .familias{font-weight:700;font-size:14px;color:var(--ink);margin:-8px 0 16px}
.precio-pre{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:0 auto 12px}
.precio-pre s{color:var(--mute);font-size:18px}.precio-pre b{font-family:var(--serif);font-size:34px;color:var(--red)}
.precio-pre span{font-size:12px;font-weight:700;background:#FFF3D6;color:#7a5a10;border:1px solid #E8D08A;border-radius:999px;padding:4px 10px}
/* CASI LISTO (checkout-previo, modelado de PrayerSong sin pedir mail) */
.pre2{display:none;padding:34px 0 70px;text-align:center;background:linear-gradient(180deg,#FFF8EC,var(--bg) 40%)}
.pre2 .wrap{max-width:520px}
.pre2 h1{font-size:clamp(26px,6vw,34px);margin-bottom:10px}
.pre2 .sub2{font-size:15.5px;margin-bottom:12px}.rojo{color:var(--red)}
.fecha{display:inline-block;background:var(--red);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:6px 14px;margin-bottom:20px}
.tarj{background:#fff;border:1px solid #efe6d6;border-radius:18px;padding:20px;margin:0 0 16px;text-align:left;box-shadow:0 16px 36px -28px rgba(20,18,16,.5)}
.cta-tarj{text-align:center}.cta-tarj .btn,.listo .btn{width:100%;font-size:18px;padding:17px}
.mini-g{font-size:12.5px;font-weight:700;margin-top:12px;color:var(--ink)}
.pre2 .aviso{text-align:center;font-size:12px;color:var(--mute);margin-top:10px}
.garantia-p.grande{max-width:none;margin:0 0 16px;padding:18px}.garantia-p.grande strong{font-size:16px;margin-bottom:4px}
.tt{font-family:var(--serif);font-size:18px;margin-bottom:14px;color:var(--ink)}
.fila2{display:flex;justify-content:space-between;padding:7px 0;font-size:15px;color:var(--mute)}.fila2 b{color:var(--ink)}.fila2 b.rojo{color:var(--red)}
.tarj hr{border:0;border-top:1px solid #f0e8db;margin:12px 0}
.linea-precio{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.linea-precio .ct{font-family:var(--serif);font-size:19px;display:block;margin-bottom:4px}
.off{font-size:11px;font-weight:700;border:1px solid #E8D08A;background:#FFF3D6;color:#7a5a10;border-radius:999px;padding:3px 9px}
.linea-precio .pr{text-align:right}.linea-precio s{color:var(--mute);margin-right:6px}.linea-precio .pr b{font-size:20px;color:var(--red)}
.editar{width:100%;background:#FFF8EC;border:1px solid #E8D08A;color:#7a5a10;font-weight:700;border-radius:12px;padding:12px;font-size:14px}
.tarj.oferta{background:#FFF8EC;border-color:#EAD9A8}.tarj.oferta p{font-size:15px;line-height:1.55;color:#5a4410}
.otras{display:grid;gap:10px}
.otra{display:flex;align-items:center;gap:14px;text-align:left;background:#FBF8F3;border:1px solid #efe6d6;border-radius:14px;padding:12px 14px}
.otra .play{flex:none;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:14px}
.otra .ot b{display:block;font-size:15px}.otra .ot small{color:var(--mute);font-size:13px}
.otra.sonando{border-color:var(--red)}
.garantia-lista{background:#fff;border:1px solid #efe6d6;border-radius:18px;padding:20px;margin:0 0 20px;text-align:left}
.garantia-lista h3{font-family:var(--serif);font-size:18px;margin-bottom:12px}
.garantia-lista div{padding:9px 0 9px 28px;position:relative;border-top:1px solid #f4ecdd}.garantia-lista div::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.garantia-lista b{display:block;font-size:15px}.garantia-lista span{font-size:13px;color:var(--mute)}
.listo p{margin:12px 0 0;font-size:15px}
.recibiras{display:grid;gap:12px;text-align:left}.recibiras div{background:#fff;border:1px solid #efe6d6;border-radius:14px;padding:14px 16px 14px 52px;position:relative}
.recibiras i{position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-style:normal;display:grid;place-items:center;font-weight:800;font-size:14px}
.recibiras b{display:block;font-size:15.5px}.recibiras span{font-size:13.5px;color:var(--mute)}
.porque{list-style:none;padding:0;margin:0;text-align:left;display:grid;gap:10px;font-size:15px}.porque li::before{content:"✓";color:var(--green);font-weight:800;margin-right:10px}
.linea-precio .ct{white-space:nowrap;font-size:18px}
/* intermedia como el original: sin precio, garantía chica y centrada, sin scroll horizontal */
.pre{overflow-x:hidden;background:var(--bg)}
.pre .familias{margin:6px 0 20px;font-size:14.5px}
.pre .garantia-p{display:block;text-align:center;max-width:none;margin:20px 0 16px;padding:12px 16px}
.pre .garantia-p .esc{display:none}
.pre .garantia-p strong{display:block;font-size:14.5px;margin-bottom:3px}
.pre .garantia-p strong::before{content:"🛡 ";font-size:14px}
.pre .btn{max-width:none}
html,body{overflow-x:hidden}