:root{
  --background:#fbf7ef;--foreground:oklch(0.32 0.095 294);--card:oklch(0.996 0.006 85);
  --primary:oklch(0.61 0.145 298);--primary-deep:oklch(0.45 0.18 295);--primary-foreground:#fff;
  --muted-foreground:oklch(0.46 0.04 294);--border:oklch(0.9 0.025 300);
  --turquoise:oklch(0.76 0.101 190);--turquoise-ink:oklch(0.48 0.105 190);--yellow:oklch(0.84 0.145 88);
  --pink:oklch(0.79 0.103 355);--pink-ink:oklch(0.58 0.19 355);--green:oklch(0.71 0.13 137);
  --glass:rgb(255 255 255 / .62);--glass-border:rgb(255 255 255 / .85);
  --shadow-card:0 1px 0 rgb(255 255 255 / .9) inset,0 18px 40px -18px oklch(0.4 0.12 295 / .28);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --font-display:'Fredoka',system-ui,sans-serif;--font-sans:'Nunito',system-ui,sans-serif;
  --sy:0;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--background)}
body{margin:0;color:var(--foreground);font-family:var(--font-sans);font-size:16px;line-height:1.65;overflow-x:clip;position:relative;isolation:isolate}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;font-weight:600;margin:0;color:var(--primary-deep);text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
svg{display:block}
:focus-visible{outline:3px solid var(--turquoise-ink);outline-offset:4px;border-radius:12px}
.wrap{width:min(1080px,calc(100% - 32px));margin-inline:auto}

/* ---------- Fondo mágico: auroras de color + polvo de estrellas ---------- */
.sky{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(32vmax 28vmax at 18% 14%,oklch(0.86 0.09 300 / .75),transparent 70%),
    radial-gradient(30vmax 26vmax at 84% 22%,oklch(0.88 0.08 190 / .7),transparent 70%),
    radial-gradient(34vmax 30vmax at 78% 82%,oklch(0.88 0.08 355 / .6),transparent 70%),
    radial-gradient(30vmax 26vmax at 16% 78%,oklch(0.93 0.09 90 / .7),transparent 70%),
    var(--background)}
.stardust{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.8;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff 60%,transparent),radial-gradient(1.3px 1.3px at 34% 62%,#fff 60%,transparent),
    radial-gradient(1.8px 1.8px at 58% 28%,#fff 60%,transparent),radial-gradient(1.3px 1.3px at 76% 74%,#fff 60%,transparent),
    radial-gradient(1.6px 1.6px at 88% 40%,#fff 60%,transparent),radial-gradient(1.3px 1.3px at 22% 88%,#fff 60%,transparent),
    radial-gradient(2px 2px at 46% 92%,oklch(0.9 0.12 88) 60%,transparent),radial-gradient(1.8px 1.8px at 66% 8%,oklch(0.9 0.12 88) 60%,transparent);
  background-size:380px 380px}

/* ---------- Letras 3D tipo Pixar ---------- */
.t3d{display:inline;--hi:#d9ccff;--base:#7c52e6;--deep:#5630c4;--ext:#3a1b91;
  background:linear-gradient(180deg,#fff 0%,var(--hi) 20%,var(--base) 52%,var(--deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  filter:drop-shadow(0 1px 0 var(--ext)) drop-shadow(0 1px 0 var(--ext)) drop-shadow(0 1.5px 0 var(--ext)) drop-shadow(0 2px 0 var(--ext)) drop-shadow(0 10px 10px oklch(0.35 0.12 295 / .28));
  padding:0 .02em}
.tone-teal{--hi:#b5f5ee;--base:#1fb5a8;--deep:#0b8a80;--ext:#065e57}
.tone-pink{--hi:#ffd0e3;--base:#f2559a;--deep:#d12f77;--ext:#93184f}
.tone-yellow{--hi:#fff6c4;--base:#ffc72e;--deep:#f4a300;--ext:#a86a00}
.tone-coral{--hi:#ffd9c9;--base:#ff8c5f;--deep:#e9623a;--ext:#a43c1c}
.tone-purple{--hi:#d9ccff;--base:#7c52e6;--deep:#5630c4;--ext:#3a1b91}

/* ---------- Header de vidrio ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgb(255 255 255 / .45);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgb(255 255 255 / .6);transition:box-shadow .3s var(--ease-out),background .3s}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;transition:height .3s var(--ease-out)}
[data-scrolled] .site-header{background:rgb(255 255 255 / .7);box-shadow:0 10px 30px -18px oklch(0.4 0.12 295 / .45)}
[data-scrolled] .site-header .wrap{height:62px}

/* Base brillante (glossy) para logo, Instagram y botones */
.gloss{position:relative;isolation:isolate;overflow:hidden;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),filter .25s}
.gloss::before{content:'';position:absolute;left:6%;right:6%;top:3px;height:48%;border-radius:100px;background:linear-gradient(180deg,rgb(255 255 255 / .75),rgb(255 255 255 / .05));z-index:1;pointer-events:none}
.gloss::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:38%;background:linear-gradient(100deg,transparent,rgb(255 255 255 / .75),transparent);transform:translateX(-160%) skewX(-18deg);z-index:2;pointer-events:none}
.gloss>*{position:relative;z-index:3}
.gloss:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .gloss:hover::after{transform:translateX(330%) skewX(-18deg);transition:transform .8s var(--ease-out)}
}

.logo-btn{display:grid;place-items:center;padding:5px 12px;border-radius:26px;background:linear-gradient(180deg,rgb(255 255 255 / .95),oklch(0.95 0.035 300 / .9));border:1.5px solid #fff;box-shadow:0 1px 0 #fff inset,0 -3px 0 oklch(0.85 0.06 300 / .7) inset,0 10px 22px -10px oklch(0.45 0.15 295 / .5)}
.logo-btn::before{left:10%;right:10%;height:40%}
.logo{width:62px;transition:width .3s var(--ease-out)}
[data-scrolled] .logo{width:52px}
@media (hover:hover) and (pointer:fine){
  .logo-btn:hover{transform:translateY(-3px) rotate(-2deg);box-shadow:0 1px 0 #fff inset,0 -3px 0 oklch(0.85 0.06 300 / .7) inset,0 16px 30px -10px oklch(0.55 0.2 300 / .6),0 0 0 6px oklch(0.85 0.08 300 / .35)}
}

.ig-link{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:14px;color:#fff;padding:8px 17px 8px 9px;border-radius:100px;
  background:linear-gradient(135deg,#ff8a5c 0%,#f2559a 45%,#a855f7 100%);border:1.5px solid rgb(255 255 255 / .9);text-shadow:0 1px 0 rgb(120 20 70 / .35);
  box-shadow:0 -3px 0 rgb(120 20 90 / .25) inset,0 10px 22px -8px rgb(214 51 132 / .6)}
.ig-link .ig-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:rgb(255 255 255 / .25);border:1px solid rgb(255 255 255 / .6)}
.ig-link svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
  .ig-link:hover{transform:translateY(-3px);box-shadow:0 -3px 0 rgb(120 20 90 / .25) inset,0 16px 30px -8px rgb(214 51 132 / .75)}
}
@media (max-width:420px){.ig-link .ig-text{display:none}.ig-link{padding:7px}}

/* ---------- Botones ---------- */
.magic-button,.cream-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:100px;font-family:var(--font-display);font-weight:500}
.magic-button{min-height:56px;padding:14px 30px;border:2px solid rgb(255 255 255 / .95);color:#fff;font-size:18px;text-shadow:0 1px 1px rgb(40 10 100 / .35);
  background:linear-gradient(180deg,#9a73ff 0%,#7c52e6 50%,#5c33c9 100%);
  box-shadow:0 -4px 0 rgb(40 10 110 / .28) inset,0 5px 0 #4a24ad,0 14px 28px -8px rgb(92 51 201 / .6)}
.cream-button{min-height:50px;padding:12px 24px;color:var(--primary-deep);font-size:16px;border:1.5px solid #fff;
  background:linear-gradient(180deg,#fff,oklch(0.95 0.035 300));box-shadow:0 -3px 0 oklch(0.86 0.06 300) inset,0 4px 0 oklch(0.82 0.07 300),0 12px 22px -10px oklch(0.45 0.15 295 / .45)}
@media (hover:hover) and (pointer:fine){
  .magic-button:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 -4px 0 rgb(40 10 110 / .28) inset,0 7px 0 #4a24ad,0 22px 34px -8px rgb(124 82 230 / .7)}
  .cream-button:hover{transform:translateY(-3px)}
}
.magic-button:active{transform:translateY(3px) scale(.98);box-shadow:0 -2px 0 rgb(40 10 110 / .28) inset,0 2px 0 #4a24ad,0 8px 16px -8px rgb(92 51 201 / .6)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary-deep);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:1.6px;margin-bottom:14px;padding:6px 14px;border-radius:100px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.eyebrow svg{width:14px;height:14px}
.section{padding:56px 0;position:relative}
.section-heading{text-align:center;margin-bottom:34px}
.section-heading h2{font-size:clamp(32px,7vw,48px)}
.section-heading p{margin:14px auto 0;max-width:520px;color:var(--muted-foreground);font-size:17px}

/* ---------- Destellos (estrellas de 4 puntas que brillan) ---------- */
.spk{fill:#fff;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px oklch(0.88 0.14 88 / .9))}
.sparkle{position:absolute;z-index:3;pointer-events:none;width:var(--s,22px);height:var(--s,22px)}
.sparkle svg{width:100%;height:100%;overflow:visible}
.sparkle.gold .spk{fill:oklch(0.97 0.08 95);filter:drop-shadow(0 0 1.5px oklch(0.92 0.14 90)) drop-shadow(0 0 6px oklch(0.85 0.16 80 / .75))}
.sparkle.pink .spk{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 6px oklch(0.75 0.17 355 / .85))}
.sparkle.aqua .spk{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 6px oklch(0.75 0.13 190 / .85))}
.sparkle.lilac .spk{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 6px oklch(0.7 0.17 300 / .85))}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:22px 0 64px}
.hero-bg{position:absolute;top:-10%;left:0;width:100%;height:120%;object-fit:cover;z-index:-2;opacity:.5;translate:0 calc(var(--sy) * .3px)}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(251 247 239 / .72) 0%,rgb(251 247 239 / .45) 60%,rgb(251 247 239 / .15) 100%)}
.hero-inner{display:grid;gap:10px;align-items:center}
.hero-copy{text-align:center;position:relative;z-index:2;translate:0 calc(var(--sy) * -.08px)}
.hero h1{font-size:clamp(42px,10.5vw,72px);line-height:1.04;letter-spacing:.5px}
.magic-word{display:block;font-size:1.1em;margin-top:6px}
.hero-description{max-width:470px;margin:20px auto 0;font-size:18px}
.hero-description strong{color:var(--turquoise-ink);font-weight:900}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-note{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:18px;font-size:13px;font-weight:800;color:var(--muted-foreground)}
.hero-note svg{width:15px;height:15px;color:var(--pink-ink)}
.hero .sparkle-field .sparkle{z-index:1}
.hero-wave{position:absolute;bottom:-1px;left:-2%;width:104%;height:34px;background:rgb(251 247 239 / .7);clip-path:polygon(0 38%,8% 58%,17% 78%,27% 60%,38% 17%,48% 40%,60% 83%,70% 64%,83% 30%,94% 55%,100% 33%,100% 100%,0 100%)}

/* ---------- Escenario de Miss Mari ---------- */
.mari-stage{position:relative;width:min(310px,80vw);height:min(380px,98vw);margin:0 auto;display:flex;justify-content:center;align-items:flex-end;transform:translate(var(--px,0px),var(--py,0px));transition:transform .5s var(--ease-out)}
.mari-stage .aura{position:absolute;left:50%;top:44%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,oklch(0.98 0.07 92 / .95) 0%,oklch(0.9 0.1 330 / .5) 35%,oklch(0.85 0.1 300 / .22) 55%,transparent 70%)}
.mari-stage .arch{position:absolute;inset:auto 7% 0;height:78%;border-radius:220px 220px 34px 34px;
  background:linear-gradient(180deg,rgb(255 255 255 / .72),oklch(0.93 0.05 300 / .62) 55%,oklch(0.92 0.06 355 / .7));
  border:2px solid rgb(255 255 255 / .95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 0 #fff inset,0 -10px 30px oklch(0.85 0.08 300 / .5) inset,0 24px 50px -20px oklch(0.5 0.16 300 / .45)}
.mari-stage .arch::before{content:'';position:absolute;inset:10px 14% auto;height:30%;border-radius:200px 200px 40px 40px;background:linear-gradient(180deg,rgb(255 255 255 / .8),transparent)}
.mari-stage .floor{position:absolute;left:20%;right:20%;bottom:10px;height:18px;border-radius:50%;background:radial-gradient(closest-side,oklch(0.4 0.12 295 / .32),transparent);z-index:1}
.mari-stage .mari{position:relative;z-index:2;height:95%;width:auto;margin-bottom:7px;transform-origin:50% 100%;filter:drop-shadow(0 8px 10px oklch(0.35 0.1 295 / .18))}
.mari-stage .orbit{position:absolute;left:50%;top:42%;width:96%;aspect-ratio:1;translate:-50% -50%;z-index:3;pointer-events:none}
.mari-stage .orbit .sparkle{left:50%;top:-3%;margin-left:-12px}
.mari-stage .orbit .sparkle:nth-child(2){top:auto;bottom:-3%}
.mari-stage .orbit .sparkle:nth-child(3){top:50%;left:-3%;margin-left:0}

/* Juguetes 3D brillantes */
.toy{position:absolute;z-index:4;pointer-events:none}
.toy svg{width:100%;height:auto;overflow:visible}
.toy-star{width:68px;top:3%;left:-3%;rotate:-14deg}
.toy-tri{width:58px;top:30%;right:-5%;rotate:12deg}
.toy-ball,.toy-block{display:grid;place-items:center;font-family:var(--font-sans);font-size:15px;font-weight:900;color:oklch(0.3 0.08 294)}
.toy-ball{width:58px;height:58px;border-radius:50%;bottom:13%;right:-3%;
  background:radial-gradient(circle at 32% 26%,#fff 0 7%,#b7f3ec 16%,#2fc4b6 52%,#0d8f84 100%);
  box-shadow:inset -6px -8px 12px rgb(5 90 82 / .35),inset 4px 4px 8px rgb(255 255 255 / .5),0 12px 18px -6px rgb(13 143 132 / .5)}
.toy-block{width:54px;height:54px;border-radius:15px;bottom:23%;left:-4%;rotate:-10deg;
  background:radial-gradient(circle at 30% 24%,#fff 0 7%,#fff1b3 16%,#ffcb35 50%,#f2a000 100%);
  box-shadow:inset -6px -8px 12px rgb(160 100 0 / .35),inset 4px 4px 8px rgb(255 255 255 / .55),0 12px 18px -6px rgb(200 130 0 / .5)}

/* ---------- Tarjetas de libritos (vidrio + inclinación 3D) ---------- */
.resources-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:26px;max-width:900px;margin:0 auto}
.resource-card{position:relative;display:flex;flex-direction:column;border-radius:30px;overflow:hidden;background:var(--glass);border:1.5px solid var(--glass-border);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:var(--shadow-card);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),opacity .7s var(--ease-out)}
.resource-card .glare{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgb(255 255 255 / .45),transparent 45%)}
.theme-aqua{--theme-a:oklch(0.9 0.08 190);--theme-b:oklch(0.95 0.04 170);--theme-ink:#0b8a80}
.theme-lavender{--theme-a:oklch(0.88 0.08 300);--theme-b:oklch(0.95 0.035 330);--theme-ink:#5630c4}
.book-stage{position:relative;height:290px;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgb(255 255 255 / .9),transparent 60%),linear-gradient(160deg,var(--theme-a),var(--theme-b))}
.book-stage img{height:236px;width:auto;border-radius:6px;rotate:-5deg;filter:drop-shadow(10px 14px 10px oklch(0.3 0.09 295 / .28));transition:rotate .5s var(--ease-out),scale .5s var(--ease-out)}
.resource-card:nth-child(2) .book-stage img{rotate:5deg}
.book-stage .sparkle{right:26px;bottom:20px;--s:30px}
.badge{position:absolute;left:18px;top:18px;z-index:2;color:#fff;border-radius:100px;padding:5px 15px;font-family:var(--font-display);font-size:15px;rotate:-6deg;border:1.5px solid rgb(255 255 255 / .9);
  background:linear-gradient(180deg,color-mix(in oklab,var(--theme-ink) 70%,#fff),var(--theme-ink));box-shadow:0 -2px 0 rgb(0 0 0 / .15) inset,0 6px 14px -6px var(--theme-ink)}
.age{position:absolute;right:16px;top:16px;z-index:2;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;text-align:center;color:oklch(0.35 0.12 60);font-family:var(--font-display);font-size:13px;line-height:1.1;
  background:radial-gradient(circle at 32% 26%,#fff 0 8%,#fff1b3 18%,#ffcb35 55%,#f2a000 100%);box-shadow:inset -4px -6px 10px rgb(160 100 0 / .3),0 8px 16px -6px rgb(200 130 0 / .5)}
.resource-info{padding:22px 24px 26px;text-align:center;display:flex;flex-direction:column;gap:8px;flex:1}
.resource-info h3{font-size:25px}
.resource-info p{color:var(--muted-foreground);font-size:15px;flex:1}
.resource-info .magic-button{width:100%;margin-top:10px;font-size:17px}
.resource-info .file-note{flex:0}
.text-link{font-weight:900;font-size:14px;color:var(--primary);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;margin-top:4px}
@media (hover:hover) and (pointer:fine){
  .resource-card:hover{--lift:-6px;box-shadow:0 1px 0 #fff inset,0 30px 60px -24px oklch(0.45 0.16 295 / .45)}
  .resource-card:hover .glare{opacity:1}
  .resource-card:hover .book-stage img{rotate:0deg;scale:1.04}
}

/* ---------- Pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px;max-width:900px;margin:0 auto}
.step{position:relative;background:var(--glass);border:1.5px solid var(--glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:26px;padding:26px 22px 22px;box-shadow:var(--shadow-card)}
.step:nth-child(1){--g1:#b5f5ee;--g2:#1fb5a8;--g3:#0b8a80;rotate:-1.2deg}
.step:nth-child(2){--g1:#fff1b3;--g2:#ffc72e;--g3:#f2a000;rotate:.8deg}
.step:nth-child(3){--g1:#ffd0e3;--g2:#f2559a;--g3:#d12f77;rotate:-.6deg}
.step-num{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;margin-bottom:14px;color:#fff;font-family:var(--font-display);font-size:24px;text-shadow:0 2px 0 rgb(0 0 0 / .18);
  background:radial-gradient(circle at 30% 24%,#fff 0 6%,var(--g1) 18%,var(--g2) 55%,var(--g3) 100%);box-shadow:inset -5px -7px 10px rgb(0 0 0 / .14),0 10px 18px -8px var(--g3)}
.step h3{font-size:21px;margin-bottom:6px}
.step p{color:var(--muted-foreground);font-size:15px}

/* ---------- Página de recurso ---------- */
.resource-hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;background:var(--glass);border:1.5px solid var(--glass-border);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-radius:34px;padding:26px 22px;box-shadow:var(--shadow-card);margin-top:10px;position:relative;overflow:hidden}
.resource-hero::before{content:'';position:absolute;inset:0 0 auto;height:160px;background:radial-gradient(circle at 50% 40%,rgb(255 255 255 / .8),transparent 55%),linear-gradient(160deg,var(--theme-a),var(--theme-b));border-radius:0 0 50% 50%/0 0 30% 30%;z-index:0}
.resource-hero>*{position:relative;z-index:1}
.resource-hero .cover-wrap{justify-self:center;position:relative}
.resource-hero .cover{width:min(170px,46vw);border-radius:8px;rotate:-4deg;filter:drop-shadow(10px 14px 10px oklch(0.3 0.09 295 / .28))}
.resource-hero .sparkle{--s:26px}
.resource-copy{text-align:center}
.resource-copy h1{font-size:clamp(32px,7vw,48px)}
.resource-copy .lead{margin-top:12px;font-size:17px;color:var(--muted-foreground)}
.resource-copy .magic-button{margin-top:22px;width:100%;max-width:360px}
.file-note{margin-top:8px;font-size:13px;color:var(--muted-foreground)}
.also{margin-top:44px}
.also .resource-card{max-width:440px;margin:0 auto}
.tips{position:relative;display:grid;grid-template-columns:1fr;gap:20px;align-items:end;margin-top:44px;border-radius:34px;padding:28px 22px 0;overflow:hidden;
  background:linear-gradient(160deg,rgb(255 255 255 / .7),oklch(0.96 0.05 90 / .7));border:1.5px solid var(--glass-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-card)}
.tips-copy h2{font-size:clamp(28px,6vw,38px);margin-bottom:14px}
.tips-copy ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tips-copy li{display:flex;gap:10px;align-items:flex-start;background:rgb(255 255 255 / .85);border:1px solid #fff;border-radius:18px;padding:12px 14px;box-shadow:0 10px 20px -14px oklch(0.4 0.1 295 / .4)}
.tips-copy li svg{flex:none;width:18px;height:18px;margin-top:3px}
.tips .mari-stage{width:min(240px,64vw);height:min(290px,76vw)}

/* ---------- Cierre ---------- */
.closing{position:relative;margin-top:60px}
.closing-panel{position:relative;text-align:center;padding:50px 24px 54px;border-radius:36px;overflow:hidden;
  background:radial-gradient(circle at 20% 0%,rgb(255 255 255 / .8),transparent 50%),linear-gradient(150deg,oklch(0.9 0.08 190 / .85),oklch(0.9 0.07 300 / .85));border:1.5px solid var(--glass-border);box-shadow:var(--shadow-card)}
.closing-panel h2{font-size:clamp(30px,7vw,46px);margin-bottom:12px}
.closing-panel p{color:oklch(0.38 0.08 294);max-width:420px;margin:0 auto 24px}
.site-footer{padding:30px 0 34px;text-align:center;font-size:13px;color:var(--muted-foreground)}
.site-footer .slogan{font-family:var(--font-display);font-size:18px;color:var(--primary);margin-bottom:6px}

/* ---------- Movimiento (todo se apaga con "reducir movimiento") ---------- */
@media (prefers-reduced-motion:no-preference){
  .sky{animation:aurora 26s ease-in-out infinite alternate}
  @keyframes aurora{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-3vmax,2vmax,0) rotate(4deg)}100%{transform:translate3d(2vmax,-2vmax,0) rotate(-3deg)}}
  .js .reveal{opacity:0;translate:0 22px;transition:opacity .7s var(--ease-out),translate .7s var(--ease-out),transform .45s var(--ease-out),box-shadow .45s var(--ease-out);transition-delay:var(--delay,0ms)}
  .js .reveal.is-visible{opacity:1;translate:0 0}
  .sparkle svg{animation:twinkle var(--t,2.8s) ease-in-out infinite;animation-delay:var(--d,0s)}
  @keyframes twinkle{0%,100%{opacity:.3;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(45deg)}}
  .toy{animation:bob 5s ease-in-out infinite}
  .toy-tri{animation-delay:-1.4s}.toy-ball{animation-delay:-2.6s}.toy-block{animation-delay:-3.4s}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  .parallax{translate:0 calc(var(--off,0) * var(--speed,0) * -1px)}
  .mari-stage .aura{animation:pulse 4.5s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.75;scale:.94}50%{opacity:1;scale:1.04}}
  .mari-stage .orbit{animation:spin 16s linear infinite}
  @keyframes spin{to{rotate:360deg}}
  .mari-stage .mari{animation:mari-in .9s var(--ease-out) both,breathe 5s ease-in-out .9s infinite}
  @keyframes mari-in{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
  @keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.012)}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}.hero-bg,.hero-copy,.parallax{translate:none!important}}

@media (min-width:760px){
  .site-header .wrap{height:90px}
  .logo{width:78px}
  [data-scrolled] .site-header .wrap{height:70px}
  [data-scrolled] .logo{width:62px}
  .section{padding:76px 0}
  .hero{padding:28px 0 84px}
  .hero::before{background:linear-gradient(90deg,rgb(251 247 239 / .85) 0%,rgb(251 247 239 / .5) 50%,rgb(251 247 239 / .05) 85%)}
  .hero-inner{grid-template-columns:1.1fr .9fr;gap:24px}
  .hero-copy{text-align:left}
  .hero-description{margin-left:0}
  .hero-actions,.hero-note{justify-content:flex-start}
  .mari-stage{width:380px;height:470px}
  .toy-star{width:88px}.toy-tri{width:74px}
  .toy-ball{width:72px;height:72px}.toy-block{width:66px;height:66px}
  .resource-hero{grid-template-columns:auto 1fr;padding:46px 54px;gap:54px}
  .resource-hero::before{inset:0 auto 0 0;width:350px;height:auto;border-radius:0 50% 50% 0/0 40% 40% 0}
  .resource-hero .cover{width:250px}
  .resource-copy{text-align:left}
  .tips{grid-template-columns:1fr auto;padding:42px 50px 0;gap:36px}
  .tips-copy{padding-bottom:42px}
}