:root{--font-display:"Newsreader",Georgia,"Times New Roman",serif;--font-text:"Barlow",Arial,Helvetica,sans-serif;--font-hand:"Caveat","Segoe Print",cursive;--wine:#7e2220;--clay:#bf654c;--maize:#f3c763;--cream:#f2eadc;--paper:#f8f3e9;--brown:#241713;--muted:#75645b;--line:#cfc3b1;--green:#496646}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--paper);color:var(--brown);font-family:var(--font-text);line-height:1.55}a{color:inherit}button,input,select{font:inherit}:focus-visible{outline:3px solid var(--maize);outline-offset:3px}.skip{position:fixed;left:10px;top:8px;z-index:50;background:white;padding:10px;transform:translateY(-150%)}.skip:focus{transform:none}
.topbar{height:82px;padding:0 max(25px,calc((100vw - 1360px)/2));display:flex;align-items:center;position:absolute;top:0;left:0;right:0;z-index:10;color:white;border-bottom:1px solid #ffffff3a}.wordmark{font-family:var(--font-display);text-transform:uppercase;line-height:.8;text-decoration:none;letter-spacing:.04em}.wordmark span,.wordmark b{display:block}.wordmark span{font-size:.7rem;letter-spacing:.3em}.wordmark b{font-size:1.24rem}.topbar nav{display:flex;gap:34px;margin-left:auto;margin-right:48px}.topbar nav a{text-decoration:none;font-size:.76rem;text-transform:uppercase;letter-spacing:.09em}.reserve-top{border:1px solid #ffffff9c;border-radius:999px;padding:11px 18px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:700}.nav-trigger{display:none;background:none;color:white;border:0;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}.nav-trigger i{display:inline-block;width:20px;border-top:1px solid;margin-left:8px}
.hero{height:min(900px,100vh);min-height:700px;position:relative;color:white;overflow:hidden}.hero>img{width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#160d09c9 0%,#160d0960 50%,#160d0925),linear-gradient(0deg,#160d0990,transparent 45%)}.hero-copy{position:absolute;left:max(25px,calc((100vw - 1200px)/2));bottom:115px;max-width:930px}.kicker,.section-tag{text-transform:uppercase;letter-spacing:.17em;font-size:.68rem;font-weight:800}.hero h1,.manifesto h2,.menu-heading h2,.experience h2,.reservation h2{font-family:var(--font-display);font-weight:400;line-height:.92;letter-spacing:-.055em}.hero h1{font-size:clamp(4.6rem,9vw,9rem);margin:16px 0 25px}.hero h1 em{color:var(--maize);font-weight:400}.hero-copy>p:last-of-type{font-size:1.02rem;max-width:520px}.hero-copy>a{display:inline-flex;align-items:center;gap:25px;margin-top:14px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;font-size:.72rem;font-weight:700}.hero-copy>a span{border:1px solid #ffffff80;width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.today{position:absolute;right:max(25px,calc((100vw - 1240px)/2));top:135px;display:flex;align-items:center;gap:15px}.today>span{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--maize);color:var(--brown);font-weight:900;font-size:.7rem;transform:rotate(8deg)}.today p{font-size:.72rem;margin:0}.hero-caption{position:absolute;right:35px;bottom:25px;font-size:.64rem;text-transform:uppercase;letter-spacing:.11em}.ticker{overflow:hidden;background:var(--maize);border-bottom:1px solid var(--brown);height:56px;display:flex;align-items:center}.ticker div{white-space:nowrap;font-family:var(--font-text);font-size:.88rem;letter-spacing:.08em;animation:marquee 24s linear infinite}.ticker i{margin:0 22px;color:var(--wine)}@keyframes marquee{to{transform:translateX(-50%)}}
.manifesto{width:min(1200px,calc(100% - 48px));margin:auto;padding:135px 0;display:grid;grid-template-columns:.2fr 1fr .35fr;gap:65px}.big-number{font-family:var(--font-display);font-size:6rem;color:var(--clay);line-height:1}.manifesto-copy{max-width:750px}.manifesto h2{font-size:clamp(3.4rem,6vw,6.6rem);margin:18px 0 35px}.manifesto h2 em{color:var(--wine);font-weight:400}.manifesto-copy>p:not(.section-tag){font-family:var(--font-display);font-size:1.25rem;line-height:1.7;max-width:640px}.signoff{font-family:var(--font-hand);font-size:1.4rem;transform:rotate(-3deg);margin-top:35px;color:var(--wine)}.signoff small{font-family:var(--font-text);font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.ingredient-note{align-self:end;border-top:1px solid var(--line);padding-top:18px}.ingredient-note b{font-size:.67rem;text-transform:uppercase;letter-spacing:.11em}.ingredient-note p{font-family:var(--font-display);color:var(--muted);font-size:.88rem}
.menu-section{background:var(--cream);padding:110px max(25px,calc((100vw - 1200px)/2))}.menu-heading{display:grid;grid-template-columns:1fr .65fr;gap:80px;align-items:end}.menu-heading h2{font-size:clamp(4rem,7vw,7rem);margin:15px 0 0}.menu-heading>p{color:var(--muted);max-width:430px}.menu-tabs{display:flex;border-bottom:1px solid var(--line);margin-top:65px;overflow:auto}.menu-tabs button{border:0;background:none;padding:18px 30px 16px 0;margin-right:38px;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}.menu-tabs button.active{color:var(--wine);border-color:var(--wine);font-weight:800}.menu-list{counter-reset:dish}.dish{counter-increment:dish;display:grid;grid-template-columns:65px 1fr 120px 50px;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding:26px 0}.dish:before{content:counter(dish,decimal-leading-zero);font-family:var(--font-display);color:var(--clay)}.dish h3{font-family:var(--font-display);font-size:1.6rem;font-weight:400;margin:0 0 5px}.dish p{color:var(--muted);font-size:.8rem;margin:0;max-width:620px}.dish-badges{display:flex;gap:6px;margin-top:9px}.dish-badges span{font-size:.57rem;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:3px 7px}.dish-price{font-family:var(--font-display);font-size:1.25rem;text-align:right}.dish button{width:42px;height:42px;border-radius:50%;border:1px solid var(--brown);background:transparent;cursor:pointer;font-size:1.2rem}.dish button:hover{background:var(--wine);color:white;border-color:var(--wine)}.diet-note{font-size:.68rem;color:var(--muted);margin:25px 0 0}
.experience{display:grid;grid-template-columns:1.2fr .8fr;min-height:720px}.experience-photo{position:relative;overflow:hidden}.experience-photo img{width:100%;height:100%;object-fit:cover;object-position:80% center;transform:scale(1.25)}.experience-photo span{position:absolute;bottom:45px;left:45px;background:var(--maize);width:150px;height:150px;border-radius:50%;display:grid;place-items:center;text-align:center;font-family:var(--font-display);transform:rotate(-8deg)}.experience-copy{background:var(--wine);color:white;padding:110px max(45px,calc((100vw - 1200px)/2 - 80px)) 90px 75px}.experience h2{font-size:clamp(3.5rem,5vw,5.8rem);margin:20px 0 35px}.experience-copy>p:not(.section-tag){color:#ead0c7;max-width:500px}.experience dl{display:flex;gap:40px;margin:55px 0}.experience dt{font-family:var(--font-display);font-size:2.5rem}.experience dd{margin:0;color:#dbb3aa;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.experience a{display:inline-block;border-bottom:1px solid;padding-bottom:8px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}
.reservation{background:var(--brown);color:white;padding:120px max(25px,calc((100vw - 1200px)/2));display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;min-height:680px}.pale{color:#d3b7a4}.reservation h2{font-size:clamp(4rem,6vw,6.4rem);margin:20px 0 30px;color:var(--maize)}.reservation-copy>p:not(.section-tag){color:#bfaea3;max-width:500px}.reservation-rules{display:grid;gap:8px;margin-top:40px;color:#9d8b80;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}.reservation form{border-top:1px solid #ffffff30;padding-top:12px}.reservation label{display:block;color:#c8b8ae;font-size:.65rem;text-transform:uppercase;letter-spacing:.11em;margin-top:20px}.reservation input,.reservation select{display:block;width:100%;background:transparent;color:white;border:0;border-bottom:1px solid #ffffff35;border-radius:0;padding:13px 0;font-size:1rem;outline:0}.reservation select option{color:var(--brown)}.reservation input:focus,.reservation select:focus{border-color:var(--maize)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:35px}.occasion span{float:right;color:#7e6e65}.form-message{min-height:22px;color:#ff9d85;font-size:.72rem}.reservation form button{width:100%;background:var(--maize);color:var(--brown);border:0;padding:17px 22px;display:flex;justify-content:space-between;font-weight:900;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.reservation-success{display:none;place-content:center;border:1px solid #ffffff20;padding:45px}.reservation-success.active{display:grid}.reservation-success>span{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:var(--maize);color:var(--brown);font-size:1.4rem;margin-bottom:25px}.reservation-success h3{font-family:var(--font-display);font-weight:400;font-size:2.5rem}.reservation-success p{color:#bfaea3}.reservation-success button{justify-self:start;background:none;border:0;border-bottom:1px solid var(--maize);color:white;padding:8px 0;cursor:pointer}
footer{background:#170d09;color:#c7b8ae;padding:75px max(25px,calc((100vw - 1200px)/2)) 28px;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:50px;font-size:.76rem}.footer-logo{font-family:var(--font-display);text-transform:uppercase;color:white}.footer-logo span,.footer-logo b,.footer-logo small{display:block}.footer-logo span{font-size:.8rem;letter-spacing:.4em}.footer-logo b{font-size:2rem}.footer-logo small{font-family:var(--font-text);font-size:.5rem;letter-spacing:.26em;color:var(--maize)}footer strong{text-transform:uppercase;letter-spacing:.11em;font-size:.62rem;color:white}footer p{color:#8d7d73}footer small{color:#64544b}.footer-bottom{grid-column:1/-1;border-top:1px solid #ffffff14;padding-top:20px;display:flex;justify-content:space-between;font-size:.66rem}.footer-bottom a{text-decoration:none}
.dish-modal{width:min(960px,calc(100% - 30px));padding:0;border:0;background:var(--paper);color:var(--brown);box-shadow:0 40px 120px #0008}.dish-modal::backdrop{background:#1d0f0bc7;backdrop-filter:blur(4px)}.dish-modal[open]{display:grid;grid-template-columns:1fr 1fr}.modal-image{min-height:570px;position:relative;overflow:hidden}.modal-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.18)}.modal-image span{position:absolute;bottom:22px;left:22px;background:var(--maize);padding:8px 12px;text-transform:uppercase;letter-spacing:.1em;font-size:.6rem}.modal-copy{padding:65px 48px 40px}.modal-copy h2{font-family:var(--font-display);font-size:3.1rem;font-weight:400;line-height:1;margin:18px 0}.modal-copy>p:not(.section-tag){color:var(--muted)}.modal-copy dl{margin-top:35px}.modal-copy dl div{border-top:1px solid var(--line);padding:13px 0}.modal-copy dt{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.modal-copy dd{font-family:var(--font-display);margin:5px 0}.modal-price{display:flex;justify-content:space-between;align-items:end;margin-top:35px}.modal-price strong{font-family:var(--font-display);font-size:2rem;color:var(--wine)}.modal-price a{text-transform:uppercase;text-decoration:none;font-size:.62rem;letter-spacing:.07em;border-bottom:1px solid;padding-bottom:5px}.modal-close{position:absolute;right:15px;top:13px;z-index:2;width:39px;height:39px;border-radius:50%;border:0;background:white;font-size:1.5rem;cursor:pointer}
@media(max-width:900px){.topbar nav{gap:17px;margin-right:25px}.manifesto{grid-template-columns:.2fr 1fr}.ingredient-note{grid-column:2}.experience{grid-template-columns:1fr}.experience-photo{min-height:520px}.reservation{grid-template-columns:1fr;gap:50px}.reservation-copy{max-width:650px}footer{grid-template-columns:1fr 1fr}.footer-logo{grid-column:1/-1}}
@media(max-width:700px){.topbar{height:70px;padding:0 18px}.nav-trigger{display:block;margin-left:auto;margin-right:12px}.topbar nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--brown);padding:25px 20px;flex-direction:column}.topbar nav.open{display:flex}.reserve-top{padding:9px 12px}.hero{min-height:720px}.hero-copy{left:20px;right:20px;bottom:90px}.hero h1{font-size:4.5rem}.today{right:20px;top:105px}.hero-caption{display:none}.manifesto{padding:85px 0;grid-template-columns:1fr;gap:25px}.big-number{font-size:3rem}.ingredient-note{grid-column:auto}.menu-section{padding:80px 20px}.menu-heading{grid-template-columns:1fr;gap:20px}.menu-tabs{margin-top:38px}.menu-tabs button{margin-right:20px}.dish{grid-template-columns:34px 1fr auto}.dish-price{grid-column:3;grid-row:1}.dish button{grid-column:3;grid-row:1;margin-top:52px}.experience-copy{padding:75px 25px}.experience dl{gap:24px}.reservation{padding:80px 20px}.form-row{grid-template-columns:1fr;gap:0}footer{grid-template-columns:1fr;gap:28px}.footer-logo{grid-column:auto}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}.dish-modal[open]{grid-template-columns:1fr}.modal-image{min-height:250px}.modal-copy{padding:35px 25px}.modal-copy h2{font-size:2.3rem}}
@media(max-width:430px){.reserve-top{display:none}.hero h1{font-size:3.8rem}.hero-copy>p:last-of-type{font-size:.9rem}.today{top:90px}.manifesto h2,.menu-heading h2{font-size:3.5rem}.dish h3{font-size:1.3rem}.dish p{display:none}.experience-photo{min-height:430px}.experience-photo span{width:120px;height:120px;left:20px;bottom:20px}.experience h2,.reservation h2{font-size:3.5rem}.experience dl{justify-content:space-between}.modal-price{display:block}.modal-price a{display:inline-block;margin-top:22px}}
.experience-photo img{object-position:center;transform:scale(1.02)}
.modal-image img{object-position:center;transform:none}
@media(max-width:430px){.modal-price strong{display:block}.modal-price a{display:block;width:max-content;max-width:100%;line-height:1.45}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Tipografía Kobaltica · 22-09-2026 — Newsreader óptica variable (titulares y carta) + Barlow (lectura) + Caveat (firma). */
body{font-size:1.0625rem}
.hero h1,.manifesto h2,.menu-heading h2,.experience h2,.reservation h2{letter-spacing:-.035em;line-height:.96}
.ticker div{font-size:.9rem;font-weight:800;letter-spacing:.12em}
.wordmark span{margin-bottom:3px}
.topbar nav a{font-size:.84rem}
.reserve-top,.nav-trigger{font-size:.78rem}
.kicker,.section-tag{font-size:.78rem;letter-spacing:.16em}
.hero-copy>p:last-of-type{font-size:1.1rem}
.hero-copy>a{font-size:.82rem}
.today p{font-size:.86rem}
.hero-caption{font-size:.74rem}
.manifesto-copy>p:not(.section-tag){font-size:1.3rem}
.signoff{font-size:1.9rem;font-weight:600}
.signoff small{font-size:.74rem}
.ingredient-note b{font-size:.76rem}
.ingredient-note p{font-size:.97rem}
.menu-heading>p{font-size:1.06rem}
.menu-tabs button{font-size:.82rem}
.dish p{font-size:.97rem;line-height:1.5}
.dish-badges span{font-size:.72rem}
.dish-price,.modal-price strong,.experience dt{font-variant-numeric:lining-nums tabular-nums}
.diet-note{font-size:.86rem}
.experience dd{font-size:.78rem}
.experience a{font-size:.8rem}
.reservation-rules{font-size:.78rem}
.reservation label{font-size:.76rem}
.form-message{font-size:.88rem}
footer{font-size:.92rem}
footer strong{font-size:.74rem}
.footer-bottom{font-size:.82rem}
.modal-image span,.modal-copy dt{font-size:.74rem}
.modal-price a{font-size:.78rem}
@media(max-width:430px){.hero-copy>p:last-of-type{font-size:1rem}}
footer small{color:#9a8a80}

/* 24-09-2026 · Portada: los textos tienen su propia columna sobre el café de la casa y la foto queda limpia.
   La barra de navegación del restaurante tiene fondo propio en lugar de ir encima de la imagen. */
.topbar{position:relative;background:#241713;border-bottom-color:#ffffff24}
.hero{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"copy photo" "today caption";background:#241713;color:white}
.hero>img{grid-area:photo;width:100%;height:auto;min-height:clamp(520px,62vh,640px);align-self:stretch;object-fit:cover;object-position:center 62%}
.hero-shade{display:none}
.hero-copy{grid-area:copy;position:static;inset:auto;align-self:center;max-width:none;padding:64px 56px 36px max(25px,calc((100vw - 1200px)/2))}
.hero h1{font-size:clamp(3.4rem,5vw,6rem)}
.today{grid-area:today;position:static;inset:auto;align-self:start;padding:0 56px 48px max(25px,calc((100vw - 1200px)/2))}
.hero-caption{grid-area:caption;position:static;inset:auto;display:block;margin:0;padding:16px max(25px,calc((100vw - 1360px)/2)) 20px 24px;text-align:right;color:#f2eadcc0}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;grid-template-areas:"photo" "caption" "copy" "today";min-height:0}
  .hero>img{min-height:0;aspect-ratio:4/3;align-self:auto}
  .hero-copy{padding:34px 22px 22px}
  .today{padding:0 22px 42px}
  .hero-caption{display:block;padding:12px 22px 0;text-align:left}
}
/* Modo noche: la portada usa el fondo oscuro de Kobaltica; los enlaces de escritorio no llevan la caja del menú móvil. */
html[data-theme="dark"] .topbar{background:var(--kb-bg);border-bottom-color:var(--kb-border)}
@media(min-width:701px){html[data-theme="dark"] .topbar nav{background:transparent;border:0}}

/* Interaction states · 28-09-2026: hover only with a mouse/trackpad, a short press on every device.
   Selections (checked, .active, .selected) keep their own look; disabled buttons never react.
   Colours derive from the brand variables, which the dark theme redefines, so both appearances stay legible. */
.reserve-top{transition:background-color .18s ease,color .18s ease,border-color .18s ease}
@media (hover:hover) and (pointer:fine){
  .reserve-top:hover{background:#fff;border-color:#fff;color:#241713}
  .menu-tabs button:not(.active):hover{color:var(--brown);border-bottom-color:color-mix(in srgb,var(--wine) 45%,transparent)}
  .reservation form button:hover{background:color-mix(in srgb,var(--maize) 80%,#000)}
  .reservation-success button:hover{color:var(--maize)}
  .modal-close:hover{background:var(--maize)}
}
.reserve-top:active,.menu-tabs button:active,.dish button:active,.reservation form button:active,.reservation-success button:active,.modal-close:active{scale:.97}