/* =============================================================
   Brasas Limeñas — styles.css
   Archetype: Editorial Dark Warm (adapted) — rojo/negro/dorado
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #130B0A;
  --bg-2:      #1B100E;
  --bg-3:      #251613;
  --bg-card:   #221310;
  --cream:     #F6EFE4;
  --cream-2:   #E4D6C2;
  --cream-3:   #9C8A78;
  --accent:    #C8102E;
  --accent-2:  #8C0C22;
  --accent-soft: rgba(200, 16, 46, 0.16);
  --gold:      #C9A64C;
  --gold-soft: rgba(201, 166, 76, 0.18);
  --line:      rgba(246, 239, 228, 0.12);
  --line-strong: rgba(246, 239, 228, 0.22);

  --serif: "Playfair Display", "Georgia", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 84px;
  --radius: 14px;
  --radius-lg: 26px;
  --container: 1240px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--cream-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
/* Todos los encabezados (h1-h4) usan Cinzel — la misma serif clásica de
   mayúsculas que el H1 del Inicio, para que se vea una sola tipografía
   de título en todo el sitio (Playfair Display queda para textos de
   apoyo: comillas de testimonios, el año del badge, el logo, etc.). */
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; font-family: 'Cinzel', var(--serif); font-weight: 600; letter-spacing: .01em; color: var(--cream); }
ul { list-style: none; padding: 0; }
::selection { background: var(--accent); color: #F6EFE4; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--cream); color: var(--bg);
  border-radius: 8px; font-weight: 600; transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 720px)  { .container { padding-inline: 32px; } }
@media (min-width: 1280px) { .container { padding-inline: 40px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--accent);
}

section { position: relative; }
.section-pad { padding-block: 88px; }
@media (min-width: 960px) { .section-pad { padding-block: 128px; } }

[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .1s; }
[data-reveal][data-delay="2"] { transition-delay: .2s; }
[data-reveal][data-delay="3"] { transition-delay: .3s; }
[data-reveal][data-delay="4"] { transition-delay: .4s; }

/* =============================================================
   4. Typography
   ============================================================= */
.h-display {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing: -0.01em;
}
.h-section {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
}
.h-section em, .h-display em, h1 em, h2 em { font-style: italic; color: var(--accent); }

.lede {
  font-size: 1.08rem; color: var(--cream-3); max-width: 56ch;
  line-height: 1.75;
}
.center { text-align: center; margin-inline: auto; }

/* =============================================================
   5. Components
   ============================================================= */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1rem 1.8rem; border-radius: 999px;
  font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), background-color .35s var(--ease-out);
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); transition-duration: .12s; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  /* Fijo a propósito (no var(--cream)): este botón es rojo sólido en
     cualquier sección, clara u oscura, así que su texto siempre tiene
     que ser claro — si usara --cream, en una sección de fondo blanco
     (donde --cream pasa a tinta oscura) el texto casi no se leería. */
  color: #F6EFE4;
}
.btn-primary:hover {
  box-shadow: 0 22px 46px rgba(200, 16, 46, 0.35), 0 8px 18px rgba(0,0,0,0.3);
}

.btn-ghost {
  background: transparent; color: var(--cream);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: rgba(246,239,228,0.06); border-color: var(--gold); }

/* Transparente con borde rojo — usado en los 3 botones del Hero
   (Hacer Pedido / Reservar Mesa / Ver Menú), el redondeado ya lo pone .btn. */
.btn-outline {
  background: transparent; color: var(--cream);
  border: 1px solid var(--accent);
}
.btn-outline:hover { background: rgba(200,16,46,0.14); border-color: var(--accent-2); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold), #a9843a);
  color: #1b120a;
}
.btn-gold:hover { box-shadow: 0 22px 46px rgba(201,166,76,0.3), 0 8px 18px rgba(0,0,0,0.3); }

.btn-sm { padding: .7rem 1.3rem; font-size: .72rem; }
.btn-block { width: 100%; }

/* Magnetic wrapper (JS adds inner span) */
.has-magnetic { display: inline-flex; position: relative; isolation: isolate; }
.magnetic-inner {
  display: inline-flex; align-items: center; justify-content: center; gap: inherit;
  will-change: transform;
  transition: transform .8s var(--ease-soft);
}

/* Nav */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 500;
  padding-block: 22px;
  transition: padding .4s var(--ease-out), background-color .4s var(--ease-out),
              backdrop-filter .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  padding-block: 12px;
  background: rgba(19, 11, 10, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: .65em; }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-word {
  font-family: var(--serif); font-size: 1.15rem; letter-spacing: .01em; color: var(--cream);
  line-height: 1.05;
}
.brand-word small {
  display: block; font-family: var(--sans); font-size: .58rem; letter-spacing: .24em;
  color: var(--accent); font-weight: 700; margin-top: 2px;
}

.nav-links { display: none; align-items: center; gap: 2.1rem; }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-link {
  position: relative; padding-block: .3rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--cream-2);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-cta { display: none; }
@media (min-width: 720px) { .nav-cta { display: inline-flex; } }

.nav-burger {
  display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--line-strong);
}
@media (min-width: 960px) { .nav-burger { display: none; } }
.nav-burger span { display: block; width: 18px; height: 1.5px; background: var(--cream); position: relative; }
.nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--cream);
  transition: transform .3s var(--ease-out);
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }

.nav-mobile {
  position: fixed; inset: 0; z-index: 600;
  background: var(--bg-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-soft);
}
.nav-mobile[data-open="true"] { clip-path: inset(0 0 0 0); }
.nav-mobile a { font-family: var(--serif); font-size: 1.7rem; color: var(--cream); }
.nav-mobile-close {
  position: absolute; top: 26px; right: 24px; width: 42px; height: 42px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--cream);
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  --rx: 0deg; --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-soft), border-color .4s var(--ease-out), box-shadow .5s var(--ease-soft);
}
.card.has-tilt:hover { transition-duration: .15s; }
.card:hover { border-color: var(--gold-soft); }

.card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease-soft), filter .6s var(--ease-out);
}
.card:hover .card-media img { transform: scale(1.08); filter: saturate(1.12) brightness(1.03); }
.card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,11,10,0) 42%, rgba(19,11,10,0.92) 100%);
}
.card-body { padding: 1.4rem 1.4rem 1.6rem; transform: translateZ(30px); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.card-title { font-size: 1.2rem; margin-bottom: 0; }
.card-price {
  flex: none; font-family: var(--sans); font-weight: 700; font-size: .92rem;
  color: var(--accent); white-space: nowrap;
}
.card-desc { font-size: .92rem; color: var(--cream-3); line-height: 1.6; margin-bottom: 1.1rem; }
.card-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  transition: gap .3s var(--ease-out);
}
.card-link:hover { gap: .8em; }

/* Glow halo following cursor (desktop only) */
.has-halo { position: relative; isolation: isolate; }
.has-halo::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                              rgba(201,166,76,.22), transparent 62%);
  opacity: 0; transition: opacity .4s;
}
.has-halo:hover::before { opacity: 1; }

/* Badges / pills */
.pill {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5rem 1rem; border-radius: 999px;
  background: rgba(246,239,228,0.06); border: 1px solid var(--line);
  font-size: .78rem; color: var(--cream-2);
}
.pill strong { color: var(--accent); }

/* Form */
.field { position: relative; margin-bottom: 1.1rem; }
.field label {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream-3); margin-bottom: .5rem;
}
.field input, .field select, .field textarea {
  width: 100%; padding: .95rem 1.1rem; border-radius: 10px;
  background: rgba(246,239,228,0.05); border: 1px solid var(--line-strong);
  color: var(--cream); font-family: var(--sans); font-size: .95rem;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--cream-3); opacity: .7; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(246,239,228,0.08);
}
.field select option { background: var(--bg-2); color: var(--cream); }

/* Platos del pedido: lista con contador de cantidad (varios platos y
   varias unidades de cada uno), no un <select> de uno solo. */
.dish-list {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.dish-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  transition: background-color .25s var(--ease-out);
}
.dish-row:last-child { border-bottom: 0; }
.dish-row.has-qty { background: var(--accent-soft); }
.dish-row__name { font-size: .86rem; color: var(--cream-2); }
.dish-row.has-qty .dish-row__name { color: var(--cream); font-weight: 600; }

.dish-qty { display: flex; align-items: center; gap: .4rem; flex: none; }
.dish-qty .qty-btn {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 1px solid var(--line-strong); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; padding: 0;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.dish-qty .qty-btn:hover { border-color: var(--gold); background: rgba(246,239,228,0.08); }
/* Más específico que ".field input" (que trae width:100% y mucho padding)
   para que la cajita de cantidad quede chica de verdad. */
.dish-qty .qty-input {
  width: 32px; padding: .3rem 0; border-radius: 0;
  text-align: center; background: transparent; border: 0;
  color: var(--cream); font-family: var(--sans); font-size: .92rem; font-weight: 700;
  -moz-appearance: textfield;
}
.dish-qty .qty-input::-webkit-outer-spin-button, .dish-qty .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dish-qty .qty-input:focus { outline: none; background: transparent; }

/* Aviso de "solo retiro" en modo Pedido */
.pickup-note {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1.1rem; border-radius: var(--radius);
  background: var(--gold-soft); border: 1px solid rgba(201,166,76,.35);
  font-size: .82rem; color: var(--cream-2); line-height: 1.55;
  margin-bottom: 1.4rem;
}
.pickup-note strong { color: var(--accent); }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
/* .field-row ya trae su propio "display: grid", que le empata en
   especificidad al [hidden] del navegador y gana por venir después en la
   cascada — sin esto, el campo quedaba invisible pero seguía "presente"
   para la validación del formulario. Forzamos el display:none acá. */
[data-mode-field][hidden] { display: none !important; }

.form-note { font-size: .8rem; color: var(--cream-3); margin-top: .9rem; line-height: 1.6; }
.form-note strong { color: var(--accent); }

.cta-form { transition: opacity .5s var(--ease-out), transform .5s var(--ease-soft); }
.cta-form.is-sent { opacity: 0; transform: translateY(-10px); pointer-events: none; position: absolute; inset: 0; }

/* =============================================================
   6. Sections
   ============================================================= */

/* ---- Alternancia blanco/negro entre apartados ----
   El Hero queda oscuro porque es una foto a pantalla completa (su propio
   scrim ya lo resuelve). El resto de la página intercala así: Proof=claro,
   Menú=blanco invierno, Nosotros=oscuro, Testimonios=blanco invierno,
   Galería=oscuro, Contacto=blanco invierno, Footer=oscuro.
   Como TODO el sitio ya lee sus colores vía var(--bg), var(--cream), etc.,
   alcanza con redefinir esas mismas variables acá adentro (.theme-light
   para el blanco neutro de Proof, .theme-winter para el blanco invierno)
   — el resto de las reglas (tarjetas, líneas, texto) se invierte solo. */
.theme-light {
  --bg:        #FFFFFF;
  --bg-2:      #F4F4F3;
  --bg-3:      #ECECEA;
  --bg-card:   #F7F7F6;
  --cream:     #141414;
  --cream-2:   #2E2C2A;
  --cream-3:   #6B6864;
  --line:      rgba(18, 18, 18, 0.12);
  --line-strong: rgba(18, 18, 18, 0.22);
}
/* Estas dos venían pensadas como "un tinte clarito sobre fondo oscuro";
   en la versión blanca se invierten a "un tinte oscurito sobre blanco". */
.theme-light .pillar,
.theme-light .info-card { background: rgba(18,18,18,.035); }

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -3; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* La foto es horizontal (3:2) y el Hero mide 100vh en todos los
     tamaños: en celular el recorte es bien angosto porque hay que cubrir
     mucho alto con poco ancho. Esta posición deja el plato centrado en
     esa franja angosta en vez de cortarlo hacia un costado. */
  object-position: 54% 57%;
  transform: scale(1.08);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(19,11,10,.55) 0%, rgba(19,11,10,.35) 34%, rgba(19,11,10,.92) 100%),
    linear-gradient(90deg, rgba(19,11,10,.75) 0%, rgba(19,11,10,.15) 55%);
}
.hero-mesh {
  position: absolute; inset: -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(50% 45% at var(--mesh-x, 30%) var(--mesh-y, 30%), rgba(200,16,46,.30), transparent 62%),
    conic-gradient(from var(--mesh-angle, 0deg), rgba(201,166,76,.16), rgba(140,12,34,.10), rgba(201,166,76,.16));
  filter: blur(90px) saturate(120%);
  opacity: .85;
  animation: meshShift 24s linear infinite;
  mix-blend-mode: screen;
}
@keyframes meshShift {
  0%   { --mesh-angle: 0deg;   --mesh-x: 26%; --mesh-y: 34%; }
  50%  { --mesh-angle: 180deg; --mesh-x: 68%; --mesh-y: 58%; }
  100% { --mesh-angle: 360deg; --mesh-x: 26%; --mesh-y: 34%; }
}
@property --mesh-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.hero-inner { position: relative; width: 100%; padding-block: calc(var(--nav-h) + 40px) 72px; }
.hero-kicker { margin-bottom: 1.6rem; }
.hero-title {
  /* Serif clásica de mayúsculas finas y bien espaciadas, como en la
     referencia "CARTA / RESERVAS" — reemplaza a Titan One (el letrero
     grueso pintado a mano de antes). */
  font-family: 'Cinzel', var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 5.6vw, 4rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  max-width: 17ch;
  margin-bottom: 1.4rem;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
/* Cinzel tampoco tiene itálica real — se cancela para que el navegador
   no la "incline" a la fuerza; "La Serena" se sigue notando por el
   color dorado heredado. */
.hero-title em { font-style: normal; }
.hero-sub {
  max-width: 46ch; font-size: 1.08rem; color: var(--cream-2); margin-bottom: 2.2rem;
  line-height: 1.7;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.8rem; }
.hero-foot {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.2rem; align-items: center;
  padding-top: 1.8rem; border-top: 1px solid var(--line);
}
.hero-stat { display: flex; flex-direction: column; }
.hero-stat b {
  font-family: var(--serif); font-size: 1.5rem; color: var(--cream);
}
.hero-stat b .stat-suffix { color: var(--accent); }
.hero-stat span { font-size: .72rem; letter-spacing: .06em; color: var(--cream-3); text-transform: uppercase; }
/* El stat de reseñas es un link a Google: mismo look, sin subrayado, y un
   guiño de que se puede tocar (la calificación se pone dorada al pasar
   el cursor). */
a.hero-stat, a.proof-item { text-decoration: none; transition: opacity .3s var(--ease-out); }
a.hero-stat:hover, a.proof-item:hover { opacity: .75; }
a.hero-stat:hover b, a.proof-item:hover b { color: var(--accent); }

.hero-scroll {
  position: absolute; right: 28px; bottom: 28px; z-index: 3;
  display: none; flex-direction: column; align-items: center; gap: .6rem;
  color: var(--cream-3);
}
@media (min-width: 720px) { .hero-scroll { display: flex; } }
.hero-scroll span {
  writing-mode: vertical-rl; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
}
.hero-scroll-line { width: 1px; height: 46px; background: var(--line-strong); position: relative; overflow: hidden; }
.hero-scroll-line::after {
  content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--gold); animation: scrollLine 2.4s var(--ease-soft) infinite;
}
@keyframes scrollLine { to { top: 100%; } }

/* ---- Proof strip ---- */
.proof {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  padding-block: 40px;
}
.proof-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px;
  text-align: center;
}
@media (min-width: 720px) { .proof-grid { grid-template-columns: repeat(4, 1fr); } }
.proof-item b {
  display: block; font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 2.5rem); color: var(--cream);
}
.proof-item b .stat-suffix { color: var(--accent); }
.proof-item span { font-size: .74rem; letter-spacing: .05em; color: var(--cream-3); }

/* ---- Menu ---- */
.menu-grid {
  display: grid; grid-template-columns: 1fr; gap: 22px;
  margin-top: 56px;
}
@media (min-width: 640px)  { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .menu-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .menu-grid { grid-template-columns: repeat(4, 1fr); } }

.section-head { max-width: 68ch; }
.section-head.center { max-width: 60ch; }

/* ---- Nosotros ---- */
.about-grid {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .about-grid { grid-template-columns: 1fr 1.05fr; gap: 64px; } }
/* Envoltorio sin overflow:hidden, para que la foto insertada de la
   esquina (.about-inset) pueda sobresalir del marco de la foto grande
   sin que se corte. */
.about-figure-wrap { position: relative; }
.about-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; }
.about-figure img { width: 100%; height: 100%; object-fit: cover; }
.about-figure::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
}
.about-badge {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  background: rgba(19,11,10,.82); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 14px 18px;
}
.about-badge b { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--accent); }
.about-badge span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3); }

/* Foto insertada en la esquina — a color de verdad (no en blanco y
   negro), con marco crema tipo foto revelada, igual de estilo que el
   inset del sitio de Tu Estilo pero sin el filtro gris. */
.about-inset {
  position: absolute; left: -18px; top: -18px; z-index: 2;
  width: 44%; max-width: 210px; margin: 0;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 6px solid #F6EFE4;
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.55);
}
.about-inset img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 640px) {
  .about-inset { width: 42%; max-width: 150px; left: -10px; top: -10px; border-width: 4px; }
}

.about-copy p { margin-bottom: 1.2rem; color: var(--cream-2); }
.pillars { display: grid; gap: 18px; margin-top: 2rem; grid-template-columns: 1fr; }
@media (min-width: 540px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  padding: 1.2rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: rgba(246,239,228,0.03);
}
.pillar-num { font-family: var(--serif); color: var(--accent); font-size: 1.1rem; display: block; margin-bottom: .5rem; }
.pillar h4 { font-size: 1rem; margin-bottom: .4rem; }
.pillar p { font-size: .86rem; color: var(--cream-3); line-height: 1.55; }

/* ---- Testimonios ---- */
.testi-grid { display: grid; gap: 22px; margin-top: 56px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi-card {
  padding: 1.8rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-card);
}
.testi-stars { color: var(--gold); font-size: .9rem; letter-spacing: .18em; margin-bottom: 1rem; }
.testi-quote { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--cream); margin-bottom: 1.4rem; line-height: 1.55; }
.testi-name { font-weight: 700; font-size: .9rem; color: var(--cream); }
.testi-role { font-size: .76rem; color: var(--cream-3); }

/* ---- Galería ---- */
.gallery-grid {
  display: grid; gap: 14px; margin-top: 56px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid .gallery-item:nth-child(5) { grid-column: span 2; aspect-ratio: 8/5; }
}
.gallery-item {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-soft), filter .5s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.09); filter: saturate(1.15); }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(19,11,10,.75) 100%);
}

/* ---- Contacto / Reserva ----
   Fondo "blanco invierno" (blanco frío, apenas celeste) con las
   "ventanas" — el panel del formulario y las tarjetas de datos — en gris
   claro para que se despeguen del fondo. Mismo mecanismo que .theme-light
   (redefinir las variables de color), pero con un blanco propio para esta
   sección en vez de compartir el blanco neutro del resto del sitio. */
/* "Blanco invierno": blanco frío, apenas celeste, con sus "ventanas"
   (tarjetas/paneles) en gris claro. Se usa en varias secciones (Menú,
   Testimonios, Contacto) intercaladas con las oscuras — por eso es una
   clase reutilizable y no algo pegado a un solo id. */
.theme-winter {
  --bg:          #F5F8FA;
  --bg-2:        #ECF1F4;
  --bg-3:        #E3E9ED;
  --bg-card:     #E6E9EB;
  --cream:       #14191C;
  --cream-2:     #2C3236;
  --cream-3:     #677075;
  --line:        rgba(20, 25, 28, 0.12);
  --line-strong: rgba(20, 25, 28, 0.22);
}
/* Estos traían un tinte "claro sobre fondo oscuro" puesto a mano (no vía
   variable) — sin ajustarlos quedarían casi invisibles sobre blanco.
   (Solo existen dentro de Contacto, pero da lo mismo dejarlos genéricos.) */
.theme-winter .info-card,
.theme-winter .order-tabs { background: rgba(20,25,28,.05); }
/* Los campos del formulario también traían ese tinte a mano; acá se ven
   blancos de verdad para notarse como "campo" dentro de la ventana gris
   del panel, en vez de fundirse con ella. */
.theme-winter .field input,
.theme-winter .field select,
.theme-winter .field textarea { background: #FFFFFF; }
.theme-winter .field input:focus,
.theme-winter .field select:focus,
.theme-winter .field textarea:focus { background: #FFFFFF; }

.contact-wrap {
  display: grid; gap: 40px; grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .contact-wrap { grid-template-columns: 1.1fr .9fr; gap: 56px; } }

.reserve-panel {
  padding: 2rem; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--line);
  position: relative;
}

/* Selector Pedido / Reserva — decide qué campos pide el formulario */
.order-tabs {
  display: flex; gap: 6px; margin-bottom: 1.8rem;
  padding: 6px; border-radius: 999px;
  background: rgba(246,239,228,0.05); border: 1px solid var(--line);
}
.order-tab {
  flex: 1; padding: .85rem 1rem; border-radius: 999px;
  font-family: var(--sans); font-weight: 700; font-size: .76rem;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
  color: var(--cream-3);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.order-tab:hover { color: var(--cream); }
.order-tab.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #F6EFE4; /* fijo, mismo motivo que .btn-primary */
  box-shadow: 0 10px 24px rgba(200,16,46,0.3);
}

.side-info { display: flex; flex-direction: column; gap: 18px; }
.info-card {
  padding: 1.4rem 1.5rem; border-radius: var(--radius);
  background: rgba(246,239,228,0.03); border: 1px solid var(--line);
  display: flex; gap: 1rem; align-items: flex-start;
}
.info-icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: var(--gold-soft); color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
}
.info-card h4 { font-size: .95rem; margin-bottom: .3rem; color: var(--cream); font-family: var(--sans); font-weight: 700; }
.info-card p, .info-card a { font-size: .88rem; color: var(--cream-3); line-height: 1.5; }
.info-card a:hover { color: var(--accent); }

.map-frame {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 16/11; filter: grayscale(.25) sepia(.18) saturate(1.3);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

.social-row { display: flex; gap: 12px; margin-top: 4px; }
.social-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream-3); transition: color .3s, border-color .3s, transform .3s var(--ease-soft);
}
.social-btn:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-3px); }

/* ---- Footer ---- */
.footer {
  background: var(--bg-2); border-top: 1px solid var(--line);
  padding-block: 60px 30px;
}
.footer-grid {
  display: grid; gap: 40px; grid-template-columns: 1fr;
  margin-bottom: 40px;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-brand p { font-size: .9rem; color: var(--cream-3); margin-top: 1rem; max-width: 34ch; line-height: 1.6; }
.footer-col h5 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 1.1rem; font-weight: 700; font-family: var(--sans);
}
.footer-col a, .footer-col p { display: block; font-size: .88rem; color: var(--cream-3); margin-bottom: .7rem; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  padding-top: 26px; border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--cream-3);
}
.footer-bottom a { color: var(--cream-3); }
.footer-bottom a:hover { color: var(--accent); }

/* ---- Floating WhatsApp ---- */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 400;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #0b1a10;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform .4s var(--ease-soft);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 26px; height: 26px; }

/* ---- Splash ---- */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  pointer-events: auto;
  transition: opacity .8s, clip-path 1s;
  animation: splashSafety .01s 4.2s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-mark { width: 64px; height: 64px; opacity: 0; animation: splashFade 1s var(--ease-out) forwards .15s; }
@keyframes splashFade { to { opacity: 1; } }

/* =============================================================
   7. Effects — count up target
   ============================================================= */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* =============================================================
   8. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh { animation: none; }
  .hero-scroll-line::after { animation: none; }
  .hero-bg img { transform: none; }
}