/* Sobremesa — web de ejemplo (restaurante). Diseño: Hybrid Labs. Hoja única. */
/* Hoja del diseño de Claude Design, sin cambios. Delante, las tipografías autoalojadas (OFL);
   al final, lo que la página publicada necesita además. */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/bodoni-moda-latin-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/bodoni-moda-latin-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/hanken-grotesk-latin-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#F4ECDD;--card:#FCF7EE;--ink:#26130F;--wine:#4B1512;--ember:#E4572E;--saffron:#EEB04C;--olive:#6F7A3A;--mut:#6A534B;--line:rgba(38,19,15,.18);--serif:"Bodoni Moda","Didot",Georgia,serif;--sans:"Hanken Grotesk",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ember)}
a:focus-visible,button:focus-visible,.input:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
h1,h2,h3,p{margin:0}
.sm{overflow:clip}
.shell{max-width:1240px;margin:0 auto;padding:0 32px}
.lab{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#A8371C}
.lab-saf{color:var(--saffron)}
.it{font-style:italic;color:#B23A1D}
.it-saf{font-style:italic;color:var(--saffron)}

/* aviso de demostración */
.demo-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;padding:6px 32px;background:var(--ink);color:#F0E4D2;font-size:13px}
.demo-t{display:flex;align-items:center;gap:9px;letter-spacing:.02em}
.demo-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--saffron)}
.demo-a{color:#fff;font-weight:600;white-space:nowrap}
.demo-a:hover{color:var(--saffron)}

/* navegación */
.nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;height:88px;border-bottom:1px solid var(--line)}
.nav-links{display:flex;gap:32px;font-size:15px;font-weight:500;letter-spacing:.02em}
.brand{font-family:var(--serif);font-style:italic;font-weight:500;font-size:34px;letter-spacing:-.01em;line-height:1}
.nav-right{display:flex;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:2px;border:0;font-family:inherit;font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:transform .25s var(--ease),background .2s,color .2s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn-sm{height:44px;padding:0 20px;font-size:13px}
.btn-line{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--bg)}
.btn-wine{background:var(--wine);color:#FBEFDC;box-shadow:0 22px 34px -18px rgba(75,21,18,.8)}
.btn-wine:hover{background:#B23A1D;color:#fff}
.btn-full{width:100%}
.link{font-weight:600;border-bottom:1.5px solid var(--ink);padding-bottom:3px}
.link:hover{border-bottom-color:var(--ember)}

/* héroe */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-top:44px;padding-bottom:64px}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(50px,7.3vw,104px);line-height:.94;letter-spacing:-.03em;margin:24px 0 28px;text-wrap:balance}
.lead{font-size:19.5px;line-height:1.5;color:var(--mut);max-width:28em;text-wrap:pretty}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:36px}
.scene{position:relative;aspect-ratio:1/1.06;width:100%;max-width:520px;margin-left:auto}
.arch{position:absolute;right:5%;top:0;width:70%;height:97%;border-radius:999px 999px 0 0;background:radial-gradient(circle at 50% 82%,#FFD896 0,#F4A04A 16%,#E4572E 34%,#9A2C1A 58%,#4B1512 86%);box-shadow:0 50px 70px -40px rgba(75,21,18,.8)}
.arch-in{position:absolute;inset:14px;border-radius:999px 999px 0 0;border:1px solid rgba(255,226,180,.4)}
.plate{position:absolute;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#FFFDF8 0 55%,#E9DDC8 56% 58%,#FFFDF8 59%);box-shadow:0 34px 44px -20px rgba(38,19,15,.6),0 0 0 1px rgba(38,19,15,.06)}
.pl-a{width:47%;left:0;bottom:3%}
.pl-b{width:30%;right:-4%;top:25%}
.food{position:absolute;inset:24%;border-radius:50%}
.f-a{background:radial-gradient(circle at 34% 38%,#C8432A 0 21%,rgba(0,0,0,0) 22%),radial-gradient(circle at 66% 52%,#6F7A3A 0 19%,rgba(0,0,0,0) 20%),radial-gradient(circle at 44% 70%,#EEB04C 0 15%,rgba(0,0,0,0) 16%),radial-gradient(circle,#F2E0BC 0 62%,rgba(0,0,0,0) 63%)}
.f-b{background:radial-gradient(circle at 50% 50%,#3A1A14 0 26%,rgba(0,0,0,0) 27%),radial-gradient(circle,#EEB04C 0 58%,rgba(0,0,0,0) 59%)}
.bowl{position:absolute;width:21%;aspect-ratio:1;left:13%;top:15%;border-radius:50%;background:radial-gradient(circle,#6F7A3A 0 50%,#26130F 51% 62%,#3A1E18 63%);box-shadow:0 24px 30px -14px rgba(38,19,15,.6)}
.ticket{position:absolute;right:-5%;bottom:9%;display:grid;gap:3px;padding:16px 20px 17px;background:var(--card);border-left:3px solid var(--ember);box-shadow:0 30px 44px -22px rgba(38,19,15,.6)}
.ticket-k{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#A8371C}
.ticket-t{font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.1}
.ticket-d{font-size:14px;color:var(--mut)}

/* franjas */
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.strip-i{padding:22px 24px 24px 0;font-family:var(--serif);font-size:23px;line-height:1.2}
.strip-k{display:block;margin-bottom:6px;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#A8371C}

/* secciones */
.sec{padding-top:120px;padding-bottom:120px}
.sec-head{display:grid;gap:14px;margin-bottom:60px;text-align:center;justify-items:center}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.2vw,74px);line-height:.98;letter-spacing:-.028em;text-wrap:balance}
.menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.course-t{padding-bottom:14px;margin-bottom:6px;border-bottom:1.5px solid var(--ink);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.dish{display:grid;gap:3px;padding:18px 0;border-bottom:1px solid var(--line)}
.dish-n{font-family:var(--serif);font-size:25px;line-height:1.12;letter-spacing:-.01em}
.dish-d{font-size:15.5px;color:var(--mut)}
.note{margin-top:30px;text-align:center;font-size:14px;color:var(--mut)}

/* la casa */
.casa{position:relative;padding:130px 0;background:radial-gradient(900px 520px at 50% 118%,rgba(228,87,46,.85),rgba(228,87,46,0) 70%),var(--wine);color:#F0DCC6;text-align:center}
.casa-q{max-width:14em;margin:20px auto 76px;font-family:var(--serif);font-size:clamp(44px,6.6vw,96px);line-height:.98;letter-spacing:-.03em;color:#FBEFDC;text-wrap:balance}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:left;border-top:1px solid rgba(251,239,220,.28)}
.fact{padding:26px 28px 0 0}
.fact-n{display:block;font-family:var(--serif);font-style:italic;font-size:24px;color:var(--saffron);margin-bottom:10px}
.fact-t{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.1;color:#FBEFDC;margin-bottom:6px}
.fact-d{font-size:16.5px}

/* reservas */
.book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.book .h2{margin-top:14px}
.hours{margin-top:40px;border-top:1.5px solid var(--ink)}
.hour{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px}
.hour span:first-child{font-weight:600}
.form{padding:38px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 50px 70px -46px rgba(38,19,15,.55)}
.field{display:block;margin-bottom:16px}
.field-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field-l{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.input{width:100%;height:54px;padding:0 14px;border-radius:2px;border:1.5px solid rgba(38,19,15,.34);background:#fff;color:var(--ink);font:inherit;font-size:16px}
.form-n{margin-top:14px;font-size:13.5px;color:var(--mut)}

/* pie */
.foot{padding-bottom:40px}
.credit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:34px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.credit-t{font-family:var(--serif);font-size:clamp(23px,2.5vw,32px);line-height:1.15;max-width:23em;margin-top:8px;text-wrap:balance}
.foot-l{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:26px;font-size:13.5px;color:var(--mut)}

/* movimiento */
@media (prefers-reduced-motion:no-preference){
  @keyframes sm-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes sm-ember{from{filter:brightness(.94)}to{filter:brightness(1.08)}}
  .hero-copy{animation:sm-rise .9s var(--ease) both}
  .scene{animation:sm-rise 1s .12s var(--ease) both}
  .arch{animation:sm-ember 3.2s ease-in-out infinite alternate}
}

/* tableta y móvil */
@media (max-width:960px){
  .nav{grid-template-columns:auto minmax(0,1fr);height:76px}
  .nav-links{display:none}
  .hero{grid-template-columns:minmax(0,1fr);gap:56px;padding-top:34px}
  .scene{max-width:440px;margin:0 auto}
  .sec{padding-top:88px;padding-bottom:88px}
  .menu{grid-template-columns:minmax(0,1fr);gap:44px}
  .casa{padding:96px 0}
  .facts{grid-template-columns:minmax(0,1fr)}
  .fact{padding:22px 0;border-bottom:1px solid rgba(251,239,220,.28)}
  .book{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media (max-width:560px){
  body{font-size:16px}
  .shell{padding:0 20px}
  .demo-bar{padding:6px 20px;font-size:12.5px}
  .demo-more{display:none}
  .nav{height:68px}
  .brand{font-size:29px}
  .btn-sm{padding:0 16px;font-size:12.5px}
  .hero{padding-top:26px;padding-bottom:48px}
  .h1{margin:18px 0 22px}
  .lead{font-size:18px}
  .btn-wine{width:100%}
  .cta-row{margin-top:28px}
  .scene{width:90%}
  .ticket{right:-7%;padding:13px 16px}
  .ticket-t{font-size:23px}
  .strip{grid-template-columns:minmax(0,1fr)}
  .strip-i{padding:16px 0;border-bottom:1px solid var(--line);font-size:21px}
  .sec-head{margin-bottom:40px}
  .casa-q{margin-bottom:48px}
  .form{padding:26px 22px}
}

/* implementación — objetivos táctiles de 44 px: se amplía la zona pulsable, no la caja */
.demo-a,.nav-links a,.link,.btn-sm{position:relative}
.demo-a::after,.nav-links a::after,.link::after,.btn-sm::after{content:"";position:absolute;inset:-12px -6px}
.btn-sm::after{inset:-3px 0}