/* ═══════════════════════════════════════════════════════════════════
   SUITES LAS PALMAS · Zona Rosa, San Salvador
   Rediseño Unity360 — v3, 2026-08-31

   La paleta NO se eligió: se midió sobre la fotografía del hotel
   (38 originales, cuantización mediana por grupos). El edificio es de
   caoba y crema —los interiores viven entre H 20° y 45°— y el único
   color saturado que posee es el azul de la piscina de la azotea
   contra el cielo. Ese azul es el acento y ordena la página.

   Estructura clásica de hotel, con peso en contenido indexable:
   hero (lobby) → el hotel → suites → amenidades → negocios →
   ubicación → restaurante → reserva directa → guías → FAQ → contacto.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* medidos sobre los interiores */
  --tinta:       #2A1710;
  --tinta-2:     #3D2418;
  --caoba:       #6B4A2E;
  --laton:       #B9975B;
  --laton-claro: #D9BE8A;
  --arena:       #DCCFB8;
  --papel:       #F5F1E8;
  --papel-2:     #EBE4D6;

  /* medidos sobre la azotea */
  --agua:        #2F6FB8;
  --agua-honda:  #1D4E86;
  --cielo:       #DCE7F8;

  --wa:          #1EA855;

  --borde:       rgba(42, 23, 16, 0.14);
  --borde-claro: rgba(245, 241, 232, 0.18);

  --serif: 'Petrona', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Las máscaras del logo se declaran AQUÍ y no en el HTML: en una custom
     property, el url() se resuelve contra la hoja donde se USA la variable,
     no donde se declara. Declararlas en el <style> del documento hacía que
     el navegador las buscara en assets/css/assets/img/. */
  --m-palma:    url('../img/logo-palma.png');
  --m-wordmark: url('../img/logo-wordmark.png');
  --m-lockup:   url('../img/logo-lockup.png');

  --wrap: 1240px;
  --ease: cubic-bezier(0.22, 0.8, 0.32, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--papel);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* `height: auto` no es opcional: cuando el <img> trae los atributos width y
   height —que hay que ponerlos, para reservar el espacio y evitar saltos de
   layout— el navegador los toma como alto especificado y **ignora
   `aspect-ratio`**. Sin esto, la foto de Zona Rosa salía de 675 px de alto
   en una columna de 462. Las reglas que fijan `height: 100%` ganan por
   especificidad y siguen funcionando. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
figure { margin: 0; }

::selection { background: var(--agua); color: #fff; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--tinta); color: var(--papel);
  padding: 0.8rem 1.4rem; font-size: 0.85rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* ─── tipografía ────────────────────────────────────────────────────
   Petrona (Omnibus-Type, Buenos Aires) carga los titulares. Su itálica
   es el eco de la guardamalleta del logo: donde el logo escribe a mano,
   la página se inclina. Es el único gesto caligráfico que se permite. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -0.018em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.95rem, 3.9vw, 3.05rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.42rem); line-height: 1.22; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; }

p { max-width: 68ch; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--caoba);
  margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--laton); flex: none; }
.eyebrow.center { justify-content: center; }

.lede {
  font-size: clamp(1.03rem, 1.3vw, 1.14rem);
  line-height: 1.75;
  color: rgba(42, 23, 16, 0.82);
  max-width: 62ch;
}

.nota {
  margin-top: 2rem;
  font-size: 0.82rem; line-height: 1.65;
  color: rgba(42, 23, 16, 0.6);
  max-width: 82ch;
  padding-left: 0.9rem;
  border-left: 2px solid var(--laton);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }

section { padding-block: clamp(4rem, 7.5vw, 6.5rem); }

/* El nav es fijo: sin esto, saltar a un ancla deja el titular debajo. */
section[id], header[id], .booking[id] { scroll-margin-top: 84px; }

/* ─── logo por máscara alfa ─────────────────────────────────────────
   Un solo archivo por pieza, pintado con currentColor. Ver _build_logo.py */
.logo-mark, .logo-word, .logo-lockup {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.logo-mark   { -webkit-mask-image: var(--m-palma);    mask-image: var(--m-palma);    aspect-ratio: 405 / 311; }
.logo-word   { -webkit-mask-image: var(--m-wordmark); mask-image: var(--m-wordmark); aspect-ratio: 1311 / 131; }
.logo-lockup { -webkit-mask-image: var(--m-lockup);   mask-image: var(--m-lockup);   aspect-ratio: 1311 / 466; }

/* ─── botones ───────────────────────────────────────────────────────
   .btn lleva el padding; las variantes solo tocan color, para que no se
   cancelen entre sí por orden de cascada. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.035em;
  text-decoration: none;
  border: 1.5px solid transparent; border-radius: 2px;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-agua  { background: var(--agua-honda); color: #fff; }
.btn-agua:hover { background: var(--tinta); }
.btn-tinta { background: var(--tinta); color: var(--papel); }
.btn-tinta:hover { background: var(--agua-honda); }
.btn-linea { background: transparent; color: var(--tinta); border-color: rgba(42,23,16,0.35); }
.btn-linea:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.btn-clara { background: transparent; color: var(--papel); border-color: rgba(245,241,232,0.45); }
.btn-clara:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.btn-sm { padding: 0.72rem 1.35rem; font-size: 0.8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }

/* ─── reveals ───────────────────────────────────────────────────────*/
.rv { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-1 { transition-delay: 0.1s; }
.rv-2 { transition-delay: 0.2s; }
.rv-3 { transition-delay: 0.3s; }

/* ═══ NAV ═══════════════════════════════════════════════════════════*/
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem clamp(1.25rem, 5vw, 3rem);
  color: var(--papel);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.stuck {
  background: rgba(42, 23, 16, 0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding-block: 0.65rem;
  box-shadow: 0 8px 34px rgba(20, 10, 6, 0.3);
}
.nav-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; flex: none; }
.nav-brand .logo-mark { width: 29px; flex: none; }
/* Arriba, el hero ya muestra el lockup grande: repetir la guardamalleta
   en la barra es decir dos veces lo mismo. Aparece al hacer scroll. */
.nav-brand .logo-word { width: 0; opacity: 0; transition: width 0.4s var(--ease), opacity 0.35s var(--ease); }
.nav.stuck .nav-brand .logo-word { width: 142px; opacity: 1; }

.nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.75rem); list-style: none; }
.nav-links a {
  font-size: 0.82rem; font-weight: 500; text-decoration: none;
  white-space: nowrap; opacity: 0.9; position: relative; padding-block: 0.3rem;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--laton-claro); transition: right 0.35s var(--ease);
}
.nav-links a:hover::after { right: 0; }

.nav-burger { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 0.4rem; }
.nav-burger span { display: block; width: 24px; height: 1.5px; background: currentColor; margin: 5px 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: 0; z-index: 190;
  background: var(--tinta); color: var(--papel);
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
  padding: 5rem clamp(1.5rem, 8vw, 3rem) 3rem;
  transform: translateX(100%); transition: transform 0.45s var(--ease);
  overflow-y: auto;
}
.nav-drawer.open { transform: none; }
.nav-drawer a {
  font-family: var(--serif); font-size: clamp(1.4rem, 5vw, 1.8rem);
  text-decoration: none; padding-block: 0.45rem; border-bottom: 1px solid var(--borde-claro);
}
.nav-drawer .drawer-foot { margin-top: 1.8rem; font-size: 0.85rem; color: rgba(245,241,232,0.65); line-height: 1.9; }

/* ═══ HERO ══════════════════════════════════════════════════════════*/
.hero {
  position: relative;
  min-height: min(92svh, 780px);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--papel); overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
/* Velo medido para que el cuerpo quede sobre 4.5:1 en el p95 de la foto. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(20, 10, 6, 0.93) 0%, rgba(20, 10, 6, 0.78) 30%,
    rgba(20, 10, 6, 0.40) 62%, rgba(20, 10, 6, 0.52) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 7rem clamp(1.25rem, 5vw, 3rem) 2.6rem;
}
.hero .logo-lockup {
  width: clamp(140px, 15vw, 190px);
  margin-bottom: clamp(1.2rem, 2.4vw, 1.9rem);
  opacity: 0; animation: fade-up 1.1s var(--ease) 0.15s forwards;
}
.hero-eyebrow {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--laton-claro);
  margin-bottom: 1rem; text-wrap: balance;
  opacity: 0; animation: fade-up 1s var(--ease) 0.3s forwards;
}
.hero h1 {
  max-width: 17ch; margin-bottom: 1.3rem; text-wrap: balance;
  opacity: 0; animation: fade-up 1.15s var(--ease) 0.42s forwards;
}
.hero h1 em { color: var(--laton-claro); }
.hero-sub {
  max-width: 58ch; font-size: clamp(0.99rem, 1.25vw, 1.1rem); line-height: 1.72;
  color: rgba(245, 241, 232, 0.88); margin-bottom: 1.9rem;
  opacity: 0; animation: fade-up 1.1s var(--ease) 0.6s forwards;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; opacity: 0; animation: fade-up 1.1s var(--ease) 0.74s forwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ═══ BUSCADOR ══════════════════════════════════════════════════════
   No es un iframe. Es un formulario propio que entrega al huésped a
   Cloudbeds con las fechas ya puestas — patrón validado del workspace. */
.booking { position: relative; z-index: 3; background: var(--papel); border-top: 3px solid var(--agua-honda); }
.booking-inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 1.5rem clamp(1.25rem, 5vw, 3rem) 1.6rem; }
.booking-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 1rem 1.4rem; align-items: end; }
.bk-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.bk-field label {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--caoba);
}
.bk-field input, .bk-field select {
  font-family: var(--sans); font-size: 0.94rem; font-weight: 500; color: var(--tinta);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--borde);
  padding: 0.5rem 0 0.55rem; width: 100%; border-radius: 0;
  transition: border-color 0.3s var(--ease);
}
.bk-field input:hover, .bk-field select:hover,
.bk-field input:focus, .bk-field select:focus { border-bottom-color: var(--agua); }
.bk-field input[type="date"] { min-height: 2.25rem; }
.booking .btn { align-self: end; }
.bk-note { grid-column: 1 / -1; font-size: 0.76rem; color: rgba(42, 23, 16, 0.62); max-width: none; }
.bk-note b { color: var(--tinta); font-weight: 600; }
.bk-error { grid-column: 1 / -1; font-size: 0.8rem; font-weight: 600; color: #A3341F; max-width: none; }
.bk-error[hidden] { display: none; }

/* ═══ FRANJA DE HECHOS ══════════════════════════════════════════════*/
.facts { background: var(--tinta); color: var(--papel); padding-block: 0; }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); border-left: 1px solid var(--borde-claro); }
.fact { padding: 1.6rem clamp(1rem, 2vw, 1.6rem); border-right: 1px solid var(--borde-claro); }
.fact-num { font-family: var(--serif); font-size: 1.8rem; line-height: 1; color: var(--laton-claro); margin-bottom: 0.4rem; font-variant-numeric: tabular-nums; }
.fact-lbl { font-size: 0.84rem; line-height: 1.45; color: rgba(245, 241, 232, 0.76); }

/* ═══ EL HOTEL ══════════════════════════════════════════════════════*/
.hotel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: start; }
.hotel-copy h2 { max-width: 15ch; margin-bottom: 1.3rem; }
.hotel-copy h2 em { color: var(--agua-honda); }
.hotel-copy p { margin-bottom: 1.1rem; color: rgba(42, 23, 16, 0.86); }
.hotel-copy strong { font-weight: 600; color: var(--tinta); }
.hotel-marks { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.hotel-marks li {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.03em;
  padding: 0.42rem 0.8rem; background: var(--papel-2); border-radius: 2px; color: var(--caoba);
}
.hotel-media { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.hotel-media figure { overflow: hidden; border-radius: 2px; }
.hotel-media img { width: 100%; height: 100%; object-fit: cover; }
.hm-big { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.hm-small { aspect-ratio: 1 / 1; }

/* ═══ SUITES ════════════════════════════════════════════════════════*/
.suites { background: var(--papel-2); }
.suites-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.suites-head h2 { max-width: 16ch; margin-bottom: 0.9rem; }
.suites-head h2 em { color: var(--agua-honda); }
.suites-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.3rem, 2.2vw, 1.8rem); }
.suite {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--borde); border-radius: 2px; overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.suite:hover { border-color: var(--agua); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(42, 23, 16, 0.11); }
.suite-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--papel-2); }
.suite-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.suite:hover .suite-photo img { transform: scale(1.04); }
.suite-pax {
  position: absolute; top: 0.8rem; left: 0.8rem;
  background: rgba(42, 23, 16, 0.86); color: var(--papel);
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem; border-radius: 2px;
}
.suite-body { padding: 1.35rem 1.45rem 1.45rem; display: flex; flex-direction: column; flex: 1; }
.suite-body h3 { margin-bottom: 0.7rem; }
.suite-body > p { font-size: 0.92rem; color: rgba(42, 23, 16, 0.78); margin-bottom: 1.1rem; }
.suite-feats { list-style: none; display: flex; flex-wrap: wrap; gap: 0.38rem; margin-bottom: 1.2rem; }
.suite-feats li { font-size: 0.78rem; color: rgba(42, 23, 16, 0.72); padding: 0.26rem 0.58rem; background: var(--papel-2); border-radius: 2px; }
.suite-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.05rem; border-top: 1px solid var(--borde); }
/* El sitio NO publica tarifas (decisión del CEO, 2026-08-31): un precio
   escrito aquí caduca solo y obliga a mantener dos fuentes. El motor manda. */
.suite-nota { line-height: 1.3; font-size: 0.9rem; font-weight: 600; color: var(--tinta); }
.suite-nota small { display: block; font-family: var(--mono); font-size: 0.61rem; font-weight: 400; letter-spacing: 0.06em; color: rgba(42, 23, 16, 0.55); text-transform: uppercase; margin-top: 0.1rem; }

/* ═══ AMENIDADES ════════════════════════════════════════════════════*/
.amen-head { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.amen-head h2 { max-width: 16ch; margin-bottom: 0.9rem; }
.amen-head h2 em { color: var(--agua-honda); }
.amen-feature { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.af-photo { overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; }
.af-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Columnas fijas y no auto-fit: la retícula de 1px pinta el fondo, así que
   una celda vacía se ve como un bloque gris. 16 amenidades ÷ 4 = 4 filas
   exactas; 6 tarjetas ÷ 3 = 2 filas. Los cortes responsive mantienen la
   división exacta. */
.amen-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); }
.am { background: var(--papel); padding: 1.35rem 1.3rem; }
.am h3 { font-size: 1.06rem; margin-bottom: 0.4rem; }
.am p { font-size: 0.86rem; line-height: 1.6; color: rgba(42, 23, 16, 0.72); }

/* ═══ NEGOCIOS ══════════════════════════════════════════════════════*/
.negocios { background: var(--tinta); color: var(--papel); }
.negocios .eyebrow { color: var(--laton-claro); }
.negocios .eyebrow::before { background: var(--laton); }
.neg-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.6rem); align-items: center; }
.neg-photo { overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; }
.neg-photo img { width: 100%; height: 100%; object-fit: cover; }
.negocios h2 { max-width: 14ch; margin-bottom: 1.2rem; }
.negocios h2 em { color: var(--laton-claro); }
.negocios p { color: rgba(245, 241, 232, 0.82); margin-bottom: 1rem; }
.negocios strong { color: var(--papel); font-weight: 600; }
.neg-list { list-style: none; margin: 1.6rem 0 0; }
.neg-list li { padding: 0.7rem 0; border-bottom: 1px solid var(--borde-claro); font-size: 0.9rem; color: rgba(245,241,232,0.8); }
.neg-list b {
  display: block; font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--laton-claro); margin-bottom: 0.15rem;
}
.negocios .btn-tinta { background: var(--papel); color: var(--tinta); }
.negocios .btn-tinta:hover { background: var(--laton-claro); color: var(--tinta); }

/* ═══ CONSERJERÍA ═══════════════════════════════════════════════════
   Cada tarjeta es un enlace de WhatsApp con el mensaje ya escrito: el
   huésped no tiene que redactar la petición, solo enviarla. */
.conserje { background: var(--papel-2); }
.conserje-head { margin-bottom: clamp(2rem, 3.5vw, 2.8rem); }
.conserje-head h2 { max-width: 15ch; margin-bottom: 0.9rem; }
.conserje-head h2 em { color: var(--agua-honda); }
.conserje-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); }
.cj {
  background: var(--papel); padding: 1.5rem 1.4rem 1.35rem;
  text-decoration: none; display: flex; flex-direction: column;
  transition: background 0.3s var(--ease);
}
.cj:hover { background: #fff; }
.cj h3 { margin-bottom: 0.45rem; }
.cj p { font-size: 0.87rem; line-height: 1.6; color: rgba(42, 23, 16, 0.72); margin-bottom: 1rem; }
.cj-mas { margin-top: auto; font-size: 0.79rem; font-weight: 600; color: var(--agua-honda); display: inline-flex; align-items: center; gap: 0.4rem; }
.cj-mas::after { content: '→'; transition: transform 0.3s var(--ease); }
.cj:hover .cj-mas::after { transform: translateX(4px); }
.conserje-pie { margin-top: 1.6rem; font-size: 0.85rem; color: rgba(42, 23, 16, 0.66); max-width: none; }
.conserje-pie a { color: var(--agua-honda); font-weight: 600; text-decoration: none; }
.conserje-pie a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══ ZONA ROSA / UBICACIÓN ═════════════════════════════════════════*/
.zona { background: var(--papel-2); }
.zona-head { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.zona-head h2 { max-width: 17ch; margin-bottom: 0.9rem; }
.zona-head h2 em { color: var(--agua-honda); }
.zona-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.zona-copy p { margin-bottom: 1rem; color: rgba(42, 23, 16, 0.86); }
.zona-copy strong { font-weight: 600; color: var(--tinta); }
/* Horizontal, no 4/5: en vertical esta foto estiraba la columna y hacía
   la sección mucho más larga que la lista de cercanías de al lado. */
.zona-photo { margin-top: 1.6rem; }
.zona-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
.zona-photo figcaption {
  font-size: 0.78rem; line-height: 1.5; color: rgba(42, 23, 16, 0.6);
  padding-top: 0.55rem; max-width: 52ch;
}

.near-title { margin-bottom: 0.4rem; }
.near { list-style: none; }
.near li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid var(--borde); }
.near li:first-child { border-top: 1px solid var(--borde); }
.near-name { font-size: 0.95rem; font-weight: 500; }
.near-name small { display: block; font-size: 0.78rem; font-weight: 400; color: rgba(42, 23, 16, 0.6); margin-top: 0.08rem; }
.near-d { font-family: var(--mono); font-size: 0.79rem; font-weight: 500; color: var(--agua-honda); font-variant-numeric: tabular-nums; white-space: nowrap; }
.near-foot { margin-top: 1rem; font-size: 0.76rem; line-height: 1.6; color: rgba(42, 23, 16, 0.58); }

/* ═══ COMER EN EL HOTEL ═════════════════════════════════════════════
   Dos espacios y no uno: Séptimo (rooftop, desayunos) y La Gastroteca
   (planta baja, almuerzo y cena). Van en tarjetas iguales para que se
   lean como dos opciones del mismo hotel, no como una principal y una
   secundaria. */
.comer { background: var(--tinta); color: var(--papel); }
.comer .eyebrow { color: var(--laton-claro); }
.comer .eyebrow::before { background: var(--laton); }
.comer-head { margin-bottom: clamp(2rem, 3.5vw, 2.8rem); }
.comer-head h2 { max-width: 15ch; margin-bottom: 0.9rem; }
.comer-head h2 em { color: var(--laton-claro); }
.comer-head .lede { color: rgba(245, 241, 232, 0.8); }

.comer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.4rem); }
.venue { display: flex; flex-direction: column; }
.venue-foto { overflow: hidden; border-radius: 2px; margin-bottom: 1.3rem; }
.venue-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.venue-tag {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--laton-claro); margin-bottom: 0.5rem;
}
.venue h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 0.7rem; }
.venue p { color: rgba(245, 241, 232, 0.8); margin-bottom: 1.1rem; }
.venue strong { color: var(--papel); font-weight: 600; }
.venue-feats { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: auto; }
.venue-feats li {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em;
  padding: 0.36rem 0.7rem; border: 1px solid var(--borde-claro);
  border-radius: 2px; color: rgba(245, 241, 232, 0.85);
}

/* ═══ RESERVA DIRECTA ═══════════════════════════════════════════════*/
.directa { background: var(--agua-honda); color: #fff; }
.directa .eyebrow { color: rgba(255,255,255,0.75); }
.directa .eyebrow::before { background: rgba(255,255,255,0.5); }
.directa-head { text-align: center; margin-bottom: clamp(2rem, 3.5vw, 2.8rem); }
.directa h2 { max-width: 16ch; margin-inline: auto; }
.directa h2 em { color: var(--cielo); }
.directa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: 2.4rem; }
.ben { border-top: 2px solid rgba(255,255,255,0.35); padding-top: 1.05rem; }
.ben h3 { font-size: 1.12rem; margin-bottom: 0.45rem; }
.ben p { font-size: 0.89rem; color: rgba(255,255,255,0.84); line-height: 1.65; }
.directa-cta { text-align: center; }

/* ═══ GUÍAS ═════════════════════════════════════════════════════════*/
.guias { background: var(--papel); }
.guias-head { margin-bottom: clamp(2rem, 3.5vw, 2.8rem); }
.guias-head h2 { max-width: 17ch; margin-bottom: 0.9rem; }
.guias-head h2 em { color: var(--agua-honda); }
.guias-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); }
.guia {
  background: var(--papel); padding: 1.6rem 1.5rem 1.5rem;
  text-decoration: none; display: flex; flex-direction: column;
  transition: background 0.3s var(--ease);
}
.guia:hover { background: #fff; }
.guia-tag {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--caoba); margin-bottom: 0.7rem;
}
.guia h3 { margin-bottom: 0.55rem; }
.guia p { font-size: 0.88rem; line-height: 1.6; color: rgba(42, 23, 16, 0.72); margin-bottom: 1.1rem; }
.guia-mas {
  margin-top: auto; font-size: 0.8rem; font-weight: 600; color: var(--agua-honda);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.guia-mas::after { content: '→'; transition: transform 0.3s var(--ease); }
.guia:hover .guia-mas::after { transform: translateX(4px); }
.guia-todas { background: var(--papel-2); }

/* ═══ FAQ ═══════════════════════════════════════════════════════════*/
.faq { background: var(--papel-2); }
.faq-head { text-align: center; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.faq-list { max-width: 860px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--borde); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  text-align: left; background: none; border: 0; cursor: pointer; padding: 1.15rem 0;
  font-family: var(--serif); font-size: clamp(1rem, 1.4vw, 1.16rem); font-weight: 500; color: var(--tinta);
}
.faq-q::after {
  content: ''; flex: none; width: 11px; height: 11px;
  border-right: 1.5px solid var(--caoba); border-bottom: 1.5px solid var(--caoba);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.35s var(--ease);
}
.faq-q[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { font-size: 0.93rem; color: rgba(42, 23, 16, 0.78); padding-bottom: 1.2rem; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }

/* ═══ CONTACTO ══════════════════════════════════════════════════════*/
.ubic-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.ubic-map { border-radius: 2px; overflow: hidden; border: 1px solid var(--borde); display: block; }
.ubic-map img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ubic h2 { max-width: 15ch; margin-bottom: 1.1rem; }
.ubic h2 em { color: var(--agua-honda); }
.ubic-list { list-style: none; margin-top: 1.5rem; }
.ubic-list li { padding: 0.68rem 0; border-bottom: 1px solid var(--borde); font-size: 0.91rem; }
.ubic-list b {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--caoba); display: block; margin-bottom: 0.12rem; font-weight: 500;
}

/* ═══ FOOTER ════════════════════════════════════════════════════════
   El sitio cierra en el footer, sin una sección de despedida antes: la
   v2 tenía un bloque de cierre casi vacío que dejaba mucho aire muerto. */
.foot { background: #1E1009; color: rgba(245, 241, 232, 0.64); padding-block: clamp(3rem, 5vw, 4rem) 1.8rem; font-size: 0.87rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(140px, 1fr)); gap: clamp(1.8rem, 3vw, 2.8rem); padding-bottom: 2.2rem; border-bottom: 1px solid rgba(245, 241, 232, 0.12); }
.foot .logo-lockup { width: 165px; color: var(--papel); margin-bottom: 1rem; }
.foot-brand p { max-width: 42ch; margin-bottom: 0.9rem; line-height: 1.65; }
.foot-nap { font-size: 0.83rem; line-height: 1.8; color: rgba(245, 241, 232, 0.55); }
.foot h4 {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--laton-claro); margin-bottom: 0.85rem;
}
.foot ul { list-style: none; }
.foot li { margin-bottom: 0.42rem; line-height: 1.5; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--papel); text-decoration: underline; text-underline-offset: 3px; }
.foot-base { padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: rgba(245, 241, 232, 0.42); }

/* ═══ WHATSAPP ══════════════════════════════════════════════════════*/
.wa-float {
  position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem); z-index: 180;
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--wa); color: #fff; text-decoration: none;
  font-size: 0.85rem; font-weight: 600; padding: 0.85rem 1.25rem; border-radius: 100px;
  box-shadow: 0 10px 30px rgba(20, 10, 6, 0.28); transition: transform 0.3s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); }
.wa-float svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.wa-float span { display: none; }

/* ═══ GUÍAS — páginas de artículo ═══════════════════════════════════*/
.guia-hero { background: var(--tinta); color: var(--papel); padding: 8rem 0 clamp(2.5rem, 5vw, 4rem); }
.guia-hero .eyebrow { color: var(--laton-claro); }
.guia-hero .eyebrow::before { background: var(--laton); }
.guia-hero h1 { max-width: 20ch; margin-bottom: 1.1rem; }
.guia-hero h1 em { color: var(--laton-claro); }
.guia-hero .lede { color: rgba(245, 241, 232, 0.8); }
.crumbs { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: rgba(245,241,232,0.55); margin-bottom: 1.4rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--laton-claro); }

.articulo { padding-block: clamp(2.5rem, 5vw, 4rem); }
.articulo .wrap { max-width: 780px; }
.articulo h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin: 2.4rem 0 0.9rem; }
.articulo h2:first-child { margin-top: 0; }
.articulo h3 { margin: 1.7rem 0 0.5rem; }
.articulo p { margin-bottom: 1rem; color: rgba(42, 23, 16, 0.86); }
.articulo strong { font-weight: 600; color: var(--tinta); }
.articulo ul, .articulo ol { margin: 0 0 1.2rem 1.2rem; }
.articulo li { margin-bottom: 0.5rem; color: rgba(42, 23, 16, 0.86); }
.articulo figure { margin: 1.8rem 0; border-radius: 2px; overflow: hidden; }
.articulo figcaption { font-size: 0.8rem; color: rgba(42, 23, 16, 0.6); padding-top: 0.5rem; }
.articulo table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; font-size: 0.9rem; }
.articulo th, .articulo td { text-align: left; padding: 0.62rem 0.7rem; border-bottom: 1px solid var(--borde); }
.articulo th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--caoba); font-weight: 500; }
.articulo td:last-child { font-family: var(--mono); font-size: 0.83rem; color: var(--agua-honda); white-space: nowrap; }
.tabla-scroll { overflow-x: auto; }

.caja {
  background: var(--papel-2); border-left: 3px solid var(--agua-honda);
  padding: 1.3rem 1.4rem; margin: 1.8rem 0; border-radius: 0 2px 2px 0;
}
.caja h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.1rem; }
.caja p:last-child { margin-bottom: 0; }

.guia-cta { background: var(--papel-2); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.guia-cta .wrap { max-width: 780px; text-align: center; }
.guia-cta h2 { max-width: 18ch; margin: 0 auto 0.9rem; }
.guia-cta h2 em { color: var(--agua-honda); }
.guia-cta p { margin: 0 auto 1.6rem; }
.guia-cta .btn-row { justify-content: center; }

.otras { border-top: 1px solid var(--borde); padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.otras h2 { font-size: 1.4rem; margin-bottom: 1.4rem; }
.otras-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════*/
@media (min-width: 560px) { .wa-float span { display: inline; } }

@media (max-width: 1080px) {
  .hotel-grid, .neg-grid, .zona-grid, .comer-grid, .ubic-grid { grid-template-columns: minmax(0, 1fr); }
  .hotel-media { order: -1; }
  .neg-photo { order: -1; aspect-ratio: 16 / 9; }
  .ubic-map img { aspect-ratio: 16 / 10; }
  .amen-feature { grid-template-columns: 1fr 1fr; }
  .af-photo:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .amen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conserje-grid, .guias-grid, .otras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav > .btn { display: none; }
  .booking-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking .btn { grid-column: 1 / -1; width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .booking-form { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .suites-head { flex-direction: column; align-items: flex-start; }
  .suite-foot { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
  .suite-foot .btn { width: 100%; }
  .amen-feature { grid-template-columns: 1fr; }
  .af-photo:first-child { aspect-ratio: 4 / 3; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .amen-grid, .conserje-grid, .guias-grid, .otras-grid { grid-template-columns: minmax(0, 1fr); }
  .hotel-media { grid-template-columns: 1fr; }
  .hm-small { aspect-ratio: 3 / 2; }
  .hero h1 { max-width: none; }
}

/* ═══ MOVIMIENTO REDUCIDO ═══════════════════════════════════════════*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .hero .logo-lockup, .hero-eyebrow, .hero h1, .hero-sub, .hero-actions { opacity: 1; }
}

/* impresión: que una reserva se pueda llevar en papel */
@media print {
  .nav, .wa-float, .booking, .nav-drawer, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; }
}