/* Asador Donostiarra · demo v1.1 «Tres actos» (conv. 964) · base nogal + amarillo del rótulo */
:root{
 --nogal:#1b140f; --nogal2:#231a13; --madera:#2c2118; --negro:#0e0b08;
 --crema:#f1e7d2; --crema2:rgba(241,231,210,.72); --crema3:rgba(241,231,210,.45);
 --amarillo:#e8c547; --linea:rgba(241,231,210,.14); --hueso:#ece2cf; --tinta:#1b140f;
 --serif:'Libre Bodoni',Georgia,serif; --sans:Inter,system-ui,sans-serif;
 --g:clamp(16px,3.2vw,48px); --ease:cubic-bezier(.2,.65,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--nogal);color:var(--crema);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.k{font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.am{color:var(--amarillo)}

/* cabecera */
.top{position:fixed;inset:0 0 auto;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:16px var(--g);transition:background .5s,padding .5s}
.top.solida{background:rgba(27,20,15,.94);backdrop-filter:blur(8px);padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--linea)}
.logo{display:block;width:132px;height:40px;background:var(--amarillo);-webkit-mask:url(img/2026-10-23_asador_logo-crema.svg) left center/contain no-repeat;mask:url(img/2026-10-23_asador_logo-crema.svg) left center/contain no-repeat}
.top nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.top nav a{text-decoration:none;font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--crema);background:linear-gradient(var(--amarillo),var(--amarillo)) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .5s var(--ease),color .3s}
.top nav a:hover{background-size:100% 1px;color:var(--amarillo)}
.top nav .res{background:var(--amarillo);color:var(--tinta);padding:10px 15px}
.top nav .res:hover{background:var(--crema);color:var(--tinta)}
.lang{opacity:.55}

/* 1 · hero: planos de oficio */
.film{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000}
.plano{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.plano.on{opacity:1}
.plano img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);filter:saturate(.85) contrast(1.06) sepia(.14) brightness(.9)}
.plano.on img{transform:scale(1);transition:transform 9s var(--ease)}
.film .banda{position:absolute;left:0;right:0;height:6vh;background:#000;z-index:3}
.film .banda.a{top:0}.film .banda.b{bottom:0}
.film .sombra{position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);z-index:2}
.film .pie{position:absolute;left:var(--g);right:var(--g);bottom:calc(6vh + 24px);z-index:4;display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px}
.film .cap{font:italic 400 clamp(34px,4.4vw,68px)/1 var(--serif)}
.film .cap span{display:inline-block;transition:opacity .7s,transform .7s}
.film .cap span.out{opacity:0;transform:translateY(12px)}
.film .meta{text-align:right;color:var(--crema2)}
.film .barra{display:flex;gap:6px;justify-content:flex-end;margin-top:10px}
.film .barra i{display:block;width:30px;height:2px;background:rgba(241,231,210,.25);position:relative;overflow:hidden}
.film .barra i b{position:absolute;inset:0;background:var(--amarillo);transform:scaleX(0);transform-origin:left}
.film .barra i.on b{transform:scaleX(1);transition:transform 6s linear}
.film .barra i.ok b{transform:scaleX(1)}

/* 2 · la casa: 1976 + la puerta */
.casa{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(70px,9vw,130px) var(--g);background:var(--nogal)}
.casa .ano{font:400 clamp(120px,21vw,330px)/.82 var(--serif);color:var(--amarillo);letter-spacing:-.04em;font-variant-numeric:lining-nums}
.casa .txt{font:400 clamp(24px,2.6vw,38px)/1.2 var(--serif);max-width:20ch;margin-top:26px}
.casa .txt i{color:var(--amarillo)}
.casa .marco{background:var(--hueso);padding:clamp(10px,1.2vw,16px);box-shadow:0 30px 60px rgba(0,0,0,.4);transform:rotate(-1.2deg)}
.casa .marco img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.9) sepia(.1)}
.casa .marco figcaption{color:var(--tinta);font:italic 400 15px var(--serif);padding:10px 2px 0}
.cifras{display:flex;gap:clamp(24px,4vw,60px);margin-top:clamp(30px,4vw,50px);flex-wrap:wrap}
.cifras b{display:block;font:400 clamp(40px,4vw,60px)/1 var(--serif);color:var(--crema)}
.cifras span{display:block;color:var(--crema3);font-size:13px;margin-top:6px;max-width:16ch}

/* 3 · los tres actos: cada uno tapa al anterior */
.actos{position:relative}
.acto{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.acto .foto{position:relative;overflow:hidden}
.acto .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.05) sepia(.1) brightness(.92)}
.acto .lado{position:relative;padding:clamp(90px,10vh,130px) clamp(20px,4vw,64px) clamp(36px,6vh,64px);display:flex;flex-direction:column;justify-content:space-between}
.acto:nth-child(1) .lado{background:var(--nogal2)}
.acto:nth-child(2){grid-template-columns:1fr 1fr}.acto:nth-child(2) .lado{background:var(--madera);order:-1}
.acto:nth-child(3) .lado{background:var(--negro)}
.acto .num{font:400 clamp(110px,15vw,240px)/.8 var(--serif);color:var(--amarillo);letter-spacing:-.02em}
.acto h2{font:400 clamp(44px,5.4vw,88px)/.95 var(--serif);margin-top:10px}
.acto h2 i{font-style:italic}
.acto .lema{color:var(--crema2);max-width:36ch;margin-top:16px;font-size:clamp(15px,1.15vw,17px)}
.acto ul{list-style:none;margin-top:24px;border-top:1px solid var(--linea)}
.acto li{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--linea)}
.acto li span{font:400 clamp(18px,1.5vw,23px)/1.25 var(--serif)}
.acto li em{font-style:normal;color:var(--amarillo);font-variant-numeric:tabular-nums;font-size:15px;white-space:nowrap}
.acto .k.sub{color:var(--crema3)}

/* 4 · la carta: pizarra */
.carta{background:var(--nogal);padding:clamp(70px,9vw,130px) var(--g);position:relative}
.carta .cab{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.titulo{font:400 clamp(54px,7.5vw,120px)/.92 var(--serif);letter-spacing:-.02em}
.titulo i{font-style:italic;color:var(--amarillo)}
.pest{display:flex;gap:clamp(14px,2vw,30px);flex-wrap:wrap;border-bottom:1px solid var(--linea)}
.pest button{background:none;border:0;padding:0 0 14px;font:400 clamp(19px,1.8vw,26px) var(--serif);color:var(--crema3);cursor:pointer;position:relative;transition:color .4s}
.pest button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--amarillo);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.pest button[aria-selected=true]{color:var(--crema)}
.pest button[aria-selected=true]::after{transform:scaleX(1)}
.racion{display:inline-flex;border:1px solid var(--linea);border-radius:999px;padding:3px;gap:2px}
.racion button{background:none;border:0;border-radius:999px;padding:8px 15px;font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--crema2);cursor:pointer}
.racion button[aria-pressed=true]{background:var(--amarillo);color:var(--tinta)}
.racion[hidden]{display:none}
.pizarra{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,80px);margin-top:8px;min-height:380px}
.pizarra li{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--linea);opacity:0;transform:translateY(8px);animation:sube .6s var(--ease) forwards;cursor:default}
.pizarra li span{font:400 clamp(21px,2vw,30px)/1.15 var(--serif);transition:color .3s,transform .5s var(--ease)}
.pizarra li em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--amarillo);font-size:16px;white-space:nowrap}
.pizarra li:hover span{transform:translateX(8px)}
.pizarra li.mas span{font:italic 400 18px var(--serif);color:var(--crema2)}
@keyframes sube{to{opacity:1;transform:none}}
.flota{position:absolute;left:0;top:0;width:min(300px,24vw);aspect-ratio:4/5;pointer-events:none;z-index:5;opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-2deg);transition:opacity .35s,transform .45s var(--ease);box-shadow:0 30px 60px rgba(0,0,0,.5);background:var(--hueso);padding:8px}
.flota.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
.flota img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) sepia(.08)}
.carta .pie-c{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;color:var(--crema3);font-size:13px}
.flecha{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--amarillo)}
.flecha::after{content:"→";font-size:15px;transition:transform .5s var(--ease)}
.flecha:hover::after{transform:translateX(6px)}

/* 5 · menús: tres iguales */
.menus{background:var(--madera);padding:clamp(70px,9vw,130px) var(--g)}
.menus .cab{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.menus .cab p{max-width:38ch;color:var(--crema2)}
.menus .tres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(30px,4vw,50px)}
.menu{background:var(--nogal);display:flex;flex-direction:column}
.menu .ph{aspect-ratio:4/3;overflow:hidden}
.menu .ph img{width:100%;height:100%;object-fit:cover;transition:transform 2.5s var(--ease);filter:saturate(.88) sepia(.08)}
.menu:hover .ph img{transform:scale(1.05)}
.menu .in{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.menu .p{font:400 clamp(56px,5.5vw,88px)/1 var(--serif);color:var(--amarillo);margin:10px 0 4px}
.menu .p small{font:400 14px var(--sans);color:var(--crema2);margin-left:6px}
.menu p.d{color:var(--crema2);font-size:14px;flex:1}
.menu .flecha{margin-top:18px}
.menus .ej{margin-top:24px;color:var(--crema2);font-size:14px;max-width:90ch}
.menus .ej b{color:var(--crema);font-weight:500}

/* 6 · la bodega: el muro de botellas */
.bodega{position:relative;background:var(--negro);overflow:hidden}
.bodega .muro{position:absolute;inset:0}
.bodega .muro picture{display:block;height:100%}.bodega .muro img{width:100%;height:118%;object-fit:cover;transform:translateY(var(--y,0px));filter:saturate(.9) brightness(.62)}
.bodega .velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,11,8,.82) 0%,rgba(14,11,8,.55) 45%,rgba(14,11,8,.85) 100%)}
.bodega .in{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,100px);padding:clamp(70px,8vw,120px) var(--g) clamp(60px,7vw,100px);align-items:start}
.bodega .titulo{font-size:clamp(72px,11vw,180px)}
.bodega .intro{max-width:40ch;color:var(--crema2);margin-top:20px;font-size:clamp(15px,1.2vw,18px)}
.fam{list-style:none;border-top:1px solid var(--linea)}
.fam li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--linea)}
.fam li span{font:400 clamp(24px,2.5vw,38px)/1.05 var(--serif);transition:transform .6s var(--ease),color .4s}
.fam li small{color:var(--crema3);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:right}
.fam li:hover span{transform:translateX(10px);color:var(--amarillo)}
.bodega .notas{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,36px);padding:0 var(--g) clamp(70px,8vw,110px)}
.bodega .notas div{border-top:2px solid var(--amarillo);padding-top:16px}
.bodega .notas b{display:block;font:400 clamp(22px,2vw,30px)/1.15 var(--serif);margin-bottom:8px}
.bodega .notas p{color:var(--crema2);font-size:14px;max-width:34ch}

/* 7 · salones: paneles que se abren (v0.3) */
.salones{background:var(--nogal);padding:clamp(70px,9vw,130px) var(--g)}
.salones .cab{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.salones .cab p{max-width:40ch;color:var(--crema2)}
.paneles{display:flex;gap:8px;height:min(76vh,680px)}
.panel{position:relative;flex:1;overflow:hidden;cursor:pointer;transition:flex 1s var(--ease);min-width:0}
.panel.act{flex:4.2}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) sepia(.1) brightness(.78);transition:transform 1.6s var(--ease),filter 1s}
.panel.act img{filter:saturate(.95) sepia(.06) brightness(.9)}
.panel .v{position:absolute;left:16px;bottom:18px;writing-mode:vertical-rl;transform:rotate(180deg);font:400 clamp(24px,2.2vw,34px) var(--serif);transition:opacity .4s}
.panel .v small{font:500 11px var(--sans);letter-spacing:.16em;margin-top:12px;color:var(--amarillo)}
.panel .info{position:absolute;left:0;right:0;bottom:0;padding:28px;background:linear-gradient(to top,rgba(14,11,8,.85),transparent);opacity:0;transform:translateY(16px);transition:opacity .6s .2s,transform .6s .2s}
.panel.act .info{opacity:1;transform:none}
.panel.act .v{opacity:0}
.panel .info h3{font:400 clamp(38px,4vw,62px)/1 var(--serif)}
.panel .info h3 small{font:500 12px var(--sans);letter-spacing:.16em;color:var(--amarillo);margin-left:12px;vertical-align:middle}
.panel .info p{color:var(--crema2);max-width:44ch;margin-top:10px;font-size:14px}

/* 8 · reservar */
.reservar{background:var(--hueso);color:var(--tinta);padding:clamp(70px,9vw,130px) var(--g)}
.reservar .caja{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,100px);align-items:start}
.reservar .titulo i{color:var(--tinta)}
.reservar .sub{margin-top:18px;max-width:36ch;color:#5f554a}
.reservar .tel{margin-top:26px;color:#5f554a;font-size:14px}
.campo{border-top:1px solid rgba(27,20,15,.16);padding:18px 0}
.campo .k{color:#7c7266;margin-bottom:12px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{background:none;border:1px solid rgba(27,20,15,.25);color:var(--tinta);border-radius:999px;padding:10px 16px;font:400 16px var(--serif);cursor:pointer;transition:background .3s,color .3s}
.chips button:hover{border-color:var(--tinta)}
.chips button[aria-pressed=true]{background:var(--tinta);color:var(--amarillo);border-color:var(--tinta)}
.fecha{background:none;border:0;border-bottom:1px solid rgba(27,20,15,.3);color:var(--tinta);font:400 22px var(--serif);padding:6px 0;width:100%;max-width:280px}
.resumen{font:italic 400 clamp(22px,2.2vw,30px)/1.3 var(--serif);margin-top:20px;min-height:1.3em}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--tinta);color:var(--amarillo);text-decoration:none;padding:17px 26px;font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-top:22px;transition:background .3s}
.btn:hover{background:#000}

/* 9 · cierre: un solo bloque */
.cierre{background:var(--negro);padding:clamp(70px,9vw,120px) var(--g) 28px}
.cierre .arriba{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.cierre .cita{font:italic 400 clamp(18px,1.6vw,23px)/1.4 var(--serif);max-width:34ch;color:var(--crema2)}
.cierre .cita small{display:block;font:500 11px var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--crema3);margin-top:10px}
.cierre .rotulo{margin:clamp(40px,6vw,80px) 0;transform:translateY(40px);opacity:0;transition:transform 1.6s var(--ease),opacity 1.6s}
.cierre .rotulo.v{transform:none;opacity:1}
.cierre .rotulo img{width:100%;height:auto}
.cierre .datos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--linea);padding-top:26px;font-size:14px;color:var(--crema2)}
.cierre .datos .k{color:var(--crema3);display:block;margin-bottom:10px}
.cierre .datos a{text-decoration:none}
.cierre .datos a:hover{color:var(--amarillo)}
.cierre .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;font-size:11px;color:var(--crema3)}

/* entradas */
.entra{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.entra.v{opacity:1;transform:none}

/* página carta */
.pagina-carta{padding:140px var(--g) 80px;background:var(--nogal)}
.pagina-carta .indice{position:sticky;top:60px;z-index:5;background:var(--nogal);display:flex;gap:22px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--linea);margin:30px 0 10px}
.pagina-carta .indice a{text-decoration:none;font:400 19px var(--serif);color:var(--crema3)}
.pagina-carta .indice a:hover{color:var(--amarillo)}
.familia{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,5vw,80px);padding:48px 0;border-bottom:1px solid var(--linea);scroll-margin-top:130px}
.familia h2{font:400 clamp(32px,3.6vw,54px)/1 var(--serif)}
.familia .cols{display:grid;grid-template-columns:1fr 74px 74px;gap:0 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--crema3);padding-bottom:8px;border-bottom:1px solid var(--linea)}
.familia ul{list-style:none}
.familia li{display:grid;grid-template-columns:1fr 74px 74px;gap:18px;padding:13px 0;border-bottom:1px solid var(--linea);align-items:baseline}
.familia li span{font:400 19px/1.3 var(--serif)}
.familia li em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--amarillo);font-size:14px;text-align:right}

@media (max-width:900px){
 .top nav a:not(.res){display:none}
 .casa,.bodega .in,.reservar .caja,.familia{grid-template-columns:1fr}
 .casa .marco{max-width:420px}
 .acto{position:relative;height:auto;min-height:0;grid-template-columns:1fr}
 .acto .foto{aspect-ratio:4/3}.acto:nth-child(2){grid-template-columns:1fr}.acto:nth-child(2) .lado{order:0}
 .acto .lado{padding:36px var(--g) 44px}
 .pizarra{grid-template-columns:1fr}
 .flota{display:none}
 .menus .tres,.bodega .notas,.cierre .datos{grid-template-columns:1fr}
 .paneles{flex-direction:column;height:auto}
 .panel{flex:none;height:120px}.panel.act{height:420px}
 .panel .v{writing-mode:horizontal-tb;transform:none;top:auto;bottom:16px}
 .film .banda{height:3.5vh}.film .pie{bottom:calc(3.5vh + 18px);grid-template-columns:1fr}.film .meta{text-align:left}.film .barra{justify-content:flex-start}
 .familia .cols,.familia li{grid-template-columns:1fr 58px 58px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.entra{opacity:1;transform:none}}