/* ============================================================
   Aventos — estilos de la landing
   ============================================================ */

:root {
  --ink:        #17120E;
  --ink-deep:   #120E0A;
  --panel:      #211A15;
  --cream:      #FBF6EC;
  --cream-2:    #F1E7D4;
  --line-cream: #E4DAC8;
  --gold:       #C6A15B;
  --gold-soft:  #E7D3A1;
  --gold-deep:  #B08A3C;
  --gold-pale:  #DCC79A;
  --text:       #2B2118;
  --text-mid:   #6F6355;
  --text-soft:  #8A7C69;
  --text-faint: #A2937D;
  --on-dark:    #D7CBB6;
  --on-dark-2:  #B7AB98;
  --whatsapp:   #25623F;
  --danger:     #C0553F;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad-x: clamp(20px, 5vw, 44px);
  --radius: 16px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Gana contra los display:flex de los componentes que se ocultan por atributo. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: var(--gold-deep); text-decoration: none; }
button { font: inherit; }

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

.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;
}

.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 16px; height: 16px; stroke-width: 1.8; }
.ico-xs { width: 13px; height: 13px; stroke-width: 2.4; }
.ico-lg { width: 24px; height: 24px; }

/* ---------- media slots ---------- */

.slot { position: relative; overflow: hidden; background: #241c15; }
.slot-media { width: 100%; height: 100%; object-fit: cover; }
.slot.is-empty::after,
.slot.is-broken::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(198,161,91,.10), rgba(198,161,91,.02)),
    repeating-linear-gradient(45deg, rgba(231,211,162,.05) 0 12px, transparent 12px 24px);
}

/* ---------- splash ---------- */

@keyframes aymSplashOut { 0%, 66% { opacity: 1; visibility: visible } 100% { opacity: 0; visibility: hidden } }
@keyframes aymLogoIn    { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes aymBar       { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes aymFabIn     { 0%, 55% { opacity: 0; transform: translateY(12px) } 100% { opacity: 1; transform: none } }
@keyframes aymUp        { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

#splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  animation: aymSplashOut 1.6s ease forwards;
}
#splash .mark { text-align: center; animation: aymLogoIn .8s ease .4s both; }
#splash .mark b {
  display: block; font-family: var(--serif); font-size: 46px; line-height: 1;
  font-weight: 600; letter-spacing: .22em; color: #F5EEE1; padding-left: .22em;
}
#splash .mark span {
  display: block; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-soft);
  margin-top: 12px; padding-left: .2em; max-width: 88vw;
}
#splash .bar {
  width: 118px; height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(231, 211, 162, .18);
}
#splash .bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform-origin: left; animation: aymBar 1.35s var(--ease) forwards;
}

/* ---------- nav ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; gap: 14px;
  padding: 18px var(--pad-x);
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), padding .3s var(--ease), border-color .3s;
  border-bottom: 1px solid transparent;
}
/* Arriba de todo el nav es transparente y queda sobre la foto del hero.
   Este velo garantiza que los links se lean sin importar qué foto se cargue.
   Va detrás del contenido del nav, y se desvanece cuando el nav se pega y
   ya tiene fondo propio. */
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 11, 7, .90), rgba(15, 11, 7, .66) 62%, transparent);
  transition: opacity .3s var(--ease);
}
.nav.is-stuck::before { opacity: 0; }
.nav.is-stuck {
  background: rgba(18, 14, 10, .88);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(231, 211, 162, .14);
  padding-top: 12px; padding-bottom: 12px;
}
.nav .brand {
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  letter-spacing: .18em; color: #F5EEE1; margin-right: auto;
}
.nav .brand span { color: var(--gold-soft); }
.nav .links { display: flex; align-items: center; gap: 30px; }
.nav .links a {
  font-size: 12.5px; letter-spacing: .1em; color: #E4DAC8;
  transition: color .2s; position: relative; padding: 4px 0;
}
.nav .links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--gold); transition: right .28s var(--ease);
}
.nav .links a:hover { color: #FBF6EC; }
.nav .links a:hover::after { right: 0; }
.nav .burger {
  display: none; background: none; border: 0; color: #F5EEE1;
  padding: 8px; margin: -8px -4px -8px 0; cursor: pointer;
}

/* Fondo oscuro, no claro: este botón vive sobre la foto del hero y un velo
   claro le bajaba el contraste al texto justo sobre las zonas iluminadas. */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(15, 11, 7, .52); backdrop-filter: blur(6px);
  border: 1px solid rgba(231, 211, 162, .42); color: #F5EEE1;
  border-radius: 999px; padding: 10px 18px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: rgba(15, 11, 7, .74); border-color: var(--gold); color: #F5EEE1; }

/* menú móvil */
.drawer {
  position: fixed; inset: 0; z-index: 850;
  background: rgba(18, 14, 10, .97); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a {
  font-family: var(--serif); font-size: 32px; font-weight: 600;
  color: #F5EEE1; padding: 12px 20px;
}
.drawer a:hover { color: var(--gold-soft); }
.drawer .close {
  position: absolute; top: 18px; right: var(--pad-x);
  background: none; border: 0; color: #F5EEE1; padding: 10px; cursor: pointer;
}

/* ---------- hero ----------
   Grilla de dos columnas: panel sólido a la izquierda, la foto a
   la derecha, y la barra de datos cruzando las dos abajo. El texto nunca
   se apoya sobre una foto, así que el contraste no depende de la imagen
   que se cargue después desde el panel de medios. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    'panel foto'
    'stats stats';
  min-height: clamp(600px, 92vh, 800px);
  background: var(--ink);
  overflow: hidden;
}

/* ---- panel de texto ---- */

.hero-panel {
  grid-area: panel;
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(96px, 12vh, 130px) clamp(28px, 4vw, 62px) clamp(40px, 6vh, 64px) var(--pad-x);
  background: var(--ink);
}
/* Un halo cálido apenas perceptible, para que el panel no sea un rectángulo muerto.
   Va detrás del texto y no le baja el contraste de forma apreciable. */
.hero-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 12% 24%, rgba(198, 161, 91, .13), transparent 62%);
}
.hero-panel > * { position: relative; }

.hero .eyebrow {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-soft); margin: 0 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.hero .eyebrow::before {
  content: ''; width: 26px; height: 1px; background: var(--gold); flex: none;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.05vw, 54px); line-height: 1.05;
  color: #FBF6EC; font-weight: 600; margin: 0;
  letter-spacing: -.015em; text-wrap: pretty;
}
.hero h1 em {
  font-style: italic; font-weight: 500; color: var(--gold-soft);
}

.hero .script {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--gold-pale); font-weight: 500;
  margin: 18px 0 0;
}

.hero .lead {
  font-size: 15.5px; line-height: 1.65; color: var(--on-dark);
  max-width: 46ch; margin: 20px 0 30px;
}

.hero .cta { display: flex; flex-wrap: wrap; gap: 13px; }

/* ---- foto ---- */

.hero-foto {
  grid-area: foto;
  position: relative; overflow: hidden;
  background: var(--ink);
}
/* El borde de la foto se disuelve contra el color del panel, así no hay una
   costura dura entre los dos. El fundido pasa entero dentro de la columna de
   la foto: el texto nunca se acerca, así que el contraste sigue intacto.
   Se escriben los cortes en rgba y no con `transparent` porque `transparent`
   es negro con alfa 0 y algunos navegadores dejan una banda grisácea. */
.hero-foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(23, 18, 14, 1) 0%,
      rgba(23, 18, 14, .93) 5%,
      rgba(23, 18, 14, .62) 14%,
      rgba(23, 18, 14, .26) 25%,
      rgba(23, 18, 14, .07) 34%,
      rgba(23, 18, 14, 0) 42%),
    linear-gradient(200deg, rgba(15, 11, 7, .18), rgba(15, 11, 7, .04) 46%, rgba(15, 11, 7, .3));
}

/* Deriva lenta: sólo `transform`, que la GPU compone sin repintar ni recalcular
   nada. Arranca ya escalada para que al desplazarse nunca asome un borde.
   34 segundos por vuelta: en un fotograma se mueve una fracción de píxel. */
@keyframes aymDeriva {
  from { transform: scale(1.05); }
  to   { transform: scale(1.11) translate(-1.6%, -1.1%); }
}
.hero-foto .slot-media {
  animation: aymDeriva 34s var(--ease) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .hero-foto .slot-media { animation: none; transform: none; }
}

/* ---- barra de datos ---- */

.hero .stats {
  grid-area: stats;
  display: flex; flex-wrap: wrap;
  background: var(--ink-deep);
  border-top: 1px solid rgba(231, 211, 162, .16);
}
.hero .stats div {
  flex: 1 1 160px; padding: 17px 24px;
  display: flex; align-items: baseline; gap: 8px;
}
.hero .stats div:first-child { padding-left: var(--pad-x); }
.hero .stats b {
  font-family: var(--serif); font-size: 26px;
  color: var(--gold-soft); font-weight: 600;
}
.hero .stats span {
  font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-dark-2);
}

/* ---- responsive ----
   Debajo de 900px se apila: primero una banda de fotos, después el texto.
   Así en el celular entra una imagen y el título en la primera pantalla. */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      'foto'
      'panel'
      'stats';
    min-height: 0;
  }
  .hero-foto {
    height: clamp(220px, 34vh, 300px);
    margin-top: 64px;                  /* deja respirar al nav fijo */
  }
  /* Apilado, el panel queda debajo: el fundido pasa a ser vertical. */
  .hero-foto::after {
    background:
      linear-gradient(180deg,
        rgba(23, 18, 14, 0) 46%,
        rgba(23, 18, 14, .3) 68%,
        rgba(23, 18, 14, .72) 86%,
        rgba(23, 18, 14, 1) 100%),
      linear-gradient(200deg, rgba(15, 11, 7, .2), rgba(15, 11, 7, .04) 52%, rgba(15, 11, 7, .12));
  }

  .hero-panel {
    padding: clamp(32px, 6vw, 48px) var(--pad-x) clamp(34px, 6vw, 46px);
  }
  .hero h1 { font-size: clamp(32px, 8vw, 44px); }
  .hero .lead { max-width: none; }
}


.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; padding: 16px 32px; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; border: none;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #D6B26C; transform: translateY(-2px); }
.btn-outline {
  background: rgba(251, 246, 236, .08); backdrop-filter: blur(6px);
  color: #F5EEE1; border: 1px solid rgba(245, 238, 225, .4); font-weight: 500;
}
.btn-outline:hover { background: rgba(251, 246, 236, .18); transform: translateY(-2px); }
.btn-whats { background: var(--whatsapp); color: #fff; font-weight: 500; letter-spacing: .12em; }
.btn-whats:hover { background: #1E5334; transform: translateY(-2px); }

/* ---------- estructura de secciones ---------- */

section[id] { scroll-margin-top: 72px; }

.sec { padding: 86px var(--pad-x) 94px; }
.sec-cream { background: var(--cream); color: var(--text); }
.sec-dark  { background: var(--ink); color: #F1E9DB; }
.sec-glow  { background: radial-gradient(900px 500px at 50% 0%, var(--cream), var(--cream-2)); color: var(--text); }

.head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 46px; }
.head .num {
  font-family: var(--serif); font-size: 44px; line-height: .8;
  font-weight: 600; color: var(--gold-pale);
}
.sec-dark .head .num { color: #5C4E38; }
.head .mid { flex: 1; min-width: 0; }
.head .kicker {
  font-family: var(--serif); font-style: italic; font-size: 20px;
  color: var(--gold-deep); margin-bottom: 2px;
}
.sec-dark .head .kicker { color: var(--gold-soft); }
.head h2 {
  font-family: var(--serif); font-size: clamp(30px, 5.6vw, 46px);
  line-height: 1.02; font-weight: 600; margin: 0; color: var(--text);
}
.sec-dark .head h2 { color: var(--cream); }
.head .note {
  max-width: 340px; font-size: 14px; line-height: 1.6;
  color: #77695A; padding-bottom: 6px;
}
.sec-dark .head .note { color: var(--on-dark-2); }

.head-center { text-align: center; max-width: 680px; margin: 0 auto 42px; }
.head-center .num { margin-bottom: 14px; }
.head-center h2 { margin-bottom: 14px; }
.head-center p { font-size: 15px; line-height: 1.6; color: var(--text-mid); margin: 0; }

.label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}

/* ---------- salones ---------- */

.salon-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.salon-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-cream);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 18px 40px -30px rgba(43, 33, 24, .32);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.salon-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(43, 33, 24, .42); }

/* La portada es el botón que abre la galería: ocupa toda el área de la foto. */
.salon-card .frame {
  position: relative; display: block; width: 100%;
  height: 220px; border: 0; padding: 0; margin: 0;
  background: #241c15; cursor: pointer;
}
.salon-card .frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 11, 7, .34));
  pointer-events: none;
}

.salon-card .body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }

.salon-card .sede {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 9px;
}
.salon-card .sede .ico { color: var(--gold-deep); }

.salon-card h3 {
  font-family: var(--serif); font-size: 28px; color: var(--text);
  font-weight: 600; margin: 0; line-height: 1.05;
}

.salon-card .cap { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; }
.salon-card .cap b {
  font-family: var(--serif); font-size: 26px; line-height: 1;
  color: var(--gold-deep); font-weight: 700;
}
.salon-card .cap span {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-soft);
}

.salon-card .feats {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.salon-card .feats li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.45; color: #5E5344;
}
.salon-card .feats .ico { color: var(--gold); flex: none; margin-top: 2px; }

.salon-card .dir {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; font-size: 12px; line-height: 1.4;
  color: var(--text-soft);
}
.salon-card .dir .ico { color: var(--gold-deep); flex: none; margin-top: 2px; }

/* Empuja el botón de galería al pie, así todas las tarjetas lo alinean. */
.salon-card .more { margin-top: auto; padding-top: 18px; }
.salon-card .more button {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep);
  transition: gap .2s var(--ease);
}
.salon-card .more button:hover { gap: 13px; }

.chip {
  position: absolute; left: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(15, 11, 7, .58); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 7px 13px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #F3E9D6; border: 0; cursor: pointer;
  transition: background .2s, transform .2s;
}
.chip:hover { background: rgba(15, 11, 7, .82); transform: translateY(-1px); }

.cap { display: flex; align-items: flex-end; gap: 10px; }
.cap b {
  font-family: var(--serif); font-size: 72px; line-height: .8;
  color: var(--gold); font-weight: 700;
}
.cap span {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-soft); padding-bottom: 8px;
}

.feats { display: flex; flex-wrap: wrap; gap: 12px; }
.feats div {
  flex: 1 1 44%; min-width: 150px;
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--line-cream);
  border-radius: 12px; padding: 13px 15px;
  font-size: 13px; color: #3C3226;
}
.feats .ico { color: var(--gold-deep); }


/* ---- carrusel de salones en celular ----
   Debajo de 700px la grilla se vuelve una tira que se desliza con el dedo.
   Usa scroll-snap del navegador, así que tiene la inercia del sistema y
   funciona igual si el JavaScript no carga: sólo los puntitos necesitan JS. */

.salon-dots { display: none; }

@media (max-width: 700px) {
  .salon-strip {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* La tira sangra hasta el borde de la pantalla, pero la primera tarjeta
       queda alineada con el resto del texto. */
    margin: 0 calc(var(--pad-x) * -1);
    padding: 4px var(--pad-x) 6px;
  }
  .salon-strip::-webkit-scrollbar { display: none; }

  .salon-grid {
    display: flex;
    gap: 15px;
    width: max-content;
  }
  .salon-card {
    flex: 0 0 min(83vw, 330px);
    scroll-snap-align: center;
  }
  /* Las tarjetas de la derecha nunca entran al viewport, así que su animación
     de aparición no se dispararía nunca: en el carrusel se muestran directo. */
  .js .salon-strip .reveal { opacity: 1; animation: none; }

  .salon-dots {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 8px; margin-top: 20px;
  }
  .salon-dots button {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: var(--line-cream); cursor: pointer;
    transition: background .25s, transform .25s;
  }
  .salon-dots button.is-on { background: var(--gold-deep); transform: scale(1.4); }
}

/* ---------- servicios y menús ---------- */

.menus { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.menu-card {
  flex: 1 1 300px; min-width: 260px;
  background: var(--panel); border: 1px solid rgba(231, 211, 162, .16);
  border-radius: var(--radius); padding: 26px 24px;
  transition: border-color .25s, transform .25s var(--ease);
}
.menu-card:hover { border-color: rgba(231, 211, 162, .4); transform: translateY(-3px); }
.menu-card .top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.menu-card .bubble {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(198, 161, 91, .15); color: var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
}
.badge {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); background: var(--gold-soft);
  padding: 5px 11px; border-radius: 20px;
}
.menu-card h3 {
  font-family: var(--serif); font-size: 28px; color: var(--cream);
  font-weight: 600; margin: 0;
}
.menu-card .sub { font-size: 12.5px; color: #9C8E79; margin: 2px 0 16px; }
.menu-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.menu-card li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--on-dark); }
.menu-card li .ico { color: var(--gold); margin-top: 1px; }

.notice {
  display: flex; align-items: center; gap: 12px;
  background: rgba(198, 161, 91, .1); border: 1px solid rgba(231, 211, 162, .2);
  border-radius: 12px; padding: 14px 20px; margin-bottom: 46px;
  font-size: 13.5px; color: var(--gold-soft);
}
.notice strong { font-weight: 500; color: var(--cream); }

.servicios { display: flex; flex-wrap: wrap; gap: 14px; }
.serv {
  flex: 1 1 150px; min-width: 140px;
  background: var(--panel); border: 1px solid rgba(231, 211, 162, .14);
  border-radius: 14px; padding: 20px 18px;
  transition: border-color .25s, transform .25s var(--ease);
}
.serv:hover { border-color: rgba(231, 211, 162, .38); transform: translateY(-3px); }
.serv .ico { color: var(--gold-soft); margin-bottom: 12px; }
.serv b {
  display: block; font-family: var(--serif); font-size: 21px;
  color: var(--cream); font-weight: 600;
}
.serv small { display: block; font-size: 11.5px; color: var(--on-dark-2); margin-top: 3px; }
.serv-hi { background: linear-gradient(150deg, #3A2C17, #241A12); border-color: rgba(231, 211, 162, .28); }

/* ---------- contacto ---------- */

.contacto { display: flex; flex-wrap: wrap; gap: 44px; padding-bottom: 64px; }
.contacto .mapa { flex: 1 1 440px; min-width: 300px; }
.contacto .datos { flex: 1 1 360px; min-width: 300px; }
.contacto .frame {
  border-radius: 18px; overflow: hidden;
  height: clamp(240px, 38vw, 320px); position: relative;
}
.mapa-embed { width: 100%; height: 100%; border: 0; display: block; }

.contacto .frame .tag {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(15, 11, 7, .64); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 9px 16px; font-size: 12px; color: #F3E9D6;
  pointer-events: none;
}
.contacto h2 {
  font-family: var(--serif); font-size: 44px; line-height: 1;
  color: var(--cream); font-weight: 600; margin: 0 0 26px;
}
.datalist { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.datalist > div { display: flex; align-items: flex-start; gap: 14px; }
.datalist .ico { color: var(--gold); margin-top: 2px; }
.datalist dt {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #9C8E79; margin-bottom: 3px;
}
.datalist dd { margin: 0; font-size: 15px; color: #EBDFC9; }
.datalist a { color: #EBDFC9; }
.datalist a:hover { color: var(--gold-soft); }

.footer-bar {
  border-top: 1px solid rgba(231, 211, 162, .14);
  padding: 26px 0; display: flex; flex-wrap: wrap;
  gap: 14px; align-items: center; justify-content: space-between;
}
.footer-bar .brand {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  letter-spacing: .16em; color: #F1E9DB;
}
.footer-bar .brand span {
  display: block; font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-top: 6px;
}
.footer-bar small { font-size: 11.5px; color: #7C7060; letter-spacing: .06em; }
.footer-bar a { color: #7C7060; }
.footer-bar a:hover { color: var(--gold-soft); }

/* ---------- FAB ---------- */

.fab {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  z-index: 700; display: inline-flex; align-items: center; gap: 10px;
  background: var(--gold); color: var(--ink);
  border-radius: 999px; padding: 15px 24px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 14px 32px -12px rgba(23, 18, 14, .55);
  animation: aymFabIn 2.1s ease both;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.fab:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(23, 18, 14, .6); }

/* ---------- reseñas ----------
   La burbuja es un guiño al chat, no una captura falsa: no hay barra de
   estado, ni foto de contacto, ni tildes de "visto". El texto es real. */

.rev { position: relative; max-width: 760px; margin: 0 auto; }

.rev-viewport { overflow: hidden; cursor: grab; touch-action: pan-y; }
.rev-viewport.is-dragging { cursor: grabbing; }

.rev-track {
  display: flex; align-items: stretch;
  will-change: transform;
  transition: transform .42s var(--ease);
}
.rev-track.no-anim { transition: none; }

.rev-slide {
  flex: 0 0 100%; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 6px 0;
}

/* la burbuja */
.rev-slide p {
  position: relative; margin: 0; max-width: 560px;
  background: #fff; border: 1px solid var(--line-cream);
  border-radius: 18px 18px 18px 4px;
  padding: 20px 24px;
  font-size: clamp(15px, 1.9vw, 17px); line-height: 1.6;
  color: #3C3226;
  box-shadow: 0 14px 32px -24px rgba(43, 33, 24, .5);
}
/* la colita del globo */
.rev-slide p::after {
  content: ''; position: absolute; left: -1px; bottom: -9px;
  width: 16px; height: 10px;
  background: #fff;
  border-left: 1px solid var(--line-cream);
  border-bottom: 1px solid var(--line-cream);
  border-radius: 0 0 0 3px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.rev-slide cite {
  display: block; font-style: normal; text-align: center;
  margin-top: 26px;
}
.rev-slide cite b {
  display: block; font-family: var(--serif); font-size: 20px;
  font-weight: 600; color: var(--text);
}
.rev-slide cite span {
  display: block; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-deep); margin-top: 4px;
}

/* puntitos */
.rev-dots {
  display: flex; justify-content: center; gap: 9px; margin-top: 22px;
}
.rev-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line-cream); cursor: pointer;
  transition: background .25s, transform .25s;
}
.rev-dots button:hover { background: var(--gold-pale); }
.rev-dots button.is-on { background: var(--gold-deep); transform: scale(1.35); }

/* flechas */
.rev-arrow {
  position: absolute; top: 78px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line-cream); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 20px -14px rgba(43, 33, 24, .55);
  transition: background .2s, opacity .2s, border-color .2s;
}
.rev-arrow:hover { background: var(--cream-2); border-color: var(--gold-pale); }
.rev-arrow[disabled] { opacity: .3; cursor: default; }
.rev-arrow.prev { left: -8px; }
.rev-arrow.next { right: -8px; }

/* En celular las flechas taparían la burbuja: se pasa con el dedo. */
@media (max-width: 860px) {
  .rev-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rev-track { transition: none; }
}

/* ---------- lightbox: carrusel ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 8, 5, .96);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

/* barra superior */
.lb-bar {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: clamp(12px, 2.4vw, 20px) clamp(14px, 3vw, 26px);
}
.lb-title {
  font-family: var(--serif); font-size: clamp(16px, 2.4vw, 21px);
  color: #F5EEE1; margin-right: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-count {
  flex: none; font-size: 12px; letter-spacing: .16em;
  color: var(--gold-soft); font-variant-numeric: tabular-nums;
}

/* viewport + track */
.lb-viewport {
  flex: 1; min-height: 0; overflow: hidden;
  cursor: grab; touch-action: pan-y;
}
.lb-viewport.is-dragging { cursor: grabbing; }

.lb-track {
  display: flex; height: 100%;
  will-change: transform;
  transition: transform .42s var(--ease);
}
/* Mientras el dedo arrastra, el track sigue al dedo sin animación de por medio. */
.lb-track.no-anim { transition: none; }

.lb-slide {
  flex: 0 0 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(14px, 3vw, 40px);
}
.lb-slide img, .lb-slide video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 10px; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
  -webkit-user-drag: none; user-select: none;
}
/* Placeholder mientras la foto todavía no llegó. */
.lb-slide.is-loading::after {
  content: ''; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(231, 211, 162, .25); border-top-color: var(--gold);
  animation: aymSpin .7s linear infinite;
}
@keyframes aymSpin { to { transform: rotate(360deg) } }

.lb-caption {
  flex: none; margin: 0; padding: 12px clamp(14px, 3vw, 26px) 0;
  font-size: 13px; color: var(--on-dark-2); text-align: center;
  min-height: 19px;
}

/* tira de miniaturas */
.lb-film {
  flex: none; display: flex; gap: 8px;
  padding: 14px clamp(14px, 3vw, 26px) clamp(14px, 3vw, 22px);
  overflow-x: auto; scrollbar-width: thin;
  scrollbar-color: rgba(231, 211, 162, .3) transparent;
}
.lb-film::-webkit-scrollbar { height: 6px; }
.lb-film::-webkit-scrollbar-thumb { background: rgba(231, 211, 162, .3); border-radius: 3px; }
.lb-film button {
  flex: none; width: 68px; height: 46px; padding: 0;
  border: 0; border-radius: 6px; overflow: hidden; cursor: pointer;
  background: #241c15; opacity: .48;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: opacity .2s, outline-color .2s;
}
.lb-film button:hover { opacity: .82; }
.lb-film button.is-on { opacity: 1; outline-color: var(--gold); }
.lb-film img { width: 100%; height: 100%; object-fit: cover; }

/* controles */
.lightbox .x, .lightbox .prev, .lightbox .next {
  background: rgba(251, 246, 236, .1);
  border: 1px solid rgba(231, 211, 162, .28); color: #F5EEE1;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, opacity .2s;
}
.lightbox .x { flex: none; }
.lightbox .x:hover, .lightbox .prev:hover, .lightbox .next:hover { background: rgba(251, 246, 236, .24); }
.lightbox .prev, .lightbox .next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
}
.lightbox .prev { left: clamp(10px, 2vw, 26px); }
.lightbox .next { right: clamp(10px, 2vw, 26px); }
.lightbox .prev[disabled], .lightbox .next[disabled] { opacity: .25; cursor: default; }

/* En pantallas chicas las flechas estorban: se pasa con el dedo. */
@media (max-width: 640px) {
  .lightbox .prev, .lightbox .next { display: none; }
  .lb-film button { width: 54px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-track { transition: none; }
}

/* ---------- reveal al hacer scroll ----------
   Solo se esconde si el JS está andando: sin JS la página se ve entera. */

.js .reveal { opacity: 0; }
.js .reveal.is-in { animation: aymUp .7s var(--ease) both; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .nav .links { display: none; }
  .nav .burger { display: block; }
  .head { flex-wrap: wrap; gap: 14px; }
  .head .note { max-width: none; flex: 1 1 100%; }
  .cap b { font-size: 60px; }
  .contacto h2 { font-size: 36px; }
}

@media (max-width: 560px) {
  .sec { padding: 62px var(--pad-x) 68px; }
  .hero .stats div { flex: 1 1 50%; padding: 13px 18px; }
  .hero .stats div:first-child { padding-left: var(--pad-x); }
  .hero .stats b { font-size: 22px; }
  .hero .stats span { font-size: 10px; }
  .btn { padding: 15px 24px; flex: 1 1 auto; }
  .thumbs .t { height: 76px; }
  .fab { padding: 13px 18px; font-size: 11px; }
  .head .num { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; }
}