/* Προπαίδεια με Εικόνες — landing · territorio «Το Άλμπουμ» (ver BRANDING) */
:root{
  --crema:#F4ECDD; --kraft:#E3D3B4; --kraft-osc:#CDB48A; --tarjeta:#FBF6EA; --borde:#CDBA94;
  --tinta:#2B2118; --cuerpo:#4A3C2E; --etiq:#8A7658;
  --azul:#1F4E9E; --azul-osc:#163A78; --oro:#B87A00; --rojo:#C0392B;
  --n2:#4FA3D9; --n3:#F2C230; --n4:#5DB36A; --n5:#E8634F; --n6:#8A63C9;
  --n7:#F28C38; --n8:#2FA39A; --n9:#D9568B; --n10:#7C8794;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--crema);color:var(--cuerpo);font-family:'Alegreya Sans',Georgia,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Alegreya',Georgia,serif;font-weight:800;color:var(--tinta);line-height:1.15}
h1{font-size:clamp(34px,5.4vw,52px)}
h2{font-size:clamp(28px,4vw,34px);margin-bottom:14px}
h3{font-size:21px;margin-bottom:6px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
section{padding:68px 0}
.crema{background:var(--crema)} .kraft{background:var(--kraft)} .sangre{background:var(--kraft-osc)}
.opuesto{background:var(--tinta);color:var(--crema)} .opuesto h2,.opuesto h3{color:var(--crema)}
.etiq{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--etiq);margin-bottom:10px}
.opuesto .etiq{color:#CDBA94}
.centro{text-align:center} .lede{max-width:720px;margin:0 auto 34px;font-size:19px}

/* botón */
.btn{display:inline-block;background:var(--azul);color:var(--crema);font-weight:700;font-size:19px;padding:16px 28px;border-radius:6px;border-bottom:4px solid var(--azul-osc);text-decoration:none;cursor:pointer;border-top:0;border-left:0;border-right:0;font-family:inherit}
.btn:hover{background:var(--azul-osc)}
.micro{font-size:15px;color:var(--etiq);margin-top:12px}
.opuesto .micro{color:#CDBA94}

/* motivo: casillero troquelado + figurita */
.slot{clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);background:var(--borde)}
.slot>i{display:block;margin:2px;aspect-ratio:1;background:var(--kraft);clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%)}
.fig{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:3px solid #fff;border-radius:6px;outline:1px solid var(--borde);font-family:'Alegreya Sans',sans-serif;font-weight:800;color:var(--tinta);font-size:20px;line-height:1}
.fig.s{width:44px;font-size:17px}
.sep{display:flex;gap:6px;justify-content:center;margin:0 auto;padding:6px 0}
.sep span{width:16px;height:16px;background:var(--borde);clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}

/* hero */
.hero{padding:56px 0 64px}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero p.sub{font-size:21px;margin:18px 0 26px}
.ph{background:var(--kraft);border:1px solid var(--borde);border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--etiq);font-size:14px;padding:12px}
.ph.r169{aspect-ratio:16/9} .ph.r11{aspect-ratio:1} .ph.r45{aspect-ratio:4/5}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:6px;padding:22px}

/* dolores / beneficios */
.cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dolor h3{margin-bottom:4px} .dolor p{font-size:17px}
.ben{display:flex;gap:14px;align-items:flex-start}
.ben .fig{flex:0 0 48px;width:48px;font-size:20px}

/* álbum (sección firma) */
.album{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;max-width:640px;margin:26px auto 12px}
.album .c{aspect-ratio:1;position:relative}
.album .full{display:flex;align-items:center;justify-content:center;border:3px solid #fff;border-radius:5px;outline:1px solid var(--borde);font-weight:800;font-size:15px;color:var(--tinta)}
.album .empty{background:var(--borde);clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%)}
.album .empty::after{content:"";position:absolute;inset:2px;background:var(--kraft);clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%)}
.cifra{font-family:'Alegreya Sans',sans-serif;font-weight:800;color:var(--oro);font-size:clamp(64px,9vw,92px);line-height:1;font-variant-numeric:tabular-nums}

/* pasos y demo */
.paso{counter-increment:p}
.paso .fig{width:52px;margin-bottom:10px;background:var(--n3)}
.demo{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.demo .par{display:flex;gap:10px;align-items:center;font-family:'Alegreya',serif;font-weight:800;font-size:32px;color:var(--tinta)}
.demo .par .fig{width:70px;font-size:34px}
.demo .res{font-size:18px}
.demo .res b{color:var(--tinta)}

/* entregables / bonos */
.entr{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center;margin-bottom:18px}
.vistazo{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.val{font-weight:700;color:var(--etiq);white-space:nowrap}

/* oferta */
.stack{max-width:620px;margin:22px auto;text-align:left}
.stack .fila{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #4A3C2E}
.stack .tot{font-weight:800}
.precio{font-family:'Alegreya Sans',sans-serif;font-weight:800;font-size:clamp(64px,10vw,96px);line-height:1;color:var(--crema)}
.precio s{font-size:.38em;color:#CDBA94;font-weight:700;margin-right:10px}
.pill{display:inline-block;background:var(--n3);color:var(--tinta);border-radius:6px;padding:10px 18px;font-size:21px;margin:14px 0}
.timer{font-size:17px;margin:6px 0 18px}
.timer b{font-size:22px;font-variant-numeric:tabular-nums}

/* garantía / faq */
details{background:var(--tarjeta);border:1px solid var(--borde);border-radius:6px;margin-bottom:10px;padding:16px 20px}
summary{font-weight:700;font-size:19px;color:var(--tinta);cursor:pointer}
details p{margin-top:10px}
footer{background:var(--crema);padding:34px 0;text-align:center;font-size:15px;color:var(--etiq)}
footer a{color:var(--etiq)}

@media (max-width:760px){
  section{padding:48px 0}
  .hero .grid,.cols2,.cols3,.demo,.entr{grid-template-columns:1fr}
  .vistazo{grid-template-columns:repeat(2,1fr)}
  .album{grid-template-columns:repeat(9,1fr);gap:4px}
  .album .full{font-size:11px;border-width:2px}
  .btn{display:block;text-align:center}
}

.slotimg{width:100%;height:auto;border-radius:6px;border:1px solid var(--borde);display:block}

/* aviso de cookies (solo aparece si hay ID de píxel) */
.cks{position:fixed;left:14px;right:14px;bottom:14px;max-width:560px;margin:0 auto;background:var(--tarjeta);color:var(--cuerpo);border:1px solid var(--borde);border-radius:6px;padding:16px 18px;z-index:95;font-size:15px;line-height:1.5}
.cks[hidden]{display:none}
.cks p{margin:0 0 10px}
.cks a{color:var(--azul)}
.cks .b{display:flex;gap:10px}
.cks button{flex:1;border:0;border-radius:6px;padding:11px;font:700 15px 'Alegreya Sans',sans-serif;cursor:pointer}
.cks .si{background:var(--azul);color:var(--crema)}
.cks .no{background:var(--kraft);color:var(--tinta)}