/* Duditopia · portada «acuarela + lápiz» (cabecera I: logo a lápiz + Dudi, paisaje en acuarela, personajes a lápiz) */
@font-face{font-family:"Bricolage Grotesque";font-weight:600 800;font-display:swap;src:url(/fonts/BricolageGrotesque-latin.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400 800;font-display:swap;src:url(/fonts/DMSans-latin.woff2) format("woff2")}
:root{
  --paper:#f3ede0;--paper2:#ece4d2;--card:#f8f4ea;--ink:#1f2b25;--ink2:#3a4a42;--moss:#5d7a55;--mossd:#2f4a3a;
  --coral:#a5462f;--coral2:#e3866b;--ochre:#6b5a2e;
  --disp:"Bricolage Grotesque",ui-rounded,system-ui,sans-serif;--body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body);overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--mossd);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- cabecera ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px clamp(16px,5vw,72px)}
.logo{display:block;line-height:0;border-radius:8px}
.logo img{display:block;height:60px;width:auto;filter:drop-shadow(0 0 10px rgba(246,240,226,.9))}
.nav{display:flex;align-items:center;gap:26px;font-weight:600;font-size:15.5px}
.nav a{text-decoration:none;color:var(--ink);padding:6px 0;background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0 1.5px;transition:background-size .25s}
.nav a:hover{background-size:100% 1.5px}
.nav .go{padding:10px 18px;border-radius:999px;background:var(--mossd);color:#f6f1e4;box-shadow:1.5px 2px 0 -.4px rgba(31,43,37,.35)}
.nav .go:hover{background-size:0 0;filter:brightness(1.1)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;max-height:1000px;height:100vh;overflow:hidden;isolation:isolate;background:#e9e6da}
.scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.ly{position:absolute;inset:0;will-change:transform}
.ly canvas{position:absolute;left:0;top:0}
#skyw{top:-12%;bottom:auto;height:112%}
.mist{position:absolute;left:0;width:200%;will-change:transform;animation:drift 140s linear infinite}
.mist canvas{width:100%;height:100%}
.mist.b{animation-duration:105s;animation-direction:reverse}
.mist.c{animation-duration:170s}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mu{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px}
.mu-a{width:100%;height:100%;animation:muX 9s ease-in-out infinite alternate}
.mu-b{width:100%;height:100%;animation:muY 7s ease-in-out infinite alternate}
.mu svg{display:block;width:100%;height:100%;overflow:visible;animation:muP 4s ease-in-out infinite alternate}
@keyframes muX{from{transform:translate3d(-16px,0,0)}to{transform:translate3d(18px,0,0)}}
@keyframes muY{from{transform:translate3d(0,-14px,0)}to{transform:translate3d(0,12px,0)}}
@keyframes muP{from{opacity:.3;transform:scale(.82)}to{opacity:1;transform:scale(1.06)}}
.tuft{position:absolute;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite alternate;will-change:transform}
@keyframes sway{from{transform:rotate(-2.6deg)}to{transform:rotate(3.2deg)}}
.leaves{position:absolute;left:0;top:0;transform-origin:0 0}
.leaf{position:absolute;left:0;top:0;opacity:0;animation:fall 16s linear infinite}
.leaf>div{animation:flut 3.2s ease-in-out infinite alternate}
.leaf svg{display:block;width:16px;height:12px}
@keyframes fall{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.95}80%{opacity:.9}100%{transform:translate3d(-150px,330px,0);opacity:0}}
@keyframes flut{from{transform:translate3d(-18px,0,0) rotate(-40deg)}to{transform:translate3d(18px,0,0) rotate(50deg)}}
.glow{position:absolute;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,186,.42),rgba(255,224,160,.14) 45%,rgba(255,220,150,0));animation:breathe 5s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.65;transform:scale(.92)}to{opacity:1;transform:scale(1.04)}}
.fam{position:absolute;display:block;user-select:none}
.dudi{position:absolute;transform-origin:50% 92%;animation:hola 3.6s ease-in-out infinite alternate}
.dudi img{display:block;width:100%;height:100%}
@keyframes hola{from{transform:rotate(-2deg) translate3d(0,0,0)}to{transform:rotate(2.2deg) translate3d(0,-4px,0)}}
.rig{position:absolute;width:0;height:0;transform-origin:0 0;animation:rigS 9s ease-in-out infinite alternate}
.rig .str{position:absolute;left:0;top:0;overflow:visible}
.kite{position:absolute;animation:kiteT 3.8s ease-in-out infinite alternate}
.kite img{display:block;width:100%;height:100%}
@keyframes rigS{from{transform:rotate(-1.4deg)}to{transform:rotate(1.1deg)}}
@keyframes kiteT{from{transform:rotate(-7deg)}to{transform:rotate(6deg)}}

.hero-txt{position:relative;z-index:3;padding:clamp(120px,17vh,168px) clamp(16px,5vw,72px) 0 clamp(16px,8vw,120px);max-width:820px}
.hero-txt::before{content:"";position:absolute;z-index:-1;left:-6%;top:6%;width:105%;height:96%;
  background:radial-gradient(closest-side,rgba(244,239,226,.85),rgba(244,239,226,.55) 55%,rgba(244,239,226,0));pointer-events:none}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0 0 18px}
.kicker::before{content:"";width:28px;height:1.5px;background:currentColor}
h1{font:650 clamp(2.25rem,4.5vw,4.15rem)/1.02 var(--disp);letter-spacing:-.025em;margin:0 0 22px;max-width:15ch;text-wrap:balance}
h1 em{font-style:normal;position:relative;white-space:nowrap;padding:0 .06em}
h1 em::after{content:"";position:absolute;z-index:-1;left:-.12em;right:-.18em;bottom:.02em;height:.42em;background:var(--wash,none) center/100% 100% no-repeat;opacity:.9}
.lead{font-size:clamp(1.03rem,1.35vw,1.2rem);color:var(--ink2);max-width:44ch;margin:0 0 30px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;
  font:650 17px/1 var(--disp);text-decoration:none;transition:transform .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn.pri{background:var(--coral);color:#fff9f2;box-shadow:0 0 0 1.2px rgba(80,24,12,.55) inset,1.5px 2px 0 -.4px rgba(80,24,12,.3),0 10px 24px -12px rgba(120,40,20,.6)}
.btn.sec{background:rgba(247,242,231,.86);color:var(--ink);box-shadow:0 0 0 1.4px rgba(31,43,37,.6) inset,1.5px 2px 0 -.4px rgba(31,43,37,.28)}
.btn svg{width:18px;height:18px;flex:none}
.live{display:flex;align-items:baseline;gap:10px;margin:0;font-size:15px;color:var(--ink2);max-width:62ch}
.live b{color:var(--ink)}
.live .dot{flex:none;width:10px;height:10px;border-radius:50%;background:#c83d2a;box-shadow:0 0 0 4px rgba(200,61,42,.18);transform:translateY(-1px);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(200,61,42,.05)}}

/* ---------- secciones de papel ---------- */
.paper{position:relative;padding:44px clamp(16px,5vw,72px) 70px;background-color:var(--paper)}
.paper.alt{background-color:var(--paper2);padding-top:56px}
.sec-h{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px 30px;max-width:1240px;margin:0 auto 34px;padding-bottom:20px;background:url(/assets/linea.webp) repeat-x left bottom/160px 4px}
.sec-h h2{font:650 clamp(1.7rem,2.8vw,2.4rem)/1.1 var(--disp);letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:14px}
.sec-h h2 em{font-style:normal;position:relative;z-index:0;white-space:nowrap}
.sec-h h2 em::after{content:"";position:absolute;z-index:-1;left:-.1em;right:-.12em;bottom:.02em;height:.42em;background:url(/assets/marcador-amarillo.webp) center/100% 100% no-repeat;opacity:.8}
.sec-h h2 em.co::after{background-image:url(/assets/marcador-coral.webp);opacity:.6}
.sec-h h2 img{width:64px;height:auto;margin:-18px 0 -12px}
.sec-h p{margin:0;color:var(--ink2);max-width:46ch}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:1240px;margin:0 auto}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:6px 9px 7px 10px;
  box-shadow:0 0 0 1px rgba(60,50,30,.10),0 18px 30px -24px rgba(50,40,20,.55);overflow:hidden;transition:transform .35s ease}
a.card,.card.go{cursor:pointer}
.card.go:hover{transform:translateY(-4px) rotate(-.3deg)}
.card .ill{display:block;width:100%;aspect-ratio:16/11}
.card .bd{padding:16px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;background:url(/assets/linea.webp) repeat-x left top/160px 4px}
.card h3{font:650 1.28rem/1.15 var(--disp);margin:0;letter-spacing:-.01em}
.card p{margin:0;font-size:15.5px;color:var(--ink2);flex:1}
.card .tag{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ochre)}
.card .main{font:650 15.5px/1 var(--disp);color:var(--mossd);text-decoration:none;display:inline-flex;gap:6px;align-items:center;margin-top:6px}
.card .main::after{content:"";position:absolute;inset:0;z-index:1}
.card .main span{transition:transform .25s}
.card.go:hover .main span{transform:translateX(4px)}
.card .also{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;margin-top:2px}
.card .also a{color:var(--ink2);text-underline-offset:3px}
.card .also a:hover{color:var(--ink)}
.ext::after{content:" ↗";font-size:.85em}

/* próximamente: sin enlace, sello «Muy pronto» */
.soon .ill{filter:saturate(.82)}
.soon h3{color:#2c3a33}
.stamp{position:absolute;right:14px;top:14px;z-index:2;padding:7px 13px 6px;border-radius:999px;transform:rotate(-7deg);
  font:700 12.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:#9a3f2a;background:rgba(250,246,236,.9);
  box-shadow:0 0 0 1.6px #9a3f2a inset,0 0 0 4px rgba(250,246,236,.9),0 0 0 5.2px rgba(154,63,42,.55)}

/* ---------- banda de confianza ---------- */
.trust{background:var(--mossd);color:#f3ede0;padding:46px clamp(16px,5vw,72px)}
.trust ul{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.trust li{display:grid;grid-template-columns:48px 1fr;gap:4px 14px;align-items:start}
.trust img{grid-row:span 2;width:48px;height:48px;object-fit:contain}
.trust b{font:650 1.12rem/1.2 var(--disp);color:#f6d68a}
.trust span{font-size:15px;color:#e6e0d1}
.trust a{color:#fff;text-underline-offset:3px}

/* ---------- pie ---------- */
.foot{padding:30px clamp(16px,5vw,72px) 40px;background:var(--paper)}
.foot .in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;font-size:15px;color:var(--ink2)}
.foot .fb{display:flex;align-items:center;gap:10px;font:700 17px/1 var(--disp);color:var(--ink);margin-right:auto}
.foot .fb img{width:56px;height:auto}
.foot a{color:var(--ink2);text-underline-offset:3px}
.foot a:hover{color:var(--ink)}

@media (max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.nav a:not(.go){display:none}}
@media (max-width:760px){
  .top{padding:14px 16px}
  .logo img{height:46px}
  .nav .go{padding:9px 15px;font-size:15px}
  .hero{height:auto;max-height:none;min-height:0;padding-bottom:430px}
  .hero-txt{padding:96px 16px 0}
  .hero-txt::before{left:-10%;width:120%}
  h1{font-size:2.25rem}
  .btn{flex:1 1 auto}
  .grid{grid-template-columns:1fr;gap:18px}
  .grid.g3{grid-template-columns:1fr;gap:14px}
  .grid.g2{grid-template-columns:1fr;gap:18px}
  .soon{flex-direction:row}
  .soon .ill{width:42%;aspect-ratio:auto;min-height:118px;flex:none}
  .soon .bd{background:none;padding:14px 14px 14px 4px;gap:4px}
  .soon p{font-size:14.5px}
  .soon .stamp{right:auto;left:8px;top:auto;bottom:10px;font-size:10.5px;padding:5px 9px 4px;transform:rotate(-5deg)}
  .paper{padding-top:30px}
  .trust ul{grid-template-columns:1fr;gap:20px}
  .foot .fb{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene *,.live .dot{animation:none!important}
  .leaf{opacity:0}
  .btn,.card,.nav a{transition:none}
}
.paused .scene *{animation-play-state:paused!important}
/* tarjeta ancha «Mis criaturas» (2026-11-08): ocupa toda la fila, dibujo a la izquierda */
.card.wide{grid-column:1/-1;flex-direction:row;align-items:stretch}
.card.wide .ill{width:min(36%,440px);flex:none;aspect-ratio:16/11}
.card.wide .bd{background:none;justify-content:center;padding:24px clamp(20px,3vw,40px);max-width:62ch}
.card.wide h3{font-size:1.55rem}
.card.wide p{flex:none;font-size:16.5px}
@media (max-width:760px){.card.wide{flex-direction:column}.card.wide .ill{width:100%}.card.wide .bd{padding:16px 20px 20px;background:url(/assets/linea.webp) repeat-x left top/160px 4px}.card.wide h3{font-size:1.28rem}.card.wide p{font-size:15.5px}}