/* Chakana · estilo madera. Kraft paper, oak and charred wood; fonts and textures live in /estilo/. */
@import url(/estilo/madera.css);

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--grano),var(--papel);color:var(--tinta);font:17px/1.6 var(--texto)}
a{color:var(--enlace);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--brasa);outline-offset:4px}
img{max-width:100%}
p{max-width:74ch}
main{max-width:1180px;margin:auto;padding:28px 6vw 90px}

h1,h2,h3{font-family:var(--titulo);font-weight:700;color:var(--tinta);text-wrap:balance}
h1{font-size:clamp(50px,8vw,100px);line-height:.98;margin:20px 0 30px}
h2{font-size:clamp(36px,4.8vw,60px);line-height:1;margin:60px 0 22px}
h3{font-size:25px;line-height:1.15;margin:0 0 10px}

.eyebrow{display:flex;align-items:center;gap:.75em;font:500 12.5px/1.3 var(--rotulo);letter-spacing:.14em;text-transform:uppercase;color:var(--enlace);margin:0 0 14px}
.eyebrow::before{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:var(--chakana) center/contain no-repeat;mask:var(--chakana) center/contain no-repeat}
.eyebrow+h1,.eyebrow+h2{margin-top:0}
.lead{font-size:clamp(20px,2vw,23px);line-height:1.5;max-width:62ch}
figcaption,.fine{font-size:13px;color:var(--tinta-suave)}

/* Plank nav with the logo badge */
nav{display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap;padding:20px 6vw;background:var(--fondo-tabla);color:var(--crema);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 2px 0 var(--junta)}
nav .logo{display:block;width:46px;height:46px;margin:-12px auto -12px 0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
nav a{color:var(--crema);font:500 13px/1.3 var(--rotulo);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,.45)}
nav a:hover{color:var(--led);text-decoration:underline;text-decoration-thickness:2px}
nav a:focus-visible{outline-color:var(--led)}

/* Hero: the first screen. Dark wood, the piece floating beside the name, lit from behind, turning toward the cursor; the badge stamped on the name. */
nav:has(+.hero){position:absolute;inset:0 0 auto;z-index:3;background:none;box-shadow:none}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:1fr auto;align-items:center;gap:0 3vw;min-height:100svh;padding:clamp(108px,15svh,150px) 6vw 0;color:var(--crema);background:radial-gradient(ellipse 130% 95% at 45% 40%,transparent 50%,rgba(8,5,3,.6)),linear-gradient(rgba(16,9,5,.38),rgba(16,9,5,.38)),var(--fondo-tabla);overflow:hidden}
@keyframes respira{from{opacity:.75}to{opacity:1}}
.hero .title{position:relative;z-index:2;padding:0 0 clamp(56px,9svh,104px)}
.hero .title p{margin:0}
.hero .kicker{font:500 13px/1.3 var(--rotulo);letter-spacing:.16em;color:var(--led)}
.hero h1{position:relative;display:inline-block;font-size:clamp(72px,7.8vw,150px);line-height:.82;text-transform:uppercase;letter-spacing:.01em;padding-right:.36em;margin:.16em 0 .26em;color:var(--crema);text-shadow:0 3px 0 rgba(0,0,0,.25)}
.hero .sello{position:absolute;right:.02em;top:-.38em;width:.5em;height:.5em;transform:rotate(14deg);filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.hero .tag{font:italic 500 clamp(23px,2.1vw,30px)/1.25 var(--titulo);color:var(--crema-suave);max-width:31ch;text-wrap:pretty}
.hero .actions{margin:32px 0 0}
.hero .button.secondary{color:var(--crema);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(251,243,227,.65)}
.hero .button.secondary:hover,.hero .button.secondary:active{color:var(--led);box-shadow:inset 0 0 0 2px var(--led);transform:none}
.hero .title .fine{max-width:46ch;margin-top:34px;color:var(--crema-suave);opacity:.8}
.hero :focus-visible{outline-color:var(--led)}
.hero .obra{position:relative;z-index:1;align-self:center;justify-self:center;margin:0;transform:translate3d(calc(var(--mx,0)*14px),calc(var(--my,0)*10px),0);animation:flota 6s ease-in-out infinite alternate}
@keyframes flota{from{translate:0 -7px}to{translate:0 7px}}
.hero .obra::before{content:"";position:absolute;inset:-28% -34% -6%;z-index:-1;transform:translate(calc(var(--mx,0)*-26px),calc(var(--my,0)*-18px));background:radial-gradient(closest-side,rgba(255,196,110,.46),rgba(214,104,38,.17) 52%,transparent);pointer-events:none;animation:respira 7s ease-in-out infinite alternate}
.hero .obra img{display:block;width:min(100%,64svh,640px);height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));transform:perspective(1400px) rotateY(calc(var(--mx,0)*9deg)) rotateX(calc(var(--my,0)*-6deg));will-change:transform}
.hero::after{content:"";position:relative;z-index:2;grid-column:1/-1;height:40px;margin:0 -6vw;background:var(--frente);background-blend-mode:multiply,multiply,normal;box-shadow:inset 0 3px 0 var(--junta),inset 0 -3px 0 var(--junta)}

/* Sections */
main>section{padding-top:var(--ritmo)}
main>section:first-child{padding-top:calc(var(--ritmo)*.6)}
main>section>h2:first-child{margin-top:0}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0}

/* Wood-block buttons: ember for the main action, oak plank for the rest. */
.button{display:inline-block;font:700 17px/1.2 var(--texto);padding:14px 22px;border:0;border-radius:3px;cursor:pointer;text-decoration:none;color:var(--crema);background:var(--brasa);box-shadow:0 4px 0 var(--brasa-oscura),0 10px 18px -10px rgba(42,27,17,.7);transition:transform .12s,box-shadow .12s}
.button.secondary,#viewer-presets .button[aria-pressed="false"]{color:var(--tinta);background:linear-gradient(rgba(246,238,223,.5),rgba(246,238,223,.5)),var(--tabla) 0 30%/560px auto,var(--madera-clara);box-shadow:0 4px 0 var(--madera),0 10px 18px -10px rgba(42,27,17,.6)}
.button:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--brasa-oscura),0 6px 12px -8px rgba(42,27,17,.7)}
.button.secondary:hover{box-shadow:0 2px 0 var(--madera),0 6px 12px -8px rgba(42,27,17,.6)}
.button:active{transform:translateY(4px);box-shadow:0 0 0 var(--brasa-oscura)}
#viewer-presets .button[aria-pressed="true"]{color:var(--crema);background:var(--brasa);transform:translateY(4px);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}

/* Workshop note pinned with tape */
.note{position:relative;padding:24px 26px 22px;margin:28px 0;font-size:15px;color:var(--tinta-suave);background:var(--papel-claro);border:1px solid var(--linea);box-shadow:0 12px 22px -18px rgba(42,27,17,.55)}
.note::before{content:"";position:absolute;top:-11px;left:26px;width:92px;height:22px;background:rgba(222,200,152,.78);box-shadow:0 1px 2px rgba(42,27,17,.18);transform:rotate(-2.5deg);clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,2% 96%,0 50%)}

/* Cards: wooden tags with chakana-stepped corners and a plank edge. */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid article{position:relative;padding:34px 24px 24px;background:var(--papel-claro);box-shadow:inset 0 0 0 1px var(--linea);clip-path:polygon(0 calc(2*var(--paso)),var(--paso) calc(2*var(--paso)),var(--paso) var(--paso),calc(2*var(--paso)) var(--paso),calc(2*var(--paso)) 0,calc(100% - 2*var(--paso)) 0,calc(100% - 2*var(--paso)) var(--paso),calc(100% - var(--paso)) var(--paso),calc(100% - var(--paso)) calc(2*var(--paso)),100% calc(2*var(--paso)),100% calc(100% - 2*var(--paso)),calc(100% - var(--paso)) calc(100% - 2*var(--paso)),calc(100% - var(--paso)) calc(100% - var(--paso)),calc(100% - 2*var(--paso)) calc(100% - var(--paso)),calc(100% - 2*var(--paso)) 100%,calc(2*var(--paso)) 100%,calc(2*var(--paso)) calc(100% - var(--paso)),var(--paso) calc(100% - var(--paso)),var(--paso) calc(100% - 2*var(--paso)),0 calc(100% - 2*var(--paso)))}
.grid article::before{content:"";position:absolute;inset:0 0 auto;height:12px;background:var(--tabla) 0 0/560px auto,var(--madera);box-shadow:inset 0 -2px 0 rgba(42,27,17,.35)}
.grid article p{margin:0 0 12px;font-size:16px;line-height:1.55}
.grid article>a{font-weight:700}
#resumen .grid{grid-template-columns:repeat(4,1fr)}
.marca{font:500 .6em/1 var(--rotulo);letter-spacing:.04em;vertical-align:.3em;margin-right:.35em;color:var(--brasa)}

/* 3D viewer in a wooden frame */
#project-viewer{display:block;width:calc(100vw - 32px);height:clamp(640px,calc(100svh - 32px),1040px);margin:24px calc(50% - 50vw + 16px) 0;padding:14px;border:0;border-radius:4px;background:var(--tabla) 0 0/560px auto,var(--madera);box-shadow:inset 0 0 0 1px rgba(42,27,17,.45),0 3px 0 var(--junta),0 26px 40px -26px rgba(42,27,17,.8)}
#visor{scroll-margin-top:90px}

/* Night: charred wood, LED strips that run along the steps. */
.noche{position:relative;margin:var(--ritmo) calc(50% - 50vw) 0;padding:calc(var(--ritmo) + 44px) calc(50vw - 50%) calc(var(--ritmo) + 44px);color:var(--crema);background:radial-gradient(ellipse 50% 60% at 78% 22%,rgba(243,165,63,.14),transparent 70%),var(--fondo-noche)}
.noche::before,.noche::after{content:"";position:absolute;left:0;right:0;height:34px;background:var(--led);-webkit-mask:var(--guarda) 0 0/68px 34px repeat-x;mask:var(--guarda) 0 0/68px 34px repeat-x;filter:drop-shadow(0 0 6px rgba(243,165,63,.65))}
.noche::before{top:26px}
.noche::after{bottom:26px}
.noche h2{display:flex;align-items:center;min-height:190px;padding-right:220px;margin:0 0 12px;color:var(--crema);text-shadow:0 0 22px rgba(243,165,63,.35);background:var(--luces) right center/190px no-repeat}
.noche h3{color:var(--crema)}
.noche a{color:var(--led)}
.noche .grid article{background:rgba(251,243,227,.04);box-shadow:inset 0 0 0 1px rgba(243,165,63,.35)}
.noche .grid article::before{height:10px;top:10px;left:18px;right:18px;background:radial-gradient(circle,#ffe6bd 0 1.5px,var(--led) 2.2px,transparent 4.5px) 0 50%/16px 10px repeat-x;box-shadow:none;filter:drop-shadow(0 0 4px rgba(243,165,63,.9));-webkit-mask:linear-gradient(90deg,rgba(0,0,0,.35) 40%,#000 50%,rgba(0,0,0,.35) 60%) 100% 0/300% 100%;mask:linear-gradient(90deg,rgba(0,0,0,.35) 40%,#000 50%,rgba(0,0,0,.35) 60%) 100% 0/300% 100%;animation:recorrido 3.2s linear infinite}
@keyframes recorrido{to{-webkit-mask-position:0 0;mask-position:0 0}}

/* Tables, details and the archive */
.figure{margin:40px 0}
.figure img{width:100%;display:block}
.table{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:15px;background:var(--papel-claro)}
td,th{text-align:left;border-bottom:1px solid var(--linea);padding:12px 14px;vertical-align:top}
th{background:var(--papel-oscuro);font-weight:700}
details{border-bottom:1px solid var(--linea);padding:12px 0}
summary{cursor:pointer;font-weight:700}
blockquote{margin:24px 0;padding:6px 0 6px 22px;border-left:4px solid var(--madera)}
.archive{margin-top:var(--ritmo);padding:36px 0 0;border-top:3px double var(--linea)}
.archive h2{margin-top:0}

/* Footer: charred wood under the slatted front */
footer{position:relative;padding:76px 6vw 40px;background:var(--fondo-noche);color:var(--crema-suave);font-size:15px}
footer::before{content:"";position:absolute;inset:0 0 auto;height:36px;background:var(--frente);background-blend-mode:multiply,multiply,normal;box-shadow:inset 0 -3px 0 var(--junta)}
footer a{color:var(--led)}

@media(max-width:1100px){#resumen .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .hero .title{padding:0 0 32px}
  .hero h1{font-size:clamp(56px,14vw,130px)}
  .hero .obra img{width:min(80vw,560px)}
}
@media(max-width:760px){#project-viewer{width:100vw;height:1120px;margin-inline:calc(50% - 50vw);padding:8px;border-radius:0}#viewer-presets{gap:14px}}
@media(max-width:700px){
  nav{padding:16px 5vw;gap:6px 18px}
  nav:has(.logo){display:grid;grid-template-columns:auto auto auto;justify-content:start}
  nav .logo{grid-row:span 2;width:40px;height:40px;margin:0 4px 0 0}
  .hero{padding:104px 6vw 0}
  .hero h1{font-size:clamp(56px,16.5vw,120px);margin-top:.45em}
  .hero .obra img{width:min(86vw,420px)}
  .hero::after{height:32px}
  .grid,#resumen .grid{grid-template-columns:1fr}
  .noche h2{min-height:0;padding:150px 0 0;background-position:left top;background-size:130px}
  main{padding-top:24px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button{transition:none}
  .noche .grid article::before{animation:none;-webkit-mask:none;mask:none}
  .hero .obra,.hero .obra::before{animation:none}
}