/* ============================================================
   HOTEL ESPEL — design system
   Vibe: Editorial Luxury · Layout: Editorial Split + Asymmetric Bento
   ============================================================ */

@layer reset, tokens, base, layout, components, motion, utilities;

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body { min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  picture { display: contents; }
  button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--c-espresso); color: var(--c-cream); }
}

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    /* Brand palette — derived from Hotel Espel logo (orange + cobalt) over warm cream base */
    --c-cream:        #FAF7F2;
    --c-cream-2:      #F4EFE8;
    --c-cream-3:      #ECE5DA;
    --c-paper:        #FDFBF7;
    --c-espresso:     #2C231C;
    --c-espresso-2:   #3D3128;
    --c-mute:         #5B4F42;
    --c-mute-2:       #74675A;
    --c-sage:         #1E3680;        /* brand cobalt (logo outer diamond) */
    --c-sage-soft:    #6F7FB5;        /* brand cobalt soft */
    --c-gold:         #DC6B26;        /* brand orange (logo inner square) */
    --c-gold-soft:    #ECA372;        /* brand orange soft */
    --c-line:         rgba(44, 35, 28, 0.10);
    --c-line-soft:    rgba(44, 35, 28, 0.06);
    --c-glass:        rgba(250, 247, 242, 0.72);
    --c-shadow-soft:  0 2px 8px rgba(44,35,28,0.04), 0 12px 32px rgba(44,35,28,0.06);
    --c-shadow-card:  0 1px 2px rgba(44,35,28,0.03), 0 18px 48px rgba(44,35,28,0.08);

    /* Typography */
    --f-serif:  "Fraunces", "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --f-sans:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono:   "JetBrains Mono", ui-monospace, monospace;

    /* Type scale (clamp = fluid responsive) */
    --t-eyebrow: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem);
    --t-body:    clamp(0.95rem, 0.92rem + 0.2vw, 1.0625rem);
    --t-lead:    clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
    --t-h6:      clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
    --t-h5:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --t-h4:      clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --t-h3:      clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
    --t-h2:      clamp(2.5rem, 1.8rem + 3vw, 4.25rem);
    --t-h1:      clamp(3rem, 2rem + 5vw, 7rem);
    --t-display: clamp(4rem, 2.5rem + 8vw, 11rem);

    /* Spacing scale */
    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-5:  1.5rem;
    --s-6:  2rem;
    --s-7:  3rem;
    --s-8:  4rem;
    --s-9:  6rem;
    --s-10: 8rem;
    --s-11: 12rem;

    /* Radius (squircle-feeling) */
    --r-sm:  0.5rem;
    --r-md:  1rem;
    --r-lg:  1.5rem;
    --r-xl:  2rem;
    --r-2xl: 2.5rem;
    --r-pill: 999px;

    /* Motion — premium cubic beziers */
    --ease-spring:  cubic-bezier(0.32, 0.72, 0, 1);
    --ease-smooth:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-soft:cubic-bezier(0.22, 0.61, 0.36, 1);
    --d-fast:   240ms;
    --d-base:   500ms;
    --d-slow:   800ms;
    --d-cinema: 1200ms;

    /* Layout */
    --max-w:        1440px;
    --max-w-narrow: 1080px;
    --max-w-prose:  62ch;
    --gutter:       clamp(1rem, 4vw, 3rem);

    /* Z-layers */
    --z-grain:    1;
    --z-content:  10;
    --z-nav:      80;
    --z-overlay:  90;
    --z-modal:    100;
  }

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

/* ---------- BASE ---------- */
@layer base {
  body {
    background: var(--c-cream);
    color: var(--c-espresso);
    font-family: var(--f-sans);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.005em;
    overflow-x: hidden;
  }
  html { scroll-padding-top: 5rem; }
  section[id] { scroll-margin-top: 5rem; }

  h1, h2, h3 {
    font-family: var(--f-serif);
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
    color: var(--c-espresso);
    line-height: 0.96;
    letter-spacing: -0.025em;
  }
  h1 { font-size: var(--t-h1); line-height: 0.92; letter-spacing: -0.04em; }
  h2 { font-size: var(--t-h2); letter-spacing: -0.03em; }
  h3 { font-size: var(--t-h3); }
  .h-mid { font-size: var(--t-h4); line-height: 1.1; }
  .h-sub { font-size: var(--t-h5); line-height: 1.2; }

  p { color: var(--c-mute); max-width: var(--max-w-prose); }
  p.lead { font-size: var(--t-lead); color: var(--c-espresso-2); line-height: 1.5; letter-spacing: -0.01em; }

  strong, b { font-weight: 600; color: var(--c-espresso); }

  /* Film-grain overlay for paper feel — fixed, perf-safe */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-grain);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    opacity: 0.035;
    mix-blend-mode: multiply;
  }
}

/* ---------- LAYOUT ---------- */
@layer layout {
  .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
  .container-narrow { width: 100%; max-width: var(--max-w-narrow); margin-inline: auto; padding-inline: var(--gutter); }

  section { padding-block: clamp(5rem, 8vw, 10rem); position: relative; }
  section + section { padding-top: 0; }
  /* The cta-final card brings its own internal padding; reduce (don't kill) the previous section's bottom padding to avoid double spacing while keeping a clean visual transition */
  section:has(+ section .cta-final) { padding-bottom: clamp(2rem, 4vw, 4rem); }
  .section-tight { padding-block: clamp(3rem, 5vw, 6rem); }

  .grid { display: grid; gap: var(--s-6); }
}

/* ---------- COMPONENTS ---------- */
@layer components {

  /* ========== NAV — Fluid Glass Island ========== */
  .nav {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    gap: var(--s-7);
    padding: 0.4rem 0.6rem 0.4rem 0.85rem;
    background: var(--c-glass);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-radius: var(--r-pill);
    box-shadow: var(--c-shadow-soft), inset 0 1px 0 rgba(255,255,255,0.6);
    border: 1px solid var(--c-line-soft);
    transition: padding var(--d-base) var(--ease-spring), top var(--d-base) var(--ease-spring);
    max-width: calc(100% - 2rem);
  }
  .nav__brand {
    font-family: var(--f-serif);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--c-espresso);
    display: inline-flex;
    align-items: center;
  }
  .nav__brand em { font-style: italic; font-weight: 400; color: var(--c-gold); }
  .nav__brand img { display: block; height: 56px; width: auto; filter: drop-shadow(0 1px 2px rgba(44,35,28,0.18)); }
  .nav__links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .nav__link {
    position: relative;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--c-espresso-2);
    border-radius: var(--r-pill);
    transition: color var(--d-fast) var(--ease-spring), background var(--d-fast) var(--ease-spring);
  }
  .nav__link:hover { color: var(--c-espresso); background: var(--c-line-soft); }
  .nav__link.is-active { color: var(--c-espresso); }
  .nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--c-gold);
  }
  .nav__lang {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-mute);
    border-left: 1px solid var(--c-line);
    margin-left: 0.5rem;
    padding-left: 0.85rem;
  }
  .nav__lang a {
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    transition: color var(--d-fast) var(--ease-spring), background var(--d-fast) var(--ease-spring);
  }
  .nav__lang a:hover { color: var(--c-espresso); }
  .nav__lang a.is-active { color: var(--c-espresso); background: var(--c-cream-3); }

  .nav__burger { display: none; }

  .nav-mobile {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(250, 247, 242, 0.96);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    flex-direction: column;
    padding: 6rem var(--gutter) 3rem;
    padding-top: max(6rem, calc(env(safe-area-inset-top, 0px) + 5rem));
    padding-bottom: max(3rem, env(safe-area-inset-bottom, 0px));
    opacity: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: opacity var(--d-base) var(--ease-spring);
  }

  /* ========== BUTTONS — Pill + Button-in-Button ========== */
  .btn {
    --bg: var(--c-espresso);
    --fg: var(--c-cream);
    --inner-bg: rgba(255,255,255,0.12);
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.7rem 0.7rem 0.7rem 1.4rem;
    font-family: var(--f-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--fg);
    background: var(--bg);
    border-radius: var(--r-pill);
    box-shadow: 0 1px 2px rgba(44,35,28,0.06), 0 14px 28px rgba(44,35,28,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-spring);
    will-change: transform;
  }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(44,35,28,0.08), 0 22px 40px rgba(44,35,28,0.22), inset 0 1px 0 rgba(255,255,255,0.22); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    background: var(--inner-bg);
    border-radius: var(--r-pill);
    transition: transform var(--d-base) var(--ease-spring), background var(--d-base) var(--ease-spring);
  }
  .btn__icon svg { width: 0.95rem; height: 0.95rem; }
  .btn:hover .btn__icon { transform: translate(2px, -2px) scale(1.06); background: rgba(255,255,255,0.20); }

  .btn--ghost {
    --bg: transparent;
    --fg: var(--c-espresso);
    --inner-bg: var(--c-line-soft);
    box-shadow: inset 0 0 0 1px var(--c-line);
  }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--c-espresso); transform: translateY(-1px); }
  .btn--ghost .btn__icon { background: var(--c-line-soft); }
  .btn--ghost:hover .btn__icon { background: var(--c-espresso); color: var(--c-cream); }

  .btn--gold { --bg: var(--c-gold); --fg: var(--c-paper); }

  .btn--sm { font-size: 0.78rem; padding: 0.45rem 0.45rem 0.45rem 1rem; }
  .btn--sm .btn__icon { width: 1.5rem; height: 1.5rem; }
  .btn--sm .btn__icon svg { width: 0.7rem; height: 0.7rem; }

  /* ========== EYEBROW TAG ========== */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    font-family: var(--f-sans);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-mute);
    background: var(--c-cream-2);
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line-soft);
  }
  .eyebrow::before {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--c-gold);
    border-radius: 50%;
  }

  /* ========== DOUBLE-BEZEL CARD (Doppelrand) ========== */
  .bezel {
    position: relative;
    padding: 0.5rem;
    background: var(--c-cream-2);
    border: 1px solid var(--c-line-soft);
    border-radius: calc(var(--r-2xl) + 0.5rem);
    box-shadow: var(--c-shadow-soft);
  }
  .bezel__core {
    position: relative;
    border-radius: var(--r-2xl);
    overflow: hidden;
    background: var(--c-paper);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px var(--c-line-soft);
  }

  /* ========== HERO — Editorial Split ========== */
  .hero {
    position: relative;
    padding-block: clamp(8rem, 12vw, 12rem) clamp(4rem, 6vw, 6rem);
    overflow: hidden;
  }
  .hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
  .hero__copy { position: relative; z-index: 2; }
  .hero__title {
    font-size: var(--t-h1);
    line-height: 0.9;
    letter-spacing: -0.045em;
    margin-block: 1.5rem 1.75rem;
    font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  }
  .hero__title em {
    font-style: italic;
    font-weight: 300;
    color: var(--c-gold);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  }
  .hero__subtitle {
    font-size: var(--t-lead);
    color: var(--c-espresso-2);
    max-width: 36ch;
    line-height: 1.5;
    margin-bottom: 2rem;
  }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
  .hero__meta {
    display: flex;
    gap: 2.5rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-line);
    flex-wrap: wrap;
  }
  .hero__meta-item .stat-num {
    display: block;
    font-family: var(--f-serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--c-espresso);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .hero__meta-item p {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-mute);
    margin-top: 0.25rem;
  }

  /* Hero image stack — Z-Axis Cascade tilt */
  .hero__stack {
    position: relative;
    aspect-ratio: 4/5;
    perspective: 1200px;
  }
  .hero__photo {
    position: absolute;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--c-cream-3);
    box-shadow: var(--c-shadow-card);
    transform-origin: center;
    transition: transform var(--d-cinema) var(--ease-smooth);
  }
  .hero__photo img { width: 100%; height: 100%; object-fit: cover; }
  .hero__photo--main {
    inset: 0 12% 8% 0;
    transform: rotate(-1.5deg);
    z-index: 3;
  }
  .hero__photo--accent {
    width: 44%;
    aspect-ratio: 3/4;
    bottom: 0; right: 0;
    transform: rotate(3deg);
    z-index: 4;
    box-shadow: 0 1px 2px rgba(44,35,28,0.05), 0 22px 40px rgba(44,35,28,0.16);
  }
  .hero__photo--bg {
    width: 32%;
    aspect-ratio: 1;
    top: 0; right: 0;
    transform: rotate(5deg) translate(8%, -8%);
    z-index: 2;
    opacity: 0.85;
    border-radius: 50%;
  }
  .hero__badge {
    position: absolute;
    top: 12%; left: -8%;
    padding: 0.85rem 1.1rem;
    background: var(--c-paper);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-pill);
    box-shadow: var(--c-shadow-card);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c-espresso);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 5;
    transform: rotate(-4deg);
  }
  .hero__badge svg { width: 14px; height: 14px; color: var(--c-gold); }

  /* ========== BOOKING BAR ========== */
  .booking {
    position: relative;
    margin-top: -3rem;
    z-index: 5;
  }
  .booking__inner {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 1fr auto;
    gap: 0;
    align-items: stretch;
    padding: 0.5rem;
    background: var(--c-paper);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-xl);
    box-shadow: var(--c-shadow-card);
  }
  .booking__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    border-right: 1px solid var(--c-line-soft);
    transition: background var(--d-fast) var(--ease-spring);
    border-radius: var(--r-md);
    cursor: pointer;
    min-width: 0;
  }
  .booking__field:hover { background: var(--c-cream); }
  .booking__field:last-of-type { border-right: 0; }
  .booking__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-cream-2);
    color: var(--c-espresso);
    transition: background var(--d-fast) var(--ease-spring), color var(--d-fast) var(--ease-spring);
  }
  .booking__icon svg { width: 18px; height: 18px; }
  .booking__field:hover .booking__icon { background: var(--c-espresso); color: var(--c-cream); }
  .booking__field-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .booking__label {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-mute);
  }
  .booking__field input,
  .booking__field select {
    font-family: var(--f-sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--c-espresso);
    width: 100%;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    min-width: 0;
  }
  .booking__field input:focus,
  .booking__field select:focus { outline: none; }
  .booking__field input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; position: absolute; inset: 0; width: 100%; height: 100%; }
  .booking__dates-trigger,
  .booking__occupancy-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--f-sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--c-espresso);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
  }
  .booking__caret {
    width: 14px; height: 14px;
    color: var(--c-mute);
    transition: transform var(--d-fast) var(--ease-spring);
    flex: 0 0 auto;
  }
  .booking__field--occupancy[data-open="true"] .booking__caret,
  .booking__field--dates[data-open="true"] .booking__caret { transform: rotate(180deg); }
  .booking__popover {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    right: 0;
    min-width: 320px;
    background: var(--c-paper);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--c-shadow-soft), 0 18px 50px -12px rgba(44,35,28,0.18);
    padding: 1rem 1.1rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .booking__popover[hidden] { display: none; }
  .booking__counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .booking__counter-text { display: flex; flex-direction: column; gap: 0.1rem; }
  .booking__counter-text strong {
    font-family: var(--f-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-espresso);
  }
  .booking__counter-text span {
    font-size: 0.75rem;
    color: var(--c-mute);
  }
  .booking__stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .booking__stepper button {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    background: var(--c-paper);
    color: var(--c-espresso);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--d-fast) var(--ease-spring), color var(--d-fast) var(--ease-spring), border-color var(--d-fast) var(--ease-spring);
  }
  .booking__stepper button:hover:not(:disabled) {
    background: var(--c-espresso);
    color: var(--c-cream);
    border-color: var(--c-espresso);
  }
  .booking__stepper button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .booking__stepper output {
    min-width: 1.6rem;
    text-align: center;
    font-family: var(--f-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-espresso);
    font-variant-numeric: tabular-nums;
  }
  .booking__popover-close {
    align-self: flex-end;
    margin-top: 0.35rem;
    background: var(--c-espresso);
    color: var(--c-cream);
    border: 0;
    border-radius: var(--r-pill);
    padding: 0.55rem 1.25rem;
    font-family: var(--f-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background var(--d-fast) var(--ease-spring);
  }
  .booking__popover-close:hover { background: var(--c-gold); }

  /* Date range picker (calendario) */
  .booking__popover--dates {
    width: max-content;
    max-width: calc(100vw - 2rem);
    min-width: 0;
    padding: 1.25rem;
    left: 0;
    right: auto;
  }
  .cal { display: flex; flex-direction: column; gap: 1rem; }
  .cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .cal__nav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    background: var(--c-paper);
    color: var(--c-espresso);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background var(--d-fast) var(--ease-spring), color var(--d-fast) var(--ease-spring);
  }
  .cal__nav:hover { background: var(--c-espresso); color: var(--c-cream); border-color: var(--c-espresso); }
  .cal__nav svg { width: 14px; height: 14px; }
  .cal__months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    flex: 1 1 auto;
  }
  .cal__month-label {
    font-family: var(--f-serif);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    color: var(--c-espresso);
    margin-bottom: 0.5rem;
    text-transform: capitalize;
  }
  .cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--c-mute);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
  }
  .cal__weekdays span { text-align: center; padding: 0.4rem 0; }
  .cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 2px;
  }
  .cal__day {
    position: relative;
    aspect-ratio: 1;
    width: 36px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-sans);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--c-espresso);
    transition: background var(--d-fast) var(--ease-spring), color var(--d-fast) var(--ease-spring);
  }
  .cal__day:hover:not(:disabled):not(.is-selected):not(.is-in-range) {
    background: var(--c-cream-2);
  }
  .cal__day:disabled {
    color: var(--c-line);
    cursor: not-allowed;
    text-decoration: line-through;
  }
  .cal__day--out { visibility: hidden; pointer-events: none; }
  .cal__day.is-in-range {
    background: var(--c-cream-3);
    border-radius: 0;
  }
  .cal__day.is-selected {
    background: var(--c-espresso);
    color: var(--c-cream);
  }
  .cal__day.is-start { border-radius: 50% 0 0 50%; }
  .cal__day.is-end   { border-radius: 0 50% 50% 0; }
  .cal__day.is-start.is-selected { border-radius: 50% 0 0 50%; }
  .cal__day.is-end.is-selected   { border-radius: 0 50% 50% 0; }
  .cal__day.is-start.is-end.is-selected { border-radius: 50%; }
  .cal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--c-line-soft);
    margin-top: 0.25rem;
  }
  .cal__legend {
    font-size: 0.85rem;
    color: var(--c-mute);
  }
  .cal__legend strong { color: var(--c-espresso); font-weight: 600; }

  .booking__field--promo input { font-size: 0.88rem; }
  .booking__cta { padding: 0; display: flex; align-items: stretch; }
  .booking__cta .btn { width: 100%; justify-content: center; padding-left: 1.6rem; padding-right: 0.6rem; border-radius: calc(var(--r-xl) - 0.5rem); }

  /* ========== STORY SECTION ========== */
  .story__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }
  .story__copy h2 { margin-block: 1.25rem 1.75rem; max-width: 14ch; }
  .story__copy p + p { margin-top: 1.25rem; }
  .story__signature {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-line);
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .story__signature p { font-size: 0.85rem; color: var(--c-mute); margin: 0; }
  .story__signature strong { color: var(--c-espresso); display: block; font-family: var(--f-serif); font-size: 1.25rem; font-weight: 400; font-style: italic; }

  .story__visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
  }
  .story__img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--c-shadow-soft); }
  .story__img img { width: 100%; height: 100%; object-fit: cover; }
  .story__img--tall { grid-row: 1/3; aspect-ratio: 3/5.4; }
  .story__quote {
    grid-column: 2;
    padding: 1.75rem 1.5rem;
    background: var(--c-cream-2);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-xl);
    font-family: var(--f-serif);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--c-espresso);
    letter-spacing: -0.01em;
  }
  .story__quote::before { content: "“"; font-size: 3rem; line-height: 0.5; color: var(--c-gold); display: block; height: 1.5rem; }
  .story__quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-mute); }

  /* ========== ROOMS — Asymmetric Bento ========== */
  .rooms__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: 4rem;
  }
  .rooms__head h2 { max-width: 16ch; }
  .rooms__head p { max-width: 38ch; margin-left: auto; }

  .rooms__bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: 1.25rem;
  }
  .room {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--c-cream-3);
    isolation: isolate;
    transition: transform var(--d-base) var(--ease-spring);
  }
  .room:hover { transform: translateY(-3px); }
  .room__img {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .room__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--d-cinema) var(--ease-smooth);
  }
  .room:hover .room__img img { transform: scale(1.04); }
  .room::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(44,35,28,0) 0%, rgba(44,35,28,0) 45%, rgba(44,35,28,0.78) 100%);
    pointer-events: none;
  }
  .room__body {
    position: absolute;
    inset: auto 1.5rem 1.5rem 1.5rem;
    z-index: 3;
    color: var(--c-cream);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .room__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(250,247,242,0.78);
    font-weight: 600;
  }
  .room__meta::before { content: ""; width: 18px; height: 1px; background: var(--c-gold); }
  .room__title {
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: 400;
    color: var(--c-cream);
    line-height: 1;
    letter-spacing: -0.025em;
  }
  .room__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: rgba(250,247,242,0.78);
  }
  .room__price strong { font-family: var(--f-serif); font-size: 1.5rem; font-weight: 400; color: var(--c-cream); font-style: italic; }
  .room__cta {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    background: var(--c-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50%;
    color: var(--c-espresso);
    transition: transform var(--d-base) var(--ease-spring), background var(--d-base) var(--ease-spring);
  }
  .room:hover .room__cta { transform: translate(2px, -2px) scale(1.06); background: var(--c-paper); }
  .room__cta svg { width: 14px; height: 14px; }

  .room--big   { grid-column: span 7; min-height: 480px; }
  .room--mid   { grid-column: span 5; min-height: 480px; }
  .room--wide  { grid-column: span 5; min-height: 360px; }
  .room--tall  { grid-column: span 7; min-height: 360px; }
  .room--half  { grid-column: span 6; min-height: 520px; }
  .rooms__bento--duo { grid-template-columns: repeat(12, 1fr); }

  /* ========== AMENITIES ========== */
  .amenities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  .amenity {
    padding: 2rem 1.75rem;
    background: var(--c-paper);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-xl);
    transition: transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-spring), border-color var(--d-base) var(--ease-spring);
  }
  .amenity:hover { transform: translateY(-3px); box-shadow: var(--c-shadow-card); border-color: var(--c-line); }
  .amenity__icon {
    display: inline-flex;
    width: 3rem; height: 3rem;
    align-items: center;
    justify-content: center;
    background: var(--c-cream-2);
    border-radius: var(--r-md);
    color: var(--c-espresso);
    margin-bottom: 1.25rem;
    transition: background var(--d-base) var(--ease-spring), color var(--d-base) var(--ease-spring);
  }
  .amenity:hover .amenity__icon { background: var(--c-espresso); color: var(--c-gold-soft); }
  .amenity__icon svg { width: 22px; height: 22px; stroke-width: 1.25; }
  .amenity h3 { margin-bottom: 0.5rem; font-family: var(--f-serif); }
  .amenity p { font-size: 0.92rem; color: var(--c-mute); }

  /* ========== EXPERIENCE STRIP ========== */
  .experience {
    background: var(--c-espresso);
    color: var(--c-cream);
    border-radius: var(--r-2xl);
    padding: clamp(3rem, 5vw, 5rem);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--c-shadow-card);
  }
  .experience::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%);
    pointer-events: none;
  }
  .experience h3 { color: var(--c-cream); max-width: 16ch; margin-block: 1.25rem 1.5rem; }
  .experience h3 em { font-style: italic; color: var(--c-gold-soft); font-weight: 300; }
  .experience p { color: rgba(250,247,242,0.7); max-width: 38ch; }
  .experience .eyebrow { background: rgba(255,255,255,0.06); color: var(--c-gold-soft); border-color: rgba(255,255,255,0.1); }
  .experience .btn--ghost { color: var(--c-cream); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
  .experience .btn--ghost .btn__icon { background: rgba(255,255,255,0.1); }
  .experience .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--c-cream); }

  .experience__list { display: grid; gap: 1px; background: rgba(255,255,255,0.08); border-radius: var(--r-lg); overflow: hidden; }
  .experience__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--c-espresso);
    transition: background var(--d-fast) var(--ease-spring);
  }
  .experience__item:hover { background: var(--c-espresso-2); }
  .experience__item-num {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--c-gold-soft);
    width: 1.5rem;
  }
  .experience__item-title { display: block; font-family: var(--f-sans); font-size: var(--t-h6); color: var(--c-cream); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
  .experience__item p { color: rgba(250,247,242,0.6); font-size: 0.82rem; margin-top: 0.15rem; }
  .experience__item svg { color: rgba(250,247,242,0.4); width: 16px; height: 16px; transition: transform var(--d-fast) var(--ease-spring), color var(--d-fast) var(--ease-spring); }
  .experience__item:hover svg { color: var(--c-gold-soft); transform: translateX(3px); }

  /* ========== GALLERY PREVIEW ========== */
  .gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
    gap: 1rem;
  }
  .gallery a {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    transition: transform var(--d-base) var(--ease-spring);
  }
  .gallery a:hover { transform: scale(1.02); }
  .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-cinema) var(--ease-smooth); }
  .gallery a:hover img { transform: scale(1.06); }
  .gallery .g1 { grid-column: span 2; grid-row: span 2; }
  .gallery .g2 { grid-column: span 2; }
  .gallery .g3 { grid-column: span 2; }
  .gallery .g4 { grid-column: span 2; }
  .gallery .g5 { grid-column: span 2; }

  /* ========== TESTIMONIAL ========== */
  .testimonial {
    text-align: center;
    max-width: 64rem;
    margin-inline: auto;
  }
  .testimonial__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--c-gold);
    margin-bottom: 1.5rem;
  }
  .testimonial__stars svg { width: 18px; height: 18px; fill: currentColor; }
  .testimonial__quote {
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--c-espresso);
    font-weight: 300;
    margin-bottom: 2rem;
  }
  .testimonial__quote em { font-style: italic; color: var(--c-gold); }
  .testimonial__author { display: flex; align-items: center; gap: 1rem; justify-content: center; }
  .testimonial__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
  .testimonial__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--c-cream-2);
    border: 1px solid var(--c-line);
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--c-gold);
    letter-spacing: -0.02em;
  }
  .testimonial__author strong { display: block; font-family: var(--f-serif); font-size: 1.1rem; font-weight: 500; color: var(--c-espresso); }
  .testimonial__author span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-mute); }

  /* ========== CTA FINAL ========== */
  .cta-final {
    position: relative;
    padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 5vw, 5rem);
    background: var(--c-cream-2);
    border-radius: var(--r-2xl);
    overflow: hidden;
    text-align: center;
  }
  .cta-final::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(168,141,92,0.12), transparent 60%);
    pointer-events: none;
  }
  .cta-final h2 { max-width: 18ch; margin: 1.25rem auto 1.5rem; }
  .cta-final h2 em { font-style: italic; color: var(--c-gold); font-weight: 300; }
  .cta-final p { margin-inline: auto; margin-bottom: 2rem; color: var(--c-espresso-2); }
  .cta-final__ctas { display: inline-flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }

  /* ========== PAGE HERO (internal pages) ========== */
  .page-hero {
    padding-block: clamp(8rem, 11vw, 11rem) clamp(3rem, 5vw, 5rem);
    position: relative;
  }
  .page-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
  .page-hero__title {
    font-size: var(--t-h1);
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin-block: 1.25rem 0;
    max-width: 12ch;
  }
  .page-hero__title em { font-style: italic; color: var(--c-gold); font-weight: 300; }
  .page-hero__intro {
    padding-bottom: 0.5rem;
  }
  .page-hero__intro p {
    font-size: var(--t-lead);
    color: var(--c-espresso-2);
    max-width: 38ch;
    line-height: 1.5;
  }
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-mute);
    margin-bottom: 0;
  }
  .breadcrumb a { transition: color var(--d-fast) var(--ease-spring); }
  .breadcrumb a:hover { color: var(--c-espresso); }
  .breadcrumb svg { width: 12px; height: 12px; opacity: 0.5; }
  .breadcrumb span { color: var(--c-espresso); }

  /* ========== ROOM DETAIL CARDS ========== */
  .room-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding-block: clamp(3rem, 5vw, 5rem);
    border-bottom: 1px solid var(--c-line);
  }
  .room-detail:last-child { border-bottom: 0; }
  .room-detail:nth-child(even) .room-detail__visual { order: -1; }
  .room-detail__visual {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--c-shadow-card);
  }
  .room-detail__visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--d-cinema) var(--ease-smooth);
  }
  .room-detail:hover .room-detail__visual img { transform: scale(1.03); }
  .room-detail__num {
    position: absolute;
    top: 1.25rem; left: 1.25rem;
    padding: 0.4rem 0.85rem;
    background: var(--c-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--r-pill);
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--c-espresso);
  }
  .room-detail__title {
    font-size: var(--t-h3);
    margin-block: 0.75rem 1rem;
    letter-spacing: -0.03em;
  }
  .room-detail__title em { font-style: italic; color: var(--c-gold); font-weight: 300; }
  .room-detail__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.25rem 0;
    margin-block: 1.5rem;
    border-block: 1px solid var(--c-line);
  }
  .room-detail__specs li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--c-espresso-2);
  }
  .room-detail__specs svg {
    width: 16px; height: 16px;
    color: var(--c-mute);
    stroke-width: 1.25;
  }
  .room-detail__amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
  }
  .room-detail__amenities li {
    padding: 0.3rem 0.75rem;
    background: var(--c-cream-2);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    color: var(--c-espresso-2);
  }
  .room-detail__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
  }
  .room-detail__price strong {
    font-family: var(--f-serif);
    font-size: 2rem;
    font-weight: 400;
    color: var(--c-espresso);
    font-style: italic;
  }
  .room-detail__price span {
    font-size: 0.85rem;
    color: var(--c-mute);
  }
  .room-detail__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }

  /* ========== SERVICE GRID ========== */
  .services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .service {
    padding: 2rem;
    background: var(--c-paper);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-xl);
    transition: transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-spring);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .service:hover { transform: translateY(-3px); box-shadow: var(--c-shadow-card); }
  .service__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--c-line);
  }
  .service__icon {
    width: 3rem; height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-cream-2);
    border-radius: var(--r-md);
    color: var(--c-espresso);
    flex-shrink: 0;
  }
  .service__icon svg { width: 22px; height: 22px; stroke-width: 1.25; }
  .service :is(h2, h3) {
    font-family: var(--f-serif);
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .service :is(h2, h3) em { font-style: italic; color: var(--c-gold); }
  .service__hours {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--c-mute);
    margin-top: 0.25rem;
  }
  .service__hours svg { width: 12px; height: 12px; }

  /* ========== TIMELINE (historia) ========== */
  .timeline {
    position: relative;
    padding-left: 2.5rem;
  }
  .timeline::before {
    content: "";
    position: absolute;
    left: 0.75rem; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--c-gold) 10%, var(--c-gold) 90%, transparent);
  }
  .timeline__item {
    position: relative;
    padding-block: 2rem;
  }
  .timeline__item::before {
    content: "";
    position: absolute;
    left: -2.5rem; top: 2.5rem;
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    background: var(--c-cream);
    border: 2px solid var(--c-gold);
    box-shadow: 0 0 0 4px var(--c-cream);
  }
  .timeline__item::after {
    content: "";
    position: absolute;
    left: -2.07rem; top: 2.93rem;
    width: 0.65rem; height: 0.65rem;
    border-radius: 50%;
    background: var(--c-gold);
  }
  .timeline__year {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--c-gold);
    margin-bottom: 0.5rem;
  }
  .timeline__item :is(h2, h3) {
    font-family: var(--f-serif);
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .timeline__item p { max-width: 56ch; }

  /* ========== CONTACT ========== */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 5vw, 4rem);
  }
  .contact-info {
    display: grid;
    gap: 2rem;
  }
  .contact-block {
    padding: 1.75rem;
    background: var(--c-paper);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
  }
  .contact-block__label {
    display: block;
    font-family: var(--f-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--c-mute);
    margin-bottom: 0.85rem;
    font-weight: 600;
  }
  .contact-block p, .contact-block a {
    display: block;
    font-family: var(--f-serif);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--c-espresso);
    letter-spacing: -0.02em;
    transition: color var(--d-fast) var(--ease-spring);
  }
  .contact-block a:hover { color: var(--c-gold); }
  .contact-block p { color: var(--c-espresso); }

  .form {
    padding: 2rem;
    background: var(--c-paper);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-xl);
    box-shadow: var(--c-shadow-soft);
    display: grid;
    gap: 1.25rem;
  }
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .form__field { display: grid; gap: 0.4rem; }
  .form__field label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-mute);
    font-weight: 600;
  }
  .form__field input,
  .form__field select,
  .form__field textarea {
    padding: 0.85rem 1rem;
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font-size: 0.95rem;
    color: var(--c-espresso);
    transition: border-color var(--d-fast) var(--ease-spring), background var(--d-fast) var(--ease-spring);
  }
  .form__field input:focus,
  .form__field select:focus,
  .form__field textarea:focus {
    outline: none;
    border-color: var(--c-espresso);
    background: var(--c-paper);
  }
  .form__field textarea { min-height: 120px; resize: vertical; font-family: inherit; }
  .form__submit { justify-self: start; margin-top: 0.5rem; }

  .map-frame {
    margin-top: 4rem;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--c-shadow-soft);
    aspect-ratio: 16/7;
    border: 1px solid var(--c-line-soft);
  }
  .map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.2) contrast(0.95); }

  /* ========== GALLERY FULL ========== */
  .gallery-full {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 180px;
    gap: 1rem;
  }
  .gallery-full a {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    transition: transform var(--d-base) var(--ease-spring);
  }
  .gallery-full a:hover { transform: scale(1.02); z-index: 2; }
  .gallery-full img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--d-cinema) var(--ease-smooth);
  }
  .gallery-full a:hover img { transform: scale(1.06); }
  .gallery-full .span-2 { grid-column: span 4; }
  .gallery-full .span-3 { grid-column: span 6; }
  .gallery-full .span-4 { grid-column: span 8; }
  .gallery-full .row-2 { grid-row: span 2; }
  .gallery-full .row-3 { grid-row: span 3; }

  /* ========== BLOG INDEX ========== */
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .blog-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--c-line);
    transition: transform var(--d-base) var(--ease-spring);
  }
  .blog-card:hover { transform: translateY(-3px); }
  .blog-card__img {
    aspect-ratio: 4/3;
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .blog-card__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--d-cinema) var(--ease-smooth);
  }
  .blog-card:hover .blog-card__img img { transform: scale(1.04); }
  .blog-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-mute);
  }
  .blog-card__meta::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--c-gold);
  }
  .blog-card :is(h2, h3) {
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-family: var(--f-serif);
  }
  .blog-card :is(h2, h3) a { transition: color var(--d-fast) var(--ease-spring); }
  .blog-card :is(h2, h3) a:hover { color: var(--c-gold); }
  .blog-card p {
    font-size: 0.95rem;
  }

  /* ========== FOOTER ========== */
  .footer { padding-block: clamp(4rem, 6vw, 6rem) 2rem; background: var(--c-espresso); color: rgba(250,247,242,0.7); margin-top: clamp(4rem, 6vw, 6rem); border-radius: var(--r-2xl) var(--r-2xl) 0 0; position: relative; overflow: hidden; }
  .footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%);
    pointer-events: none;
  }
  .footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
  }
  .footer__brand .nav__brand { color: var(--c-cream); font-size: 1.5rem; }
  .footer__brand .nav__brand img { height: 60px; }
  .footer__brand p { color: rgba(250,247,242,0.55); margin-top: 1rem; max-width: 28ch; font-size: 0.9rem; }
  .footer__heading { color: var(--c-cream); margin-bottom: 1.25rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; font-family: var(--f-sans); }
  .footer ul { display: grid; gap: 0.7rem; }
  .footer ul a {
    font-size: 0.9rem;
    color: rgba(250,247,242,0.6);
    transition: color var(--d-fast) var(--ease-spring);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .footer ul a:hover { color: var(--c-cream); }
  .footer ul a svg { width: 12px; height: 12px; opacity: 0; transform: translateX(-4px); transition: opacity var(--d-fast) var(--ease-spring), transform var(--d-fast) var(--ease-spring); }
  .footer ul a:hover svg { opacity: 1; transform: translateX(0); }

  .footer__bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.78rem;
    color: rgba(250,247,242,0.45);
  }
  .footer__bottom a { transition: color var(--d-fast) var(--ease-spring); }
  .footer__bottom a:hover { color: var(--c-cream); }
  .footer__bottom-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
}

/* ---------- MOTION ---------- */
@layer motion {
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
    transition:
      opacity var(--d-slow) var(--ease-smooth),
      transform var(--d-slow) var(--ease-smooth),
      filter var(--d-slow) var(--ease-smooth);
    will-change: opacity, transform, filter;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  .reveal[data-delay="1"] { transition-delay: 80ms; }
  .reveal[data-delay="2"] { transition-delay: 160ms; }
  .reveal[data-delay="3"] { transition-delay: 240ms; }
  .reveal[data-delay="4"] { transition-delay: 320ms; }
  .reveal[data-delay="5"] { transition-delay: 400ms; }
  .reveal[data-delay="6"] { transition-delay: 480ms; }

  /* Hero stack: visible inmediatamente para no retrasar el LCP */
  .hero__stack.reveal,
  .hero__stack {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }
  .text-center { text-align: center; }
  .container > * + section { margin-top: 0; }
}

/* ============================================================
   RESPONSIVE — Mobile collapse below 980px / 768px
   ============================================================ */

@media (max-width: 1100px) {
  .page-hero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .page-hero__intro { padding-bottom: 0; }
  .room-detail { grid-template-columns: 1fr; gap: 2rem; }
  .room-detail:nth-child(even) .room-detail__visual { order: 0; }
  .services-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .gallery-full { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; }
  .gallery-full .span-2 { grid-column: span 3; }
  .gallery-full .span-3 { grid-column: span 6; }
  .gallery-full .span-4 { grid-column: span 6; }
  .hero__grid { grid-template-columns: 1fr; gap: 4rem; }
  .hero__stack { aspect-ratio: 5/4; max-width: 720px; }
  .booking__inner { grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.75rem; }
  .booking__field { border-right: 0; border-radius: var(--r-md); }
  .booking__field:hover { background: var(--c-cream); }
  .booking__field--promo { grid-column: span 2; }
  .booking__cta { grid-column: span 2; padding-top: 0.5rem; }
  .booking__cta .btn { padding-block: 0.85rem; }
  .booking__popover { left: 0; right: 0; }
  .story__grid { grid-template-columns: 1fr; gap: 3rem; }
  .rooms__head { grid-template-columns: 1fr; gap: 1.5rem; }
  .rooms__head p { margin-left: 0; }
  .experience { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav {
    padding: 0.4rem 0.4rem 0.4rem 1.25rem;
    gap: 0;
    max-width: calc(100% - 1.5rem);
    top: 0.75rem;
    width: max-content;
    justify-content: space-between;
  }
  .nav__brand { font-size: 1.05rem; }
  .nav__links, .nav__lang { display: none; }
  .nav__burger {
    display: inline-flex;
    width: 2.5rem; height: 2.5rem;
    margin-left: 0.85rem;
    align-items: center;
    justify-content: center;
    background: var(--c-espresso);
    color: var(--c-cream);
    border-radius: 50%;
    transition: transform var(--d-base) var(--ease-spring);
  }
  .nav__burger:hover { transform: scale(1.05); }
  .nav__burger svg { width: 18px; height: 18px; stroke-width: 1.5; }

  .nav-mobile.is-open { display: flex; opacity: 1; }
  body:has(.nav-mobile.is-open) { overflow: hidden; touch-action: none; }
  .nav-mobile a {
    font-family: var(--f-serif);
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    padding: 0.4rem 0;
    color: var(--c-espresso);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--d-base) var(--ease-spring), transform var(--d-base) var(--ease-spring);
  }
  .nav-mobile.is-open a { opacity: 1; transform: translateY(0); }
  .nav-mobile a:nth-child(1) { transition-delay: 100ms; }
  .nav-mobile a:nth-child(2) { transition-delay: 150ms; }
  .nav-mobile a:nth-child(3) { transition-delay: 200ms; }
  .nav-mobile a:nth-child(4) { transition-delay: 250ms; }
  .nav-mobile a:nth-child(5) { transition-delay: 300ms; }
  .nav-mobile a:nth-child(6) { transition-delay: 350ms; }
  .nav-mobile a:nth-child(7) { transition-delay: 400ms; }
  .nav-mobile__lang {
    margin-top: auto;
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-mute);
  }
  .nav-mobile__lang a { font-family: var(--f-sans); font-size: 0.75rem; padding: 0; }

  .hero__photo--main { transform: rotate(-1deg); inset: 0 8% 5% 0; }
  .hero__photo--accent { transform: rotate(2deg); }
  .hero__badge { left: 4%; top: 6%; }

  .rooms__bento { grid-template-columns: 1fr; }
  .room--big, .room--mid, .room--wide, .room--tall, .room--half { grid-column: span 1; min-height: 380px; }

  .amenities { grid-template-columns: 1fr 1fr; }

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery .g1 { grid-column: span 2; grid-row: span 2; }
  .gallery .g2, .gallery .g3, .gallery .g4, .gallery .g5 { grid-column: span 1; }

  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer { border-radius: var(--r-xl) var(--r-xl) 0 0; }

  .story__visual { grid-template-columns: 1fr 1fr; }
  .story__img--tall { grid-row: 1; aspect-ratio: 4/5; }
  .story__quote { grid-column: span 2; }
}

@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .gallery-full { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; }
  .gallery-full .span-2, .gallery-full .span-3, .gallery-full .span-4 { grid-column: span 4; }
  .timeline { padding-left: 1.85rem; }
  .timeline::before { left: 0.5rem; }
  .timeline__item { padding-block: 1.5rem; }
  .timeline__item::before { left: -1.85rem; top: 1.85rem; width: 1.25rem; height: 1.25rem; box-shadow: 0 0 0 3px var(--c-cream); }
  .timeline__item::after { left: -1.5rem; top: 2.2rem; width: 0.55rem; height: 0.55rem; }

  .page-hero { padding-block: 6rem 1.5rem; }
  .page-hero__intro p { font-size: 1rem; }
  .breadcrumb { font-size: 0.7rem; flex-wrap: wrap; }
}

/* ============================================================
   TABLET — 1024px and below
   ============================================================ */
@media (max-width: 1024px) {
  .hero { padding-block: clamp(7rem, 11vw, 10rem) clamp(3rem, 5vw, 4rem); }
  .hero__stack { aspect-ratio: 16/12; max-width: 640px; margin-inline: auto; }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; }
  .experience { padding: clamp(2rem, 4vw, 3.5rem); }
  .experience__list { font-size: 0.95em; }
}

/* ============================================================
   TABLET PORTRAIT — 900px and below
   ============================================================ */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer__brand { grid-column: 1 / -1; max-width: 38ch; }
  .booking__inner { grid-template-columns: 1fr 1fr; }
  .testimonial__quote { font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
  .map-frame { aspect-ratio: 4/3; }
}

/* ============================================================
   MOBILE — 768px refinements
   ============================================================ */
@media (max-width: 768px) {
  body { font-size: 0.95rem; }
  section { padding-block: clamp(3rem, 7vw, 4.5rem); }
  .hero { padding-block: 5.5rem 1.5rem; }
  .hero__copy h1, .page-hero__title { font-size: clamp(2.4rem, 9vw, 3.75rem); line-height: 0.95; letter-spacing: -0.035em; }
  .hero__title em, .page-hero__title em { display: inline; }
  .hero__title { margin-block: 1.25rem 1.25rem; }
  .hero__subtitle { font-size: 1rem; line-height: 1.45; margin-bottom: 1.5rem; max-width: none; }
  .hero__ctas { gap: 0.6rem; }
  .hero__ctas .btn { flex: 1 1 calc(50% - 0.3rem); min-width: 0; justify-content: space-between; padding-left: 1.1rem; }
  .hero__meta {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 1rem;
  }
  .hero__meta-item .stat-num { font-size: 1.45rem; }
  .hero__meta-item p { font-size: 0.68rem; letter-spacing: 0.14em; }

  .hero__stack { aspect-ratio: 1/1; max-width: 520px; margin-inline: auto; }
  .hero__photo--bg { display: none; }
  .hero__photo--main { inset: 0 14% 10% 0; transform: rotate(-1.2deg); border-radius: var(--r-lg); }
  .hero__photo--accent { width: 44%; bottom: 0; right: 0; transform: rotate(2.5deg); border-radius: var(--r-lg); }
  .hero__badge { left: 4%; top: 4%; padding: 0.55rem 0.85rem; font-size: 0.7rem; transform: rotate(-3deg); }

  .booking { margin-top: -2rem; }
  .booking__inner { grid-template-columns: 1fr 1fr; padding: 0.4rem; gap: 0.35rem; border-radius: var(--r-lg); }
  .booking__field { padding: 0.7rem 0.85rem; gap: 0.65rem; }
  .booking__icon { width: 32px; height: 32px; }
  .booking__icon svg { width: 16px; height: 16px; }
  /* iOS no hace zoom si el input es >=16px */
  .booking__field input,
  .booking__field select,
  .form__field input,
  .form__field select,
  .form__field textarea { font-size: 16px; }
  .booking__label { font-size: 0.6rem; letter-spacing: 0.16em; }
  .booking__cta .btn { padding-block: 0.95rem; font-size: 0.95rem; }
  .booking__popover { min-width: 0; }
  .booking__popover--dates { padding: 1rem; }
  .cal__months { grid-template-columns: 1fr; gap: 1rem; }
  .cal__day { width: 32px; font-size: 0.8rem; }

  .story__grid { gap: 2rem; }
  .story__visual { grid-template-columns: 1fr; gap: 0.85rem; }
  .story__img, .story__img--tall { grid-row: auto; aspect-ratio: 4/3; border-radius: var(--r-lg); }
  .story__quote { grid-column: 1; padding: 1.5rem 1.25rem; font-size: 1.02rem; line-height: 1.45; border-radius: var(--r-lg); }
  .story__signature { gap: 1.25rem; }

  .rooms__bento { gap: 0.9rem; }
  .room { min-height: 300px; border-radius: var(--r-lg); }
  .room__body { inset: auto 1.1rem 1.1rem 1.1rem; gap: 0.45rem; }
  .room__title { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .room__cta { width: 2.25rem; height: 2.25rem; top: 1rem; right: 1rem; }

  .amenities { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .amenity { padding: 1.4rem 1.15rem; border-radius: var(--r-lg); }
  .amenity__icon { width: 2.5rem; height: 2.5rem; margin-bottom: 0.85rem; }
  .amenity__icon svg { width: 18px; height: 18px; }
  .amenity h3 { font-size: 1.1rem; }
  .amenity p { font-size: 0.85rem; }

  .experience { padding: 2rem 1.5rem; gap: 2rem; }
  .experience__item { grid-template-columns: auto 1fr auto; padding: 1rem 1.1rem; gap: 0.85rem; }
  .experience__item-num { font-size: 0.75rem; width: 1.25rem; }
  .experience__item-title { font-size: 0.95rem; }
  .experience__item p { font-size: 0.78rem; }

  .testimonial__quote { font-size: 1.25rem; line-height: 1.35; }

  .cta-final { padding: 3rem 1.5rem; }

  /* Habitaciones detail page */
  .room-detail__visual { aspect-ratio: 16/12; }
  .room-detail__title { font-size: clamp(1.5rem, 6vw, 2.25rem); }
  .room-detail__price strong { font-size: 1.6rem; }
  .room-detail__specs { gap: 1rem; padding: 1rem 0; margin-block: 1.25rem; }
  .room-detail__specs li { font-size: 0.8rem; }

  /* Servicios */
  .service { padding: 1.5rem 1.25rem; }
  .service :is(h2, h3) { font-size: 1.25rem; }

  /* Contacto */
  .contact-block { padding: 1.25rem; }
  .contact-block p, .contact-block a { font-size: 1.2rem; }
  .form { padding: 1.5rem 1.25rem; }

  /* Historia timeline */
  .timeline__year { font-size: 1.25rem; }
  .timeline__item :is(h2, h3) { font-size: 1.4rem; }
  .timeline__item p { font-size: 0.9rem; }

  /* Gallery (full page) — 2-col on mobile */
  .gallery-full { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; gap: 0.6rem; }
  .gallery-full .span-2, .gallery-full .span-3, .gallery-full .span-4 { grid-column: span 2; }
  .gallery-full .span-2.row-2 { grid-column: span 2; grid-row: span 1; }
  .gallery-full .row-2, .gallery-full .row-3 { grid-row: span 2; }

  /* Map */
  .map-frame { aspect-ratio: 4/5; margin-top: 2.5rem; }

  /* Footer */
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer__bottom-links { gap: 1rem; }
}

/* ============================================================
   SMALL MOBILE — 540px and below
   ============================================================ */
@media (max-width: 540px) {
  :root { --gutter: 1.1rem; }
  .nav { padding: 0.35rem 0.35rem 0.35rem 1rem; max-width: calc(100% - 1rem); top: 0.6rem; }
  .nav__brand { font-size: 1rem; }
  .nav__burger { width: 2.25rem; height: 2.25rem; }

  .hero__ctas { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .hero__ctas .btn { width: 100%; }
  /* Mantener 3 columnas pero más compactas */
  .hero__meta { grid-template-columns: repeat(3, 1fr); gap: 1.25rem 0.75rem; }
  .hero__meta-item .stat-num { font-size: 1.3rem; }
  .hero__meta-item p { font-size: 0.65rem; }

  .booking__inner { grid-template-columns: 1fr; }
  .booking__field--promo { grid-column: 1; }
  .booking__cta { grid-column: 1; padding-top: 0.2rem; }
  .booking__cta .btn { padding-block: 1rem; }

  .amenities { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; gap: 0.6rem; }
  .gallery .g1 { grid-column: span 2; grid-row: span 2; }
  .gallery a { border-radius: var(--r-md); }

  .gallery-full { grid-auto-rows: 110px; }

  .testimonial__quote { font-size: 1.2rem; line-height: 1.4; }

  .cta-final { padding: 2.5rem 1.25rem; }
  .cta-final h2 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .cta-final__ctas { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .cta-final__ctas .btn { width: 100%; justify-content: space-between; }

  .experience { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; border-radius: var(--r-xl); }
  .experience__item { padding: 0.85rem 1rem; gap: 0.7rem; }
  .experience__item-title { font-size: 0.92rem; }
  .experience__item p { font-size: 0.74rem; line-height: 1.35; }

  .room-detail__ctas { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .room-detail__ctas .btn { width: 100%; justify-content: space-between; }

  /* Footer compacto en móvil */
  .footer { padding-block: 3rem 1.5rem; }
  .footer__grid { gap: 1.75rem; margin-bottom: 2.5rem; }
  .footer__brand p { max-width: none; }

  .nav-mobile { padding-left: 1.25rem; padding-right: 1.25rem; }
  .nav-mobile a { font-size: 1.85rem; padding: 0.3rem 0; }
}

/* ============================================================
   TINY MOBILE — 380px and below (iPhone SE 1st gen, etc.)
   ============================================================ */
@media (max-width: 380px) {
  :root { --gutter: 0.95rem; }
  body { font-size: 0.92rem; }
  .hero { padding-block: 5rem 1.25rem; }
  .hero__copy h1, .page-hero__title { font-size: clamp(2rem, 11vw, 2.75rem); }
  .hero__subtitle { font-size: 0.92rem; }
  /* En pantallas muy pequeñas, los 3 stats en columna se sienten mejor 2+1 */
  .hero__meta { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .hero__meta-item:nth-child(3) { grid-column: span 2; }
  .hero__meta-item .stat-num { font-size: 1.2rem; }
  .nav-mobile a { font-size: 1.5rem; }
  .room { min-height: 240px; }
  .room__title { font-size: 1.25rem; }
  .room-detail__title { font-size: 1.5rem; }
  .testimonial__quote { font-size: 1.05rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .booking__field { padding: 0.6rem 0.75rem; }
}

/* ============================================================
   SAFE AREAS — iPhone notch / Android status bar
   ============================================================ */
@supports (padding: env(safe-area-inset-left)) {
  .container, .container-narrow {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .nav { padding-top: max(0.5rem, env(safe-area-inset-top, 0)); }
  .footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* ============================================================
   TOUCH-OPTIMIZED — interactions for touch devices
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover transforms that feel sluggish on touch */
  .room:hover, .blog-card:hover, .amenity:hover, .service:hover,
  .gallery a:hover, .gallery-full a:hover { transform: none; }
  .room:hover .room__img img, .gallery a:hover img, .gallery-full a:hover img,
  .blog-card:hover .blog-card__img img { transform: none; }
  /* Make all CTAs behave as full tap targets */
  .btn, .nav__link, .footer ul a { min-height: 44px; }
}

/* ============================================================
   LANDSCAPE PHONE — short viewport rules
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-block: 5rem 2rem; min-height: auto; }
  .hero__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .hero__stack { aspect-ratio: 4/3; max-width: 380px; }
  .nav-mobile { padding: 4rem 1.5rem 1.5rem; overflow-y: auto; }
  .nav-mobile a { font-size: 1.5rem; padding: 0.2rem 0; }
}

/* ============================================================
   PRINT — basic clean print styles
   ============================================================ */
@media print {
  .nav, .nav-mobile, .booking, .cta-final, body::after { display: none !important; }
  body { background: white; color: black; }
  .room__img, .gallery a, .gallery-full a { break-inside: avoid; }
  .hero__photo { break-inside: avoid; box-shadow: none; }
  a { text-decoration: underline; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}