*{box-sizing:border-box}
html{background:#000000;color:#f5e6c3;color-scheme:dark}
body{margin:0;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
button,input{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{cursor:pointer}

/* ---------- Background layers: fire canvas, side grecas, vignette ---------- */
#fire,.vignette,.greca{position:fixed;pointer-events:none}
#fire,.vignette{inset:0;width:100%;height:100%}
#fire{background:radial-gradient(ellipse at 0% 100%,#8e0303 0%,transparent 46%),radial-gradient(ellipse at 100% 100%,#8e0303 0%,transparent 46%),linear-gradient(#000000 55%,#000000)}
.vignette{background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,.3),transparent 74%)}
/* Circular stepped grecas, cut by both edges (after the brand's cover art). Screen-blended so they glow with the fire. */
.greca{top:50%;width:min(80vh,780px);aspect-ratio:1;background:url(/assets/greca.svg) center/contain no-repeat;opacity:.2;mix-blend-mode:screen}
.greca-l{left:0;transform:translate(-56%,-50%);-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 82%);mask-image:linear-gradient(90deg,#000 40%,transparent 82%)}
.greca-r{right:0;transform:translate(56%,-50%);-webkit-mask-image:linear-gradient(270deg,#000 40%,transparent 82%);mask-image:linear-gradient(270deg,#000 40%,transparent 82%)}

/* ---------- Page (no z-index: keeps the logo's screen blend against the fire backdrop) ---------- */
.page{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:20px 48px 16px}

/* ---------- Official logo, preserving its proportions and transparency ---------- */
header{position:relative;display:flex;justify-content:center}
.brand{display:block;position:relative;width:min(262px,31vh);aspect-ratio:auto;overflow:visible}
.brand img{display:block;width:100%;height:auto;object-fit:contain}
#motion{position:absolute;right:0;top:10px;background:transparent;color:#f5e6c3;border:1px solid #bd9a55;border-radius:30px;font-size:11px;padding:11px 16px;min-height:44px}

/* ---------- Main ---------- */
main{text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;padding:8px 0 44px}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(70px,8.9vw,140px);font-weight:400;line-height:.94;letter-spacing:-.06em;margin:0 0 22px;text-shadow:0 2px 24px rgba(0,0,0,.55)}
h1 em{display:inline-block;color:#bd9a55;font-weight:400;background:linear-gradient(165deg,#f5e6c3 15%,#bd9a55 55%,#bd9a55 95%);background-clip:text;-webkit-text-fill-color:transparent;padding-right:.1em;text-shadow:none}
.tagline{font:clamp(25px,3vw,39px)/1.3 Georgia,serif;margin:0 0 14px;letter-spacing:-.02em;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.intro{font-size:15px;line-height:1.7;color:#f5e6c3;margin:0 0 32px}
form{width:min(100%,574px);margin:0 auto}
.signup{display:flex;padding:5px;border:1px solid #bd9a55;border-radius:9px;background:#000000e8;box-shadow:0 0 44px #bd9a550a}
input{min-width:0;flex:1;width:100%;color:#f5e6c3;background:transparent;border:0;padding:16px 18px;font-size:15px;outline-offset:-3px}
input::placeholder{color:#f5e6c3}
.signup button{display:flex;align-items:center;justify-content:center;gap:14px;white-space:nowrap;background:linear-gradient(130deg,#bd9a55,#bd9a55);color:#000000;padding:17px 21px;border:1px solid #f5e6c3;border-radius:5px;font-size:14px;font-weight:600}
.signup button:hover{background:#f5e6c3}
.signup button:disabled{opacity:.65;cursor:wait}
.fine{font-size:11px;color:#f5e6c3;line-height:1.7;margin:14px 0 0}
.text-button{font-size:11px;background:none;border:0;padding:4px;color:#bd9a55;text-decoration:underline;text-underline-offset:3px}
.trap{position:absolute;left:-9999px}
#status{font-size:13px;line-height:1.6;min-height:21px;color:#bd9a55;margin:10px 0 0}

/* ---------- Footer / social ---------- */
footer{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0 4px;text-shadow:0 1px 12px #000}
footer::before{content:"";position:absolute;z-index:-1;inset:-56px -48px -16px;background:linear-gradient(transparent,#000000e6 45%)}
.social{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 14px;border:1px solid #bd9a55;border-radius:30px;background:#000000d9;color:#f5e6c3;font-size:14px;letter-spacing:.02em;text-decoration:none;text-shadow:none;transition:border-color .2s,background .2s,color .2s}
.social a:hover{border-color:#bd9a55;background:#000000;color:#f5e6c3}
.social svg{width:22px;height:22px;flex:none;color:#bd9a55}
.footer-meta{display:flex;align-items:center;gap:14px;font-size:11px}
.place{letter-spacing:.19em;color:#f5e6c3}
.handle{color:#bd9a55;font-size:12px;letter-spacing:.04em}
.footer-meta .sep{width:3px;height:3px;border-radius:50%;background:#bd9a55}

/* ---------- Dialog / a11y ---------- */
dialog{background:#000000;color:#f5e6c3;border:1px solid #bd9a55;border-radius:12px;max-width:500px;width:calc(100% - 32px);padding:35px;line-height:1.7;font-size:14px}
dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}
dialog h2{font:32px Georgia,serif}
.close{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:none;color:#f5e6c3;font-size:26px}
:focus-visible{outline:2px solid #bd9a55;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Breakpoints ---------- */
@media(min-height:950px){main{padding-bottom:90px}.page{padding-top:35px}}
/* Short desktop viewports (e.g. 1267×713): compact rhythm so CTA and social row sit inside the first screen */
@media(min-width:601px) and (max-height:800px){
  .page{padding:12px 48px 12px}
  .brand{width:min(262px,22vh)}
  #motion{top:4px}
  main{padding:0 0 16px}
  h1{font-size:clamp(56px,13vh,112px);margin-bottom:12px}
  .tagline{font-size:clamp(22px,4.2vh,36px);margin-bottom:8px}
  .intro{margin-bottom:18px}
  .fine{margin-top:10px}
  #status{margin-top:6px}
  footer{gap:10px;padding:0}
  footer::before{inset:-44px -48px -12px}
}
@media(max-width:600px){
  .page{padding:12px 22px 14px}
  .brand{width:min(196px,26vh)}
  #motion{right:-5px;top:5px;font-size:10px;padding:8px 10px;border-color:#000000}
  main{padding:20px 0 24px}
  h1{font-size:clamp(52px,12.8vw,77px);letter-spacing:-.065em;margin-bottom:23px}
  .tagline{font-size:25px}
  .intro{font-size:13px;margin-bottom:26px}
  .signup{flex-direction:column;padding:5px}
  input{min-height:54px;text-align:center}
  .signup button{min-height:52px;font-size:14px}
  .fine{font-size:10px}
  footer{gap:12px}
  footer::before{left:-22px;right:-22px;inset-block:-48px -14px}
  .social{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%}
  .social a{flex-direction:column;justify-content:center;gap:6px;min-height:60px;padding:8px 4px;border-radius:12px;font-size:12px}
  .social svg{width:24px;height:24px}
  .place{font-size:9px}
  .handle{font-size:11px}
  .greca{top:56%;width:min(112vw,440px);opacity:.15}
  .greca-l{transform:translate(-64%,-50%)}
  .greca-r{transform:translate(64%,-50%)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.social a{transition:none}}
/* Preserve the full italic descender: the old tight line box clipped the g. */
h1 em{line-height:1.16;padding-bottom:.07em}
h1{margin-bottom:22px}
@media(min-width:601px) and (max-height:800px){h1{font-size:clamp(58px,10.7vh,86px);margin-bottom:18px}.brand{width:min(168px,23vh)}main{padding-top:2px;padding-bottom:12px}}
/* A single quiet arrival; the title stays fully visible afterwards. */
.headline-first{display:inline-block;animation:title-arrival 1000ms cubic-bezier(.2,.65,.2,1) 120ms both}
h1 em{animation:gold-arrival 1200ms cubic-bezier(.2,.65,.2,1) 180ms both}
@keyframes title-arrival{from{opacity:0;filter:blur(10px);transform:translateY(16px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes gold-arrival{0%{opacity:0;filter:blur(12px);transform:translateY(12px)}65%{opacity:1;filter:blur(0) drop-shadow(0 0 13px #bd9a5538)}100%{opacity:1;filter:blur(0) drop-shadow(0 0 0 transparent);transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.headline-first,h1 em{animation:none;opacity:1;transform:none;filter:none}}
.footer-meta{position:relative;background:#000000d9;border:1px solid #bd9a552b;border-radius:30px;padding:7px 13px;text-shadow:0 1px 5px #000}
@media(max-width:380px){.brand{width:160px}main{padding-top:16px}.footer-meta{margin-top:7px;margin-bottom:7px}}
/* A single full-bleed kitchen scene. No image column or separate mobile hero. */
html{overflow-x:clip}
.food-atmosphere{position:fixed;inset:0;pointer-events:none;background:#000}
.photo-webgl .food-atmosphere{visibility:hidden}
#fire{position:fixed;inset:0;width:100%;height:100%;background:transparent}
.greca{display:none}
.vignette{background:radial-gradient(ellipse at 50% 45%,#00000020,transparent 68%)}
.page{margin:0;width:100%;text-shadow:0 2px 16px #000}
@media(min-width:601px) and (min-height:801px) and (max-height:1050px){.brand{width:190px}h1{font-size:clamp(78px,10.5vh,108px)}main{padding:12px 0 22px}.page{padding-top:18px}.intro{margin-bottom:22px}}
@media(max-width:600px){.signup{background:#000000f2}.social a{background:#000000ed}}.food-atmosphere img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

.contact-email{color:inherit;text-decoration:none;text-transform:none;letter-spacing:.04em}.contact-email:hover{text-decoration:underline}.contact-email:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;text-align:left}
.contact-fields label,.email-label{display:block;text-align:left;font-size:12px;color:#f5e6c3;line-height:1.4}
.contact-fields label span{color:#f5e6c3}.contact-fields input{display:block;margin-top:6px;border:1px solid #bd9a55;border-radius:8px;background:#000000ed;padding:13px 15px;min-height:46px}
.email-label{margin-bottom:6px}.contact-fields input:focus-visible{outline:2px solid #bd9a55;outline-offset:2px}
@media(max-width:600px){.contact-fields{gap:9px}.contact-fields input{font-size:16px;padding:12px 10px}.page{min-height:100svh}main{padding-bottom:16px}}

/* A calm surface keeps contact details readable against moving flames. */
#waitlist{padding:20px 22px 16px;border:1px solid #bd9a553d;border-radius:16px;background:linear-gradient(145deg,rgba(0,0,0,.94),rgba(0,0,0,.94));box-shadow:0 12px 44px #0005;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#waitlist .contact-fields label,#waitlist .email-label{color:#f5e6c3;font-size:13px;font-weight:600}
#waitlist label span{color:#f5e6c3;font-weight:400}
#waitlist input::placeholder{color:#f5e6c3;opacity:1}
#waitlist .fine{color:#f5e6c3;font-size:12px}
#waitlist .text-button{color:#bd9a55;font-size:12px}
#waitlist #status:empty{display:none}
@media(max-width:600px){#waitlist{padding:17px 14px 14px;border-radius:14px}.contact-fields{grid-template-columns:1fr}}

/* Corporate UI accents; photographic fire retains its natural colors. */
h1 em{background:none;color:#bd9a55;-webkit-text-fill-color:#bd9a55}
.signup button{background:#bd9a55;color:#000000;border-color:#bd9a55}.signup button:hover{background:#f5e6c3;border-color:#f5e6c3}
#waitlist input{font-weight:400}#waitlist{border-color:#bd9a5559}input:focus-visible{outline-color:#bd9a55}

/* Official transparent PNG: no crop, blend mode or recoloring. */
.brand{aspect-ratio:auto;overflow:visible}.brand img{position:static;display:block;width:100%;height:auto;max-width:100%;mix-blend-mode:normal;object-fit:contain;background:transparent}
.site-language{position:absolute;left:0;top:10px;display:flex;gap:2px;padding:3px;border:1px solid #bd9a5580;border-radius:10px;background:#000000e6;z-index:4;text-shadow:none}.site-language button{min-width:39px;min-height:36px;padding:4px 8px;background:transparent;color:#f5e6c3;border:0;border-radius:6px;font-size:12px;font-weight:700}.site-language button[aria-pressed=true]{color:#000000;background:#bd9a55}
@media(max-width:600px){header{padding-top:52px}.site-language{top:0}.ambient-controls{top:0!important}.brand{width:min(190px,25vh)}html[lang=es] h1{font-size:clamp(43px,11.4vw,68px)}.signup button{white-space:normal}}