/* ============================================================
   SANTANA RESTAURANTE — "El sabor del mar, en la montaña"
   Campestre-editorial LUMINOSO. Paleta e identidad del cliente:
   lino cálido + pino profundo (paredes) + teal (sillas/neón) +
   ámbar (letrero neón) + coral (la flor comestible del emplatado).
   Firma de motion: capas de montaña (parallax) + niebla de páramo.
   ============================================================ */

:root{
  --linen:#F6EFE1;        /* base — madera blanqueada cálida */
  --cream:#FBF6EC;        /* superficie elevada */
  --sand:#EFE4D1;         /* panel sutil */
  --pine:#12312E;         /* pino/teal profundo — tinta y secciones oscuras */
  --pine-2:#0E2623;
  --pine-3:#1B403B;
  --teal:#1C8C82;         /* acento primario (sillas / neón) */
  --teal-deep:#12655D;
  --teal-soft:#8FC3BC;
  --amber:#E0A93E;        /* acento cálido (letrero neón) */
  --amber-2:#CE9226;
  --coral:#E4674C;        /* micro-acento (flor comestible) */
  --ink:#272219;          /* texto principal (carbón cálido) */
  --ink-mute:#6C6353;     /* texto secundario */
  --line:rgba(18,49,46,.14);
  --line-soft:rgba(18,49,46,.08);
  --wa:#25D366;

  --wrap:1180px;
  --r-s:12px; --r-m:18px; --r-l:28px; --r-xl:40px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-s:0 6px 20px rgba(20,40,36,.10);
  --sh-m:0 18px 44px rgba(20,40,36,.16);
  --sh-l:0 30px 70px rgba(15,35,31,.22);

  --f-disp:'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-text:'Manrope', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--f-disp); font-weight:400; line-height:1.08; letter-spacing:0; margin:0; }
p{ margin:0 0 1em; }
strong,b{ font-weight:700; }
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:120; background:var(--amber); color:var(--pine); padding:.7rem 1rem; border-radius:8px; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* ---------- REVEAL (gated por .is-anim) ---------- */
.is-anim [data-r]{ opacity:0; transform:translateY(24px); }
.is-anim [data-r].in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.is-anim [data-r="clip"]{ opacity:0; transform:translateY(28px); }
.is-anim [data-r="clip"].in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }

/* ---------- TIPOS UTILITARIOS ---------- */
.eyebrow{
  font-family:var(--f-text); font-weight:700; font-size:.74rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--teal-deep); margin:0 0 1rem;
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:''; width:26px; height:1.5px; background:var(--amber); display:inline-block; }
.sec-title{ font-size:clamp(2.1rem,5vw,3.4rem); color:var(--pine); margin:0 0 1rem; }
.sec-sub{ font-size:1.1rem; color:var(--ink-mute); max-width:56ch; margin:0 0 2.6rem; }
section{ position:relative; }
.section-pad{ padding:clamp(4.5rem,9vw,7.5rem) 0; }

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.6rem; border-radius:999px; border:0;
  font-family:var(--f-text); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn svg{ width:19px; height:19px; fill:currentColor; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn-wa{ background:var(--wa); color:#07341c; box-shadow:0 10px 26px rgba(37,211,102,.28); }
.btn-wa:hover{ background:#2ee06f; box-shadow:0 16px 34px rgba(37,211,102,.38); }
.btn-solid{ background:var(--pine); color:var(--cream); box-shadow:var(--sh-s); }
.btn-solid:hover{ background:var(--pine-3); box-shadow:var(--sh-m); }
.btn-amber{ background:var(--amber); color:var(--pine); box-shadow:0 10px 26px rgba(224,169,62,.30); }
.btn-amber:hover{ background:#eab857; }
.btn-ghost{ background:transparent; color:var(--pine); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal-deep); }
.btn-ghost-light{ background:transparent; color:var(--cream); border:1.5px solid rgba(246,239,225,.32); }
.btn-ghost-light:hover{ border-color:var(--amber); color:var(--amber); }
.btn-block{ width:100%; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.scrolled{
  background:rgba(251,246,236,.94);
  box-shadow:0 1px 0 var(--line-soft), 0 10px 30px rgba(20,40,36,.10);
}
.nav-in{ display:flex; align-items:center; gap:1.4rem; padding:.8rem 0; }
.brand{ display:flex; align-items:center; gap:.66rem; text-decoration:none; flex:none; }
.brand-mark{ width:34px; height:34px; flex:none; color:var(--amber); transition:transform .5s var(--ease); }
.brand:hover .brand-mark{ transform:rotate(30deg); }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-txt b{ font-family:var(--f-disp); font-weight:400; font-size:1.35rem; letter-spacing:.16em; color:var(--pine); }
.brand-txt em{ font-family:var(--f-text); font-style:normal; font-weight:700; font-size:.52rem; letter-spacing:.34em; text-transform:uppercase; color:var(--teal-deep); margin-top:.32rem; padding-left:.16em; }
.nav.scrolled .brand-txt b{ color:var(--pine); }
.nav-links{ display:flex; gap:1.7rem; margin-left:auto; }
.nav-links a{
  text-decoration:none; font-size:.9rem; font-weight:600; color:var(--ink);
  position:relative; padding:.2rem 0; transition:color .25s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-3px; width:0; height:2px;
  background:var(--amber); transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--teal-deep); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ padding:.62rem 1.25rem; font-size:.86rem; }
.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; margin-left:auto; }
.burger span{ display:block; width:24px; height:2px; background:var(--pine); margin:5px 0; border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobnav{ display:none; flex-direction:column; gap:.1rem; padding:1rem 1.25rem 1.5rem; background:var(--cream); border-top:1px solid var(--line-soft); }
.mobnav a{ text-decoration:none; padding:.8rem .2rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-soft); }
.mob-wa{ margin-top:.9rem; background:var(--wa); color:#07341c !important; border-radius:999px; text-align:center; border:0 !important; font-weight:700; }

/* ============================================================
   HERO — montañas (parallax) + niebla + emplatado enmarcado
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:8rem 0 5rem; overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 55% at 82% 12%, rgba(224,169,62,.30), transparent 60%),
    radial-gradient(90% 60% at 20% 4%, rgba(255,251,242,.9), transparent 60%),
    linear-gradient(180deg, #FCF7EE 0%, #F3EAD8 46%, #E7DFC9 100%);
}
/* capas de montaña (olas). Van DELANTE de la foto (z-index 2) y forman una banda
   BAJA (altura fija) para no tapar los CTA ni las estrellas. Más anchas que el hero
   para que el vaivén horizontal no descubra los lados. */
.mtns{
  position:absolute; left:-9%; bottom:-1px; width:118%; z-index:2;
  height:clamp(120px,15vw,210px); pointer-events:none; line-height:0; will-change:transform;
}
.mtns svg{ width:100%; height:100%; display:block; }
.mist{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero-in{
  position:relative; z-index:4; width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
}
.hero-copy{ max-width:580px; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:.7rem; margin:0 0 1.5rem;
  font-weight:700; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-deep);
}
.hero-kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--coral); flex:none; }
.hero h1{
  font-size:clamp(2.8rem,5.6vw,4.7rem); color:var(--pine); margin:0 0 1.4rem; line-height:1.04;
}
.hero h1 .hl{ color:var(--teal-deep); position:relative; white-space:nowrap; }
.hero h1 .hl::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:.14em;
  background:linear-gradient(90deg,var(--amber),var(--coral)); border-radius:2px; opacity:.85;
}
.hero-lede{ font-size:1.18rem; color:#3c473f; max-width:46ch; margin:0 0 2rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin:0 0 2.2rem; }
.hero-meta{ display:flex; align-items:center; gap:1rem; }
.hero-meta .stars{ color:var(--amber); letter-spacing:.12em; font-size:1.1rem; }
.hero-meta p{ margin:0; font-size:.95rem; color:var(--ink-mute); }
.hero-meta strong{ color:var(--pine); }

/* FOTO a sangre por la derecha, DETRÁS de las montañas (z-index 1). Sus bordes
   derecho/arriba/abajo se salen del hero (overflow:hidden los recorta) → no se ven;
   solo el lado IZQUIERDO (hacia el texto) se difumina con una máscara radial centrada
   a la derecha, para que la transición foto→fondo sea invisible. */
.hero-photo{ position:absolute; top:0; right:0; bottom:0; width:56%; z-index:1; margin:0; }
.hero-stack{ position:absolute; inset:0; }
.hero-stack .hs{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.6s var(--ease); will-change:opacity;
  -webkit-mask-image:radial-gradient(ellipse 92% 82% at 78% 46%, #000 40%, transparent 90%);
          mask-image:radial-gradient(ellipse 92% 82% at 78% 46%, #000 40%, transparent 90%);
}
.hero-stack .hs.on{ opacity:1; }
.hero-cap{
  position:absolute; right:7%; bottom:calc(clamp(120px,15vw,210px) + 1.1rem); z-index:5;
  font-family:var(--f-text); font-weight:700; font-size:.82rem; color:var(--pine);
  background:rgba(251,246,236,.9); padding:.42rem .85rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.5rem; box-shadow:var(--sh-s);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:opacity .5s var(--ease);
}
.hero-cap::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--coral); flex:none; }

/* ============================================================
   DEFINE (answer-first) — banda pino
   ============================================================ */
.define{ background:var(--pine); color:var(--cream); padding:clamp(3.5rem,7vw,5.5rem) 0; text-align:center; }
.define .lead{
  font-family:var(--f-disp); font-size:clamp(1.5rem,3.4vw,2.35rem); line-height:1.3; color:var(--cream);
  max-width:24ch; margin:0 auto; max-width:30ch;
}
.define .lead strong{ color:var(--amber); font-weight:400; }
.define .frase{
  margin:1.8rem auto 0; max-width:60ch; color:var(--teal-soft); font-size:1.05rem; font-family:var(--f-text);
}
.define .frase cite{ display:block; margin-top:.6rem; font-style:normal; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,239,225,.55); }

/* ============================================================
   CONCEPTO — del mar a la montaña (foto + 3 valores)
   ============================================================ */
.concepto{ background:var(--linen); }
.concepto-in{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.concepto-foto{ position:relative; }
.concepto-foto img{ width:100%; border-radius:var(--r-l); box-shadow:var(--sh-m); aspect-ratio:4/5; object-fit:cover; }
.concepto-foto .cap{
  position:absolute; left:1rem; bottom:1rem; right:1rem; background:rgba(18,49,46,.82); color:var(--cream);
  padding:.7rem 1rem; border-radius:var(--r-s); font-size:.86rem; backdrop-filter:blur(2px);
}
.valores{ display:flex; flex-direction:column; gap:1.4rem; margin-top:1.6rem; }
.valor{ display:flex; gap:1.1rem; align-items:flex-start; padding-bottom:1.4rem; border-bottom:1px solid var(--line); }
.valor:last-child{ border-bottom:0; padding-bottom:0; }
.valor-ico{
  flex:none; width:52px; height:52px; border-radius:14px; display:grid; place-content:center;
  background:var(--cream); color:var(--teal-deep); box-shadow:var(--sh-s); border:1px solid var(--line-soft);
}
.valor-ico svg{ width:26px; height:26px; }
.valor h3{ font-size:1.35rem; color:var(--pine); margin:0 0 .25rem; }
.valor p{ margin:0; color:var(--ink-mute); font-size:.98rem; }

/* ============================================================
   CARTA (showpiece filtrable)
   ============================================================ */
.carta{ background:var(--cream); }
.carta-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.filtros{ display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 2.4rem; }
.chip{
  padding:.55rem 1.1rem; border-radius:999px; border:1.5px solid var(--line);
  background:transparent; color:var(--ink); font-family:var(--f-text); font-weight:600; font-size:.9rem;
  cursor:pointer; transition:all .22s var(--ease);
}
.chip:hover{ border-color:var(--teal); color:var(--teal-deep); }
.chip.is-on{ background:var(--pine); color:var(--cream); border-color:var(--pine); }

.carta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.4rem; align-items:start; }
.carta-col{ display:flex; flex-direction:column; }
.destacado-card{
  grid-column:1 / -1; display:grid; grid-template-columns:1fr 1.1fr; gap:1.6rem; align-items:center;
  background:var(--linen); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-s);
  border:1px solid var(--line-soft); margin-bottom:.6rem;
}
.destacado-card .d-media{ overflow:hidden; height:100%; min-height:230px; }
.destacado-card .d-media img{ width:100%; height:100%; object-fit:cover; min-height:230px; transition:transform .6s var(--ease); }
.destacado-card:hover .d-media img{ transform:scale(1.05); }
.destacado-card .d-body{ padding:1.4rem 1.6rem 1.4rem 0; }
.destacado-card .d-tag{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--coral); font-weight:700; }
.destacado-card h3{ font-size:1.7rem; color:var(--pine); margin:.35rem 0 .5rem; }
.destacado-card p{ color:var(--ink-mute); font-size:.96rem; margin:0 0 .7rem; }
.destacado-card .precio{ font-family:var(--f-disp); font-size:1.5rem; color:var(--teal-deep); }

.plato-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.95rem 0; border-bottom:1px dashed var(--line);
}
.plato-row.hide{ display:none; }
.plato-row.pop{ animation:pop .4s var(--ease); }
.carta-panel.pop{ animation:pop .45s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.plato-row .p-info h4{ font-family:var(--f-text); font-weight:700; font-size:1.02rem; color:var(--pine); margin:0; }
.plato-row .p-info .gr{ font-weight:600; color:var(--ink-mute); font-size:.82rem; }
.plato-row .p-info p{ margin:.15rem 0 0; font-size:.88rem; color:var(--ink-mute); max-width:44ch; }
.plato-row .p-dots{ flex:1; border-bottom:1px dotted var(--line); align-self:center; height:1px; margin:0 .2rem; min-width:14px; }
.plato-row .precio{ font-family:var(--f-disp); font-size:1.2rem; color:var(--teal-deep); white-space:nowrap; }
.plato-row .precio em{ font-family:var(--f-text); font-style:normal; font-size:.78rem; color:var(--ink-mute); font-weight:600; }
.carta-foot{ margin-top:2.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }
.nota-precios{ margin:0; font-size:.82rem; color:var(--ink-mute); }

/* ============================================================
   EXPERIENCIA — terraza / celebraciones (banda pino)
   ============================================================ */
.experiencia{ background:var(--pine); color:var(--cream); }
.experiencia .eyebrow{ color:var(--amber); }
.experiencia .eyebrow::before{ background:var(--coral); }
.experiencia .sec-title{ color:var(--cream); }
.experiencia .sec-sub{ color:var(--teal-soft); }
.exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.exp-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(143,195,188,.18); border-radius:var(--r-l); padding:1.8rem;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); will-change:transform;
}
.exp-card:hover{ border-color:var(--amber); box-shadow:0 20px 44px rgba(0,0,0,.28); }
.exp-ico{ width:52px; height:52px; border-radius:14px; display:grid; place-content:center; background:rgba(28,140,130,.22); color:var(--amber); margin-bottom:1.1rem; }
.exp-ico svg{ width:26px; height:26px; }
.exp-card h3{ font-size:1.5rem; color:var(--cream); margin:0 0 .5rem; }
.exp-card p{ color:var(--teal-soft); font-size:.95rem; margin:0 0 .9rem; }
.exp-tag{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); font-weight:700; }
.exp-cta{
  margin-top:2.6rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  background:linear-gradient(120deg, var(--pine-3), var(--teal-deep)); border-radius:var(--r-l); padding:2rem 2.2rem;
  border:1px solid rgba(143,195,188,.22);
}
.exp-cta h3{ font-size:1.7rem; color:var(--cream); margin:0 0 .3rem; }
.exp-cta p{ margin:0; color:var(--teal-soft); }

/* ============================================================
   RESEÑAS
   ============================================================ */
.resenas{ background:var(--linen); }
.res-score{
  display:grid; grid-template-columns:auto 1fr auto; gap:2.5rem; align-items:center;
  background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:2rem 2.2rem;
  box-shadow:var(--sh-s); margin-bottom:2.4rem;
}
.score-big{ text-align:center; }
.score-big span{ font-family:var(--f-disp); font-size:4rem; line-height:1; color:var(--pine); }
.score-big .stars{ color:var(--amber); letter-spacing:.1em; display:block; margin-top:.3rem; }
.score-big small{ display:block; color:var(--ink-mute); font-size:.82rem; margin-top:.3rem; }
.score-bars{ display:flex; flex-direction:column; gap:.4rem; }
.bar{ display:grid; grid-template-columns:32px 1fr 40px; gap:.6rem; align-items:center; font-size:.82rem; color:var(--ink-mute); }
.bar i{ height:8px; border-radius:999px; background:var(--sand); position:relative; overflow:hidden; }
.bar i::after{ content:''; position:absolute; inset:0; width:var(--w,0); background:linear-gradient(90deg,var(--teal),var(--amber)); border-radius:999px; transition:width 1s var(--ease); }
.bar i.fill::after{ width:var(--w); }
.bar b{ text-align:right; color:var(--pine); font-weight:700; }
.score-cta{ max-width:24ch; }
.score-cta p{ font-size:.92rem; color:var(--ink-mute); margin:0 0 .6rem; }
.score-cta a{ color:var(--teal-deep); font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--amber); }

.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.quotes blockquote{
  margin:0; background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-l);
  padding:1.7rem; box-shadow:var(--sh-s); position:relative;
}
.quotes blockquote::before{ content:'\201C'; font-family:var(--f-disp); font-size:3.4rem; color:var(--teal-soft); position:absolute; top:.4rem; left:1rem; line-height:1; opacity:.6; }
.quotes p{ font-size:.98rem; color:var(--ink); margin:.8rem 0 1rem; position:relative; }
.quotes cite{ font-style:normal; font-weight:700; color:var(--pine); font-size:.9rem; display:flex; align-items:center; gap:.5rem; }
.quotes cite span{ color:var(--amber); font-size:.82rem; }

/* ============================================================
   GALERÍA / CARRUSEL
   ============================================================ */
.historia{ background:var(--cream); }
.carousel{ position:relative; margin-top:1rem; }
.car-viewport{ overflow:hidden; border-radius:var(--r-l); box-shadow:var(--sh-m); }
.car-track{ display:flex; will-change:transform; transition:transform .6s var(--ease); }
.slide{ min-width:100%; margin:0; position:relative; }
.slide img{ width:100%; height:clamp(340px,54vw,560px); object-fit:cover; }
.slide figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.4rem 2rem 1.6rem;
  background:linear-gradient(180deg, transparent, rgba(14,38,35,.86)); color:var(--cream);
}
.slide-num{ font-family:var(--f-disp); font-size:1.1rem; color:var(--amber); }
.slide figcaption h3{ font-size:1.7rem; color:var(--cream); margin:.2rem 0 .3rem; }
.slide figcaption p{ margin:0; color:var(--teal-soft); max-width:52ch; font-size:.95rem; }
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%;
  border:0; background:rgba(251,246,236,.92); color:var(--pine); cursor:pointer; display:grid; place-content:center;
  box-shadow:var(--sh-s); transition:background .2s var(--ease), transform .2s var(--ease);
}
.car-btn:hover{ background:var(--amber); transform:translateY(-50%) scale(1.06); }
.car-btn svg{ width:22px; height:22px; }
.car-prev{ left:1rem; } .car-next{ right:1rem; }
.car-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.2rem; }
.car-dot{ width:9px; height:9px; border-radius:50%; border:0; background:var(--sand); cursor:pointer; padding:0; transition:all .25s var(--ease); }
.car-dot.on{ background:var(--teal); width:26px; border-radius:999px; }
.firma{ text-align:center; font-family:var(--f-disp); font-size:clamp(1.3rem,3vw,1.9rem); color:var(--pine); max-width:34ch; margin:2.6rem auto 0; line-height:1.35; }
.firma b{ color:var(--teal-deep); font-weight:400; }

/* ============================================================
   VISITA
   ============================================================ */
.visita{ background:var(--linen); }
.visita-in{ display:grid; grid-template-columns:.95fr 1.05fr; gap:2.5rem; align-items:stretch; }
.visita-info{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-content:start; }
.vcard{ background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-m); padding:1.4rem; box-shadow:var(--sh-s); }
.vcard.wide{ grid-column:1 / -1; }
.vcard h3{ font-family:var(--f-text); font-weight:800; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); margin:0 0 .6rem; }
.vcard p{ margin:0; font-size:.98rem; color:var(--ink); }
.vcard a{ color:var(--pine); text-decoration:none; border-bottom:1.5px solid var(--amber); }
.vcard a:hover{ color:var(--teal-deep); }
.hours{ list-style:none; margin:0; padding:0; }
.hours li{ display:flex; justify-content:space-between; padding:.3rem 0; font-size:.94rem; border-bottom:1px solid var(--line-soft); }
.hours li:last-child{ border-bottom:0; }
.hours li b{ color:var(--pine); }
.hours li.closed span, .hours li.closed b{ color:var(--ink-mute); }
.hours li.today{ color:var(--teal-deep); font-weight:700; }
.hours li.today b{ color:var(--teal-deep); }
.amen{ list-style:none; margin:0; padding:0; columns:2; gap:1rem; }
.amen li{ padding:.28rem 0 .28rem 1.4rem; position:relative; font-size:.92rem; color:var(--ink); break-inside:avoid; }
.amen li::before{ content:''; position:absolute; left:0; top:.7em; width:8px; height:8px; border-radius:50%; background:var(--teal); }
.visita-map{ border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-m); min-height:340px; }
.visita-map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background:var(--cream); }
.faq-wrap{ max-width:820px; }
.faq-list{ margin-top:1.5rem; }
.faq-list details{ border-bottom:1px solid var(--line); padding:.4rem 0; }
.faq-list summary{
  cursor:pointer; list-style:none; padding:1.1rem 2.5rem 1.1rem 0; position:relative;
  font-family:var(--f-disp); font-size:1.25rem; color:var(--pine);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:'+'; position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  font-family:var(--f-text); font-weight:600; font-size:1.6rem; color:var(--teal); transition:transform .3s var(--ease);
}
.faq-list details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-list p{ margin:0 0 1.1rem; color:var(--ink-mute); font-size:1rem; padding-right:2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--pine-2); color:var(--teal-soft); padding:4rem 0 2rem; }
.foot-in{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.foot-brand img{ width:180px; border-radius:10px; margin-bottom:1rem; }
.foot-brand p{ margin:0; font-size:.92rem; color:var(--teal-soft); }
.foot-col h4{ font-family:var(--f-text); font-weight:800; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin:0 0 .9rem; }
.foot-col p{ margin:0; font-size:.94rem; line-height:1.9; }
.foot-col a{ color:var(--teal-soft); text-decoration:none; transition:color .2s var(--ease); }
.foot-col a:hover{ color:var(--cream); }
.foot-bot{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(143,195,188,.16); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; align-items:center; }
.foot-bot p{ margin:0; font-size:.84rem; color:rgba(143,195,188,.7); }
.made a{ color:var(--amber); text-decoration:none; font-weight:700; }

/* ============================================================
   FAB
   ============================================================ */
.fab{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:70; width:56px; height:56px; border-radius:50%;
  background:var(--wa); color:#fff; display:grid; place-content:center; box-shadow:0 12px 30px rgba(37,211,102,.4);
  text-decoration:none; opacity:0; transform:translateY(20px) scale(.8); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.fab.show{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ transform:scale(1.08); }
.fab svg{ width:30px; height:30px; fill:currentColor; }

/* ============================================================
   MODAL (reserva / evento → QR)
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:1.2rem; }
.modal[hidden]{ display:none; }
.modal-ov{ position:absolute; inset:0; background:rgba(10,26,24,.6); backdrop-filter:blur(4px); }
.modal-card{
  position:relative; z-index:2; width:min(100%, 500px); max-height:92vh; overflow:auto;
  background:var(--cream); border-radius:var(--r-l); box-shadow:var(--sh-l); padding:2.2rem;
  border-top:5px solid var(--amber);
}
.modal-x{ position:absolute; top:.8rem; right:1rem; background:none; border:0; font-size:1.8rem; line-height:1; color:var(--ink-mute); cursor:pointer; }
.modal-x:hover{ color:var(--coral); }
.modal-kicker{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-deep); font-weight:700; margin:0 0 .4rem; }
.modal-card h2{ font-size:1.9rem; color:var(--pine); margin:0 0 .5rem; }
.modal-sub{ color:var(--ink-mute); font-size:.95rem; margin:0 0 1.4rem; }
.wa-back{ background:none; border:0; color:var(--teal-deep); font-weight:700; cursor:pointer; padding:0; margin:0 0 1rem; font-size:.9rem; }
.wa-opts{ display:flex; flex-direction:column; gap:.8rem; }
.wa-opt{
  display:flex; align-items:center; gap:1rem; width:100%; text-align:left; cursor:pointer;
  background:var(--linen); border:1.5px solid var(--line); border-radius:var(--r-m); padding:1rem 1.1rem;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.wa-opt:hover{ border-color:var(--teal); transform:translateY(-2px); }
.wa-opt-hot{ border-color:rgba(224,169,62,.5); }
.wa-opt-ico{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--cream); color:var(--teal-deep); display:grid; place-content:center; box-shadow:var(--sh-s); }
.wa-opt-ico svg{ width:24px; height:24px; }
.wa-opt-txt{ flex:1; display:flex; flex-direction:column; }
.wa-opt-txt b{ color:var(--pine); font-size:1rem; }
.wa-opt-txt em{ font-style:normal; color:var(--ink-mute); font-size:.84rem; }
.wa-opt-arrow{ color:var(--teal); font-size:1.2rem; }
.wa-form{ display:flex; flex-direction:column; gap:.9rem; }
.wa-form label{ display:flex; flex-direction:column; gap:.35rem; font-size:.86rem; font-weight:700; color:var(--pine); min-width:0; }
.wa-form label em{ font-style:normal; font-weight:500; color:var(--ink-mute); }
.wa-form input{
  font-family:var(--f-text); font-size:1rem; padding:.7rem .7rem; border-radius:10px;
  border:1.5px solid var(--line); background:var(--cream); color:var(--ink);
  width:100%; min-width:0; box-sizing:border-box;
}
.wa-form input:focus{ outline:0; border-color:var(--teal); box-shadow:0 0 0 3px rgba(28,140,130,.16); }
/* minmax(0,...): permite que los inputs se encojan y NO se salgan del margen.
   Personas necesita poco; Día/Hora necesitan más ancho para mostrar la fecha completa. */
.wa-row{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.32fr) minmax(0,1.1fr); gap:.6rem; align-items:end; }
.wa-row-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.wa-chips{ border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.wa-chips legend{ font-size:.86rem; font-weight:700; color:var(--pine); margin-bottom:.5rem; padding:0; }
.wa-chip{ position:relative; }
.wa-chip input{ position:absolute; opacity:0; width:0; height:0; }
.wa-chip span{ display:block; padding:.5rem .9rem; border-radius:999px; border:1.5px solid var(--line); font-size:.85rem; font-weight:600; cursor:pointer; transition:all .2s var(--ease); }
.wa-chip input:checked + span{ background:var(--pine); color:var(--cream); border-color:var(--pine); }
.wa-hint{ font-size:.82rem; color:var(--ink-mute); margin:0; }
.qr{ display:grid; place-content:center; padding:1rem; background:#fff; border-radius:var(--r-m); margin:0 auto 1rem; width:max-content; box-shadow:var(--sh-s); }
.qr img{ width:184px; height:184px; image-rendering:pixelated; }
.wa-preview{ text-align:center; font-size:.84rem; color:var(--ink-mute); margin:0 0 1rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  /* HERO en columna: copy arriba, foto en flujo debajo, olas como base (no encima del texto) */
  .hero{ min-height:auto; flex-direction:column; align-items:stretch; padding:7rem 0 clamp(105px,24vw,165px); }
  .hero-in{ order:1; }
  .hero-copy{ max-width:none; }
  .hero-photo{ position:relative; order:2; width:100%; height:auto; aspect-ratio:16/11; margin-top:1.8rem; }
  .hero-stack .hs{
    -webkit-mask-image:radial-gradient(ellipse 92% 86% at 50% 44%, #000 50%, transparent 94%);
            mask-image:radial-gradient(ellipse 92% 86% at 50% 44%, #000 50%, transparent 94%);
  }
  .hero-cap{ right:6%; bottom:7%; }
  .hero h1{ font-size:clamp(2.6rem,9vw,4rem); }

  .concepto-in{ grid-template-columns:1fr; }
  .exp-grid{ grid-template-columns:1fr; }
  .quotes{ grid-template-columns:1fr; }
  .res-score{ grid-template-columns:1fr; text-align:center; gap:1.4rem; }
  .score-cta{ max-width:none; }
  .visita-in{ grid-template-columns:1fr; }
  .destacado-card{ grid-template-columns:1fr; }
  .destacado-card .d-body{ padding:0 1.4rem 1.4rem; }
  .carta-grid{ grid-template-columns:1fr; gap:0 2rem; }
  .foot-in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav-links{ display:none; }
  .nav.open-mob .mobnav, .mobnav.open{ display:flex; }
  .burger{ display:block; }
  .nav-cta{ display:none; }
  body{ font-size:16px; }
  .modal-card{ padding:1.7rem 1.3rem; }
  .foot-in{ grid-template-columns:1fr; }
  .amen{ columns:1; }
}
/* móvil angosto: los inputs de fecha/hora en 1 columna para que nunca se salgan del margen */
@media (max-width:520px){
  .wa-row, .wa-row-2{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .car-track{ transition:none; }
  *{ animation-duration:.001ms !important; }
}