/* Silkscreen tiene dos pesos reales y el diseno usa los dos: 700 en titulares,
   nav, placas y tablas; 400 en el pie, el indice de Privacidad, la firma de Capi
   y el precio del Pack Fundador. Con una sola cara, esos cuatro salen mas anchos. */
@font-face{font-family:'Silkscreen'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/silkscreen-400.woff2') format('woff2')}
@font-face{font-family:'Silkscreen'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/silkscreen-700.woff2') format('woff2')}
@font-face{font-family:'Bitter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/assets/fonts/bitter-var.woff2') format('woff2')}


:root{
  --tinta:#3D2410; --tinta-suave:#7A4E28; --crema:#F2DFB8; --blanco:#FFFFFF; --tinta-ajada:#7A5F38; --tinta-apagada:#C9B18A;
  --madera:#7A4E28; --madera-clara:#E3BE86;
  --pergamino:#F6E3B8; --pergamino-hondo:#E7D2A2; --pergamino-ajado:#CBB791;
  --tablon:#C89257; --tablon-claro:#D6A470; --tablon-sombra:#AE7C46;
  --pasto:#6FBF4A; --pasto-brillante:#8FD44E; --pasto-oscuro:#2E6B21; --pasto-lejano:#57A93A; --pasto-palido:#DFF0C8;
  --cielo:#4FA8E4; --cielo-claro:#B9E7F8;
  --oro:#FFD84D; --oro-claro:#FFE98A; --oro-hondo:#D49C10;
  --gota:#96D8F0; --gota-honda:#3D8BC4;
  --peligro:#DE4434; --apagado:#5C3A1C; --apagado-claro:#7C5730;
  --velo:rgba(61,36,16,.62);
  --display:'Silkscreen', monospace;
  --body:'Bitter', 'Georgia', serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
/* A4: enlace para saltar al contenido, visible solo con el foco; <main> no pinta anillo al recibirlo */
.skip-link{position:absolute; left:16px; top:-100px; z-index:40; padding:12px 16px; background:var(--pergamino); color:var(--tinta); border:3px solid var(--tinta); box-shadow:0 3px 0 var(--tinta); font-family:var(--display); font-size:16px; letter-spacing:1px; text-transform:uppercase; text-decoration:none}
.skip-link:focus{top:16px}
#contenido:focus{outline:none}
body{margin:0; background:var(--pergamino); color:var(--tinta); font-family:var(--body); font-size:18px; line-height:1.55; font-weight:400;
  image-rendering:pixelated;
  cursor:url("/assets/cursors/arrow.png") 1 1, auto;}
@media (pointer:coarse){ body{cursor:auto} }
a, button, .btn, .placa-link, summary{cursor:url("/assets/cursors/hand.png") 13 30, pointer}
.hero .scene, .btn-primary{cursor:url("/assets/cursors/can.png") 6 26, pointer}
input, textarea, p, li, h1, h2, h3{cursor:url("/assets/cursors/ibeam.png") 16 16, text}
h1,h2,h3{cursor:inherit}
@media (pointer:coarse){ a,button,.btn,input,textarea,p,li,.hero .scene{cursor:auto} }
::selection{background:var(--oro); color:var(--tinta)}
:focus-visible{outline:3px solid var(--tinta); outline-offset:3px; box-shadow:0 0 0 9px var(--oro)}
::-webkit-scrollbar{width:16px; height:16px}
::-webkit-scrollbar-track{background:var(--tablon); border-left:4px solid var(--tinta)}
::-webkit-scrollbar-thumb{background:var(--pergamino); border:3px solid var(--tinta); box-shadow:inset 0 4px 0 var(--madera-clara)}
img{display:block; max-width:100%}
.px{image-rendering:-moz-crisp-edges; image-rendering:crisp-edges; image-rendering:pixelated}
a{color:var(--pasto-oscuro); text-decoration-thickness:2px; text-underline-offset:4px; transition:color .12s ease-out}
a:hover{color:var(--tinta)}
p{margin:0 0 var(--s4)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s5)}
.display{font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:1.2}
.out2{text-shadow:-2px 0 0 var(--tinta),2px 0 0 var(--tinta),0 -2px 0 var(--tinta),0 2px 0 var(--tinta),-2px -2px 0 var(--tinta),2px -2px 0 var(--tinta),-2px 2px 0 var(--tinta),2px 2px 0 var(--tinta)}
.out4{text-shadow:-4px 0 0 var(--tinta),4px 0 0 var(--tinta),0 -4px 0 var(--tinta),0 4px 0 var(--tinta),-4px -4px 0 var(--tinta),4px -4px 0 var(--tinta),-4px 4px 0 var(--tinta),4px 4px 0 var(--tinta)}
.out-light{text-shadow:-2px 0 0 var(--pergamino),2px 0 0 var(--pergamino),0 -2px 0 var(--pergamino),0 2px 0 var(--pergamino),-2px -2px 0 var(--pergamino),2px -2px 0 var(--pergamino),-2px 2px 0 var(--pergamino),2px 2px 0 var(--pergamino)}
h1{font-family:var(--display); font-weight:700; font-size:64px; line-height:1.15; letter-spacing:2px; text-transform:uppercase; color:var(--oro); margin:0}
h2{font-family:var(--display); font-weight:700; font-size:32px; line-height:1.25; letter-spacing:2px; text-transform:uppercase; color:var(--tinta); margin:0 0 var(--s4); text-wrap:balance}
h3{font-family:var(--display); font-weight:700; font-size:16px; line-height:1.3; letter-spacing:1px; text-transform:uppercase; color:var(--tinta); margin:0 0 var(--s2)}
.lead{font-size:21px; line-height:1.5; font-weight:500; max-width:34em}
.sub{color:var(--tinta-suave); max-width:40em}
.small{font-size:15px; line-height:1.5}
.eyebrowless{margin-top:0}

/* ---- piezas de madera ---- */
.btn{display:inline-flex; align-items:center; gap:10px; height:62px; padding:0 22px; border:3px solid var(--tinta); background:var(--pasto); color:var(--blanco);
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:1px; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  box-shadow:inset 0 4px 0 var(--pasto-brillante), inset 0 -5px 0 var(--pasto-oscuro), 0 3px 0 var(--tinta); position:relative; transform:translateY(0);
  transition:transform .15s ease-out, box-shadow .15s ease-out; user-select:none}
.btn .out2{color:var(--blanco)}
.btn:hover{transform:translateY(-3px); box-shadow:inset 0 4px 0 #A8E56A, inset 0 -5px 0 var(--pasto-oscuro), 0 6px 0 var(--tinta)}
.btn:focus-visible{box-shadow:inset 0 4px 0 var(--pasto-brillante), inset 0 -5px 0 var(--pasto-oscuro), 0 3px 0 var(--tinta), 0 0 0 9px var(--oro)}
.btn:active{transform:translateY(3px); box-shadow:inset 0 4px 0 var(--pasto-brillante), inset 0 -5px 0 var(--pasto-oscuro)}
.btn-secondary{background:var(--madera); color:var(--crema); box-shadow:inset 0 4px 0 var(--tablon-sombra), inset 0 -5px 0 var(--apagado), 0 3px 0 var(--tinta)}
.btn-secondary:hover{transform:translateY(-3px); box-shadow:inset 0 4px 0 var(--tablon), inset 0 -5px 0 var(--apagado), 0 6px 0 var(--tinta)}
.btn-secondary:active{transform:translateY(3px); box-shadow:inset 0 4px 0 var(--tablon-sombra), inset 0 -5px 0 var(--apagado)}
.btn-secondary:focus-visible{box-shadow:inset 0 4px 0 var(--tablon-sombra), inset 0 -5px 0 var(--apagado), 0 3px 0 var(--tinta), 0 0 0 9px var(--oro)}
.btn-premium{background:var(--oro); color:var(--tinta); box-shadow:inset 0 4px 0 var(--oro-claro), inset 0 -5px 0 var(--oro-hondo), 0 3px 0 var(--tinta)}
.btn-premium:hover{transform:translateY(-3px); box-shadow:inset 0 4px 0 var(--oro-claro), inset 0 -5px 0 var(--oro-hondo), 0 6px 0 var(--tinta)}
.btn-premium:focus-visible{box-shadow:inset 0 4px 0 var(--oro-claro), inset 0 -5px 0 var(--oro-hondo), 0 3px 0 var(--tinta), 0 0 0 9px var(--crema)}
.btn-off{background:var(--apagado); color:var(--tinta-apagada); box-shadow:inset 0 4px 0 var(--apagado-claro), inset 0 -5px 0 #3D2410; cursor:not-allowed}
.btn .ico{width:24px; height:24px}
.placa{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; background:var(--madera); border:3px solid var(--tinta); color:var(--crema);
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:1px; text-transform:uppercase; box-shadow:inset 0 3px 0 var(--tablon-sombra), inset 0 -3px 0 var(--apagado); white-space:nowrap}
.placa-oro{background:var(--oro); color:var(--tinta); box-shadow:inset 0 3px 0 var(--oro-claro), inset 0 -3px 0 var(--oro-hondo)}
h2.placa{margin:0}
.chip{display:inline-flex; align-items:center; gap:8px; min-width:52px; height:40px; padding:0 12px 0 10px; background:var(--madera); border:3px solid var(--tinta); color:var(--crema);
  font-family:var(--display); font-weight:700; font-size:16px; box-shadow:inset 0 3px 0 var(--tablon-sombra), inset 0 -3px 0 var(--apagado)}
.chip img{width:20px;height:20px}
.panel{background:var(--pergamino); border:4px solid var(--tinta); box-shadow:inset 0 0 0 4px var(--madera-clara), 0 4px 0 0 var(--tinta); padding:28px 32px}
.panel-oro{background:var(--oro-claro); box-shadow:inset 0 0 0 4px var(--oro), 0 4px 0 0 var(--tinta)}
.tag{display:inline-block; padding:4px 8px 3px; font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:1px; text-transform:uppercase; color:var(--blanco); border:2px solid var(--tinta); line-height:1}
.tag-comun{background:#44852D} .tag-rara{background:#357CB0} .tag-epica{background:#8A4FD0} .tag-legendaria{background:#D49C10; color:var(--tinta)}
.planks{background-color:var(--tablon); background-image:url("/assets/sprites/planks_4x.png"); background-size:256px 256px}
.marco{border:3px solid var(--tinta); box-shadow:0 4px 0 var(--tinta)}

/* ---- nav ---- */
.nav{position:sticky; top:0; z-index:20; height:80px; border-bottom:4px solid var(--tinta)}
.nav .wrap{display:flex; align-items:center; gap:var(--s5); height:100%}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--crema); font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:2px}
.brand img{width:48px;height:48px}
.brand:hover{color:var(--oro)}
.nav .steps{margin-left:auto}
.nav-links{display:flex; align-items:center; gap:var(--s5)}
.nav-links a{color:var(--crema); text-decoration:none; font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:1px; text-transform:uppercase; white-space:nowrap}
.nav-links a:hover{color:var(--oro)}
.lang{display:inline-flex; border:3px solid var(--tinta); background:var(--apagado); font-family:var(--display); font-size:16px; font-weight:700; color:var(--tinta-apagada)}
.lang span, .lang a{padding:5px 8px 4px; text-decoration:none}
.lang a{color:var(--tinta-apagada)}
.lang a:hover{color:var(--oro)}
.lang .on{background:var(--pergamino); color:var(--tinta)}
.nav .btn{height:48px; padding:0 16px}

/* ---- hero: la finca en vivo ---- */
.hero{position:relative; height:900px; margin-top:-80px; padding-top:80px; overflow:hidden; background:url("/assets/scenes/hero_wide.png") top center / 4320px 900px no-repeat, var(--pasto) url("/assets/sprites/grass_tile.png") top center / 64px 64px repeat}
.hero .wrap{position:relative; height:100%; z-index:2}
.hero-copy{position:absolute; left:24px; top:56px; width:640px}
.hero-copy h1{margin-bottom:0}
.hero-panel{position:absolute; left:24px; top:302px; width:640px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}
.store-row{display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:16px}
.store-row .small{margin:0; color:var(--tinta-suave)}
.hero .cue{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; z-index:3}
.hero .cue img{width:32px;height:32px}
.scene{position:absolute; left:50%; top:0; width:1440px; height:900px; margin-left:-720px; pointer-events:none; z-index:1; overflow:hidden}
/* Con la escena centrada, en pantallas menores de 1440 se recorta el racimo de la
   finca (casa, Capi, cartel) y asoma el globo cortado. Anclada a la derecha se ve
   entera; el panel la tapa por la izquierda. */
@media (max-width:1439px){ .scene{left:auto; right:0; margin-left:0} }
.scene-m{display:none}
.scene .o{position:absolute}
.scene .sh{position:absolute; background:var(--pasto-lejano); height:8px}
.plot{position:absolute; width:64px; height:64px; background:url("/assets/sprites/plot.png")}
.plot.wet{background-image:url("/assets/sprites/plot_wet.png")}
.plot .crop{position:absolute; inset:0}
.plot .bar{position:absolute; left:4px; top:48px; width:56px; height:8px; background:var(--tinta)}
.plot .bar i{position:absolute; left:2px; top:2px; height:4px; background:var(--gota); border-bottom:2px solid var(--gota-honda); box-sizing:border-box}
.plot.ready{outline:4px solid var(--oro); outline-offset:0}
.plot .spark{position:absolute; right:-16px; top:-12px; width:32px; height:32px}
.globo{position:absolute; width:220px; padding:12px 14px; background:var(--pergamino); border:3px solid var(--tinta); box-shadow:0 3px 0 var(--tinta); font-weight:600; font-size:17px; line-height:1.35}
.globo:after{content:""; position:absolute; left:-15px; top:34px; width:12px; height:12px; background:var(--pergamino); border:3px solid var(--tinta); border-right:0}
.globo:before{content:""; position:absolute; left:-26px; top:38px; width:8px; height:8px; background:var(--pergamino); border:3px solid var(--tinta); border-right:0}
/* Deriva constante en `linear` y con `image-rendering:pixelated`: el navegador
   ajusta el sprite a pixel de dispositivo (no lo interpola), asi que el
   desplazamiento continuo se siente fluido sin emborronar. 720 px por vuelta:
   rapida 24 s (~30 px/s), media 34 s (~21 px/s), lenta 48 s (~15 px/s). */
.nube{animation:deriva var(--dur, 34s) linear infinite; will-change:transform}
@keyframes deriva{from{transform:translateX(0)} to{transform:translateX(720px)}}
.nube.lenta{--dur:48s} .nube.media{--dur:34s} .nube.rapida{--dur:24s}
.bob{animation:bob .95s ease-in-out infinite alternate; will-change:transform}
@keyframes bob{from{transform:translateY(0)} to{transform:translateY(-4px)}}

/* ---- entrada y vida de la escena ---- */
.hero-copy h1, .hero-panel{animation:entra .6s cubic-bezier(.16,1,.3,1) both}
.scene, .scene-m{animation:entra .8s cubic-bezier(.16,1,.3,1) .15s both}
.hero-panel{animation-delay:.08s}
@keyframes entra{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
.plot .crop{transform-origin:50% 100%; animation:crece .7s cubic-bezier(.16,1,.3,1) both}
@keyframes crece{from{transform:scaleY(.15); opacity:0} to{transform:scaleY(1); opacity:1}}
.plot .spark{animation:brillo 1.6s ease-in-out infinite; will-change:transform}
@keyframes brillo{0%,100%{opacity:.35; transform:translateY(0)} 50%{opacity:1; transform:translateY(-4px)}}
.gota{position:absolute; left:70px; bottom:-4px; width:20px; height:20px; animation:gota 2.2s cubic-bezier(.5,0,.9,.45) infinite; will-change:transform}
@keyframes gota{
  0%{transform:translateY(-56px); opacity:0}
  10%{opacity:1}
  55%{transform:translateY(0); opacity:1}
  68%,100%{transform:translateY(0); opacity:0}
}
@media (prefers-reduced-motion: reduce){ .bob, .nube, .plot .crop, .plot .spark, .gota, .hero-copy h1, .hero-panel, .scene, .scene-m{animation:none} }

/* ---- estados: la respuesta es un salto de pixel, no un fundido ---- */
@media (hover:hover){
  .beat .art, .jar, .shot{transition:transform .2s ease-out}
  .beat:hover .art, .jar:hover, .shot:hover{transform:translateY(-4px)}
}
/* Fuera de pantalla los bucles se pausan; lo activa el script de la pagina. */
.pausa, .pausa *{animation-play-state:paused!important}

/* ---- momentos de scroll: el camino enciende los beats y la repisa se llena ---- */
.mov .beats .path{opacity:0}
.mov .beats .beat{opacity:0; transform:translateY(8px)}
.mov .album .jar{opacity:0}
.encendido .path, .encendido .beat{animation:aparece .6s cubic-bezier(.16,1,.3,1) both}
.encendido .jar{animation:brilla .7s ease-out both}
@keyframes aparece{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}
@keyframes brilla{from{opacity:0} to{opacity:1}}
.encendido .path:nth-child(1){animation-delay:0ms}
.encendido .path:nth-child(2){animation-delay:35ms}
.encendido .path:nth-child(3){animation-delay:70ms}
.encendido .path:nth-child(4){animation-delay:105ms}
.encendido .path:nth-child(5){animation-delay:140ms}
.encendido .path:nth-child(6){animation-delay:175ms}
.encendido .path:nth-child(7){animation-delay:210ms}
.encendido .path:nth-child(8){animation-delay:245ms}
.encendido .path:nth-child(9){animation-delay:280ms}
.encendido .path:nth-child(10){animation-delay:315ms}
.encendido .path:nth-child(11){animation-delay:350ms}
.encendido .path:nth-child(12){animation-delay:385ms}
.encendido .path:nth-child(13){animation-delay:420ms}
.encendido .path:nth-child(14){animation-delay:455ms}
.encendido .path:nth-child(15){animation-delay:490ms}
.encendido .path:nth-child(16){animation-delay:525ms}
.encendido .path:nth-child(17){animation-delay:560ms}
.encendido .path:nth-child(18){animation-delay:595ms}
.encendido .beat:nth-of-type(1){animation-delay:240ms}
.encendido .beat:nth-of-type(2){animation-delay:480ms}
.encendido .beat:nth-of-type(3){animation-delay:720ms}
.encendido .jar:nth-child(1){animation-delay:0ms}
.encendido .jar:nth-child(2){animation-delay:80ms}
.encendido .jar:nth-child(3){animation-delay:160ms}
.encendido .jar:nth-child(4){animation-delay:240ms}
.encendido .jar:nth-child(5){animation-delay:320ms}

/* ---- secciones ---- */
.sec{padding:var(--s9) 0}
.sec-head{display:grid; grid-template-columns:7fr 5fr; gap:var(--s6); align-items:end; margin-bottom:var(--s7)}
.sec-head .sub{margin:0 0 6px}
.grass{background:var(--pasto) url("/assets/sprites/grass_tile.png") repeat; background-size:64px 64px; color:var(--tinta)}
/* cómo funciona */
.how{position:relative}
.beats{position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s6); min-height:420px}
.beat{position:relative; padding-top:160px}
.beat:nth-of-type(2){margin-top:64px} .beat:nth-of-type(3){margin-top:128px}
.beat .art{position:absolute; left:0; top:0; height:96px; display:flex; align-items:flex-end; gap:12px}
.beat p{max-width:38ch; margin:0}
.beat .placa{margin-bottom:12px}
.path{position:absolute; width:64px; height:64px; background:url("/assets/sprites/path.png"); background-size:64px 64px; z-index:0}
.path.s1{top:88px} .path.s2{top:152px} .path.s3{top:216px}
.beats > .beat{z-index:1}

/* un día en milpaso */
.day .wrap > .placa{margin-bottom:var(--s6)}
.screens{display:flex; align-items:flex-start; gap:var(--s5); overflow-x:auto; scroll-snap-type:x mandatory; padding:0 0 16px; scrollbar-width:none}
.screens::-webkit-scrollbar{display:none}
.shot{flex:0 0 195px; scroll-snap-align:center; display:flex; flex-direction:column; gap:14px; margin:0}
.shot:nth-child(2){margin-top:28px} .shot:nth-child(3){margin-top:8px} .shot:nth-child(4){margin-top:36px} .shot:nth-child(5){margin-top:16px}
.shot img{width:195px; height:422px; box-sizing:content-box; border:3px solid var(--tinta); box-shadow:0 4px 0 var(--tinta)}
.shot p{margin:0; font-size:15px; line-height:1.45; color:var(--tinta); font-weight:500}
/* D6: la leyenda va sobre pergamino, no sobre las vetas de la madera (11,4:1 con la tinta) */
.shot figcaption{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:0; padding:10px 12px; background:var(--pergamino); border:3px solid var(--tinta); box-shadow:0 3px 0 var(--tinta)}
.shot .placa{align-self:flex-start}
.shot.on{transform:translateY(-4px)}
.shot.on img{outline:4px solid var(--oro)}
.shot.on .placa{background:var(--oro); color:var(--tinta); box-shadow:inset 0 3px 0 var(--oro-claro), inset 0 -3px 0 var(--oro-hondo)}
.car-nav{display:flex; align-items:center; justify-content:center; gap:var(--s5); margin-top:var(--s5)}
.car-btn{width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:3px solid var(--tinta); border-radius:0; background:var(--madera); box-shadow:inset 0 3px 0 var(--tablon-sombra), inset 0 -3px 0 var(--apagado), 0 3px 0 var(--tinta)}
.car-btn img{width:24px; height:24px}
.car-btn:hover:not(:disabled){box-shadow:inset 0 3px 0 var(--tablon), inset 0 -3px 0 var(--apagado), 0 3px 0 var(--tinta)}
.car-btn:disabled{background:var(--apagado); box-shadow:inset 0 3px 0 var(--apagado-claro), inset 0 -3px 0 #3D2410}
.car-dots{display:flex; align-items:center; gap:12px}
.car-dot{width:16px; height:16px; padding:0; border:3px solid var(--tinta); border-radius:0; background:var(--pergamino)}
.car-dot[aria-current="true"]{background:var(--oro)}

/* carta de Capi */
.letter{display:grid; grid-template-columns:5fr 7fr; gap:var(--s7); align-items:end}
.letter .capi{position:relative; justify-self:center; padding-bottom:28px}
.letter .capi img{width:272px; height:240px; position:relative}
.letter .capi .sh{position:absolute; left:24px; right:24px; bottom:14px; height:16px; background:var(--pasto-lejano)}
.paper{background:var(--pergamino); border:4px solid var(--tinta); box-shadow:inset 0 0 0 4px var(--madera-clara), 0 6px 0 var(--tinta); padding:36px 40px}
.paper .display{font-size:16px; letter-spacing:1px; color:var(--tinta-suave); margin-bottom:12px}
.paper ul{list-style:none; padding:0; margin:16px 0 20px}
.paper li{position:relative; padding-left:32px; margin-bottom:10px}
.paper li img{position:absolute; left:0; top:4px; width:20px; height:20px}
.paper .firma{font-family:var(--display); font-size:24px; letter-spacing:2px; color:var(--tinta)}

/* álbum: la estantería */
.shelf{margin-top:var(--s6)}
.shelf-row{display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--s5); padding:0 24px 16px; border-bottom:14px solid var(--tablon); box-shadow:0 4px 0 var(--tinta), 0 18px 0 var(--tablon-sombra), 0 22px 0 var(--tinta); margin-bottom:56px}
.jar{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.jar img{width:64px; height:64px; margin-bottom:2px}
.jar h3{margin:0; min-height:2.6em}
.jar .cost{font-size:15px; color:var(--tinta-suave); margin:0}
.rarity-legend{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px}
.rarity-legend .small{margin:0; color:var(--tinta-suave)}

/* pack fundador */
.founder{display:grid; grid-template-columns:7fr 5fr; gap:var(--s7); align-items:center}
.founder .panel-oro{padding:32px 36px}
.founder .price{font-family:var(--display); font-size:32px; letter-spacing:1px; margin:8px 0 16px}
.founder ul{list-style:none; padding:0; margin:0 0 20px}
.founder li{position:relative; padding-left:32px; margin-bottom:8px}
.founder li img{position:absolute; left:0; top:2px; width:20px; height:20px}
.founder .capi{justify-self:center; position:relative}
.founder .capi img{width:272px; height:272px}
.founder .capi .placa{position:absolute; left:50%; transform:translateX(-50%); bottom:-28px}

/* cierre: atardecer en la finca */
.close{position:relative; overflow:hidden; height:640px; padding:0; background:url("/assets/scenes/close_wide.png") top center / 4320px 640px no-repeat, var(--pasto) url("/assets/sprites/grass_tile.png") top center / 64px 64px repeat}
.close .wrap{position:relative; height:100%; z-index:2}
.close .panel{position:absolute; left:24px; top:236px; width:600px}
.close .wordmark{font-size:48px; color:var(--oro); letter-spacing:2px; line-height:1.2; margin:0}
.close .tagline{color:var(--tinta); font-size:22px; font-weight:500; margin:10px 0 20px}
.close .cta-row{margin-top:0}
.close .store-row .small{color:var(--tinta-suave)}
.close .scene{height:640px}

/* footer */
.foot{background:var(--madera); border-top:4px solid var(--tinta); color:var(--crema); padding:var(--s6) 0}
.foot .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s6)}
.foot a{color:var(--crema)}
.foot .small{margin:0}
.foot .links{display:flex; gap:var(--s5); margin-left:auto}
.foot .links a{font-family:var(--display); font-size:16px; letter-spacing:1px; text-transform:uppercase; text-decoration:none}
.foot .links a:hover{color:var(--oro)}
/* ---- táctil: objetivos de 44 px donde apunta el pulgar ---- */
@media (pointer:coarse){
  .foot .links a{display:inline-flex; align-items:center; min-height:44px}
  .lang span, .lang a{padding:10px 10px 9px}
  p a[href^="mailto:"]{padding:13px 0}
}

/* ---- sticky CTA móvil ---- */
.sticky-cta{display:none}

/* ---- móvil ---- */
@media (max-width: 767px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  h1{font-size:32px; line-height:1.2; letter-spacing:1px}
  h2{font-size:24px; letter-spacing:1px}
  .lead{font-size:18px}
  .nav{height:56px}
  .nav .wrap{gap:12px}
  /* D1: nada del menu encoge; bajo 420 px la marca se queda con su icono (ver .brand-txt) */
  .brand, .nav .chip, .nav .lang{flex-shrink:0}
  html{scroll-padding-top:72px}
  .brand{font-size:16px; letter-spacing:1px} .brand img{width:32px;height:32px}
  .chip{height:36px; font-size:16px}
  .hero{height:auto; margin-top:-56px; padding:56px 0 32px; background:url("/assets/scenes/hero_392.png") top center / 392px 768px no-repeat, var(--pasto) url("/assets/sprites/grass_tile.png") center 0 / 64px 64px repeat}
  .hero .wrap{height:auto}
  .hero-copy{position:static; width:auto; padding-top:28px}
  .hero-panel{position:static; width:auto; margin-top:16px; padding:20px 18px}
  .scene{display:none}
  /* D2: la escena mide 392 px y se centra; en 360 se recorta igual por los dos lados */
  .scene-m{display:block; position:relative; height:480px; width:392px; margin:12px 0 0 calc(50% - 196px); pointer-events:none}
  .scene-m .o{position:absolute}
  .scene-m .sh{position:absolute; background:var(--pasto-lejano); height:8px}
  .btn{height:56px; padding:0 18px; font-size:16px}
  /* D2: el texto del boton puede partir en dos lineas en vez de salirse del panel */
  .cta-row .btn{flex:1 1 100%; justify-content:center; white-space:normal; height:auto; min-height:56px; padding:12px 18px; line-height:1.2; text-align:center}
  .close{height:auto; padding:0 0 40px; background:url("/assets/scenes/close_392.png") top center / 392px 880px no-repeat, var(--pasto) url("/assets/sprites/grass_tile.png") center 48px / 64px 64px repeat}
  .close .wrap{height:auto; padding-top:320px}
  .close .panel{position:static; width:auto; padding:20px 18px}
  .close .wordmark{font-size:32px}
  .close .tagline{font-size:20px}
  .close .scene{display:none}
  .close .close-scene-m{position:absolute; left:50%; margin:0 0 0 -195px; width:390px; top:0; height:320px; pointer-events:none}
  .close .capi-m{position:relative; height:160px; margin-top:24px}
  .close .capi-m img{position:absolute; left:50%; margin-left:-68px; top:16px; width:136px; height:120px}
  .close .capi-m .sh{position:absolute; left:50%; margin-left:-52px; top:134px; width:104px; height:10px; background:var(--pasto-lejano)}
  .sec{padding:var(--s8) 0}
  .sec-head{grid-template-columns:1fr; gap:8px; margin-bottom:var(--s6)}
  .beats{grid-template-columns:1fr; gap:var(--s6); min-height:0}
  .beat, .beat:nth-of-type(2), .beat:nth-of-type(3){margin-top:0; padding-top:104px; padding-left:0}
  .path{display:none}
  .screens{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 0 16px; margin:0 -16px; padding-left:16px; padding-right:16px}
  .shot{flex:0 0 195px; scroll-snap-align:start}
  .shot:nth-child(n){margin-top:0}
  .letter{grid-template-columns:1fr; gap:var(--s5)}
  .letter .capi img{width:136px; height:120px}
  .paper{padding:24px 20px}
  .shelf-row{grid-template-columns:repeat(2, 1fr); gap:20px 16px; padding:0 12px 16px}
  .jar.wide{grid-column:1 / -1}
  .founder{grid-template-columns:1fr; gap:var(--s7)}
  .founder .panel-oro{padding:24px 20px}
  .founder .price{font-size:24px}
  .foot .links{margin-left:0; flex-wrap:wrap}
}
@media (max-width:419px){ .brand .brand-txt{display:none} }
/* D2: por debajo de 380 px la escena de 392 px se escala a la pantalla (zoom, no transform: la animacion de entrada ya usa transform) */
@media (max-width:379px){ .scene-m{zoom:.918} }
/* El nav completo mide ~1060px minimos y no encoge (white-space:nowrap). Por
   debajo de 1120 se colapsa igual que en movil y la barra fija de descarga
   toma el relevo: ninguna anchura se queda sin CTA ni con la fila deformada. */
@media (max-width:1119px){
  .nav-links > a, .nav .btn{display:none}
  .hero .cue{display:none}
  .nav .lang{display:inline-flex}
  .sticky-cta{display:block; position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:4px solid var(--tinta)}
  .sticky-cta .btn{width:100%; justify-content:center}
  body{padding-bottom:84px}
  /* A1: el foco y las anclas no quedan bajo la barra fija (WCAG 2.4.11, tecnica C43) */
  html{scroll-padding-bottom:100px}
}
@media (min-width:768px) and (max-width:1279px){
  .path{display:none}
  .hero{height:880px}
  .hero-copy{width:56%}
  .hero-copy h1{font-size:48px}
  .hero-panel{width:min(640px, 58vw)}
  .founder, .letter{grid-template-columns:1fr 1fr}
}
/* Capi (1000 px de la escena) solo queda entero a partir de ~1105 px de ventana;
   antes, el panel lo tapa a medias. Con él, su globo y su sombra fuera, la finca
   queda limpia. */
@media (min-width:768px) and (max-width:1104px){
  .hero .scene img[src*="capi_farm"], .hero .scene .globo, .hero .scene .sh[style*="left:1020px"]{display:none}
}
.close .capi-m{display:none}
@media (max-width:767px){ .close .capi-m{display:block} }

/* ---- páginas interiores (Soporte, Privacidad): modo lectura ---- */
.page-head{position:relative; padding:56px 0 0; height:240px; margin-top:-80px; padding-top:80px; overflow:hidden;
  background:url("/assets/scenes/hero_wide.png") center -300px / 4320px 900px no-repeat, var(--pasto) url("/assets/sprites/grass_tile.png") center 0 / 64px 64px repeat}
.page-head .wrap{position:relative; height:100%}
.page-head .title{position:absolute; left:24px; bottom:40px; display:flex; align-items:flex-end; gap:24px}
.page-head h1{font-size:48px; line-height:1.2; color:var(--crema)}
.page-head .kicker{margin:0 0 10px; display:inline-block; background:var(--pergamino); border:3px solid var(--tinta); box-shadow:0 3px 0 var(--tinta); padding:6px 12px; color:var(--tinta); font-size:16px; font-weight:500; line-height:1.3}
.page-head .capi{position:absolute; right:24px; bottom:0; width:136px; height:120px}
.page-head .capi img{width:136px;height:120px}
.page-head .capi .sh{position:absolute; left:16px; right:16px; bottom:-4px; height:10px; background:var(--pasto-lejano)}
.page-head .marco-grass{position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--tinta)}

.read{padding:var(--s8) 0 var(--s9)}
.read .cols{display:grid; grid-template-columns:8fr 4fr; gap:var(--s7); align-items:start}
.read h2{font-size:24px; letter-spacing:2px; margin:var(--s7) 0 var(--s4)}
.read h2:first-child{margin-top:0}
.read h3{font-size:16px; margin:var(--s6) 0 var(--s2)}
.read p, .read li{max-width:66ch}
.read .intro{font-size:21px; line-height:1.5; font-weight:500; max-width:40em}
.faq{list-style:none; padding:0; margin:0}
.faq li{position:relative; padding:20px 0 20px 40px; border-bottom:3px solid var(--pergamino-hondo)}
.faq li:last-child{border-bottom:0}
.faq li img{position:absolute; left:0; top:24px; width:24px; height:24px}
.faq h3{margin:0 0 6px}
.faq p{margin:0}
.aside{position:sticky; top:96px}
.aside .panel{padding:24px 24px}
.aside .panel + .panel{margin-top:24px}
.aside h3{margin:0 0 12px}
.aside p{font-size:16px; margin-bottom:12px}
.aside .btn{width:100%; justify-content:center; margin-top:8px}
.aside .toc{list-style:none; padding:0; margin:0}
.aside .toc li{margin:0 0 8px}
.aside .toc a{font-family:var(--display); font-size:16px; letter-spacing:1px; text-transform:uppercase; text-decoration:none; color:var(--tinta-suave)}
.aside .toc a:hover, .aside .toc a.on{color:var(--tinta)}
.read table{border-collapse:collapse; width:100%; font-size:16px; margin:12px 0 24px; border:3px solid var(--tinta); background:var(--pergamino)}
.read th, .read td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:2px solid var(--pergamino-hondo)}
.read th{font-family:var(--display); font-size:16px; letter-spacing:1px; text-transform:uppercase; background:var(--madera); color:var(--crema); border-bottom:3px solid var(--tinta)}
.read ul.list{padding-left:0; list-style:none}
.read ul.list li{position:relative; padding-left:32px; margin-bottom:8px}
.read ul.list li img{position:absolute; left:0; top:4px; width:20px; height:20px}
.read .meta{font-size:15px; color:var(--tinta-suave)}
.read td .et{display:none}
.tldr{background:var(--pergamino); border:4px solid var(--tinta); box-shadow:inset 0 0 0 4px var(--madera-clara), 0 4px 0 var(--tinta); padding:20px 24px; margin:0 0 32px}
.tldr p{margin:0; font-size:18px; font-weight:500}
.tldr .display{font-size:16px; color:var(--tinta-suave); margin-bottom:8px}
@media (max-width:767px){
  .page-head{height:200px; margin-top:-56px; padding-top:56px; background:url("/assets/scenes/hero_392.png") center -240px / 392px 768px no-repeat, var(--pasto) url("/assets/sprites/grass_tile.png") center 0 / 64px 64px repeat}
  .page-head .title{left:16px; bottom:24px; flex-direction:column; align-items:flex-start; gap:6px}
  .page-head h1{font-size:32px}
  .page-head .capi{display:none}
  .read{padding:var(--s7) 0 var(--s8)}
  .read .cols{grid-template-columns:1fr; gap:var(--s6)}
  .aside{position:static}
  /* la tabla de encargados se vuelve tres fichas apiladas: cabecera en madera
     con el «para que», y dentro las dos etiquetas de la fila. */
  .read table, .read tbody, .read tr, .read td{display:block; width:auto}
  .read thead{display:none}
  .read table{border:0; background:none; margin:12px 0 24px}
  .read tr{background:var(--pergamino); border:3px solid var(--tinta); box-shadow:0 4px 0 var(--tinta); margin:0 0 24px}
  .read tr:last-child{margin-bottom:0}
  .read td{border-bottom:0; padding:12px 14px}
  .read td:first-child{background:var(--madera); color:var(--crema); border-bottom:3px solid var(--tinta); font-weight:500}
  .read td .et{display:block; font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:1px;
    text-transform:uppercase; color:var(--tinta-suave); margin:0 0 4px}
  .read h2{font-size:24px; line-height:30px; letter-spacing:1px}
}