/* Generado por tools/build_css.py — no editar a mano */

/* ---- tokens.css ---- */
/* =============================================================
   TOKENS DE MARCA — fuente: "Manual de marca amari final.pdf"
   Paleta (pág. 14) · Tipografía (pág. 15) · Versiones del logo (pág. 16)
   Los tintes (-50 … -200) siguen las escalas de la pág. 14
   (cada color mezclado con blanco en pasos del 10 %).
   ============================================================= */
@font-face {
  font-family: 'IvyMode Amari';
  src: url('../../public/fonts/ivymode-regular.woff') format('woff');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Karla — SIL Open Font License 1.1 (public/fonts/OFL-Karla.txt), alojada localmente */
@font-face {
  font-family: 'Karla';
  src: url('../../public/fonts/karla-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  src: url('../../public/fonts/karla-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  src: url('../../public/fonts/karla-italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  src: url('../../public/fonts/karla-italic-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  /* Colores oficiales */
  --amari-gold: #f1a622;        /* RGB 241/166/34 · Pantone 14-8 C */
  --amari-terracotta: #c5635b;  /* RGB 197/99/91  · Pantone 52-13 C */
  --amari-sage: #b0c7ba;        /* RGB 176/199/186 · Pantone 141-1 C */
  --amari-black: #000000;       /* Process Black C */
  --amari-white: #ffffff;

  /* Tintes de la escala oficial */
  --gold-50: #fffaf4;   /* 4 %  */
  --gold-100: #fef6e9;  /* 10 % */
  --gold-200: #fcedd3;  /* 20 % */
  --terracotta-50: #fcf7f7;
  --terracotta-100: #f9efef;
  --terracotta-200: #f3e0de;
  --sage-50: #f7f9f8;
  --sage-100: #eff4f1;
  --sage-200: #dfe9e3;
  --gray-100: #e6e6e6;
  --gray-300: #b3b3b3;
  --gray-500: #808080;
  --gray-600: #666666;
  --gray-700: #4d4d4d;
  --gray-800: #333333;
  --gray-900: #1a1a1a;

  /* Roles */
  --color-bg: var(--gold-50);
  --color-surface: var(--amari-white);
  --color-surface-alt: var(--sage-50);
  --color-text: var(--amari-black);
  --color-text-soft: var(--gray-700);
  --color-text-muted: var(--gray-600);
  --color-line: rgba(0, 0, 0, 0.12);
  --color-line-strong: rgba(0, 0, 0, 0.24);
  --color-accent: var(--amari-gold);
  --color-accent-2: var(--amari-terracotta);
  --color-focus: var(--amari-terracotta);

  /* Tipografía (manual de marca, pág. 15)
     Logotipo/titulares: IvyMode. Archivo tomado de la web actual del cliente
     (amarilivingsuite.com/font/c-ivy-mode-regular.woff). Confirmar licencia web.
     Textos de contenido: Karla (Google Fonts, licencia OFL). */
  --font-display: 'IvyMode Amari', 'ivymode', 'Times New Roman', serif;
  --font-body: 'Karla', 'Helvetica Neue', Arial, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h2: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-h1: clamp(2.6rem, 1.8rem + 3.6vw, 5.25rem);

  --tracking-eyebrow: 0.32em; /* espaciado amplio, como los títulos del manual */

  /* Espaciado y forma */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --container: 1240px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: var(--radius); /* un solo radio en todo el sitio (18 px) */
  --radius-pill: 999px;

  --header-h: 84px;
  --shadow-soft: 0 18px 50px -24px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 30px 70px -40px rgba(0, 0, 0, 0.35);

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 1100ms;
}

@media (max-width: 860px) {
  :root {
    --header-h: 68px;
  }
}

/* ---- base.css ---- */
/* ============ Reset y base ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

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

::selection {
  background: var(--amari-gold);
  color: var(--amari-black);
}

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

.skip-link {
  position: fixed;
  left: 1rem;
  top: -100px;
  z-index: 1000;
  background: var(--amari-black);
  color: var(--amari-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: top var(--dur-fast);
}

.skip-link:focus {
  top: 1rem;
}

/* ============ Layout ============ */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
  overflow-x: clip; /* evita desbordes horizontales de animaciones o sangrados */
}

/* ============ Tipografía ============ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.eyebrow::after {
  content: '';
  width: 48px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.display,
.h2,
.h3 {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: balance;
}

.h2 {
  font-size: var(--fs-h2);
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.1;
}

/* Énfasis en itálica, como en las piezas del manual ("Cuando *viajas*…") */
.display em,
.h2 em,
.h3 em {
  font-style: italic;
  font-weight: 500;
  color: var(--amari-terracotta);
}

.on-dark .display em,
.on-dark .h2 em {
  color: var(--amari-gold);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--color-text-soft);
  line-height: 1.7;
  max-width: 52ch;
}

.muted {
  color: var(--color-text-muted);
}

.ornament {
  display: inline-block;
  width: 34px;
  height: 2px;
  background: var(--amari-terracotta);
  border-radius: 2px;
}

/* ============ Iconos ============ */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--fill {
  fill: currentColor;
  stroke: none;
}

/* ============ Botones ============ */
.btn {
  --btn-bg: var(--amari-black);
  --btn-fg: var(--amari-white);
  --btn-border: var(--amari-black);
  --btn-bg-hover: var(--amari-gold);
  --btn-fg-hover: var(--amari-black);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--btn-bg-hover);
}

.btn:active {
  transform: scale(0.98);
}

.btn .icon {
  width: 1.15em;
  height: 1.15em;
}

.btn__arrow {
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--amari-black);
  --btn-border: var(--color-line-strong);
  --btn-bg-hover: var(--amari-black);
  --btn-fg-hover: var(--amari-white);
}

.btn--light {
  --btn-bg: var(--amari-white);
  --btn-fg: var(--amari-black);
  --btn-border: var(--amari-white);
  --btn-bg-hover: var(--amari-gold);
  --btn-fg-hover: var(--amari-black);
}

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--amari-white);
  --btn-border: rgba(255, 255, 255, 0.55);
  --btn-bg-hover: var(--amari-white);
  --btn-fg-hover: var(--amari-black);
}

.btn--gold {
  --btn-bg: var(--amari-gold);
  --btn-fg: var(--amari-black);
  --btn-border: var(--amari-gold);
  --btn-bg-hover: var(--amari-white);
  --btn-fg-hover: var(--amari-black);
}

.btn--sm {
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
}

.btn--block {
  width: 100%;
}

/* Botón de WhatsApp sin número confirmado: se muestra como pendiente, sin enlace. */
.btn.is-pending,
.btn.is-pending:hover {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-muted);
  --btn-border: var(--color-line-strong);
  background: transparent;
  color: var(--color-text-muted);
  border-style: dashed;
  border-color: var(--color-line-strong);
  cursor: not-allowed;
  transform: none;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  min-height: 44px;
}

.text-link .icon {
  transition: transform var(--dur) var(--ease-out);
}

.text-link:hover .icon {
  transform: translateX(4px);
}

/* ---- components.css ---- */
/* ============ Encabezado ============ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--amari-white);
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    height var(--dur) var(--ease-out);
}

.site-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  transition: background-color var(--dur);
}

.site-header.is-solid {
  background: rgba(255, 251, 244, 0.94);
  color: var(--amari-black);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  --header-h: 72px;
}

.site-header.is-solid::after {
  background: var(--color-line);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-header__logo {
  position: relative;
  display: block;
  width: 168px; /* ≥ tamaño mínimo digital del manual */
  flex: none;
}

.site-header__logo .logo {
  width: 100%;
  height: auto;
  transition: opacity var(--dur) var(--ease-out);
}

.site-header__logo .logo--dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.site-header.is-solid .logo--light,
body.menu-open .site-header .logo--light {
  opacity: 0;
}

.site-header.is-solid .logo--dark {
  opacity: 1;
}

body.menu-open .site-header .logo--dark {
  opacity: 0;
}

body.menu-open .site-header .logo--light {
  opacity: 1;
}

.site-nav {
  position: relative;
}

.site-nav__list {
  display: flex;
  gap: clamp(1rem, 2vw, 2.25rem);
}

.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--dur-fast);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current='true'] {
  opacity: 1;
}

.site-nav__indicator {
  position: absolute;
  left: 0;
  bottom: 6px;
  height: 1.5px;
  width: 0;
  background: var(--amari-gold);
  border-radius: 2px;
  transform-origin: left;
  transition:
    transform var(--dur) var(--ease-out),
    width var(--dur) var(--ease-out),
    opacity var(--dur);
  opacity: 0;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Botón "Reservar ahora": siempre píldora blanca con etiqueta espaciada y círculo dorado. */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 48px;
  padding: 5px 5px 5px 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--amari-white);
  color: var(--amari-black);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
  transition:
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.site-header__cta-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--amari-gold);
  color: var(--amari-black);
  transition: transform 0.5s var(--ease-out);
}

.site-header__cta-icon .icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  transition: transform 0.5s var(--ease-out);
}

.site-header__cta:hover {
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.55);
}

.site-header__cta:hover .site-header__cta-icon {
  transform: scale(1.06);
}

/* Abre el motor de reservas en otra pestaña: la flecha se inclina hacia fuera */
.site-header__cta:hover .site-header__cta-icon .icon {
  transform: rotate(-45deg);
}

.site-header__cta:active .site-header__cta-icon {
  transform: scale(0.94);
}

/* Siempre blanco con círculo naranja. Sobre el encabezado claro se
   añade un borde fino para que no se pierda contra el fondo. */
.site-header.is-solid .site-header__cta {
  border: 1px solid var(--color-line);
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.35);
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  background: transparent;
  align-items: center;
  justify-content: center;
}

.menu-toggle__bars {
  position: relative;
  width: 20px;
  height: 10px;
}

.menu-toggle__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform var(--dur) var(--ease-out),
    top var(--dur) var(--ease-out);
}

.menu-toggle__bars span:first-child {
  top: 0;
}

.menu-toggle__bars span:last-child {
  top: 8.5px;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:first-child {
  top: 4.25px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars span:last-child {
  top: 4.25px;
  transform: rotate(-45deg);
}

body.menu-open .site-header {
  color: var(--amari-white);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.menu-open .site-header::after {
  background: transparent;
}

@media (max-width: 1080px) {
  .site-nav {
    display: none !important;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-header__logo {
    width: 150px;
  }
}

/* Reservar sigue visible en tableta; en móvil lo reemplaza la barra inferior */
@media (max-width: 760px) {
  .site-header__cta {
    display: none !important;
  }
}

/* ============ Menú móvil ============ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--amari-black);
  color: var(--amari-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + 2rem) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Solo los enlaces de la lista: el botón de WhatsApp del pie del menú
   también lleva data-menu-link (para cerrar el menú) y conserva su estilo de botón */
.mobile-menu li > a[data-menu-link] {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  line-height: 1.15;
  text-decoration: none;
}

.mobile-menu__num {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--amari-gold);
}

.mobile-menu__footer {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ============ Marcos de imagen ============ */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sage-100);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ Campos de formulario ============ */
.field {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 64px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 14px;
  background: var(--amari-white);
  transition: border-color var(--dur-fast);
}

.field:focus-within {
  border-color: var(--amari-black);
}

.field > .icon {
  color: var(--gray-700);
  width: 22px;
  height: 22px;
}

.field__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.field__label {
  font-size: 0.78rem;
  color: var(--gray-700);
  letter-spacing: 0.02em;
}

.field input,
.field select,
.quickbar input,
.quickbar select {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.15rem 0;
  font-size: 1rem;
  outline: none;
  min-height: 28px;
  appearance: none;
  -webkit-appearance: none;
}

.field select,
.quickbar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 1.25rem;
}

.field input::placeholder,
.quickbar input::placeholder {
  color: var(--gray-600);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

[aria-invalid='true'] {
  color: var(--amari-terracotta);
}

.field:has([aria-invalid='true']),
.quickbar__field:has([aria-invalid='true']) {
  border-color: var(--amari-terracotta);
}

/* ============ Botón de icono ============ */
.icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line-strong);
  background: transparent;
  transition:
    background-color var(--dur-fast),
    color var(--dur-fast),
    transform var(--dur-fast);
}

.icon-btn:hover {
  background: var(--amari-black);
  color: var(--amari-white);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
  color: inherit;
}

/* ============ WhatsApp flotante y barra móvil ============ */
.wa-float {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 45;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amari-black);
  color: var(--amari-white);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--dur) var(--ease-out),
    background-color var(--dur),
    color var(--dur);
}

.wa-float .icon {
  width: 26px;
  height: 26px;
}

.wa-float:hover {
  background: var(--amari-gold);
  color: var(--amari-black);
  transform: translateY(-3px);
}

.mobile-bar {
  display: none;
}

@media (max-width: 760px) {
  .wa-float {
    display: none;
  }

  .mobile-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    padding: 0.65rem var(--gutter) calc(0.65rem + env(safe-area-inset-bottom));
    background: rgba(255, 251, 244, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-line);
  }

  .mobile-bar .btn {
    min-height: 48px;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body.menu-open .mobile-bar {
    display: none;
  }
}

/* =============================================================
   Celulares pequeños (≤ 380 px): botones sin cortes
   ============================================================= */
@media (max-width: 380px) {
  .mobile-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mobile-bar .btn {
    padding-inline: 0.75rem;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .booking-form .btn,
  .quickbar__submit,
  .contact-form .btn {
    padding-inline: 1rem;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
  }

  /* La flecha decorativa sobra cuando el espacio es tan justo */
  .booking-form .btn .btn__arrow,
  .quickbar__submit .btn__arrow {
    display: none;
  }
}

/* ---- sections.css ---- */
/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--amari-white);
  isolation: isolate;
  background: var(--gray-900);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* Sombra funcional para garantizar el contraste del logo y el titular */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Más densa en el centro: el reel alterna fotos claras y oscuras */
  background:
    radial-gradient(ellipse 60% 45% at 50% 52%, rgba(0, 0, 0, 0.32), transparent 75%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.34) 32%, rgba(0, 0, 0, 0.38) 60%, rgba(0, 0, 0, 0.66) 100%);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 9rem;
}

.hero__brand {
  margin: 0;
  line-height: 0;
}

.hero__brand .hero__logo {
  margin-bottom: 0;
}

.hero__logo {
  width: clamp(250px, 36vw, 540px);
  height: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.04;
  max-width: 22ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}

.hero__title .mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hero__title .mask > * {
  display: block;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 8.25rem;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
}

.hero__scroll span {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

/* ============ Barra rápida (escritorio, referencia) ============ */
.quickbar-wrap {
  position: relative;
  z-index: 5;
  margin-top: -5.5rem;
}

.quickbar {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr auto;
  align-items: stretch;
  gap: 0;
  background: var(--amari-white);
  border-radius: 22px;
  padding: 0.85rem;
  box-shadow: var(--shadow-card);
}

.quickbar__field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.15rem;
  border-right: 1px solid var(--color-line);
  border: 1px solid transparent;
  border-right-color: var(--color-line);
  border-radius: 12px;
}

.quickbar__field:nth-child(4) {
  border-right-color: transparent;
}

.quickbar__field > .icon {
  color: var(--gray-700);
  width: 22px;
  height: 22px;
}

.quickbar__field label {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.quickbar__field label > span {
  font-size: 0.78rem;
  color: var(--gray-700);
}

.quickbar__submit {
  align-self: center;
  margin-left: 0.5rem;
  min-height: 56px;
}

.quickbar__status {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  padding: 0 1.15rem;
}

.quickbar__status:empty {
  display: none;
}

.quickbar__status.is-error,
.booking-form__status.is-error {
  color: #9b3f38; /* terracota oscurecida para legibilidad AA en texto pequeño */
}

.quickbar__field,
.quickbar__field label {
  min-width: 0;
}

.quickbar input,
.quickbar select,
.field input,
.field select,
.field textarea {
  min-width: 0;
  max-width: 100%;
}

/* Tableta y celular: la consulta por WhatsApp se mantiene, en formato tarjeta */
@media (max-width: 1080px) {
  .quickbar-wrap {
    margin-top: -3.5rem;
  }

  .quickbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 1rem;
  }

  .quickbar__field {
    min-height: 60px;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--color-line-strong);
    border-radius: 12px;
  }

  .quickbar__field:nth-child(4) {
    border-right-color: var(--color-line-strong);
  }

  .quickbar__submit {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
    min-height: 52px;
  }

  .quickbar__status {
    padding: 0 0.25rem;
  }

  .hero__content {
    padding-bottom: 6rem;
  }

  .hero__scroll {
    bottom: 2rem;
  }
}

@media (max-width: 1080px) {
  /* La tarjeta de WhatsApp se asoma en la primera pantalla (tableta y celular) */
  .hero {
    min-height: 82vh;
    min-height: 82svh;
  }

  .hero__content {
    padding-bottom: 4.5rem;
  }
}

@media (max-width: 560px) {
  .quickbar-wrap {
    margin-top: -2.75rem;
    padding-inline: 0.75rem;
  }

  .quickbar__field:nth-child(1),
  .quickbar__field:nth-child(4) {
    grid-column: 1 / -1;
  }

  .quickbar__field {
    gap: 0.55rem;
    padding: 0.45rem 0.7rem;
  }

  .quickbar__field > .icon {
    width: 18px;
    height: 18px;
  }

  /* Fechas: sin ícono inicial para que la fecha completa quepa */
  .quickbar__field:nth-child(2) > .icon,
  .quickbar__field:nth-child(3) > .icon {
    display: none;
  }
}

/* ============ Franja de destacados ============ */
.highlights {
  padding-block: clamp(2.5rem, 4vw, 4rem) 0;
}

.highlights__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0 auto;
}

.highlights__list li + li {
  border-left: 1px solid var(--color-line);
}

.highlights__list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1.25rem 1rem;
  text-align: center;
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--color-text-soft);
  transition: color var(--dur-fast);
}

.highlights__list a:hover {
  color: var(--amari-black);
}

.highlights__list .icon {
  width: 32px;
  height: 32px;
  stroke-width: 1.2;
  color: var(--amari-black);
  transition: transform var(--dur) var(--ease-out);
}

.highlights__list a:hover .icon {
  transform: translateY(-4px);
}

@media (max-width: 760px) {
  .highlights__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .highlights__list li {
    border-left: 0 !important;
    border-bottom: 1px solid var(--color-line);
  }

  .highlights__list li:nth-child(odd) {
    border-right: 1px solid var(--color-line);
  }

  .highlights__list li:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }

  .highlights__list a {
    padding: 1.1rem 0.5rem;
    font-size: 0.9rem;
  }
}

/* ============ Encabezados de sección ============ */
.section-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6) var(--space-8);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head .eyebrow {
  margin-bottom: var(--space-4);
}

@media (max-width: 860px) {
  .section-head {
    grid-template-columns: 1fr;
  }
}

/* ============ Intro ============ */
.intro-split__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.intro-split__text {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.intro-split__media {
  position: relative;
  padding-bottom: 3rem;
}

.frame--tall {
  aspect-ratio: 4 / 4.4;
}

.frame--tall img {
  height: 112%;
  margin-top: -6%;
}

.frame--inset {
  position: absolute;
  left: -2.5rem;
  bottom: 0;
  width: 34%;
  aspect-ratio: 3 / 4;
  border: 8px solid var(--color-bg);
  border-radius: var(--radius);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-6);
  padding-block: var(--space-4);
  border-block: 1px solid var(--color-line);
  width: 100%;
}

.facts dt {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.facts dd {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  line-height: 1.2;
}

@media (max-width: 860px) {
  .intro-split__grid {
    grid-template-columns: 1fr;
  }

  .intro-split__media {
    order: -1;
    padding-bottom: 2rem;
  }

  .frame--inset {
    left: auto;
    right: 1rem;
    width: 36%;
  }

  .facts {
    gap: var(--space-4);
  }
}

/* ============ Suites ============ */
.suites {
  background: var(--color-surface);
}

.suites__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}

/* Las tres suites con el mismo tamaño y la misma estructura */
.suite-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.suite-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.suite-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.suite-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.suite-card:hover .suite-card__media img {
  transform: scale(1.05);
}

.suite-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
}

.suite-card__tag {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.suite-card p:not(.suite-card__tag) {
  color: var(--color-text-soft);
}

.suite-card__body .btn {
  margin-top: auto;
}

.amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--space-2) 0 var(--space-3);
}

.amenities li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  background: var(--amari-white);
}

.amenities .icon {
  width: 18px;
  height: 18px;
}

/* Amenities de cada suite: se despliegan desde el chip «Amenities».
   Datos tomados del motor de reservas oficial del hotel (Cloudbeds). */
.suite-card .amenities {
  margin-bottom: 0;
}

.suite-amenities {
  align-self: stretch;
  margin: calc(0.5rem - var(--space-3)) 0 var(--space-3);
}

.suite-amenities summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  background: var(--amari-white);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-fast);
}

.suite-amenities summary::-webkit-details-marker {
  display: none;
}

.suite-amenities summary:hover,
.suite-amenities[open] summary {
  border-color: var(--color-line-strong);
}

.suite-amenities summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.suite-amenities summary .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-fast);
}

.suite-amenities[open] summary .icon {
  transform: rotate(45deg);
}

.suite-amenities .suite-amenities__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1rem;
  margin-top: 0.6rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--amari-white);
  font-size: 0.86rem;
  color: var(--color-text-soft);
}

.suite-amenities__list li {
  position: relative;
  padding-left: 0.9rem;
}

.suite-amenities__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

.details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.details__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  background: var(--sage-100);
}

.details__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.details__item:hover img {
  transform: scale(1.06);
}

.details__item figcaption {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.88rem;
  font-weight: 500;
}

@media (max-width: 960px) {
  .suites__grid {
    grid-template-columns: 1fr;
  }

  .details {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ Servicios (bento) ============ */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}

.bento__item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bento__item--a {
  grid-column: 1 / span 7;
  grid-row: span 3;
}

.bento__item--b {
  grid-column: 8 / span 5;
  grid-row: span 2;
}

.bento__item--c {
  grid-column: 8 / span 5;
  grid-row: span 3;
}

.bento__item--d {
  grid-column: 1 / span 4;
  grid-row: span 2;
}

.bento__item--e {
  grid-column: 5 / span 3;
  grid-row: span 2;
}

figure.bento__item {
  background: var(--sage-100);
  min-height: 260px;
}

figure.bento__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112%;
  top: -6%;
  object-fit: cover;
}

figure.bento__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.5rem 1.5rem 1.4rem;
  color: var(--amari-white);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62));
  font-size: 0.92rem;
  display: grid;
  gap: 0.2rem;
}

figure.bento__item figcaption strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
}

.service-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-3);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
}

.service-tile--sage {
  background: var(--amari-sage);
}

.service-tile--gold {
  background: var(--gold-200);
}

.service-tile p {
  color: var(--gray-800);
  max-width: 40ch;
}

.service-tile__icons {
  display: flex;
  gap: 0.6rem;
  margin-bottom: auto;
  padding-bottom: var(--space-5);
}

.service-tile__icons .icon {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

@media (max-width: 960px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento__item--a {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 340px;
  }

  .bento__item--b,
  .bento__item--d {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .bento__item--c,
  .bento__item--e {
    grid-column: span 1;
    grid-row: auto;
    min-height: 320px;
  }
}

@media (max-width: 520px) {
  .bento__item--c,
  .bento__item--e {
    grid-column: 1 / -1;
  }
}

/* ============ Servicios: tarjetas ============ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.svc {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: 0.6rem;
  padding: 1.5rem 1.4rem;
  background: var(--amari-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.svc:hover {
  border-color: transparent;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.3);
}

.svc__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.4rem;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--amari-black);
}

.svc__icon .icon {
  width: 22px;
  height: 22px;
}

.svc__title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
}

.svc p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

.svc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.svc__link .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}

.svc__link:hover .icon {
  transform: translateX(4px);
}

@media (max-width: 960px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Servicios: trío de fotos ============ */
.photo-trio {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: repeat(2, minmax(220px, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  min-height: clamp(460px, 48vw, 620px);
}

.photo-trio > .bento__item {
  min-height: 0;
}

.photo-trio__main {
  grid-row: 1 / span 2;
}

/* Fotos que se pueden pasar en lobby, pasillos, coworking y sala de juntas
   (mismo carrusel de los lugares de Barranquilla) */
figure.bento__item.place-gallery .place-gallery__track {
  position: absolute;
  inset: 0;
}

figure.bento__item.place-gallery img {
  top: 0;
  height: 100%;
}

figure.bento__item.place-gallery figcaption {
  pointer-events: none;
}

/* Celular: las tarjetas son angostas y las flechas a media altura tapaban
   el título; se suben a la parte superior y el contador pasa a la izquierda */
@media (max-width: 560px) {
  figure.bento__item.place-gallery .place-gallery__btn {
    top: 0.6rem;
    width: 34px;
    height: 34px;
    transform: none;
  }

  figure.bento__item.place-gallery .place-gallery__btn:hover {
    transform: scale(1.06);
  }

  figure.bento__item.place-gallery .place-gallery__btn--prev {
    left: auto;
    right: calc(0.6rem + 34px + 0.4rem);
  }

  figure.bento__item.place-gallery .place-gallery__count {
    top: 0.85rem;
    right: auto;
    left: 0.6rem;
  }
}

.workspace__media {
  position: relative;
  align-self: stretch;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--sage-100);
}

.workspace__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .photo-trio {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 220px;
    min-height: 0;
  }

  .photo-trio__main {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* ============ Servicios: panel de cowork y sala de juntas ============ */
.work-panel {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: var(--radius);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.work-panel__intro {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

.work-panel__title {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
}

.work-panel .workspaces__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.work-panel .workspace {
  padding: clamp(1.5rem, 2.4vw, 2rem);
}

.work-panel .workspace .btn {
  padding-inline: 1.25rem;
  font-size: 0.9rem;
}

.work-panel .workspace__rate {
  font-size: 0.95rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .work-panel .workspace .btn,
  .work-panel .workspace__rate {
    white-space: normal;
  }
}

@media (max-width: 1080px) {
  .work-panel {
    grid-template-columns: 1fr;
  }

  .work-panel__intro {
    position: static;
  }
}

@media (max-width: 640px) {
  .work-panel {
    padding: 1.5rem 1rem 1rem;
  }

  .work-panel__intro {
    padding-inline: 0.5rem;
  }

  .work-panel .workspaces__grid {
    grid-template-columns: 1fr;
  }

  .work-panel .workspace {
    padding: 1.4rem 1.25rem;
  }
}

/* ============ Galería ============ */
.gallery {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

.gallery__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.gallery__controls {
  display: flex;
  gap: var(--space-2);
}

.gallery__track {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__track li {
  flex: none;
  height: clamp(260px, 38vw, 460px);
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--sage-100);
}

.gallery__track li.is-portrait {
  aspect-ratio: 2 / 3;
}

.gallery__track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ Aliados ============ */
.allies {
  background: var(--terracotta-50);
}

.allies__intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-7);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.allies__intro .eyebrow {
  margin-bottom: var(--space-4);
}

.allies__intro .lead {
  margin-top: var(--space-5);
}

.discount {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--amari-gold);
  color: var(--amari-black);
}

.discount--inline {
  display: none;
}

.discount__value {
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 4vw, 6.5rem);
  line-height: 0.9;
  font-weight: 600;
  display: inline-flex;
  align-items: flex-start;
  font-variant-numeric: lining-nums tabular-nums;
}

.discount__value small {
  font-size: 0.45em;
  margin-top: 0.15em;
}

.discount__label {
  font-size: 0.98rem;
  line-height: 1.45;
  max-width: 24ch;
}

.allies__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

/* Tarjeta de aliado: foto arriba (completa y protagonista), texto y botones debajo */
.ally {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  background: var(--amari-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ally--laundry {
  transform: translateY(clamp(0px, 4vw, 3rem));
}

.ally__visual {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--amari-terracotta);
  color: var(--amari-white);
  overflow: hidden;
}

.ally--laundry .ally__visual {
  background: var(--amari-sage);
  color: var(--amari-black);
}

.ally__visual::before {
  content: '';
  position: absolute;
  width: 180%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.18;
}

.ally__visual .icon {
  width: 72px;
  height: 72px;
  stroke-width: 1;
}

.ally__badge {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--amari-white);
  color: var(--amari-black);
  font-weight: 700;
  font-size: 0.85rem;
}

.ally__body {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-3);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.ally__kicker {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ally__body > p:not(.ally__kicker) {
  color: var(--color-text-soft);
}

.ally__benefit {
  padding: 0.5rem 0.9rem;
  border-left: 2px solid var(--amari-gold);
  background: var(--gold-100);
  border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
}

.ally .btn {
  margin-top: var(--space-2);
  white-space: normal;
  text-align: left;
}

@media (max-width: 960px) {
  .allies__intro,
  .allies__grid {
    grid-template-columns: 1fr;
  }

  .ally--laundry {
    transform: none;
  }

  .discount--intro {
    display: none;
  }

  .discount--inline {
    display: flex;
  }
}

@media (max-width: 560px) {
  .ally__visual {
    min-height: 150px;
  }

  /* Foto del restaurante: tamaño completo en el celular, no una franja recortada */
  .ally__visual--photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ============ Espacios de trabajo ============ */
.workspaces {
  background: var(--amari-black);
  color: var(--amari-white);
}

.workspaces .eyebrow,
.workspaces .lead {
  color: rgba(255, 255, 255, 0.78);
}

.workspaces__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.workspace {
  position: relative;
  /* Columna flexible: la tarifa se empuja hacia abajo (margin-top: auto),
     así tarifa y botón quedan alineados en todas las tarjetas */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur);
}

.workspace:hover {
  border-color: rgba(241, 166, 34, 0.6);
}

.workspace__num {
  font-variant-numeric: lining-nums;
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  right: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.5);
}

.workspace__icon {
  width: 52px;
  height: 52px;
  stroke-width: 1.1;
  color: var(--amari-gold);
}

.workspace p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 46ch;
}

.workspace__rate {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--amari-white);
}

.workspace__rate .icon {
  color: var(--amari-gold);
}

.workspace .btn {
  margin-top: var(--space-2);
}

@media (max-width: 860px) {
  .workspaces__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Opiniones ============ */
.reviews .h2 {
  margin: var(--space-4) 0 clamp(2rem, 4vw, 3.5rem);
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 1.6vw, 1.25rem);
  align-items: stretch;
}

/* Tarjeta tipo reseña (estética Booking / Airbnb) */
.review {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 0.9rem;
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--amari-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition:
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.review:hover {
  border-color: transparent;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.35);
}

.review__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Círculo de perfil con la inicial (sin foto de persona) */
.review__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--amari-black);
  background: var(--amari-sage);
}

.review__avatar--terracotta {
  background: var(--amari-terracotta);
  color: var(--amari-white);
}

.review__avatar--gold {
  background: var(--amari-gold);
}

.review__avatar--sage-dark {
  background: var(--amari-black);
  color: var(--amari-white);
}

.review__name {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
}

.review__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.review__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
}

.review__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--amari-gold);
}

.review__stars .icon {
  width: 15px;
  height: 15px;
}

.review__title {
  font-size: 0.9rem;
  font-weight: 600;
}

.review__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray-800);
}

/* ============ Antes de llegar ============ */
.faq {
  background: var(--color-surface-alt);
}

.faq__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 6vw, 6rem);
}

.faq__grid > div:first-child {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.accordion details {
  border-bottom: 1px solid var(--color-line-strong);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: 1rem 0;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary .icon {
  transition: transform var(--dur) var(--ease-out);
}

.accordion details[open] summary .icon {
  transform: rotate(45deg);
}

.accordion details p {
  padding: 0 0 1.4rem;
  color: var(--color-text-soft);
  max-width: 62ch;
}

@media (max-width: 860px) {
  .faq__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Ubicación ============ */
.location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}

.location__info {
  display: grid;
  gap: var(--space-5);
  align-content: center;
  justify-items: start;
}

.contact-list {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.contact-list li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.contact-list .icon {
  margin-top: 0.2rem;
  width: 22px;
  height: 22px;
}

.contact-list__label {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-list a {
  text-decoration: none;
  border-bottom: 1px solid var(--color-line-strong);
  overflow-wrap: anywhere;
}

.contact-list a:hover {
  border-color: currentColor;
}

.location__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.location__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 460px;
  background: var(--sage-100);
}

.location__map iframe {
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 0;
  filter: grayscale(0.35) contrast(1.02);
}

@media (max-width: 860px) {
  .location__grid {
    grid-template-columns: 1fr;
  }

  .location__map,
  .location__map iframe {
    min-height: 0;
  }

  /* Mapa con una altura cómoda en el celular (antes ocupaba casi toda la pantalla) */
  .location__map {
    height: clamp(320px, 95vw, 440px);
  }
}

/* ============ Reserva (referencia móvil) ============ */
.booking {
  overflow: hidden;
  isolation: isolate;
}

.booking__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.booking__bg img {
  width: 100%;
  height: 120%;
  margin-top: -10%;
  object-fit: cover;
}

.booking__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 251, 244, 0.35);
}

.booking-card {
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 3.25rem);
  border-radius: var(--radius-lg);
  background: var(--gold-50);
  box-shadow: var(--shadow-card);
  text-align: center;
  display: grid;
  gap: var(--space-4);
}

.booking-card__logo {
  width: 170px;
  margin: 0 auto var(--space-2);
}

.booking-card__sub {
  color: var(--color-text-soft);
  max-width: 40ch;
  margin-inline: auto;
}

.booking-card__note {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-top: calc(var(--space-2) * -1);
}

.booking-card__divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-block: var(--space-2);
}

.booking-card__divider::before,
.booking-card__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.booking-form {
  display: grid;
  gap: var(--space-3);
  text-align: left;
}

.booking-form__status {
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  text-align: center;
}

.booking-form__status:empty {
  display: none;
}

.booking-card__lock {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.booking-card__lock .icon {
  width: 16px;
  height: 16px;
  margin-top: 0.15rem;
}

@media (max-width: 460px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ============ Pie ============ */
.site-footer {
  background: var(--amari-black);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
  font-size: 0.95rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
  gap: var(--space-7);
}

.site-footer__brand img {
  width: 180px;
  margin-bottom: var(--space-4);
}

.site-footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--amari-gold);
  margin-bottom: var(--space-4);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.site-footer a {
  text-decoration: none;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  overflow-wrap: anywhere;
}

.site-footer a:hover {
  color: var(--amari-white);
  text-decoration: underline;
}

.site-footer__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-small);
}

@media (max-width: 960px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Aliado con fotografía propia (Selah Bistró & Café, versión Full) */
.ally__visual--photo {
  aspect-ratio: 4 / 3;
}

.ally__visual--photo::before {
  display: none;
}

.ally__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78%;
  transition: transform 0.8s var(--ease-out, ease);
}

.ally:hover .ally__photo {
  transform: scale(1.04);
}

.ally__visual--photo .ally__badge {
  z-index: 1;
}

/* =============================================================
   Celular: campos a 16 px como mínimo (evita que el iPhone haga
   zoom al tocar un campo) y fechas legibles
   ============================================================= */
@media (max-width: 760px) {
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    font-size: 16px;
  }

  input[type='date'] {
    min-height: 1.6em;
  }

  input[type='date']::-webkit-date-and-time-value {
    text-align: left;
  }
}

/* Resaltado breve del formulario al llegar desde un botón de WhatsApp */
.quickbar {
  transition: box-shadow 0.4s ease;
}

.quickbar.is-highlighted {
  box-shadow:
    0 0 0 3px var(--amari-gold),
    0 24px 50px -24px rgba(0, 0, 0, 0.35);
}

/* ---- extras.css ---- */
/* =============================================================
   CONTENIDO RECUPERADO DE LA WEB ACTUAL
   Selector de idioma · video oficial · comodidades · galería completa
   Conoce Barranquilla · reseñas de Google · formulario de contacto
   ============================================================= */

/* ---------- Selector de idioma ES / EN ---------- */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 34px;
  padding: 0 0.6rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

/* Área táctil cómoda (44 px) sin agrandar el botón visible */
.lang-switch::after {
  content: '';
  position: absolute;
  inset: -5px -2px;
}

.lang-switch .icon {
  width: 13px;
  height: 13px;
  margin-right: 0.1rem;
}

.lang-switch__opt {
  opacity: 0.55;
}

.lang-switch__opt.is-current {
  opacity: 1;
}

.lang-switch__sep {
  opacity: 0.35;
}

.lang-switch:hover {
  background: var(--amari-white);
  color: var(--amari-black);
  border-color: var(--amari-white);
}

.site-header.is-solid .lang-switch:hover {
  background: var(--amari-black);
  color: var(--amari-white);
  border-color: var(--amari-black);
}

.mobile-menu__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  text-decoration: none;
}

@media (max-width: 1240px) {
  .site-nav__list {
    gap: clamp(0.8rem, 1.4vw, 1.5rem);
  }
}

@media (max-width: 760px) {
  .lang-switch .icon {
    display: none;
  }
}

/* ---------- Comodidades confirmadas ---------- */
.perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  padding: 0.5rem 0;
  border-radius: var(--radius);
  background: var(--amari-white);
  border: 1px solid var(--color-line);
}

.perks li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.4rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--color-text-soft);
}

.perks .icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--amari-black);
}

@media (max-width: 960px) {
  .perks {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .perks {
    grid-template-columns: 1fr;
  }
}

/* ---------- Galería: elementos ampliables ---------- */
.gallery__head {
  flex-wrap: wrap;
}

.gallery__count {
  margin-top: 0.25rem;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.gallery__controls {
  align-items: center;
}

.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.gallery__zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--amari-black);
  opacity: 0;
  transition: opacity var(--dur-fast);
}

.gallery__item:hover .gallery__zoom,
.gallery__item:focus-visible .gallery__zoom {
  opacity: 1;
}

@media (hover: none) {
  .gallery__zoom {
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .gallery__controls .icon-btn {
    display: none;
  }
}

/* ---------- Visor (lightbox) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(0, 0, 0, 0.94);
  color: var(--amari-white);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  min-width: 0;
  max-height: 100%;
  margin: 0;
}

.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100svh - 9rem);
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox__figure figcaption {
  font-size: 0.92rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.lightbox__counter {
  margin-left: 0.5rem;
  color: var(--amari-gold);
  font-variant-numeric: tabular-nums;
}

.lightbox__nav,
.lightbox__close {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.3);
  color: var(--amari-white);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.lightbox__nav:hover,
.lightbox__close:hover {
  background: var(--amari-white);
  color: var(--amari-black);
}

.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 2;
}

@media (max-width: 640px) {
  .lightbox {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
  }

  .lightbox__figure {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .lightbox__nav--prev {
    grid-row: 2;
    justify-self: end;
  }

  .lightbox__nav--next {
    grid-row: 2;
    justify-self: start;
  }
}

/* ---------- Conoce Barranquilla ---------- */
.city {
  background: var(--sage-50);
}

.places {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.place {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--amari-white);
  border: 1px solid var(--color-line);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.place:hover {
  border-color: transparent;
  box-shadow: 0 22px 46px -30px rgba(0, 0, 0, 0.4);
}

.place__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  background: var(--sage-100);
}

.place__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.place:hover .place__media img {
  transform: scale(1.05);
}

.place__credit {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  max-width: calc(100% - 1rem);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.66rem;
  line-height: 1.5;
}

.place__credit a {
  color: inherit;
}

.place__body {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0.5rem;
  padding: 1.25rem 1.25rem 1.1rem;
}

.place__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.15;
}

.place__desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-soft);
}

.place__loc {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.place__loc .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.1rem;
}

.place__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.place__link .icon {
  width: 15px;
  height: 15px;
}

.place__link:hover {
  text-decoration: underline;
}

.city__note {
  margin-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  .places {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .places {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 0.5rem;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .places::-webkit-scrollbar {
    display: none;
  }

  .place {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

/* ---------- Reseñas: cabecera con calificación de Google ---------- */
.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.reviews__head .h2 {
  margin: var(--space-4) 0 0;
}

.reviews .h2 {
  margin-bottom: 0;
}

.g-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--amari-white);
  text-decoration: none;
  transition: box-shadow var(--dur) var(--ease-out);
}

.g-rating:hover {
  box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.4);
}

.g-rating__logo {
  width: 30px;
  height: 30px;
}

.g-rating__score {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.g-rating__body {
  display: grid;
  gap: 0.2rem;
}

.g-rating__stars {
  position: relative;
  display: inline-flex;
  gap: 2px;
  color: var(--gray-300);
}

.g-rating__stars .icon {
  width: 16px;
  height: 16px;
}

.g-rating__fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: inline-flex;
  gap: 2px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--amari-gold);
}

.g-rating__count {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.reviews__grid {
  grid-template-columns: repeat(3, 1fr);
}

.reviews__cta {
  margin-top: 1.5rem;
}

@media (max-width: 960px) {
  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .reviews__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Formulario de contacto ---------- */
.contact-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  border-radius: var(--radius);
  background: var(--amari-white);
  border: 1px solid var(--color-line);
}

.contact-card__intro {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.contact-card__intro a {
  overflow-wrap: anywhere;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.contact-form .field--area,
.contact-form .consent,
.contact-form .btn,
.contact-form__status {
  grid-column: 1 / -1;
}

.contact-form .btn {
  justify-self: start;
}

.field--area {
  align-items: stretch;
  padding-block: 0.85rem;
}

.field textarea {
  width: 100%;
  min-height: 96px;
  border: 0;
  outline: none;
  resize: vertical;
  background: transparent;
  font-size: 1rem;
  line-height: 1.5;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}

.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  accent-color: var(--amari-black);
}

.contact-form__status {
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status.is-error {
  color: #9b3f38;
}

.consent:has([aria-invalid='true']) {
  color: #9b3f38;
}

@media (max-width: 860px) {
  .contact-card,
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pie ---------- */
.site-footer__title--spaced {
  margin-top: var(--space-6);
}

.site-footer .icon {
  width: 18px;
  height: 18px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.site-footer__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  text-decoration: none;
}

/* Crédito del desarrollador del sitio: firma discreta, en versalitas espaciadas */
.site-footer__credit {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.site-footer__credit a {
  margin-left: 0.35em;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
  color: var(--amari-gold);
}

/* ---------- Aliados: botones (WhatsApp + Instagram) ---------- */
.ally__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-2);
}

.ally__actions .btn {
  margin-top: 0;
}

/* =============================================================
   PRIVACIDAD: botón de preferencias, mapa con consentimiento,
   diálogo de preferencias y casillas de aceptación
   ============================================================= */
.site-footer__prefs {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.site-footer__prefs:hover {
  color: var(--amari-white);
  text-decoration: underline;
}

.map-consent {
  position: relative;
  display: grid;
  place-items: end center;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  isolation: isolate;
  background: var(--gray-900);
}

.map-consent__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-consent::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.72) 100%);
}

.map-consent__panel {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  color: var(--amari-white);
}

.map-consent__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
}

.map-consent__text {
  max-width: 44ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.map-consent__text a {
  color: inherit;
}

.cookie-prefs {
  width: min(520px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.4rem, 4vw, 2rem);
  border: 0;
  border-radius: var(--radius);
  background: var(--amari-white);
  color: var(--amari-black);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.cookie-prefs::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.cookie-prefs h2 {
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
}

.cookie-prefs p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

.cookie-prefs__list {
  display: grid;
  gap: 0.75rem;
  margin: 1.1rem 0 1.4rem;
  padding: 0;
  list-style: none;
}

.cookie-prefs__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.cookie-prefs__item input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--amari-black);
}

.cookie-prefs__item strong {
  display: block;
  font-size: 0.95rem;
}

.cookie-prefs__item span {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.cookie-prefs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cookie-prefs__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}

.contact-form .consents {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.6rem;
}

/* Ventana de lectura de Términos / Privacidad (formulario de contacto) */
.legal-modal {
  width: min(760px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--amari-white);
  color: var(--amari-black);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.legal-modal[open] {
  display: flex;
  flex-direction: column;
}

.legal-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.legal-modal__head,
.legal-modal__foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem clamp(1.1rem, 3vw, 1.75rem);
}

.legal-modal__head {
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
}

.legal-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  font-weight: 500;
  line-height: 1.15;
}

.legal-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem clamp(1.1rem, 3vw, 1.75rem);
  overscroll-behavior: contain;
}

.legal-modal__body .policy + .policy {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
}

.legal-modal__body .policy__title {
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
}

.legal-modal__body .policy__h {
  margin: 1rem 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.legal-modal__body p,
.legal-modal__body li {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--gray-800);
}

.legal-modal__body p + p {
  margin-top: 0.6rem;
}

.legal-modal__body ul {
  display: grid;
  gap: 0.3rem;
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.legal-modal__body mark.pending {
  padding: 0.05em 0.3em;
  border-radius: 4px;
  background: rgba(241, 166, 34, 0.22);
  color: var(--amari-black);
  font-weight: 600;
}

.legal-modal__body .policies__notice {
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--amari-terracotta);
  border-radius: var(--radius-sm);
  background: var(--terracotta-50);
  font-size: 0.88rem;
  line-height: 1.55;
}

.legal-modal__foot {
  flex-wrap: wrap;
  justify-content: flex-end;
  border-top: 1px solid var(--color-line);
}

.legal-modal__open {
  margin-right: auto;
  font-size: 0.86rem;
}

@media (max-width: 560px) {
  .legal-modal__foot .btn {
    flex: 1 1 100%;
  }

  .legal-modal__open {
    order: 3;
    margin: 0 auto;
  }
}

/* =============================================================
   Galería por lugar (Conoce Barranquilla): flechas + deslizar
   ============================================================= */
.place-gallery__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.place-gallery__track::-webkit-scrollbar {
  display: none;
}

.place-gallery__track:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -4px;
}

.place-gallery__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.place-gallery__btn {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--amari-black);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    opacity var(--dur-fast),
    transform var(--dur-fast);
}

.place-gallery__btn:hover {
  transform: translateY(-50%) scale(1.06);
}

.place-gallery__btn .icon {
  width: 18px;
  height: 18px;
}

.place-gallery__btn--prev {
  left: 0.6rem;
}

.place-gallery__btn--next {
  right: 0.6rem;
}

.place-gallery__btn:disabled {
  opacity: 0;
  pointer-events: none;
}

.place-gallery__count {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: var(--amari-white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .place-gallery__track {
    scroll-behavior: auto;
  }
}

/* =============================================================
   Aviso de cookies (aparece en la primera visita)
   ============================================================= */
.cookie-banner {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  gap: 0.9rem;
  max-width: 560px;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--amari-white);
  color: var(--amari-black);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.35);
  animation: cookie-in 0.45s var(--ease-out, ease) both;
}

.cookie-banner__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-soft);
}

.cookie-banner__text strong {
  color: var(--amari-black);
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@keyframes cookie-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media (max-width: 760px) {
  /* Encima de la barra fija de «Reservar / WhatsApp» */
  .cookie-banner {
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(76px + 0.6rem + env(safe-area-inset-bottom));
    padding: 1rem;
  }

  .cookie-banner__actions .btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    padding-inline: 0.75rem;
  }

  .cookie-banner__actions [data-banner='accept'] {
    order: -1;
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    animation: none;
  }
}

@media (max-width: 760px) {
  /* Las páginas legales no tienen barra fija abajo */
  .policies-page .cookie-banner {
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
}

/* Al cargar el mapa, el aviso con la foto se oculta de verdad */
.map-consent[hidden] {
  display: none;
}

.location__map iframe[data-map-frame] {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- hero-reel.css ---- */
/* =============================================================
   HERO "REEL" — secuencia cinematográfica de fotos reales del hotel
   Se ve como un video, pero son imágenes: no tiene controles, no se
   puede pausar, arrastrar ni seleccionar. 100 % CSS (bucle infinito).

   8 escenas × 4 s = ciclo de 32 s.
   Cada escena: fundido de entrada (1,2 s) por ENCIMA de la anterior,
   movimiento de cámara lento (zoom + paneo, estilo Ken Burns) y la
   anterior desaparece solo cuando la nueva ya es opaca → sin destellos
   oscuros entre fotos.

   Porcentajes sobre 32 s:  1,2 s = 3,75 %  ·  4 s = 12,5 %  ·  5,2 s = 16,25 %
   Retardo de cada escena: i × 4 s − 1,2 s (la primera arranca ya visible).
   ============================================================= */

.hero-reel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* sin interacción posible */
  user-select: none;
  -webkit-user-select: none;
  background: var(--gray-900);
}

.hero-reel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  z-index: 1;
  overflow: hidden;
  /* Fundido y movimiento de cámara en el MISMO elemento: van siempre
     sincronizados, aunque la foto se inserte después (sin saltos). */
  transform-origin: var(--origin, 50% 50%);
  animation:
    reel-fade 32s linear infinite,
    reel-camera 32s linear infinite;
  animation-delay: calc(var(--i) * 4s - 1.2s), calc(var(--i) * 4s - 1.2s);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* La primera escena es visible desde el primer pintado (antes de que corra la animación) */
.hero-reel__slide:first-child {
  opacity: 1;
}

.hero-reel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  -webkit-user-drag: none;
}

/* Mientras una foto aún no se ha cargado, no se muestra (evita cuadros vacíos) */
.hero-reel__slide img:not([src]) {
  visibility: hidden;
}

@keyframes reel-fade {
  0% {
    opacity: 0;
    z-index: 3;
  }
  3.75% {
    opacity: 1;
  }
  12.49% {
    z-index: 3;
  }
  12.5% {
    opacity: 1;
    z-index: 2;
  }
  16.24% {
    opacity: 1;
  }
  16.25%,
  100% {
    opacity: 0;
    z-index: 1;
  }
}

@keyframes reel-camera {
  0% {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  16.25%,
  100% {
    transform: scale(1.14) translate3d(var(--tx, 0), var(--ty, 0), 0);
  }
}

/* Movimiento reducido: solo la primera foto, fija */
@media (prefers-reduced-motion: reduce) {
  .hero-reel__slide,
  .hero-reel__slide img {
    animation: none !important;
  }

  .hero-reel__slide:not(:first-child) {
    display: none;
  }
}


/* ---- intro.css ---- */
/* =============================================================
   ANIMACIÓN DE INICIO — logotipo oficial
   Se usa siempre la MISMA imagen del logo oficial, recortada por
   letra con clip-path. Al terminar, todas las capas coinciden en
   píxeles con el logotipo completo: no se redibuja ni se deforma.

   Coreografía (~2 s):
   1. La "A" aparece sola, centrada (escala + desenfoque → nítida).
   2. La "A" se desliza a la izquierda y, desde su borde derecho,
      la palabra se desenrolla horizontalmente: M · A · R · I.
      Una línea de luz dorada (#F1A622) viaja en el borde del revelado
      y cada letra se asienta con un leve desfase.
   3. Un destello dorado recorre la palabra completa.
   4. "Living Suites" se abre desde el centro con una línea dorada fina.
   5. La cortina negra sube y revela la página.

   Medidas tomadas del PNG oficial (1652 × 629 px):
   letras: A 4–339 · M 382–795 · A 843–1179 · R 1226–1499 · I 1567–1647
   filas: palabra 3–372 · "Living Suites" 523–624
   Cortes (%): A|M 21.82 · M|A 49.58 · A|R 72.79 · R|I 92.80 · palabra/lema 71.15
   ============================================================= */

.splash {
  display: none;
}

.js:not(.no-splash) .splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--amari-black);
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.85s var(--ease-in-out);
  cursor: pointer;
}

.splash.is-out {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

.splash__logo {
  position: relative;
  width: clamp(250px, 38vw, 480px);
  aspect-ratio: 1652 / 629;
  transition:
    translate 0.85s var(--ease-in-out),
    opacity 0.55s var(--ease-out);
}

.splash.is-out .splash__logo {
  translate: 0 -48px;
  opacity: 0;
}

/* Todo el logotipo empieza desplazado para que la "A" quede centrada */
.splash__track {
  position: absolute;
  inset: 0;
  translate: 39.62% 0;
  animation: splash-track 0.85s var(--ease-in-out) 0.65s forwards;
}

@keyframes splash-track {
  to {
    translate: 0 0;
  }
}

.splash__logo > img,
.splash__track img,
.splash__word img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- 1. La "A" ---------- */
.splash__a {
  clip-path: inset(0 78.18% 28.85% 0);
  opacity: 0;
  animation: splash-a-in 0.6s var(--ease-out) 0.1s forwards;
}

@keyframes splash-a-in {
  from {
    opacity: 0;
    scale: 1.3;
    filter: blur(12px);
  }
  to {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
}

/* ---------- 2. La palabra se desenrolla desde la A ---------- */
.splash__word {
  position: absolute;
  inset: 0;
  clip-path: inset(0 78.5% 28.85% 21.82%);
  animation: splash-unroll 0.85s var(--ease-in-out) 0.65s forwards;
}

@keyframes splash-unroll {
  to {
    clip-path: inset(0 0 28.85% 21.82%);
  }
}

.splash__l {
  opacity: 0.15;
  translate: -7% 0;
  filter: blur(4px);
  animation: splash-settle 0.7s var(--ease-out) forwards;
  animation-delay: calc(0.7s + var(--i) * 0.09s);
}

.splash__l--m {
  clip-path: inset(0 50.42% 0 21.82%);
  --i: 0;
}

.splash__l--a {
  clip-path: inset(0 27.21% 0 49.58%);
  --i: 1;
}

.splash__l--r {
  clip-path: inset(0 7.2% 0 72.79%);
  --i: 2;
}

.splash__l--i {
  clip-path: inset(0 0 0 92.8%);
  --i: 3;
}

@keyframes splash-settle {
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

/* Línea de luz en el borde del revelado */
.splash__edge {
  position: absolute;
  top: -6%;
  bottom: 24%;
  left: 21.82%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--amari-gold) 20%, var(--amari-gold) 80%, transparent);
  box-shadow: 0 0 18px 2px rgba(241, 166, 34, 0.55);
  opacity: 0;
  animation: splash-edge 0.85s var(--ease-in-out) 0.65s forwards;
}

@keyframes splash-edge {
  0% {
    left: 21.82%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* ---------- 3. Destello dorado sobre la palabra ---------- */
.splash__shine {
  position: absolute;
  inset: 0 0 28.85% 0;
  pointer-events: none;
  -webkit-mask: url('../../public/brand/amari-logo-white.png') 0 0 / 100% calc(100% / 0.7115) no-repeat;
  mask: url('../../public/brand/amari-logo-white.png') 0 0 / 100% calc(100% / 0.7115) no-repeat;
  background: linear-gradient(100deg, transparent 38%, var(--amari-gold) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%;
  background-position: 120% 0;
  opacity: 0;
  animation: splash-shine 0.75s var(--ease-in-out) 1.4s forwards;
}

@keyframes splash-shine {
  0% {
    opacity: 1;
    background-position: 120% 0;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: -20% 0;
  }
}

/* ---------- 4. "Living Suites" ---------- */
.splash__tag {
  clip-path: inset(71.15% 50% 0 50%);
  opacity: 0;
  animation: splash-tag 0.7s var(--ease-out) 1.35s forwards;
}

@keyframes splash-tag {
  to {
    clip-path: inset(71.15% 0 0 0);
    opacity: 1;
  }
}

.splash__rule {
  position: absolute;
  left: 50%;
  top: 77%;
  width: 34%;
  height: 1px;
  background: var(--amari-gold);
  translate: -50% 0;
  scale: 0 1;
  opacity: 0;
  animation: splash-rule 0.95s var(--ease-out) 1.25s forwards;
}

@keyframes splash-rule {
  0% {
    scale: 0 1;
    opacity: 1;
  }
  45% {
    scale: 1 1;
    opacity: 1;
  }
  100% {
    scale: 1.6 1;
    opacity: 0;
  }
}


@media (prefers-reduced-motion: reduce) {
  .splash {
    display: none !important;
  }
}

/* ---- motion.css ---- */
/* =============================================================
   MOVIMIENTO — solo versión Full
   Todo el estado "oculto" depende de la clase .motion, que añade
   motion.js únicamente si el usuario NO pidió movimiento reducido.
   Sin JS o con prefers-reduced-motion, el contenido es visible de inmediato.
   Se animan solo transform / opacity / clip-path.
   ============================================================= */

/* ---------- Entrada cinematográfica del hero ---------- */
.motion .hero__media {
  scale: 1.14;
  transition: scale 2.6s var(--ease-out);
}

.motion .hero__shade {
  opacity: 0.4;
  background-color: rgba(0, 0, 0, 0.55);
  transition: opacity 1.6s var(--ease-out), background-color 1.8s var(--ease-out);
}

.motion .intro {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 1.1s var(--ease-out),
    translate 1.3s var(--ease-out);
}

.motion .hero__title .mask > .intro {
  opacity: 1;
  translate: 0 108%;
  transition: translate 1.25s var(--ease-out);
}

.motion .site-header {
  opacity: 0;
  translate: 0 -12px;
  transition:
    opacity 0.9s var(--ease-out) 1.1s,
    translate 0.9s var(--ease-out) 1.1s,
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.motion.is-ready .hero__media {
  scale: 1;
}

.motion.is-ready .hero__shade {
  opacity: 1;
  background-color: transparent;
}

.motion.is-ready .intro,
.motion.is-ready .hero__title .mask > .intro,
.motion.is-ready .site-header {
  opacity: 1;
  translate: 0 0;
}

.motion.is-ready .intro--1 { transition-delay: 0.35s; }
.motion.is-ready .intro--2 { transition-delay: 0.6s; }
.motion.is-ready .intro--3 { transition-delay: 0.78s; }
.motion.is-ready .intro--4 { transition-delay: 1.05s; }
.motion.is-ready .intro--5 { transition-delay: 1.3s; }

/* Indicador de scroll */
.hero__scroll span::after {
  content: '';
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: var(--amari-gold);
}

.motion .hero__scroll span::after {
  animation: scroll-cue 2.4s var(--ease-in-out) 2.2s infinite;
}

@keyframes scroll-cue {
  0% { translate: 0 0; }
  60%, 100% { translate: 0 360%; }
}

/* ---------- Indicador animado de navegación ---------- */
.motion .site-nav__indicator.is-visible {
  opacity: 1;
}

/* ---------- Revelado al desplazarse ---------- */
.motion [data-reveal]:not([data-reveal='image']) {
  opacity: 0;
  translate: 0 34px;
  transition:
    opacity 0.95s var(--ease-out),
    translate 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}

.motion [data-reveal].is-in:not([data-reveal='image']) {
  opacity: 1;
  translate: 0 0;
}

/* Imágenes: cortina de abajo hacia arriba + ligera escala.
   El recorte se aplica a la imagen (no al contenedor) para que
   IntersectionObserver pueda detectar el contenedor. */
.motion [data-reveal='image'] img,
.motion [data-reveal='image'] iframe {
  clip-path: inset(100% 0 0 0);
  scale: 1.18;
  transition:
    clip-path 1.35s var(--ease-out),
    scale 1.8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}

.motion [data-reveal='image'] iframe {
  scale: 1;
}

.motion [data-reveal='image'] figcaption {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.8s var(--ease-out) 0.7s, translate 0.9s var(--ease-out) 0.7s;
}

.motion [data-reveal='image'].is-in img,
.motion [data-reveal='image'].is-in iframe {
  clip-path: inset(0 0 0 0);
  scale: 1;
}

.motion [data-reveal='image'].is-in figcaption {
  opacity: 1;
  translate: 0 0;
}

/* Hover de detalles conserva su zoom tras el revelado */
.motion .details__item.is-in:hover img {
  scale: 1.06;
}

/* Aparición escalonada */
.motion [data-stagger] > * {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity 0.8s var(--ease-out),
    translate 0.95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.motion [data-stagger].is-in > * {
  opacity: 1;
  translate: 0 0;
}

/* Aliados: entrada lateral alterna */
.motion .ally[data-reveal] {
  translate: -40px 0;
}

.motion .ally--laundry[data-reveal] {
  translate: 40px 0;
}

.motion .ally[data-reveal].is-in {
  translate: 0 0;
}

.motion .ally__visual .icon {
  scale: 0.6;
  opacity: 0;
  transition: scale 1.2s var(--ease-out) 0.35s, opacity 0.8s var(--ease-out) 0.35s;
}

.motion .ally.is-in .ally__visual .icon {
  scale: 1;
  opacity: 1;
}

.motion .ally__visual::before {
  scale: 0.4;
  transition: scale 1.8s var(--ease-out) 0.2s;
}

.motion .ally.is-in .ally__visual::before {
  scale: 1;
}

.ally:hover .ally__visual .icon {
  rotate: -6deg;
  transition: rotate var(--dur) var(--ease-out);
}

/* Descuento */
.motion .discount[data-reveal] {
  translate: 0 0;
  scale: 0.92;
  transition: opacity 0.9s var(--ease-out), scale 1.1s var(--ease-out);
}

.motion .discount[data-reveal].is-in {
  scale: 1;
}

/* Espacios de trabajo: el icono se dibuja */
.motion .workspace__icon {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1.8s var(--ease-out) 0.3s;
}

.motion .workspace.is-in .workspace__icon {
  stroke-dashoffset: 0;
}

.workspace:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* ---------- Menú móvil ---------- */
.motion .mobile-menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-in-out);
}

.motion .mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
}

.motion .mobile-menu li,
.motion .mobile-menu__footer {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.5s var(--ease-out), translate 0.7s var(--ease-out);
}

.motion .mobile-menu.is-open li,
.motion .mobile-menu.is-open .mobile-menu__footer {
  opacity: 1;
  translate: 0 0;
}

.motion .mobile-menu.is-open li:nth-child(1) { transition-delay: 0.25s; }
.motion .mobile-menu.is-open li:nth-child(2) { transition-delay: 0.3s; }
.motion .mobile-menu.is-open li:nth-child(3) { transition-delay: 0.35s; }
.motion .mobile-menu.is-open li:nth-child(4) { transition-delay: 0.4s; }
.motion .mobile-menu.is-open li:nth-child(5) { transition-delay: 0.45s; }
.motion .mobile-menu.is-open li:nth-child(6) { transition-delay: 0.5s; }
.motion .mobile-menu.is-open li:nth-child(7) { transition-delay: 0.55s; }
.motion .mobile-menu.is-open .mobile-menu__footer { transition-delay: 0.6s; }

.motion .wa-float {
  scale: 0;
  transition: scale 0.6s var(--ease-out), transform var(--dur) var(--ease-out), background-color var(--dur), color var(--dur);
}

.motion .wa-float.is-visible {
  scale: 1;
}

/* ---------- Microinteracciones de botones ---------- */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg-hover);
  border-radius: inherit;
  translate: 0 101%;
  transition: translate 0.55s var(--ease-out);
}

.btn:hover::before {
  translate: 0 0;
}

.btn:hover {
  background: var(--btn-bg);
}

.btn.is-pending::before {
  display: none;
}

/* ---------- Galería: elevación sutil ---------- */
.gallery__track img {
  transition: scale 1.1s var(--ease-out);
}

.gallery__track li:hover img {
  scale: 1.04;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}