/* ============================================================
   HESTÍA YOUR HOME — Nuevo portal
   Lenguaje visual: Noche Mediterránea
   ============================================================

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────
   LAYER 00 · Accessibility & base utilities          ~L6
   LAYER 01 · CSS Custom Properties (tokens)          ~L34
   LAYER 02 · Reset & global base                     ~L130
   LAYER 03 · Topbar                                  ~L175
   LAYER 04 · Header & navigation                     ~L277
   LAYER 05 · Hero section                            ~L420
   LAYER 06 · Intro / VideoIntro overlay              ~L560
   LAYER 07 · Apartments scroll cards                 ~L1295
   LAYER 08 · Compare section                         ~L1575
   LAYER 09 · Counters section                        ~L1598
   LAYER 10 · Gallery section                         ~L1640
   LAYER 11 · Team section                            ~L1750
   LAYER 12 · Manifest section                        ~L1825
   LAYER 13 · Ratings section                         ~L1870
   LAYER 14 · Contact CTA section                     ~L2000
   LAYER 15 · Home Search (buscador)                  ~L2060
   LAYER 16 · Apartment detail pages                  ~L2940
   LAYER 17 · Opiniones page                          ~L3800
   LAYER 18 · Nosotros / Porque Hestía pages          ~L3880
   LAYER 19 · Reservas page                           ~L4000
   LAYER 20 · Shared components (FAQ, StickyFacts…)   ~L4200
   LAYER 21 · Footer                                  ~L4450
   LAYER 22 · Cookies / Legal pages                   ~L4550
   LAYER 23 · Utility classes                         ~L4650
   LAYER 24 · Section stacking system                 ~L6595
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ── Accessibility utilities ─────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 9999;
  background: #2A0F2E;
  color: #F0E8D5;
  padding: 10px 20px;
  border-radius: 10px 0 10px 0;
  font-family: sans-serif;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.skip-link:focus { transform: translateY(0); }

/* ================================================================
   VIDEO INTRO  — caja flotante 600×600, sin bloqueo de pantalla
   ================================================================ */
.vintro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: opacity;
}
.vintro-box {
  width: min(92vw, 600px);
  height: min(92vw, 600px);
  background: var(--ber-dk);
  border-radius: 14px 0 14px 0;
  overflow: hidden;
  position: relative;
  pointer-events: auto;
  box-shadow: 0 32px 96px rgba(42,15,46,.72), 0 4px 24px rgba(42,15,46,.4);
}
.vintro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vintro-actions {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vintro-cta,
.vintro-skip {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 10px 0 10px 0;
  cursor: pointer;
  transition: background var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color      var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              border-color var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.vintro-cta {
  background: var(--sol);
  border: 1.5px solid var(--sol);
  color: var(--ber-dk);
  font-weight: 500;
}
.vintro-skip {
  background: var(--ber);
  border: 1.5px solid rgba(240,232,213,.4);
  color: var(--arena);
}
@media (hover: hover) and (pointer: fine) {
  .vintro-cta:hover  { background: var(--sol-h); border-color: var(--sol-h); color: var(--crema); }
  .vintro-skip:hover { background: var(--ber-dk); color: var(--crema); }
}
.vintro-cta:active,
.vintro-skip:active {
  transform: scale(0.97);
  transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (max-width: 480px) {
  .vintro-box { border-radius: 8px 0 8px 0; }
  .vintro-actions { bottom: 12px; right: 12px; gap: 8px; }
  .vintro-cta,
  .vintro-skip { padding: 8px 14px; font-size: 11px; }
}

:root {
  /* Paleta marca */
  --ber:     #3D1A35;
  --ber-dk:  #2A0F2E;
  --ber-lt:  #4E2446;
  --sol:     #3AAABB;
  --sol-h:   #2A8E9E;
  --sol-lt:  #6FC4D1;
  --sol-text:#176E80;
  --arena:   #F0E8D5;
  --arena-dk:#E4D9BE;
  --crema:   #FAF6F0;
  --ink:     #2A0F2E;
  --ink-soft:#3D1A35;

  /* Paleta corporativa · 9 colores del paisaje almeriense */
  --vio:    #7B3B6B;   /* Violeta     — horizonte antes del amanecer  */
  --tur:    #1BC8D8;   /* Turquesa    — el mar y el cielo al alba      */
  --bug:    #D42B80;   /* Buganvilla  — el magenta que lo invade todo  */
  --alb:    #C8975A;   /* Albero      — tierra almeriense, cerámica    */
  --sie:    #8B4A1E;   /* Siena       — crepúsculo sobre el Mediterráneo */

  /* Apartamentos — identidades del brandbook */
  /* Hestía Mar · Olivo — el campo de olivos al mar */
  --vm:  #6B7A3A;  --vm2: #8B9A52;  --vm-dk: #4A5628;
  /* Hestía Thalassa · Naranja tostado — Desierto de Tabernas */
  --vt:  #B86A3C;  --vt2: #D08B5A;  --vt-dk: #8A4A24;
  /* Hestía Salinas · Albero — amarillo del amanecer */
  --vs:  #D4A84A;  --vs2: #E8C476;  --vs-dk: #7A5E1A;

  /* Crema · variantes atmosféricas del cielo a lo largo del día */
  --crema-alba: #F5E8DB;                    /* alba rosada */
  --crema-dawn: #F2E6CE;                    /* primera luz cálida */
  --crema-noon: #FFF6E2;                    /* media mañana luminosa */
  --crema-dusk: #E8D4A6;                    /* tarde dorada */
  --crema-warm: #F6E3C2;                    /* crema cálida intensa */

  /* Berenjena · variantes para gradientes animados de sky/twilight.
     Valores hex reales — antes eran var() autoreferentes (undefined)
     que provocaban gradientes transparentes en .nosotros-team y
     similares, dejando texto crema sobre cream visible del body. */
  --ber-glow:     #4E2446;                  /* berenjena suave (night gradients) */
  --ber-warm:     #5D2A48;                  /* berenjena rojizo (sunset bridge)  */
  --ber-twilight: #3D1A35;                  /* berenjena luminoso (twilight)     */
  --ber-cosmic:   #1A0A1E;                  /* berenjena casi negro (deep night) */
  --ber-pitch:    #15080F;                  /* casi negro cálido                 */
  --ber-void:     #0F0414;                  /* casi negro frío (cosmic void)     */

  /* Tokens semánticos corporativos
     ─ Errores/peligro     → bug (buganvilla)
     ─ Avisos/pendiente    → alb (albero, ya cálido)
     ─ Éxito/publicado     → vm  (olivo)
     ─ Información         → sol (turquesa)
     Fondos suaves derivados con opacity-mix para mantener cohesión.  */
  --err:        #B8246E;          /* bug intensificado para errores */
  --err-dk:     #7A1648;
  --err-bg:     #F8E0EB;          /* mix(bug, crema) */
  --warn:       #C8975A;          /* alb */
  --warn-dk:    #8A6432;
  --warn-bg:    #F5E8D4;
  --ok:         #6B7A3A;          /* vm olivo */
  --ok-dk:      #4A5628;
  --ok-bg:      #E6E8D5;

  /* Tipografía */
  --serif: 'Playfair Display', 'Lora', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Escala */
  --page-pad: clamp(24px, 5vw, 80px);

  /* Motion tokens — Emil Kowalski design engineering */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);   /* hovers, entradas UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movimiento on-screen */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS-like drawers/banners */
  --dur-fast:    160ms;  /* feedback botones */
  --dur-base:    220ms;  /* dropdowns, hovers */
  --dur-slow:    320ms;  /* modales, drawers */
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--chrome-h, 116px) + 16px); }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* -------- Tipografía sistema -------- */
.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.44em;
}
.your-home {
  font-family: var(--sans);
  font-weight: 200;
  text-transform: lowercase;
  letter-spacing: 0.28em;
  opacity: 0.72;
}
.eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  opacity: 0.85;
}
.slogan {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
}
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(44px, 7vw, 104px); }
h2 { font-size: clamp(36px, 5vw, 72px); }
h3 { font-size: clamp(24px, 2.4vw, 36px); }
p  { line-height: 1.65; font-weight: 300; }

/* -------- Topbar -------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--ber-dk);
  color: var(--arena);
  padding: 7px var(--page-pad);
  font-size: 12px;
  font-weight: 300;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(240, 232, 213, 0.08);
}
/* Fills the triangular gap at the top-left corner between the topbar and the header's
   border-radius. The radial-gradient creates a concave curve: topbar colour fills the
   outer triangle while the inner quarter-circle stays transparent so the header's
   rounded corner remains visible. z-index 100 sits above the header (99). */
.topbar-corner-fill {
  position: fixed;
  top: var(--topbar-h, 36px);
  left: 0;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at bottom right, transparent 20px, var(--ber-dk) 20px);
  z-index: 100;
  pointer-events: none;
}
.topbar .contacts {
  display: flex; gap: 6px; align-items: center; flex-wrap: nowrap;
}
.lang-abbr { display: none; }
.topbar .contacts .sep { opacity: 0.55; padding: 0 4px; }
.topbar .lang {
  display: flex; gap: 2px; align-items: center;
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  letter-spacing: 0.18em;
}
.topbar-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 10px 0 10px 0;
  text-decoration: none;
  color: var(--arena);
  opacity: 0.72;
  transition: opacity .25s ease, color .25s ease, background .25s ease, box-shadow .28s ease;
  position: relative;
  cursor: pointer;
}
.tl-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0;
  transition: transform .25s ease;
  animation: tl-dot-rainbow 27s steps(9, end) infinite;
}
/* Active-language dot: slightly larger and brighter while still cycling colours */
.tl-dot--on {
  transform: scale(1.4);
  filter: brightness(1.25);
}
/* 9 Hestía palette colours, 3 s each = 27 s full cycle */
@keyframes tl-dot-rainbow {
  0%     { background: #F0E8D5; box-shadow: 0 0 4px rgba(240,232,213,.5); }
  11.11% { background: #1BC8D8; box-shadow: 0 0 4px rgba(27,200,216,.6); }
  22.22% { background: #D42B80; box-shadow: 0 0 4px rgba(212,43,128,.6); }
  33.33% { background: #D4A84A; box-shadow: 0 0 4px rgba(212,168,74,.6); }
  44.44% { background: #6B7A3A; box-shadow: 0 0 4px rgba(107,122,58,.6); }
  55.56% { background: #C8975A; box-shadow: 0 0 4px rgba(200,151,90,.6); }
  66.67% { background: #8B4A1E; box-shadow: 0 0 5px rgba(139,74,30,.7); }
  77.78% { background: #7B3B6B; box-shadow: 0 0 5px rgba(123,59,107,.7); }
  88.89% { background: #2A0F2E; box-shadow: 0 0 6px rgba(123,59,107,.8); }
}
.topbar-link.email .tl-dot { animation: none; background: var(--sol-h); }
.tl-num { opacity: 0.65; font-size: 11px; white-space: nowrap; }
.topbar-link:focus-visible {
  opacity: 1;
  color: var(--sol-lt);
}
.topbar-link.tl-active {
  opacity: 1;
  color: var(--sol-lt);
}
/* Touch devices: all links fully visible (no hover to activate them) */
@media (hover: none) {
  .topbar-link { opacity: 1; }
}
.topbar-link:hover {
  opacity: 1;
  color: var(--sol-lt);
  background: rgba(111,196,209,.13);
  box-shadow: 0 0 0 1px rgba(111,196,209,.2);
}
.topbar-link:hover .tl-dot { transform: scale(1.5); }
.topbar-link.email:hover .tl-dot { transform: scale(1.3); }

.topbar .lang button {
  padding: 4px 9px;
  color: var(--arena); opacity: 0.85;
  transition: opacity .25s, color .25s;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  border-radius: 10px 0 10px 0;
}
.topbar .lang button::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(111,196,209,.22) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: inherit;
}
.topbar .lang button:hover { opacity: 0.85; color: var(--sol-lt); }
.topbar .lang button:hover::after { opacity: 1; }
.topbar .lang button.active { opacity: 1; color: var(--sol-lt); font-weight: 500; }
.topbar .lang button.active::after { opacity: 1; }
.topbar .lang .divider { opacity: 0.55; }

/* -------- Header -------- */
.header {
  position: fixed;
  top: var(--topbar-h, 36px); left: 0; right: 0;
  z-index: 99;
  padding: 18px var(--page-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  transition: background .7s ease, padding .4s ease, backdrop-filter .4s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
  overflow: hidden;
  border-radius: 20px 0 20px 0;
}
/* Scroll-driven radial glow — se mueve con --hdr-scroll (0→1) */
.header::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 52% 200% at calc(12% + var(--hdr-scroll, 0) * 78%) 50%,
    rgba(27,200,216,0.09) 0%,
    transparent 65%
  );
  transition: background .7s ease;
}
.header.day::before {
  background: radial-gradient(
    ellipse 52% 200% at calc(12% + var(--hdr-scroll, 0) * 78%) 50%,
    rgba(212,168,74,0.20) 0%,
    transparent 65%
  );
}
.header.night {
  background: linear-gradient(108deg,
    rgba(42,15,46,0.96)    0%,
    rgba(62,22,58,0.84)   17%,
    rgba(27,200,216,0.10) 36%,
    rgba(123,59,107,0.82) 54%,
    rgba(42,15,46,0.93)   71%,
    rgba(55,18,52,0.87)   87%,
    rgba(27,200,216,0.06) 100%
  ) 0% 50% / 310% 100%;
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom-color: rgba(240,232,213,0.08);
  animation: hdr-night-flow 22s ease-in-out infinite;
}
.header.day {
  background: linear-gradient(108deg,
    rgba(196,140,80,0.05)   0%,
    rgba(252,242,218,0.96) 20%,
    rgba(255,250,238,0.97) 46%,
    rgba(212,168,74,0.13)  65%,
    rgba(252,242,218,0.95) 82%,
    rgba(196,140,80,0.05) 100%
  ) 100% 50% / 290% 100%;
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom-color: rgba(184,106,60,0.14);
  animation: hdr-day-flow 22s ease-in-out infinite;
}
.header.scrolled { padding: 12px var(--page-pad); }
@keyframes hdr-night-flow {
  0%   { background-position: 0%   50%; }
  38%  { background-position: 80%  50%; }
  65%  { background-position: 32%  50%; }
  100% { background-position: 0%   50%; }
}
@keyframes hdr-day-flow {
  0%   { background-position: 100% 50%; }
  45%  { background-position: 12%  50%; }
  100% { background-position: 100% 50%; }
}

.header nav {
  display: flex; gap: 28px; align-items: center;
  font-family: var(--sans); font-weight: 300; font-size: 13px;
  letter-spacing: 0.04em;
}
.header nav a {
  padding: 6px 2px;
  position: relative;
  opacity: 0.82;
  transition: opacity .2s;
}
.header nav a:hover { opacity: 1; }
.header nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #6FC4D1 20%, #3AAABB 50%, #6FC4D1 80%, transparent);
  transition: left .42s cubic-bezier(.2, .8, .2, 1), right .42s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.header nav a:hover::after,
.header nav a:focus-visible::after,
.header nav a.active-page::after {
  left: 0;
  right: 0;
}
@keyframes cta-cycle {
  /* 8 colores de la paleta tintando un halo, no la bg sólida. El bg
     se queda en glass y el tinte cicla detrás. */
  0%,    6.25%  { --cta-tint: rgba(42, 15, 46, 0.55); }   /* berenjena */
  12.5%, 18.75% { --cta-tint: rgba(123, 59, 107, 0.55); } /* violeta */
  25%,   31.25% { --cta-tint: rgba(58, 170, 187, 0.55); } /* turquesa */
  37.5%, 43.75% { --cta-tint: rgba(107, 122, 58, 0.55); } /* olivo */
  50%,   56.25% { --cta-tint: rgba(212, 43, 128, 0.55); } /* buganvilla */
  62.5%, 68.75% { --cta-tint: rgba(200, 151, 90, 0.55); } /* albero */
  75%,   81.25% { --cta-tint: rgba(212, 168, 74, 0.55); } /* sol */
  87.5%, 93.75% { --cta-tint: rgba(139, 74, 30, 0.55); }  /* siena */
  100%          { --cta-tint: rgba(42, 15, 46, 0.55); }
}
/* RESERVA del header — efecto glass cult-ui sobre vidrio OSCURO.
   El header pasa de cream (idle) a transparent (scrolled) — un glass
   claro daría cream-on-cream. Usamos eggplant translúcido (#2A0F2E al
   62%) + backdrop blur: el texto crema #F0E8D5 mantiene contraste
   AAA (>10:1) sobre el cristal, sea cual sea el fondo. ::before lleva
   el halo coloreado que cicla. ::after es el sheen de luz. */
.header nav .cta {
  position: relative;
  padding: 10px 22px;
  border: 1px solid rgba(240, 232, 213, 0.28) !important;
  border-radius: 10px 0 10px 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 1;
  color: #F0E8D5 !important;
  background-color: rgba(42, 15, 46, 0.62) !important;   /* eggplant translúcido */
  background-image: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
          backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 6px 22px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  isolation: isolate;
  animation: none;
  /* Magnetic CTA — offsets seteados por JS (mousemove). Spring rápido
     pero suave para que el botón se sienta vivo. Off en mobile. */
  --mag-x: 0px;
  --mag-y: 0px;
  --cta-tint: rgba(58, 170, 187, 0.55);
}
/* Halo coloreado animado por debajo del cristal — sustituye al cycle de bg. */
.header nav .cta::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, var(--cta-tint), transparent 65%);
  filter: blur(14px);
  opacity: 0.85;
  pointer-events: none;
  animation: cta-cycle 80s linear infinite;
  animation-delay: var(--cta-delay, 0s);
}
/* Sheen — destello que pasa lentamente por la superficie. */
.header nav .cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.0)  20%,
    rgba(255, 255, 255, 0.22) 45%,
    rgba(255, 255, 255, 0.0)  70%
  );
  background-size: 220% 100%;
  background-position: 0% 0%;
  pointer-events: none;
  animation: ctaGlassSheen 9s ease-in-out infinite;
  z-index: 1;
}
@keyframes ctaGlassSheen {
  0%   { background-position: -50% 0%; }
  55%  { background-position: 150% 0%; }
  100% { background-position: 150% 0%; }
}
.header nav .cta .cta-text { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .header nav .cta::before,
  .header nav .cta::after { animation: none; }
}
.header nav .cta {
  transform: translate3d(var(--mag-x), var(--mag-y), 0);
  transition: transform .25s cubic-bezier(.2, 1.4, .35, 1), filter .25s ease, color .25s ease, background-color .3s ease, box-shadow .3s ease;
}
.header nav .cta:hover {
  background-color: rgba(42, 15, 46, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 10px 32px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(240, 232, 213, 0.30);
}
.header nav .cta .cta-text {
  position: relative;
  z-index: 2;
  --mag-tx: 0px;
  --mag-ty: 0px;
  display: inline-block;
  transform: translate3d(var(--mag-tx), var(--mag-ty), 0);
  transition: transform .25s cubic-bezier(.2, 1.4, .35, 1);
}
@media (prefers-reduced-motion: reduce) {
  .header nav .cta,
  .header nav .cta .cta-text { transform: none; transition: none; }
}

.brand-center {
  position: relative;
  display: flex;
  align-items: center;
}
@keyframes hv-crystal {
  0%   {
    background: #2A0F2E;
    box-shadow: 0 2px 10px rgba(0,0,0,0.42),
                inset 0 1px 0 rgba(240,232,213,0.10);
    border-color: rgba(240,232,213,0.42);
    color: #F0E8D5;
  }
  22%  {
    background: #3D1A35;
    box-shadow: 0 2px 14px rgba(61,26,53,0.55),
                inset 0 1px 0 rgba(212,168,74,0.22),
                0 0 10px rgba(212,168,74,0.20);
    border-color: rgba(212,168,74,0.50);
    color: #F0E8D5;
  }
  44%  {
    background: #5D2A48;
    box-shadow: 0 2px 22px rgba(93,42,72,0.52),
                inset 0 2px 0 rgba(240,220,155,0.38),
                0 0 18px rgba(212,168,74,0.44);
    border-color: rgba(212,168,74,0.82);
    color: #F5EAC5;
  }
  66%  {
    background: #4E2446;
    box-shadow: 0 2px 16px rgba(78,36,70,0.48),
                inset 0 1px 0 rgba(240,232,213,0.26),
                0 0 12px rgba(212,168,74,0.26);
    border-color: rgba(240,218,155,0.65);
    color: #F0E8D5;
  }
  88%  {
    background: #3D1A35;
    box-shadow: 0 2px 12px rgba(0,0,0,0.38),
                inset 0 1px 0 rgba(212,168,74,0.12),
                0 0 6px rgba(212,168,74,0.12);
    border-color: rgba(240,232,213,0.52);
    color: #F0E8D5;
  }
  100% {
    background: #2A0F2E;
    box-shadow: 0 2px 10px rgba(0,0,0,0.42),
                inset 0 1px 0 rgba(240,232,213,0.10);
    border-color: rgba(240,232,213,0.42);
    color: #F0E8D5;
  }
}
.hv-logo-btn {
  position: absolute;
  top: -8px;
  right: -18px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ber-dk);
  color: var(--arena);
  border: 2px solid rgba(240,232,213,0.6);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  font-size: 20px;
  font-weight: 300;
  font-family: var(--sans);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.2s;
  animation: hv-crystal 4.5s ease-in-out infinite;
}
@media (hover: hover) {
  .hv-logo-btn:hover {
    transform: scale(1.18);
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) { .hv-logo-btn { animation: none; } }
.brand-lockup {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  line-height: 1;
}
.brand-lockup .hestia-logo-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  /* área pequeña extra para que el ::after constellation no se recorte */
  padding: 6px;
  margin: -6px;
}
.brand-lockup .hestia-logo { height: 34px; width: auto; position: relative; z-index: 2; transition: filter .4s ease, transform .4s ease; }
.brand-lockup .wordmark { font-size: 14px; margin-top: 2px; }
.brand-lockup .your-home { font-size: 11px; margin-top: 1px; }

/* ────────────────────────────────────────────────────────────────
   ANIMACIÓN DEL LOGO H AL HOVER · Liquid breathing (opción 3)
   ────────────────────────────────────────────────────────────────
   La H "respira": scale 1 → 1.04 + drop-shadow turquesa que se
   expande y contrae cada 1.2 s. Halo radial detrás respirando en
   contrafase. Sólo en el header (no footer). Off en reduced-motion. */
.header .brand-lockup .hestia-logo-mark::after {
  content: '';
  position: absolute;
  inset: -8px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(58, 170, 187, 0.55) 0%,
    rgba(58, 170, 187, 0.25) 40%,
    transparent 75%);
  filter: blur(8px);
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 1;
}
.header .brand-lockup .hestia-logo {
  transition: transform .5s cubic-bezier(.2, .8, .2, 1),
              filter    .5s cubic-bezier(.2, .8, .2, 1);
}

/* HOVER · breathing infinito en bucle */
.header .brand-lockup:hover .hestia-logo,
.header .brand-lockup:focus-visible .hestia-logo {
  animation: hestiaLogoBreath 1.2s ease-in-out infinite;
}
.header .brand-lockup:hover .hestia-logo-mark::after,
.header .brand-lockup:focus-visible .hestia-logo-mark::after {
  opacity: 1;
  animation: hestiaLogoHalo 1.2s ease-in-out infinite;
}

@keyframes hestiaLogoBreath {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(58, 170, 187, 0.35));
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 14px rgba(58, 170, 187, 0.75));
  }
}
@keyframes hestiaLogoHalo {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header .brand-lockup:hover .hestia-logo,
  .header .brand-lockup:focus-visible .hestia-logo {
    animation: none;
    transform: none;
    filter: drop-shadow(0 0 8px rgba(58, 170, 187, 0.5));
  }
  .header .brand-lockup:hover .hestia-logo-mark::after,
  .header .brand-lockup:focus-visible .hestia-logo-mark::after {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }
}

.nav-left { justify-self: start; }
.nav-right { justify-self: end; }

.nav-right-area {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -------- Hamburger button (mobile only) -------- */
.hamburger-btn {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 10px 0 10px 0;
  cursor: pointer;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.header.night .hamburger-btn { color: var(--arena); }
.header.day .hamburger-btn { color: var(--ber-dk); }
.header.night .hamburger-btn:hover { background: rgba(240,232,213,0.1); }
.header.day .hamburger-btn:hover { background: rgba(184,106,60,0.10); }

/* -------- Mobile menu overlay -------- */
/* Fondo animado tipo aurora con la paleta de Hestía: berenjena de base
   + tintes de violeta, sol turquesa, buganvilla, olivo y dorado que
   respiran lentamente. Capas separadas (::before y ::after) para que
   los gradientes se desplacen con tiempos distintos sin solaparse. */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 97;
  background-color: #2A0F2E;       /* ber-dk literal — fallback sólido */
  background-image: linear-gradient(
    135deg,
    #2A0F2E 0%,
    #3D1A48 40%,
    #2A0F2E 70%,
    #1A0A1E 100%
  );
  background-size: 220% 220%;
  animation: mmAuroraBase 24s ease-in-out infinite;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--arena);
  flex-direction: column;
  /* flex-start + padding-top generoso para que el primer item ('01 Hestía Mar')
     no quede tapado por el header fijo en móviles. Centro horizontal mantenido. */
  justify-content: flex-start;
  align-items: center;
  padding-top: clamp(120px, 20vh, 160px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
}
/* Capa 1 — manchas sol turquesa + violeta que respiran. */
.mobile-menu::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 35% at 20% 18%, rgba(58, 170, 187, 0.30), transparent 65%),
    radial-gradient(ellipse 45% 40% at 80% 35%, rgba(123, 59, 107, 0.32), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 90%, rgba(58, 170, 187, 0.18), transparent 70%);
  filter: blur(12px);
  animation: mmAuroraLayer1 18s ease-in-out infinite alternate;
}
/* Capa 2 — manchas buganvilla + olivo + dorado, ritmo más lento. */
.mobile-menu::after {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 75% 75%, rgba(212, 43, 128, 0.20), transparent 70%),
    radial-gradient(ellipse 50% 35% at 15% 65%, rgba(107, 122, 58, 0.18), transparent 70%),
    radial-gradient(ellipse 35% 30% at 60% 25%, rgba(212, 168, 74, 0.16), transparent 70%);
  filter: blur(18px);
  animation: mmAuroraLayer2 28s ease-in-out infinite alternate-reverse;
  mix-blend-mode: screen;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}
@keyframes mmAuroraBase {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes mmAuroraLayer1 {
  0%   { transform: translate(0, 0)   scale(1);    opacity: 0.85; }
  50%  { transform: translate(4%, -3%) scale(1.06); opacity: 1; }
  100% { transform: translate(-3%, 4%) scale(0.96); opacity: 0.8; }
}
@keyframes mmAuroraLayer2 {
  0%   { transform: translate(0, 0)    scale(1);    opacity: 0.7; }
  50%  { transform: translate(-5%, 3%) scale(1.08); opacity: 1; }
  100% { transform: translate(4%, -4%) scale(0.94); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu::before,
  .mobile-menu::after { animation: none; }
}
/* -------- Menú móvil — diseño compacto (sin scroll) -------- */
.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  width: 100%;
  padding: 4px 28px 12px;
}
.mn-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sol-lt);
  opacity: 1;
  margin-bottom: 10px;
  align-self: flex-start;
}

/* Grid de apartamentos: nombre a la izquierda, 🔑 a la derecha */
.mn-apts-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mn-apt-row {
  display: flex;
  align-items: center;
  width: 100%;
}
.mn-apt-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  padding: 5px 8px 5px 0;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity .2s;
}
.mn-apt-link:hover, .mn-apt-link.active-page { opacity: 1; }
.mn-apt-guide {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px 0 8px 0;
  font-size: 14px;
  text-decoration: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  transition: background .2s;
}
.mn-apt-guide:hover { background: rgba(255,255,255,0.13); }

.mn-num {
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
  min-width: 18px;
  text-align: right;
  opacity: 0.65;
}
.mn-vm .mn-num { color: var(--vm2); opacity: 1; }
.mn-vm .mn-name em { color: var(--vm2); }
.mn-vt .mn-num { color: var(--vt2); opacity: 1; }
.mn-vt .mn-name em { color: var(--vt2); }
.mn-vs .mn-num { color: var(--vs2); opacity: 1; }
.mn-vs .mn-name em { color: var(--vs2); }

.mn-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 4.8vw, 24px);
  letter-spacing: -0.01em;
  color: var(--arena);
}
.mn-name em { font-style: italic; }

/* Separador */
.mn-sep {
  width: 44px;
  height: 1px;
  background: rgba(240,232,213,.12);
  margin: 10px auto;
  flex-shrink: 0;
}

/* Por qué Hestía — pill ancho completo */
.mn-mid-why {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  line-height: 1.3;
  color: #D42B80;
  border: 1px solid rgba(212,43,128,.28);
  background: rgba(212,43,128,.07);
  width: 100%;
}
.mn-mid-why:hover { background: rgba(212,43,128,.14); }

/* Fila RESERVA + Ventajas — lado a lado */
.mn-cta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.mn-cta-row .mobile-cta { margin-top: 0; flex-shrink: 0; }
.mn-mid-ventajas {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  line-height: 1.3;
  color: var(--sol-lt, #E8C26B);
  border: 1px solid rgba(232,194,107,.28);
  background: rgba(232,194,107,.07);
  flex: 1;
}
.mn-mid-ventajas:hover { background: rgba(232,194,107,.14); }

/* Páginas secundarias — columna vertical */
.mn-pages-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
.mn-page {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--arena);
  opacity: 0.38;
  padding: 5px 8px;
  transition: opacity .2s, color .2s;
}
.mn-page:hover, .mn-page.active-page { opacity: 0.9; color: var(--sol-lt); }

/* Botón reserva */
.mobile-nav .mobile-cta {
  margin-top: 0;
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 9px 28px;
  border: 1px solid var(--sol);
  border-radius: 10px 0 10px 0;
  color: var(--sol-lt);
  background: transparent;
  text-decoration: none;
  transition: background .3s, color .3s, border-color .3s;
}
.mobile-nav .mobile-cta:hover { background: var(--sol); color: var(--ber-dk); border-color: var(--sol); }

/* Contactos al pie — horizontal */
.mn-contacts {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  border-top: 1px solid rgba(240,232,213,.07);
  width: 100%;
}
.mn-contacts a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(240,232,213,.32);
  transition: color .2s;
  text-decoration: none;
}
.mn-contacts a:hover { color: rgba(240,232,213,.7); }
.mn-contacts .tl-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: tl-dot-rainbow 27s steps(9, end) infinite;
}

/* -------- Floating chat -------- */
.float-chat {
  position: fixed;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  right: 28px;
  z-index: 210;  /* por encima de la sticky bar (200) */
}
/* Cuando la sticky bar está VISIBLE (post-scroll), el chat sube
   exactamente la altura medida de la barra (--apt-sticky-h, set por JS
   vía ResizeObserver) + un margen visual. Sin números mágicos por
   viewport: la propia barra reporta su altura real, ya envuelva o no. */
body.apt-bar-shown .float-chat {
  bottom: calc(var(--apt-sticky-h, 60px) + 16px);
}
/* Bubble btn flotante — bulletproof, visible sobre CUALQUIER fondo
   (cream, oscuro, video, foto). Hex literales !important + doble anillo
   (sombra glow + ring blanco) para garantizar silueta siempre. */
.float-chat .bubble-btn {
  width: 60px; height: 60px; border-radius: 50%;
  background-color: #3AAABB !important;            /* sol literal */
  background-image: none !important;
  color: #2A0F2E !important;                       /* ber-dk literal */
  border: 0 !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow:
    0 0 0 3px rgba(240, 232, 213, 0.92),            /* anillo arena externo — silueta sobre fondo oscuro */
    0 0 0 5px rgba(42, 15, 46, 0.55),               /* anillo eggplant — silueta sobre fondo claro */
    0 10px 30px rgba(58, 170, 187, 0.55),           /* sol glow halo */
    0 4px 14px rgba(42, 15, 46, 0.45);
  transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.float-chat .bubble-btn svg {
  stroke: #2A0F2E !important;
  stroke-width: 2.4 !important;
}
@media (hover: hover) and (pointer: fine) {
  .float-chat .bubble-btn:hover {
    transform: scale(1.08);
    background-color: #6FC4D1 !important;
    color: #2A0F2E !important;
    box-shadow:
      0 0 0 3px rgba(240, 232, 213, 1),
      0 0 0 5px rgba(42, 15, 46, 0.65),
      0 14px 36px rgba(58, 170, 187, 0.70),
      0 6px 18px rgba(42, 15, 46, 0.55);
  }
}
.float-chat .bubble-panel {
  position: absolute;
  bottom: 74px; right: 0;
  width: 320px;
  background: var(--crema);
  color: var(--ber-dk);
  border-radius: 10px 0 10px 0;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(42, 15, 46, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity .25s, transform .25s;
  border: 1px solid rgba(61, 26, 53, 0.08);
}
.float-chat.open .bubble-panel {
  opacity: 1; pointer-events: auto; transform: translateY(0) scale(1);
}
.float-chat .bubble-panel h4 {
  font-family: var(--serif); font-weight: 300; font-size: 20px;
  margin-bottom: 4px;
}
.float-chat .bubble-panel p.small { font-size: 12px; opacity: 0.7; margin: 0 0 14px; }
.float-chat .contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(61, 26, 53, 0.08);
  font-size: 13px;
}
.float-chat .contact-row:first-of-type { border-top: none; }
.float-chat .contact-row .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sol); color: var(--ber-dk);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 18px;
  flex-shrink: 0;
}
.float-chat .contact-row .avatar.fran { background: var(--ber); color: var(--sol-lt); }
/* Avatares con foto — img dentro de div circular con overflow:hidden.
   object-fit: cover + object-position centran la cara. transform: scale
   añade zoom extra para que la cara llene el círculo, no aparezca
   diminuta dentro. */
.float-chat .contact-row .avatar.avatar-photo {
  overflow: hidden;
  position: relative;
  background: #F0E8D5;
  border: 1.5px solid rgba(240, 232, 213, 0.7);
  box-shadow: 0 2px 8px rgba(42, 15, 46, 0.32), inset 0 0 0 1px rgba(42, 15, 46, 0.06);
}
.float-chat .contact-row .avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Alex (731×1014) — cara en (~48%, ~30%). Scale 1.75 con transform-origin
   sobre la cara para primer plano. Filtros wow para que la foto se sienta
   pulida y consistente con el tratamiento en el resto de la web. */
.float-chat .contact-row .avatar-img-alex {
  object-position: 48% 30%;
  transform: scale(1.75);
  transform-origin: 48% 28%;
  filter:
    brightness(1.06)
    contrast(1.12)
    saturate(1.20);
}
/* Fran (925×2000) — la foto original es más close-up que la de Alex.
   Para que se vea a la misma distancia (más "alejado", mostrando algo
   de hombros + cuello como Alex), bajamos el zoom a 1.05 y subimos un
   poco object-position para que la cabeza quede arriba del círculo. */
.float-chat .contact-row .avatar-img-fran {
  object-position: 50% 28%;
  transform: scale(1.05);
  transform-origin: 50% 28%;
}
.float-chat .contact-row .info { line-height: 1.3; }
.float-chat .contact-row .info .name { font-weight: 500; }
.float-chat .contact-row .info .sub { font-size: 11px; opacity: 0.6; }

/* Contact-person — una tarjeta por persona con foto única y dos acciones
   (WhatsApp + Llamar). Sustituye las cuatro filas duplicadas (Alex×2 + Fran×2)
   por dos cards limpias. Email permanece como contact-row. */
.float-chat .contact-person {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(61, 26, 53, 0.08);
}
.float-chat .contact-person:first-of-type { border-top: none; }
.float-chat .contact-person .avatar {
  width: 52px; height: 52px; border-radius: 50%;
  flex-shrink: 0;
}
.float-chat .contact-person .avatar.avatar-photo {
  overflow: hidden;
  position: relative;
  background: #F0E8D5;
  border: 1.5px solid rgba(240, 232, 213, 0.7);
  box-shadow: 0 2px 8px rgba(42, 15, 46, 0.32), inset 0 0 0 1px rgba(42, 15, 46, 0.06);
}
.float-chat .contact-person .avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.float-chat .contact-person .cp-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.float-chat .contact-person .cp-head {
  display: flex; align-items: baseline; gap: 8px;
  line-height: 1.2;
}
.float-chat .contact-person .cp-name {
  font-weight: 600; font-size: 14px; color: var(--ber-dk, #2A0F2E);
}
.float-chat .contact-person .cp-lang {
  font-size: 11px; opacity: 0.55; color: var(--ber-dk, #2A0F2E);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.float-chat .contact-person .cp-tel {
  font-size: 12px; opacity: 0.62; color: var(--ber-dk, #2A0F2E);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.float-chat .contact-person .cp-actions {
  display: flex; gap: 6px; margin-top: 4px;
}
.float-chat .contact-person .cp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  border: 1px solid transparent;
}
.float-chat .contact-person .cp-btn-wa {
  background: #25D366; color: #fff;
  box-shadow: 0 1px 3px rgba(37, 211, 102, 0.30);
}
.float-chat .contact-person .cp-btn-wa:hover {
  background: #20BA5A;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(37, 211, 102, 0.36);
}
.float-chat .contact-person .cp-btn-tel {
  background: transparent; color: var(--ber-dk, #2A0F2E);
  border-color: rgba(61, 26, 53, 0.22);
}
.float-chat .contact-person .cp-btn-tel:hover {
  background: rgba(61, 26, 53, 0.06);
  transform: translateY(-1px);
  border-color: rgba(61, 26, 53, 0.36);
}
.float-chat .contact-person .cp-btn svg { display: block; }

/* Alex (731×1014) avatar 52px — escala 1.75, encuadre en (~48%, ~30%). */
.float-chat .contact-person .avatar-img-alex {
  object-position: 48% 30%;
  transform: scale(1.75);
  transform-origin: 48% 28%;
  filter: brightness(1.06) contrast(1.12) saturate(1.20);
}
/* Fran (925×2000) — close-up natural, escala 1.05. */
.float-chat .contact-person .avatar-img-fran {
  object-position: 50% 28%;
  transform: scale(1.05);
  transform-origin: 50% 28%;
}
.float-chat .contact-row.contact-email {
  border-top: 1px solid rgba(61, 26, 53, 0.08);
  margin-top: 4px; padding-top: 12px;
}

/* -------- Sections base -------- */
section {
  padding: clamp(80px, 10vw, 160px) var(--page-pad);
  position: relative;
}
.section-night {
  background-color: var(--ber);
  background-image: linear-gradient(125deg,
    #4E2446 0%, #3D1A35 14%, var(--ber-glow) 28%, #4E2446 42%,
    #3D1A35 56%, var(--ber-glow) 70%, #4E2446 85%, #3D1A35 100%
  );
  background-size: 400% 400%;
  animation: sky-night 34s ease infinite;
  animation-delay: -8s;
  color: var(--arena);
}
.section-dark {
  background-color: var(--ber);
  background-image: linear-gradient(125deg,
    #4E2446 0%, #4E2446 14%, #3D1A35 28%, var(--ber-glow) 42%,
    #4E2446 56%, #3D1A35 70%, var(--ber-glow) 85%, #4E2446 100%
  );
  background-size: 400% 400%;
  animation: sky-night 36s ease infinite;
  animation-delay: -14s;
  color: var(--arena);
}
/* Medium violet — interior sections */
.section-violet {
  background-color: var(--ber-lt);
  background-image: linear-gradient(125deg,
    var(--ber-glow) 0%, #4E2446 18%, var(--ber-twilight) 36%, #4E2446 54%,
    var(--ber-glow) 72%, #3D1A35 88%, var(--ber-glow) 100%
  );
  background-size: 400% 400%;
  animation: sky-night 30s ease infinite;
  animation-delay: -20s;
  color: var(--arena);
}
.section-day {
  background-color: var(--crema);
  background-image: linear-gradient(90deg,
    var(--crema-alba)  0%,
    var(--crema-dawn)  8%,
    var(--crema-noon) 20%,
    var(--crema-dusk) 33%,
    var(--crema-warm) 50%,
    var(--crema-dusk) 67%,
    var(--crema-noon) 80%,
    var(--crema-dawn) 92%,
    var(--crema-alba) 100%
  );
  background-size: 200% 100%;
  animation: sky-day 72s linear infinite;
  animation-delay: -36s;
  color: var(--ber-dk);
}

/* ── Cosmos: twinkling stars on dark sections ── */
@keyframes starsWink {
  0%,  3%  { opacity: 0; }
  5%        { opacity: 1; }
  9%        { opacity: 0; }
  19%, 22%  { opacity: 0; }
  24%       { opacity: 0.92; }
  28%       { opacity: 0; }
  42%, 45%  { opacity: 0; }
  47%       { opacity: 1; }
  51%       { opacity: 0; }
  63%, 66%  { opacity: 0; }
  68%       { opacity: 0.88; }
  72%       { opacity: 0; }
  85%, 88%  { opacity: 0; }
  90%       { opacity: 0.95; }
  94%       { opacity: 0; }
  100%      { opacity: 0; }
}
@keyframes shootStar {
  0%,  72% { opacity: 0; transform: translate(0, 0)        rotate(-22deg) scaleX(0); }
  74%       { opacity: 0;   transform: translate(0, 0)        rotate(-22deg) scaleX(0); }
  76%       { opacity: 0.9; transform: translate(0, 0)        rotate(-22deg) scaleX(1); }
  84%       { opacity: 0;   transform: translate(32vw, 14vh)  rotate(-22deg) scaleX(0.3); }
  100%      { opacity: 0; }
}
/* Twinkling stars — contact CTA footer and contact page hero */
.contact-cta::after, .contacto-hero::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(circle 3.5px  at  8% 18%, rgba(240,232,213,1) 0%, transparent 100%),
    radial-gradient(circle 2.5px  at 23% 72%, rgba(111,196,209,1)  0%, transparent 100%),
    radial-gradient(circle 3px    at 41% 31%, rgba(240,232,213,1) 0%, transparent 100%),
    radial-gradient(circle 2px    at 57% 82%, rgba(111,196,209,1)  0%, transparent 100%),
    radial-gradient(circle 3.5px  at 69% 12%, rgba(240,232,213,1) 0%, transparent 100%),
    radial-gradient(circle 2.5px  at 79% 58%, rgba(111,196,209,1)  0%, transparent 100%),
    radial-gradient(circle 3px    at 88% 28%, rgba(240,232,213,1) 0%, transparent 100%),
    radial-gradient(circle 2px    at 47% 91%, rgba(111,196,209,.9)  0%, transparent 100%);
  background-size: 100% 100%;
  opacity: 0;
  animation: starsWink 20s linear infinite;
  mix-blend-mode: screen;
}
.contact-cta::after  { animation-delay: -16s; }
.contacto-hero::after { animation-delay: -4s; }
/* Estrella fugaz — zona oscura del Bridge */
.bridge::after {
  content: '';
  position: absolute;
  top: 10%; left: 5%;
  width: 220px; height: 2px;
  background: linear-gradient(to right,
    transparent  0%,
    rgba(240,232,213,.0) 10%,
    rgba(240,232,213,.9) 40%,
    rgba(111,196,209,.7) 70%,
    transparent 100%);
  border-radius: 2px;
  pointer-events: none; z-index: 2;
  transform-origin: left center;
  box-shadow: 0 0 6px 1px rgba(111,196,209,.35);
  animation: shootStar 14s linear infinite;
  animation-delay: -3s;
}
/* ================================================================
   SKY LIFE — Noche estrellada y amanecer/atardecer animados
   ================================================================ */

/* Noche: el gradiente rota despacio entre púrpuras y azules profundos */
@keyframes sky-night {
  0%   { background-position:   0%  50%; }
  20%  { background-position:  40%   0%; }
  40%  { background-position: 100%  30%; }
  60%  { background-position:  80% 100%; }
  80%  { background-position:  20%  80%; }
  100% { background-position:   0%  50%; }
}

/* Día: el sol viaja de este (alba) a oeste (ocaso) — gradiente horizontal directo */
@keyframes sky-day {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Deriva suave de las estrellas — parallax muy lento */
@keyframes stars-drift {
  0%   { transform: translate(  0px,  0px); }
  25%  { transform: translate(  4px, -5px); }
  50%  { transform: translate( -3px, -9px); }
  75%  { transform: translate( -5px, -3px); }
  100% { transform: translate(  0px,  0px); }
}

/* Gradiente del día completo — de alba a crepúsculo y vuelta (bucle continuo)
   Al animarse, la sección se ilumina como si el sol pasara de izquierda a derecha. */
.section-cream {
  /* Fallback sólido: si el gradient falla, el cream sólido queda. */
  background-color: var(--crema);
  background-image: linear-gradient(90deg,
    var(--crema-alba)  0%,
    var(--crema-dawn)  8%,
    var(--crema-noon) 20%,
    var(--crema-dusk) 33%,
    var(--crema-warm) 50%,
    var(--crema-dusk) 67%,
    var(--crema-noon) 80%,
    var(--crema-dawn) 92%,
    var(--crema-alba) 100%
  );
  background-size: 200% 100%;
  animation: sky-day 80s linear infinite;
  color: var(--ber-dk);
}

/* -------- Utility -------- */
.container { max-width: 1400px; margin: 0 auto; }
.rule {
  width: 48px; height: 1px; background: currentColor; opacity: 0.5;
  display: inline-block; vertical-align: middle; margin-right: 14px;
}
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border-radius: 10px 0 10px 0;
  font-family: var(--sans); font-weight: 400; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  border: 1px solid currentColor;
}
.btn-primary {
  background: var(--sol); color: var(--ber-dk); border-color: var(--sol);
}
.btn-primary:hover { background: var(--sol-h); border-color: var(--sol-h); color: var(--crema); }
.btn-ghost-light { color: var(--arena); border-color: var(--arena); }
.btn-ghost-light:hover { background: var(--arena); color: var(--ber-dk); }
.btn-ghost-dark { color: var(--ber); border-color: var(--ber); }
.btn-ghost-dark:hover { background: var(--ber); color: var(--crema); }
.btn .arrow { transition: transform .3s; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(4px); }
}

/* Press feedback — instant response on click (Emil Kowalski) */
.btn:active,
.cookies-btns button:active,
.hs-apt-btn:active,
.hs-toggle:active,
.tweaks-jumps button:active,
.seg-control button:active {
  transform: scale(0.97);
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Scrollbar discreto */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(61, 26, 53, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(61, 26, 53, 0.4); }

/* Selection */
::selection { background: var(--sol); color: var(--ber-dk); }

/* -------- Watermark badge -------- */
.wm-badge {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  background: rgba(42,15,46,0.28);
  border-radius: 10px 0 10px 0;
  padding: 5px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* -------- Cookies banner --------
   Forma de botón corporativo: fondo ber-dk con borde sol a la izquierda,
   redondeado asimétrico (igual que .widget-card y .ads-card). ✦ inicial
   y texto en crema/arena. Animación con opacity para no chocar con
   transform de padres. z-index altísimo para ir por encima de Tawk. */
.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  width: min(560px, calc(100% - 24px));
  margin-left: auto;
  margin-right: auto;
  background-color: #2A0F2E !important;            /* ber-dk literal */
  background-image: none !important;
  color: #F0E8D5 !important;                        /* arena literal */
  padding: 16px 22px 16px 24px;
  border-radius: 14px 0 14px 0;
  border: 1px solid rgba(240,232,213,.22);
  border-left: 4px solid #3AAABB;                   /* sol */
  box-shadow: 0 18px 50px rgba(42, 15, 46, 0.62), 0 4px 14px rgba(42,15,46,0.32);
  z-index: 9999;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 260ms;
}
.cookies.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* iOS safe-area: solo si el dispositivo lo expone. */
@supports (bottom: env(safe-area-inset-bottom)) {
  .cookies { bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }
}
/* Cuando la sticky bar está visible, el card sube exactamente lo que mide. */
body.apt-bar-shown .cookies {
  bottom: calc(var(--apt-sticky-h, 60px) + 16px);
}
/* ✦ corporativo al inicio. */
.cookies::before {
  content: '✦';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(240,232,213,.08);
  color: var(--sol);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.cookies h5 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
  color: #6FC4D1 !important;          /* sol-lt — más legible que sol puro */
  white-space: nowrap;
}
.cookies p {
  margin: 0;
  flex: 1 1 220px;
  min-width: 180px;
  font-size: 14px;
  line-height: 1.5;
  color: #F0E8D5 !important;          /* arena 100% — sin opacity */
  opacity: 1;
}
.cookies .cookies-btns {
  display: flex;
  gap: 8px;
  margin: 0;
  flex-shrink: 0;
}
.cookies .cookies-btns button {
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
/* Aceptar — sol turquesa sólido + texto eggplant, hex literales. */
.cookies .cookies-btns .accept {
  background-color: #3AAABB !important;
  color: #2A0F2E !important;
  border: 0 !important;
  box-shadow: 0 3px 12px rgba(58,170,187,.40);
}
.cookies .cookies-btns .accept:hover {
  background-color: #6FC4D1 !important;
  color: #2A0F2E !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(58,170,187,.55);
}
/* Solo esenciales — outline arena (alto contraste sobre eggplant). */
.cookies .cookies-btns .essential {
  background-color: transparent !important;
  color: #F0E8D5 !important;
  border: 1.5px solid #F0E8D5 !important;
}
.cookies .cookies-btns .essential:hover {
  background-color: rgba(240,232,213,.14) !important;
  color: #F0E8D5 !important;
  border-color: #F0E8D5 !important;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  padding: 0;
  background: var(--ber-dk);
  color: var(--arena);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Wash oscuro + teal grade sobre el vídeo de playa */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Gradiente oscuro — más denso abajo donde va el texto */
    linear-gradient(
      170deg,
      rgba(42,15,46,0.28) 0%,
      rgba(42,15,46,0.44) 38%,
      rgba(42,15,46,0.74) 68%,
      rgba(42,15,46,0.92) 100%
    ),
    /* Viraje teal — alinea el Mediterráneo real con la paleta de marca */
    radial-gradient(ellipse 90% 55% at 35% 30%, rgba(58,170,187,0.22), transparent 65%),
    /* Cálido bermellon abajo derecha — profundidad */
    radial-gradient(ellipse 60% 45% at 88% 88%, rgba(61,26,53,0.40), transparent 60%);
  z-index: 1;
  pointer-events: none;
  transition: background 600ms ease;
}
/* Variantes de "velo" según el mood del vídeo rotatorio del hero.
   mood-violet es el por defecto (regla de arriba). Los siguientes
   sobreescriben el background cuando .hero lleva la clase. */
.hero.mood-teal::before {
  background:
    linear-gradient(
      170deg,
      rgba(15,42,46,0.22) 0%,
      rgba(15,42,46,0.40) 38%,
      rgba(20,40,55,0.70) 68%,
      rgba(20,40,55,0.92) 100%
    ),
    radial-gradient(ellipse 90% 55% at 35% 30%, rgba(58,170,187,0.32), transparent 65%),
    radial-gradient(ellipse 60% 45% at 88% 88%, rgba(20,80,110,0.45), transparent 60%);
}
.hero.mood-warm::before {
  background:
    linear-gradient(
      170deg,
      rgba(58,28,18,0.22) 0%,
      rgba(70,30,20,0.42) 38%,
      rgba(58,15,30,0.74) 68%,
      rgba(42,12,28,0.92) 100%
    ),
    radial-gradient(ellipse 90% 55% at 35% 30%, rgba(232,160,80,0.22), transparent 65%),
    radial-gradient(ellipse 60% 45% at 88% 88%, rgba(140,40,30,0.45), transparent 60%);
}
.hero.mood-night::before {
  background:
    linear-gradient(
      170deg,
      rgba(12,16,38,0.40) 0%,
      rgba(12,16,38,0.60) 38%,
      rgba(12,16,38,0.86) 68%,
      rgba(8,10,28,0.96) 100%
    ),
    radial-gradient(ellipse 90% 55% at 35% 30%, rgba(80,110,180,0.18), transparent 65%),
    radial-gradient(ellipse 60% 45% at 88% 88%, rgba(40,28,80,0.45), transparent 60%);
}
/* Estrellas */
.hero .stars {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
.hero .stars::before,
.hero .stars::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(240,232,213,0.8), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(240,232,213,0.6), transparent),
    radial-gradient(1.5px 1.5px at 50% 50%, rgba(111,196,209,0.7), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(240,232,213,0.5), transparent),
    radial-gradient(1px 1px at 15% 80%, rgba(240,232,213,0.7), transparent),
    radial-gradient(1.5px 1.5px at 40% 85%, rgba(111,196,209,0.5), transparent),
    radial-gradient(1px 1px at 90% 40%, rgba(240,232,213,0.6), transparent),
    radial-gradient(1px 1px at 35% 15%, rgba(240,232,213,0.5), transparent);
  background-size: 100% 100%;
  animation: twinkle 6s ease-in-out infinite alternate;
}
.hero .stars::after {
  animation-delay: 3s;
  transform: translate(30px, 20px);
  opacity: 0.5;
}
@keyframes twinkle {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: clamp(160px, 18vh, 230px) var(--page-pad) 80px;
}
.hero-logo-wrap {
  display: block;
  margin: 0 auto 18px;
  width: clamp(120px, 15vw, 200px);
  height: clamp(120px, 15vw, 200px);
  line-height: 0;
}
.hero-logo-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 32px rgba(58, 170, 187, 0.40));
}
/* Vídeo de playa — fondo principal del hero */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  pointer-events: none;
  z-index: 0;
}
/* Vitruvio — decorativo, minimizable a la cabecera */
.hero-vitruvio {
  position: fixed;
  /* "top" en ambos estados para que la transición CSS funcione */
  top: calc(100vh - 130px - clamp(200px, 22vw, 280px));
  left: clamp(8px, 1.2vw, 20px);
  width: clamp(200px, 22vw, 280px);
  z-index: 1000;
  /* pointer-events en el padre debe ser auto para que el hover CSS funcione */
  pointer-events: none;
  transition: top 0.55s cubic-bezier(0.23, 1, 0.32, 1),
              width 0.55s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.4s ease;
}
.hv-inner {
  position: relative;
  width: 100%;
  border-radius: 14px 0 14px 0;
  overflow: hidden;
}
.hv-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
  opacity: 0.72;
  transition: opacity 0.4s;
}
.hv-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hv-toggle {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ber-dk);
  color: var(--arena);
  border: 1px solid rgba(240,232,213,0.35);
  font-size: 18px;
  font-weight: 300;
  font-family: var(--sans);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  /* Siempre visible — el padre tiene pointer-events:none y :hover no dispara */
  opacity: 1;
  transition: transform 0.2s;
}
@media (hover: hover) {
  .hv-toggle:hover { transform: scale(1.18); }
}
.hv-box-link {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  text-align: center;
  color: var(--arena);
  font-size: 11px;
  font-family: var(--sans);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-decoration: none;
  padding: 8px 6px 9px;
  background: rgba(42,15,46,0.72);
  pointer-events: auto;
  transition: background 0.2s;
}
@media (hover: hover) { .hv-box-link:hover { background: rgba(42,15,46,0.92); } }
@media (max-width: 900px) { .hv-box-link { display: none; } }

/* Ocultar cuando el hero sale de pantalla (para no solapar contenido) */
.hv-offhero {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
/* Estado minimizado — se desliza a la zona de cabecera */
.hv-min {
  top: calc(var(--topbar-h, 36px) + 8px);
  left: 0;
  width: 36px;
  pointer-events: auto;
}
.hv-min .hv-inner {
  border-radius: 0 0 8px 0;
}
.hv-min .hv-box {
  opacity: 0.9;
}
.hv-min .hv-toggle {
  opacity: 1;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  font-size: 13px;
}
@media (max-width: 900px) {
  .hero-vitruvio { display: none; }
  /* El banner de lanzamiento sí se muestra en móvil */
  .hero-vitruvio--launch { display: block; }
}

/* --- Launch banner — fondo blanco, texto berenjena -------------------- */
/* Sube el banner respecto al vitruvio normal para no tapar coordenadas */
.hero-vitruvio--launch {
  top: calc(100vh - 230px - clamp(200px, 22vw, 280px));
}
.hv-launch-card {
  border-radius: 14px 0 14px 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
}
.hero-vitruvio--launch .hv-inner {
  border-radius: 0;
  overflow: hidden;
}
.hero-vitruvio--launch .hv-box {
  opacity: 1;
  border-radius: 0;
}
.hv-launch-text {
  background: transparent;
  border-radius: 0;
  padding: 12px 14px 15px;
  color: var(--ber-dk);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  pointer-events: auto;
}
.hv-launch-text strong {
  display: block;
  margin-top: 5px;
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--ber-dk);
}
@media (max-width: 900px) {
  .hero-vitruvio--launch {
    left: 12px;
    right: 12px;
    width: auto;
    top: auto;
    bottom: 16px;
  }
  .hero-vitruvio--launch .hv-box { aspect-ratio: 16 / 9; }
  .hv-launch-card { border-radius: 12px 0 12px 0; }
  .hv-launch-text { font-size: 12px; }
  .hv-launch-text strong { font-size: 13px; }
}

.hero-wordmark {
  font-size: clamp(14px, 1.3vw, 18px);
  margin-top: 4px;
  color: var(--arena);
  opacity: 0.9;
}
.hero-yourhome {
  font-size: clamp(11px, 0.85vw, 12px);
  margin-top: 2px;
  margin-bottom: 40px;
  color: var(--arena);
}
@media (max-width: 600px) {
  .hero-wordmark, .hero-yourhome { display: none; }
}

.hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  padding-top: 4px;
  color: var(--arena);
  /* Prevent Chrome from clipping tall ascenders */
  overflow: visible;
}
.hero-title .it { font-style: italic; font-weight: 300; color: var(--sol-lt); }

.hero-sub {
  margin-top: 26px;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}
.hero-ctas {
  margin-top: 48px;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  max-width: 680px; margin-left: auto; margin-right: auto;
}
.hero-ctas .btn { font-size: 12px; padding: 12px 22px; }

/* "Descubre cada Hestía" sobre el hero con video — bulletproof.
   El .btn-primary genérico no ganaba al ::before sheen sobre el wash.
   Hex literales + !important + sombra glow garantizan silueta. */
.hero-ctas .btn-primary {
  background-color: #3AAABB !important;
  background-image: none !important;
  color: #2A0F2E !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 22px rgba(58,170,187,.55), 0 0 0 1px rgba(240,232,213,.18);
}
.hero-ctas .btn-primary::before { display: none !important; }
.hero-ctas .btn-primary:hover {
  background-color: #6FC4D1 !important;
  color: #2A0F2E !important;
  box-shadow: 0 8px 28px rgba(58,170,187,.70), 0 0 0 1px rgba(240,232,213,.32);
}

/* Meta bar bottom hero */
.hero-meta {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px var(--page-pad);
  border-top: 1px solid rgba(240, 232, 213, 0.12);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: 300;
}
.hero-meta-facts {
  display: flex; align-items: center; gap: 10px;
}
.hm-dot { opacity: 0.45; }
@media (max-width: 600px) {
  .hero-meta {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px var(--page-pad);
    text-align: center;
    letter-spacing: 0.14em;
  }
  .hero-meta-facts { gap: 6px; flex-wrap: wrap; justify-content: center; }
  .hero-meta-province { display: none; }
}

/* Social proof bar */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}
.hero-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: rgba(240,232,213,.85);
  letter-spacing: 0.04em;
}
.hero-proof-item > .hero-proof-name {
  opacity: 0.6;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hero-proof-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(240,232,213,.3);
  flex-shrink: 0;
}
.hero-proof-platform {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(240,232,213,.38);
  font-weight: 400;
  padding-left: 8px;
  border-left: 1px solid rgba(240,232,213,.2);
}

/* Logo SVG drawing animation */
.hero-logo path.stroke-draw {
  fill: transparent;
  stroke: var(--sol);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: drawLogo 2.6s cubic-bezier(.5,.05,.2,1) .4s forwards;
}
.hero-logo .fill-reveal {
  opacity: 0;
  animation: fillReveal 1.4s ease .8s forwards;
}
@keyframes drawLogo {
  to { stroke-dashoffset: 0; }
}
@keyframes fillReveal {
  to { opacity: 1; }
}

/* ============================================================
   DAY-NIGHT BRIDGE SECTION (transición)
   ============================================================ */
.bridge {
  min-height: 80vh;
  padding: clamp(80px, 10vw, 140px) var(--page-pad);
  background: linear-gradient(
    180deg,
    var(--ber-dk) 0%,
    var(--ber)    15%,
    var(--ber-lt) 35%,
    var(--vio)    52%,
    var(--bug)    68%,
    var(--alb)    84%,
    var(--arena)  100%
  );
  color: var(--arena);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 85%, rgba(240, 168, 138, 0.5), transparent 70%);
}
.bridge-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
}
.bridge h2 {
  font-size: clamp(42px, 6vw, 88px);
  font-style: italic;
  font-weight: 300;
  color: var(--crema);
  text-shadow: 0 2px 30px rgba(42, 15, 46, 0.3);
}
.bridge p {
  margin-top: 28px;
  font-size: clamp(15px, 1.3vw, 19px);
  opacity: 0.9;
  max-width: 600px;
  margin-left: auto; margin-right: auto;
  color: var(--ber-dk);
  font-weight: 300;
}

/* Palette de colores del amanecer */
.bridge-time { color: var(--ber-dk); opacity: 0.6; }
.bridge-palette {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-top: 56px;
  flex-wrap: wrap;
}
.bridge-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: default;
  opacity: 0; /* hidden until burst */
}
/* 3D sphere via highlight gradient */
.chip-swatch {
  width: 56px; height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 52%),
    var(--chip-color);
  box-shadow:
    0 12px 32px rgba(42,15,46,.52),
    inset 0 -6px 16px rgba(42,15,46,.30),
    inset 0 5px 12px rgba(255,255,255,.18);
  transition: transform .32s ease, box-shadow .32s ease;
}
@media (hover: hover) {
  .bridge-chip:hover .chip-swatch {
    transform: scale(1.16) translateY(-4px);
    box-shadow: 0 18px 40px rgba(42,15,46,.55), inset 0 -6px 16px rgba(42,15,46,.30), inset 0 5px 12px rgba(255,255,255,.18);
  }
}
.chip-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.chip-label span {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: var(--ber-dk);
  line-height: 1.3;
}
.chip-label span:first-child { font-weight: 600; opacity: 0.9; }
.chip-label span:last-child  { opacity: 0.55; }

/* ── Burst animation — spheres erupt from sun ── */
@keyframes chipBurst {
  0%   {
    opacity: 0;
    transform: scale(0.55) translate(calc((2 - var(--chip-idx, 2)) * 58px), -130px);
    filter: blur(10px);
  }
  38%  {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.28) translate(calc((2 - var(--chip-idx, 2)) * 5px), -16px);
  }
  62%  { transform: scale(0.87) translate(0, 9px); }
  80%  { transform: scale(1.07) translate(0, -3px); }
  100% { opacity: 1; transform: scale(1) translate(0, 0); }
}
@keyframes chipLabelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sunBurst {
  0%   { transform: translate(-50%,-50%) scale(1);
         box-shadow: 0 0 70px rgba(245,201,122,.60), 0 0 150px rgba(240,232,213,.28), 0 0 260px rgba(184,136,58,.20); }
  38%  { transform: translate(-50%,-50%) scale(1.42);
         box-shadow: 0 0 160px rgba(245,201,122,1), 0 0 320px rgba(240,232,213,.80), 0 0 560px rgba(184,136,58,.60); }
  100% { transform: translate(-50%,-50%) scale(1);
         box-shadow: 0 0 70px rgba(245,201,122,.60), 0 0 150px rgba(240,232,213,.28), 0 0 260px rgba(184,136,58,.20); }
}
.bridge-palette.burst-active .bridge-chip {
  animation: chipBurst 0.80s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--chip-idx, 0) * 0.11s + 0.08s);
}
.bridge-palette.burst-active .chip-label {
  opacity: 0;
  animation: chipLabelIn 0.42s ease forwards;
  animation-delay: calc(var(--chip-idx, 0) * 0.11s + 0.60s);
}
.bridge .celestial.sun-burst {
  animation: sunBurst 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
             sunPulse 5s ease-in-out infinite 0.95s;
}
@media (prefers-reduced-motion: reduce) {
  .bridge-palette .bridge-chip,
  .bridge-palette.burst-active .bridge-chip,
  .bridge-palette.burst-active .chip-label { animation: none; opacity: 1; transform: none; filter: none; }
  .bridge .celestial.sun-burst { animation: sunPulse 5s ease-in-out infinite; }
}

/* Sol/luna en el bridge */
.bridge .celestial {
  position: absolute;
  left: 50%; top: 62%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 14vw, 200px);
  height: clamp(120px, 14vw, 200px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--crema) 0%, var(--vs2) 55%, var(--vs) 100%);
  box-shadow: 0 0 120px rgba(232, 196, 118, 0.5);
  z-index: 1;
}

/* ============================================================
   APARTMENTS HORIZONTAL SCROLL
   ============================================================ */
.apartments-intro {
  padding: clamp(100px, 10vw, 160px) var(--page-pad) clamp(60px, 6vw, 100px);
  text-align: center;
  background: var(--arena);
  color: var(--ber-dk);
}
.apartments-intro .eyebrow { color: var(--vm); margin-bottom: 18px; }
.apartments-intro h2 {
  max-width: 14ch; margin: 0 auto;
}
.apartments-intro h2 em {
  font-style: italic;
  color: var(--sol-h);
  font-weight: 300;
}
.apartments-intro p {
  max-width: 600px; margin: 24px auto 0;
  font-size: 16px; opacity: 0.75;
}

.apartments-scroll {
  background: var(--arena);
  padding-top: 32px;
  padding-bottom: clamp(80px, 10vw, 140px);
  position: relative;
}
.apartments-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 20px var(--page-pad) 30px; /* top padding gives room for hover translateY */
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.apartments-track::-webkit-scrollbar { height: 6px; }
.apartments-track::-webkit-scrollbar-thumb { background: rgba(61,26,53,0.2); }

.apt-card {
  flex: 0 0 clamp(320px, 42vw, 580px);
  height: clamp(440px, 56vw, 680px);
  border-radius: 24px 0 24px 0;
  position: relative;
  overflow: hidden;
  scroll-snap-align: center;
  cursor: pointer;
  /* CSS vars para el tilt 3D (mousemove). Default 0 = sin tilt. */
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --tilt-tz: 0px;
  transform: perspective(1000px)
             rotateX(var(--tilt-rx))
             rotateY(var(--tilt-ry))
             translate3d(0, var(--tilt-tz), 0);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  color: var(--crema);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
}
/* translateZ(0) + backface-visibility forces GPU layer and correct border-radius clipping in WebKit */
.apt-card { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .apt-card:hover { --tilt-tz: -6px; }
  .apt-card.vm:hover { box-shadow: 0 18px 48px rgba(107,122,58,.45), 0 4px 16px rgba(107,122,58,.28); }
  .apt-card.vt:hover { box-shadow: 0 18px 48px rgba(138,74,36,.45),  0 4px 16px rgba(138,74,36,.28); }
  .apt-card.vs:hover { box-shadow: 0 18px 48px rgba(158,122,44,.45), 0 4px 16px rgba(158,122,44,.28); }
}
@media (prefers-reduced-motion: reduce) {
  .apt-card { transition: box-shadow .35s ease; }
}

/* Gradient border animado tipo cult-ui — anillo conic-gradient que
   rota a 16s, visible solo al hover, en el color del apt. Vive en
   ::after con mask que solo afecta a la banda del borde (1.5 px) —
   el texto y foto interior quedan intactos. */
@property --apt-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.apt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--apt-border-angle, 0deg),
    rgba(240, 232, 213, 0) 0%,
    var(--apt-border-c1, #3AAABB) 30%,
    var(--apt-border-c2, #6FC4D1) 50%,
    rgba(240, 232, 213, 0) 80%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 5;
  pointer-events: none;
  opacity: 0.55;                                /* visible siempre — móvil sin hover */
  animation: aptBorderSpin 16s linear infinite;
  transition: opacity .35s ease;
}
.apt-card.vm { --apt-border-c1: #6B7A3A; --apt-border-c2: #8B9A52; }
.apt-card.vt { --apt-border-c1: #8A4A24; --apt-border-c2: #B86A3C; }
.apt-card.vs { --apt-border-c1: #9E7A2C; --apt-border-c2: #D4A84A; }
.apt-card:active::after { opacity: 0.85; }     /* feedback táctil al pulsar */
@media (hover: hover) and (pointer: fine) {
  .apt-card::after        { opacity: 0.45; }   /* base más baja en desktop, gana hover */
  .apt-card:hover::after  { opacity: 0.95; }
}
@keyframes aptBorderSpin {
  to { --apt-border-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .apt-card::after { animation: none; opacity: 0.55; }
}

/* Micro-tilt táctil al pulsar en móvil — sin mousemove, solo :active.
   Le da vida y feedback cuando el dedo toca la card. ±2° + lift -3 px. */
@media (hover: none) and (pointer: coarse) {
  .apt-card {
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  }
  .apt-card:active {
    --tilt-rx: -2deg;
    --tilt-ry: 1.5deg;
    --tilt-tz: -3px;
    transition: transform .12s ease-out, box-shadow .12s ease-out;
  }
  .apt-card.vm:active { box-shadow: 0 14px 36px rgba(107,122,58,.45), 0 3px 12px rgba(107,122,58,.30); }
  .apt-card.vt:active { box-shadow: 0 14px 36px rgba(138,74,36,.45),  0 3px 12px rgba(138,74,36,.30); }
  .apt-card.vs:active { box-shadow: 0 14px 36px rgba(158,122,44,.45), 0 3px 12px rgba(158,122,44,.30); }
}
.apt-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(42,15,46,0.18), rgba(42,15,46,0.55) 90%),
    linear-gradient(180deg, rgba(42,15,46,0.28) 0%, rgba(42,15,46,0.0) 45%, rgba(42,15,46,0.72) 100%);
  z-index: 2;
  pointer-events: none;
  transition: opacity .4s;
}
/* La foto real del apartamento */
.apt-card .apt-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.05);
  transition: transform 1.2s ease;
  border-radius: inherit; /* clip photo to card's border-radius even if overflow clip fails on GPU layer */
}
@media (hover: hover) and (pointer: fine) {
  .apt-card:hover .apt-photo { transform: scale(1.12); }
}

/* Wash de color sobre la foto — cada apartamento su tinte */
.apt-card .apt-wash {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.apt-card.vm .apt-wash { background: linear-gradient(160deg, rgba(74,86,40,0.85) 0%, rgba(107,122,58,0.45) 55%, rgba(139,154,82,0.75) 100%); }
.apt-card.vt .apt-wash {
  background:
    radial-gradient(ellipse 32% 38% at 17% 67%, rgba(255,210,100,.42) 0%, transparent 100%),
    radial-gradient(ellipse 32% 38% at 83% 67%, rgba(255,210,100,.42) 0%, transparent 100%),
    radial-gradient(ellipse 90% 45% at 50% 18%, rgba(0,200,220,.28) 0%, transparent 100%),
    linear-gradient(to top, rgba(42,15,46,.72) 0%, transparent 58%);
}
.apt-card.vs .apt-wash { background: linear-gradient(160deg, rgba(158,122,44,0.7) 0%, rgba(212,168,74,0.4) 55%, rgba(232,196,118,0.7) 100%); }

.apt-card .apt-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; gap: 12px;
}
.apt-card .apt-num {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 1;
  font-weight: 300;
  font-style: italic;
  opacity: 0.85;     /* antes 0.6 — ilegible sobre dark eggplant */
  margin-bottom: -20px;
}
.apt-card .apt-name {
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.apt-card .apt-name .small { font-size: 0.55em; opacity: 0.95; letter-spacing: 0.04em; }
.apt-card .apt-tag {
  font-family: var(--sans);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  opacity: 0.95;     /* antes 0.85 — el tagline debe leerse */
  max-width: 30ch;
}
.apt-card .apt-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 12px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.9;     /* antes 0.8 */
}
.apt-card .apt-meta span { display: inline-flex; align-items: center; gap: 6px; }
.apt-card .apt-meta .dot { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: 0.5; }
/* ---- Price badge on apt-card ---- */
.apt-price-badge {
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  margin: 14px 0 4px;
}
.apb-label {
  font-family: var(--sans); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .65;
}
.apb-price {
  font-family: var(--serif); font-size: 24px; font-weight: 400;
  color: var(--crema); line-height: 1;
}
.apb-per {
  font-family: var(--sans); font-size: 11px; opacity: .55; letter-spacing: .04em;
}
.apb-match {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sol-lt);
  margin-top: 4px;
  white-space: normal;
  line-height: 1.3;
}
/* ---- Two CTAs on apt-card ---- */
.apt-ctas {
  display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap;
}
.apt-link-cta {
  font-family: var(--sans); font-weight: 400; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  opacity: .65; border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 3px; transition: opacity .2s;
}
.apt-link-cta:hover,
.apt-link-cta:focus-visible { opacity: 1; }
@media (hover: none) {
  .apt-link-cta { opacity: 1; }
}
.apt-card .apt-cta {
  background: none; border: none; cursor: pointer; color: inherit;
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px; border-radius: 10px 0 10px 0;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28);
  transition: background .2s, border-color .2s, gap .2s;
}
.apt-card .apt-cta:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); gap: 14px; }

.apt-corner {
  position: absolute;
  top: 30px; left: 36px;
  z-index: 3;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.7;
}
.apt-corner .bar {
  width: 24px; height: 1px; background: currentColor; display: inline-block;
  margin-right: 10px; vertical-align: middle;
}

/* Pattern overlay sutil para simular "textura" en lugar de foto real */
.apt-card .pattern {
  position: absolute; inset: 0; z-index: 0;
  mix-blend-mode: overlay;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.2) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(42,15,46,0.32) 0%, transparent 50%);
}

/* Scroll progress indicator */
.apt-scroll-progress {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 20px;
  padding: 0 var(--page-pad);
}
.apt-scroll-progress .seg {
  width: 60px;
  height: 2px;
  background: rgba(61, 26, 53, 0.15);
  border-radius: 2px;
  cursor: pointer;
  transition: background .3s;
}
.apt-scroll-progress .seg.active { background: var(--ber); }

/* ============================================================
   COMPARADOR
   ============================================================ */
.compare {
  background: var(--crema);
  color: var(--ber-dk);
}
.compare .eyebrow { color: var(--ber); }
.compare h2 { max-width: 16ch; margin-bottom: 60px; }
.compare h2 em { font-style: italic; color: var(--sol-h); }

.compare-grid {
  display: grid;
  grid-template-columns: 180px repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(61,26,53,0.1);
}
.compare-grid > div {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(61,26,53,0.08);
  display: flex; align-items: center;
  font-size: 14px;
  font-weight: 300;
}
.compare-grid .label {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.6;
  font-weight: 400;
}
.compare-grid .head {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  align-items: flex-end;
  padding-bottom: 18px;
  padding-top: 34px;
  border-bottom: 1px solid currentColor;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.compare-grid .head.vm { color: var(--vm); }
.compare-grid .head.vt { color: var(--vt); }
.compare-grid .head.vs { color: var(--vs-dk); }
.compare-grid .head .apt-tag {
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: 400;
}
.compare-grid .head .apt-concept {
  font-style: italic;
  font-size: 14px;
  opacity: 0.75;
  font-family: var(--serif);
  font-weight: 300;
}
.compare-grid .cell {
  color: var(--ber-dk);
  line-height: 1.45;
}
.compare-grid .cell .strong { font-weight: 500; }
.compare-grid .cell .check { color: var(--sol-h); margin-right: 6px; }
.compare-grid .cell.center { justify-content: flex-start; }

.compare-grid .rate {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
}
.compare-grid .rate .rate-sub {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.5; margin-left: 6px; font-weight: 400;
}

/* ── Compare cards — mobile swipeable view */
.compare-cards-mobile { display: none; }
@media (max-width: 680px) {
  .compare-grid { display: none !important; }
  .compare-cards-mobile {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 var(--page-pad) 32px;
    scrollbar-width: none;
  }
  .compare-cards-mobile::-webkit-scrollbar { display: none; }
  .cc-card {
    flex: 0 0 calc(min(100vw - 2 * var(--page-pad), 320px));
    scroll-snap-align: start;
    background: var(--ber-dk);
    border-radius: 20px 0 20px 0;
    padding: 24px 18px;
    color: var(--crema);
    border-top: 3px solid transparent;
  }
  .cc-card.cc-vm { border-top-color: #6B7A3A; }
  .cc-card.cc-vt { border-top-color: #8A4A24; }
  .cc-card.cc-vs { border-top-color: var(--vs-dk); }
  .cc-card-head {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(240,232,213,0.12);
  }
  .cc-card-name {
    font-family: var(--serif); font-size: 26px; font-weight: 300;
    color: var(--crema);
  }
  .cc-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; padding: 9px 0;
    border-bottom: 1px solid rgba(240,232,213,0.06);
    font-size: 12.5px;
  }
  .cc-row:last-child { border-bottom: none; }
  .cc-lbl { color: rgba(240,232,213,0.5); flex-shrink: 0; }
  .cc-val { color: var(--crema); text-align: right; max-width: 60%; }
  .cc-val.rate { font-family: var(--serif); font-size: 22px; font-weight: 300; color: var(--sol-lt); }
}

/* ============================================================
   COUNTERS
   ============================================================ */
.counters {
  background: linear-gradient(125deg, var(--ber-glow) 0%, #4E2446 40%, var(--ber-twilight) 100%);
  color: var(--arena);
  padding: clamp(80px, 10vw, 140px) var(--page-pad);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.counters::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(58, 170, 187, 0.1), transparent 60%);
}
.counters .inner { position: relative; z-index: 1; }
.counters .eyebrow { color: var(--sol-lt); margin-bottom: 50px; display: block; }
.counters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.counter {
  padding: 30px 20px;
  border-left: 1px solid rgba(240,232,213,0.12);
}
.counter:first-child { border-left: none; }
.counter .num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 1;
  color: var(--crema);
  letter-spacing: -0.02em;
}
.counter .num .plus {
  color: var(--sol);
  font-style: italic;
  margin-left: -6px;
}
.counter .lbl {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.5;
  max-width: 28ch;
  margin-left: auto; margin-right: auto;
}
.counter .unit {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 44px);
  opacity: 0.6;
  margin-left: 4px;
}

/* ============================================================
   GALLERY MOSAIC
   ============================================================ */
.gallery {
  background: var(--arena);
  color: var(--ber-dk);
  padding: clamp(100px, 10vw, 160px) 0;
  overflow: hidden;
}
.gallery-head {
  text-align: center;
  padding: 0 var(--page-pad) 70px;
}
.gallery-head h2 { max-width: 18ch; margin: 0 auto; }
.gallery-head h2 em { font-style: italic; color: var(--sol-h); }
.gallery-head .eyebrow { color: var(--ber); margin-bottom: 18px; }

.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  padding: 0 var(--page-pad);
  max-width: 1500px;
  margin: 0 auto;
}
.g-tile {
  position: relative;
  overflow: hidden;
  border-radius: 10px 0 10px 0;
  background: linear-gradient(135deg, var(--sol-lt), var(--vm2));
  min-height: 240px;
  transform: translateZ(0);
  will-change: transform;
}
.g-tile .img {
  position: absolute; inset: -6%;
  background-size: cover;
  background-position: center;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .g-tile:hover .img { transform: scale(1.04); }
}
.g-tile .caption {
  position: absolute;
  left: 18px; bottom: 16px;
  color: var(--crema);
  font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  z-index: 2; mix-blend-mode: difference;
  opacity: 0.9;
}

/* Sizes */
.g-1 { grid-column: span 7; grid-row: span 2; min-height: 480px; }
.g-2 { grid-column: span 5; min-height: 260px; }
.g-3 { grid-column: span 5; min-height: 210px; }
.g-4 { grid-column: span 4; min-height: 300px; }
.g-5 { grid-column: span 4; min-height: 300px; }
.g-6 { grid-column: span 4; min-height: 300px; }

/* Placeholder gradient fills · cada tile usa una familia de la paleta
   corporativa para mantener coherencia con su caption.                */
.g-tile.tile-a .img { background: linear-gradient(135deg, var(--sol) 0%, var(--sol-h) 55%, var(--sol-text) 100%); }
.g-tile.tile-b .img { background: linear-gradient(155deg, var(--sie) 0%, var(--vt) 50%, var(--vt2) 100%); }
.g-tile.tile-c .img { background: linear-gradient(135deg, var(--ber) 0%, var(--ber-lt) 60%, var(--sie) 100%); }
.g-tile.tile-d .img { background: linear-gradient(175deg, var(--vs-dk) 0%, var(--vs) 50%, var(--vs2) 100%); }
.g-tile.tile-e .img { background: linear-gradient(115deg, var(--sol-text) 0%, var(--sol) 60%, var(--sol-lt) 100%); }
.g-tile.tile-f .img { background: linear-gradient(135deg, var(--crema) 0%, var(--arena) 60%, var(--arena-dk) 100%); }

/* Suave texture */
.g-tile .img::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.2), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(42,15,46,0.22), transparent 50%);
}

/* ============================================================
   ALEX & FRAN (revista)
   ============================================================ */
.team {
  background: var(--crema);
  color: var(--ber-dk);
  padding: clamp(100px, 12vw, 200px) var(--page-pad);
}
.team-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 100px;
}
.team-head .eyebrow { color: var(--ber); margin-bottom: 18px; display: block; }
.team-head h2 { font-size: clamp(40px, 5vw, 80px); line-height: 1.02; }
.team-head h2 em { font-style: italic; color: var(--sol-h); }
.team-head p { font-size: 16px; line-height: 1.7; opacity: 0.8; max-width: 46ch; }

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.team-member {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.team-member .portrait {
  aspect-ratio: 4 / 5;
  max-width: 200px;
  border-radius: 10px 0 10px 0;
  background: linear-gradient(160deg, var(--ber-lt), var(--ber));
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.team-member .portrait::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 38%, rgba(240, 232, 213, 0.45), transparent 70%),
    radial-gradient(circle at 50% 30%, rgba(240, 232, 213, 0.25) 0%, transparent 40%);
}
.team-member .portrait > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  z-index: 1;
}
/* La foto de Fran es más vertical: object-position 38% encuadra cara
   y hombros con un poco de aire arriba y a los lados. */
.team-member.fran .portrait img,
.team-member .portrait img[src*="photo-fran"] {
  object-position: center 38%;
}
.team-member .portrait .silhouette {
  position: absolute;
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: 70%; height: 85%;
  z-index: 2;
  opacity: 0.85;
}
.team-member.alex .portrait { background: linear-gradient(160deg, #4E2446, var(--sol-text)); }
.team-member.fran .portrait { background: linear-gradient(160deg, #2A0F2E, #8B4A1E); }

.team-member .member-info {
  display: flex; flex-direction: column; gap: 8px;
}
.team-member .role {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
}
.team-member .name {
  font-family: var(--serif);
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 300;
  line-height: 1;
}
.team-member .name em { font-style: italic; color: var(--sol-h); }
.team-member .quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.85;
  margin-top: 10px;
  max-width: 40ch;
  border-left: 1px solid var(--sol);
  padding-left: 18px;
}
.team-member .contacts-inline {
  display: flex; gap: 18px; margin-top: 16px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 400;
}
.team-member .contacts-inline a {
  padding: 8px 0; border-bottom: 1px solid currentColor;
  transition: color .2s;
}
.team-member .contacts-inline a:hover { color: var(--sol-h); }

/* ============================================================
   HUÉSPED COLABORATIVO — manifest block
   ============================================================ */
.manifest {
  background-color: var(--ber-lt);
  background-image: linear-gradient(125deg,
    var(--ber-glow) 0%, #4E2446 12%, var(--ber-twilight) 26%, #4E2446 40%,
    var(--ber-glow) 54%, #4E2446 68%, #3D1A35 82%, var(--ber-glow) 100%
  );
  background-size: 400% 400%;
  animation: sky-night 32s ease infinite;
  animation-delay: -6s;
  color: var(--arena);
  padding: clamp(100px, 10vw, 160px) var(--page-pad);
  position: relative;
  overflow: hidden;
}
.manifest::before {
  content: '';
  position: absolute;
  top: -30%; right: -20%;
  width: 60%; aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58,170,187,0.12), transparent 65%);
}
.manifest-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  position: relative;
  z-index: 1;
}
.manifest .eyebrow { color: var(--sol-lt); margin-bottom: 18px; display: block; }
.manifest h2 {
  font-size: clamp(36px, 4.5vw, 72px);
  line-height: 1.02;
}
.manifest h2 em { font-style: italic; color: var(--sol-lt); }
/* Manifest lead — dos párrafos narrativos que introducen el "viajero
   hogareño" antes de la lista de cuidados. Tipografía serif, prosa
   reposada (no sloganesca). El segundo párrafo hace el puente al
   colaborador: "porque es tu casa ahora, lo cuidas como propio." */
.manifest .manifest-lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.002em;
  color: rgba(240, 232, 213, 0.88);
  margin: 0 0 18px;
  max-width: 60ch;
}
.manifest .manifest-lead:last-of-type { margin-bottom: 28px; }
.manifest .principles {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.manifest .principles-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sol-lt);
  opacity: 0.72;
  margin-bottom: 6px;
  padding-bottom: 14px;
}
.manifest .principle {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 30px;
  padding: 26px 0;
  border-top: 1px solid rgba(240,232,213,0.15);
  align-items: center;
}
.manifest .principle:last-child { border-bottom: 1px solid rgba(240,232,213,0.15); }
.manifest .principle .p-num {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  opacity: 0.55;
  font-weight: 300;
}
.manifest .principle .p-text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.manifest .closing-quote {
  margin-top: 40px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.5;
  opacity: 0.7;
  max-width: 44ch;
}

/* ============================================================
   RATINGS MARQUEE — cinta de plataformas/métricas bajo Ratings
   ============================================================ */
.ratings-marquee {
  background-color: #2A0F2E;
  color: #F0E8D5;                              /* ratio ~11:1 sobre eggplant */
  border-top: 1px solid rgba(240, 232, 213, 0.10);
  border-bottom: 1px solid rgba(240, 232, 213, 0.10);
  overflow: hidden;
  padding: 16px 0;
  position: relative;
}
.ratings-marquee::before,
.ratings-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}
.ratings-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #2A0F2E, transparent);
}
.ratings-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #2A0F2E, transparent);
}
.rm-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
  width: max-content;
  animation: rmScroll 42s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.rm-item {
  font-family: var(--sans);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #F0E8D5;
}
.rm-dot {
  color: #6FC4D1;                               /* sol-lt — pinta de marca */
  font-size: 11px;
  opacity: 0.7;
}
@keyframes rmScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) and (pointer: fine) {
  .ratings-marquee:hover .rm-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-track { animation: none; }
}

/* ============================================================
   RATINGS (cards)
   ============================================================ */
.ratings {
  background: var(--arena);
  color: var(--ber-dk);
  padding: clamp(90px, 10vw, 140px) var(--page-pad);
  text-align: center;
}
.ratings h2 { max-width: 18ch; margin: 0 auto 18px; }
.ratings h2 em { font-style: italic; color: var(--sol-h); }
.ratings .eyebrow { color: var(--ber); margin-bottom: 18px; display: block; }
.ratings p.ratings-sub {
  max-width: 540px; margin: 0 auto 60px;
  font-size: 15px; opacity: 0.7;
}
.ratings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.rating-card {
  background: var(--crema);
  padding: 40px 32px;
  border-radius: 10px 0 10px 0;
  text-align: left;
  border-top: 3px solid var(--ber);
  transition: transform .4s, box-shadow .4s;
  transform: translateZ(0);
  will-change: transform;
}
.rating-card:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: 0 20px 50px rgba(42,15,46,0.1);
}
.rating-card .platform {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.75;
  margin-bottom: 20px;
}
.rating-card .score {
  font-family: var(--serif);
  font-size: clamp(54px, 6vw, 80px);
  font-weight: 300;
  line-height: 1;
}
.rating-card .score .dec {
  font-style: italic; color: var(--sol-h); font-size: 0.65em;
}
.rating-card .score-max {
  font-family: var(--sans); font-size: 12px;
  opacity: 0.5; margin-left: 4px;
}
.rating-card .desc {
  margin-top: 16px;
  font-style: italic;
  font-family: var(--serif);
  font-size: 15px;
  opacity: 0.75;
  line-height: 1.5;
}
.rating-quote {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(42,15,46,.1);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ber);
  opacity: 0.8;
}
.rating-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ============================================================
   DIRECT PERKS TEASER — banda corta encima de ContactCTA
   ============================================================ */
.direct-perks-teaser {
  background-color: #2A0F2E;
  color: #F0E8D5;
  padding: clamp(20px, 3vw, 36px) var(--page-pad);
  border-top: 1px solid rgba(240, 232, 213, 0.08);
  position: relative;
}
/* En desktop el WidgetStack flotante a la derecha ya hostea el CTA
   "Ver todas las ventajas" — la banda inline es redundante. La
   mostramos solo en mobile (donde el WidgetStack está oculto). */
@media (min-width: 768px) {
  .direct-perks-teaser { display: none; }
}
.direct-perks-teaser::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 80px;
  height: 1px;
  background: #6FC4D1;
  transform: translateX(-50%);
  opacity: 0.45;
}
.dpt-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.dpt-eyebrow {
  color: #6FC4D1 !important;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.dpt-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 10px 0 10px 0;
  background-color: #3AAABB !important;
  background-image: none !important;
  color: #2A0F2E !important;
  border: 0 !important;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(58, 170, 187, 0.40);
  transition: background-color .25s ease, transform .15s ease, box-shadow .25s ease;
}
.dpt-btn:hover {
  background-color: #6FC4D1 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(58, 170, 187, 0.55);
}
.dpt-btn:active { transform: translateY(0) scale(.98); }
.dpt-arrow { font-size: 14px; line-height: 1; transition: transform .25s ease; }
.dpt-btn:hover .dpt-arrow { transform: translateX(3px); }
@media (max-width: 640px) {
  .dpt-inner { flex-direction: column; gap: 14px; text-align: center; }
}

/* ============================================================
   CONTACT CTA
   ============================================================ */
.contact-cta {
  /* Color base sólido como fallback — garantiza fondo eggplant aunque
     el gradient falle (ej. iOS con Smart Invert, color profile, etc.) */
  background-color: var(--ber-dk);
  background-image: linear-gradient(125deg,
    #3D1A35 0%, #2A0F2E 12%, #2A0F2E 25%, #2A0F2E 38%,
    #3D1A35 52%, var(--ber-cosmic) 65%, #2A0F2E 78%, #3D1A35 100%
  );
  background-size: 400% 400%;
  animation: sky-night 34s ease infinite;
  animation-delay: -20s;
  color: var(--arena);
  padding: clamp(60px, 7vw, 100px) var(--page-pad);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(58,170,187,0.15), transparent 60%);
}
.contact-cta .inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.contact-cta .eyebrow { color: var(--sol-lt); margin-bottom: 24px; display: block; }
.contact-cta h2 {
  font-size: clamp(44px, 6vw, 96px);
  line-height: 1.02;
}
.contact-cta h2 em { font-style: italic; color: var(--sol-lt); }
.contact-cta p { margin-top: 24px; opacity: 0.8; font-size: 16px; max-width: 50ch; margin-left: auto; margin-right: auto; }
.contact-cta .ctas {
  margin-top: 50px;
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.contact-cta .address {
  margin-top: 80px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.8;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  position: relative;
  z-index: 39;
  border-radius: 32px 0 32px 0;
  /* Color base sólido como fallback. */
  background-color: var(--ber-dk);
  background-image: linear-gradient(125deg,
    #2A0F2E 0%, #2A0F2E 8%, #2A0F2E 16%, #3D1A35 24%,
    #2A0F2E 32%, var(--ber-cosmic) 40%, #2A0F2E 48%, #2A0F2E 56%,
    #2A0F2E 64%, #2A0F2E 72%, #3D1A35 80%, #2A0F2E 88%,
    #2A0F2E 100%
  );
  background-size: 400% 400%;
  animation: sky-night 38s ease infinite;
  animation-delay: -12s;
  color: var(--arena);
  padding: 72px var(--page-pad) 40px;
}
footer::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(240,232,213,.48) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 42%, rgba(240,232,213,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 12%, rgba(240,232,213,.52) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 55%, rgba(240,232,213,.38) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 28%, rgba(240,232,213,.48) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 72%, rgba(240,232,213,.42) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at  8%  8%, rgba(240,232,213,.25) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 22% 65%, rgba(240,232,213,.22) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 38% 32%, rgba(240,232,213,.28) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 55% 78%, rgba(240,232,213,.22) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 72% 15%, rgba(240,232,213,.28) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 85% 48%, rgba(240,232,213,.25) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 22%, rgba(240,232,213,.72) 0%, transparent 100%),
    radial-gradient(2px 2px at 68% 82%, rgba(240,232,213,.68) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 52% 38%, rgba(111,196,209,.55) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 18% 88%, rgba(111,196,209,.48) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: stars-drift 90s ease-in-out infinite, starsWink 32s linear infinite;
  animation-delay: -8s, -16s;
}
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(240,232,213,0.12);
}
footer h5 {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.75;
  margin: 0 0 18px;
}
footer .col ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 2.1; opacity: 0.8; }
footer .col a:hover { color: var(--sol-lt); }
/* Botón estilizado como enlace para "Revisar consentimiento" */
.footer-linklike {
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer;
  text-align: left; opacity: .9;
}
.footer-linklike:hover { color: var(--sol-lt); opacity: 1; }
footer .footer-brand .hestia-logo { height: 32px; margin-bottom: 14px; }
footer .footer-brand .tagline {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; opacity: 0.75; max-width: 26ch;
  line-height: 1.5;
}
footer .footer-brand .addr {
  margin-top: 24px; font-size: 12px; opacity: 0.6; line-height: 1.7;
}
.footer-social {
  display: flex; gap: 14px; margin-top: 20px; align-items: center;
}
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(240,232,213,0.2);
  color: rgba(240,232,213,0.65);
  transition: color 0.2s, border-color 0.2s;
}
.footer-social a:hover { color: var(--sol-lt); border-color: var(--sol-lt); }
.footer-social-cta {
  margin-top: 12px; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.45;
}
.footer-bottom {
  position: relative;
  z-index: 1;
  max-width: 1400px; margin: 30px auto 0;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.5; flex-wrap: wrap;
}
.footer-bottom .licences { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0.04em; }

/* ============================================================
   CALENDAR — Disponibilidad en tiempo real
   ============================================================ */
.apt-avail {
  padding: 90px 40px;
  background: linear-gradient(135deg, #4E2446 0%, #3D1A35 50%, var(--ber-glow) 100%);
  border-top: 1px solid rgba(240,232,213,0.07);
}
.avail-hd {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 48px;
}
.avail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,232,213,0.45);
  margin-bottom: 22px;
}
.avail-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
  animation: avail-pulse 2.5s ease-in-out infinite;
}
@keyframes avail-pulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(74,222,128,.45); }
  60%      { opacity:.7; box-shadow:0 0 0 5px rgba(74,222,128,0); }
}
.avail-title {
  font-family: var(--serif);
  font-size: clamp(24px,3.2vw,36px);
  font-weight: 300;
  color: rgba(240,232,213,.92);
  margin: 0 0 16px;
  line-height: 1.25;
}
.avail-title em { font-style: italic; }
.avail-sub {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(240,232,213,.5);
  font-family: var(--sans);
  font-weight: 300;
  max-width: 48ch;
  margin: 0 auto;
}
.avail-demo {
  max-width: 820px;
  margin: 0 auto 32px;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(240,190,60,.75);
  border: 1px solid rgba(240,190,60,.2);
  background: rgba(240,190,60,.05);
  border-radius: 10px 0 10px 0;
  padding: 9px 20px;
}
.avail-sync-err {
  max-width: 820px;
  margin: 0 auto 32px;
  text-align: center;
  font-family: var(--sans);
  font-size: 12px; font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: rgba(240,150,80,.85);
  border: 1px solid rgba(240,150,80,.2);
  background: rgba(240,150,80,.05);
  border-radius: 10px 0 10px 0;
  padding: 10px 20px;
}
.avail-sync-err a {
  color: rgba(240,150,80,.9);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.avail-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 32px;
}
.avail-nav-lbl {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 300;
  color: rgba(240,232,213,.7);
  letter-spacing: 0.05em;
  min-width: 260px;
  text-align: center;
  text-transform: capitalize;
}
.avail-arr {
  background: none;
  border: 1px solid rgba(240,232,213,.18);
  color: rgba(240,232,213,.65);
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
  padding: 0;
}
.avail-arr:hover:not(.off) { border-color: var(--apt-accent,var(--sol)); color: var(--apt-accent,var(--sol)); }
.avail-arr.off { opacity: .22; cursor: default; pointer-events: none; }
.avail-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}
/* ---- Month card ---- */
.cal-month {
  background: rgba(240,232,213,.03);
  border: 1px solid rgba(240,232,213,.08);
  border-radius: 10px 0 10px 0;
  padding: 28px 18px 20px;
}
.cal-skel { min-height: 300px; animation: skel-blink 1.6s ease-in-out infinite; }
@keyframes skel-blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.cal-mhd {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  color: rgba(240,232,213,.88);
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  text-transform: capitalize;
}
.cal-yr { opacity: .45; font-size: 13px; margin-left: 5px; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 1px 0;
}
.cal-wd {
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,232,213,.25);
  padding-bottom: 11px;
}
/* ---- Day cell ---- */
.cal-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 36px;
  cursor: default;
  user-select: none;
}
.cal-empty { visibility: hidden; }
.c-n {
  position: relative;
  z-index: 3;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 300;
  color: rgba(240,232,213,.8);
  line-height: 1;
  pointer-events: none;
}
.cal-cell.past      .c-n { opacity: .2; }
.cal-cell.blk       .c-n { color: var(--ber-dk); font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(61,26,53,.45); }
/* Día POST-bloqueo: aunque la celda NO esté bloqueada, parte del número
   queda sobre el strip de fundido. Forzar texto oscuro para que se lea
   en la zona de transición. Sin line-through (el día sí está libre por
   la tarde). */
.cal-cell.blk-after .c-n { color: var(--ber-dk); font-weight: 500; }
.cal-cell.today:not(.blk) .c-n { color: var(--apt-accent,var(--sol)); font-weight: 500; }
/* Strip — horizontal bar connecting blocked range. Color crema. */
.c-strip {
  position: absolute;
  top: 5px; bottom: 5px;
  left: -1px; right: -1px;
  background: var(--crema);
  opacity: 0.92;
  z-index: 0;
  pointer-events: none;
}
/* Día PRE-bloqueo (departure: huésped sale esta mañana).
   DIAGONAL split: triángulo BOTTOM-RIGHT bloqueado (tarde + noche),
   esquina TOP-LEFT libre (mañana disponible para check-out).
   La línea diagonal comunica "media celda con disponibilidad". */
.c-strip.c-sr {
  left: -1px; right: -1px;
  border-radius: 3px;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* Día POST-bloqueo (arrival: huésped del bloque sale esta mañana,
   tu check-in posible esta tarde).
   Espejo: triángulo TOP-LEFT bloqueado (mañana ocupada),
   esquina BOTTOM-RIGHT libre (tarde para check-in).             */
.c-strip.c-sl {
  left: -1px; right: -1px;
  border-radius: 3px;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
          clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* Circle — días bloqueados aislados o extremos del rango. Crema +
   forma cuadrada (width = height) para que sea círculo perfecto, no
   elipse. */
.c-circ {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--crema);
  border: 1px solid color-mix(in srgb, var(--crema) 80%, var(--ber-dk));
  z-index: 1;
  pointer-events: none;
}
/* Today ring */
.c-today {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--apt-accent,var(--sol));
  z-index: 2;
  pointer-events: none;
}
.cal-cell.blk .c-today { border-color: color-mix(in srgb, var(--crema) 70%, var(--ber-dk)); }
/* ---- Footer ---- */
.avail-foot {
  max-width: 820px;
  margin: 22px auto 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 0 2px;
}
.avail-legend {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240,232,213,.4);
}
.leg-item { display: flex; align-items: center; gap: 7px; }
.leg-sep  { opacity: .3; }
.leg-dot  { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.leg-dot.lg-av { border: 1.5px solid rgba(240,232,213,.28); }
.leg-dot.lg-bk { background: var(--crema); border: 1px solid color-mix(in srgb, var(--crema) 70%, var(--ber-dk)); }
.avail-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avail-upd {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 11px;
  color: rgba(240,232,213,.28); letter-spacing: .04em;
}
.avail-srcs { display: flex; gap: 6px; }
.avail-src {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 10px 0 10px 0; border: 1px solid;
}
.avail-src.src-bk { color:rgba(0,110,210,.8); border-color:rgba(0,110,210,.3); background:rgba(0,110,210,.06); }
.avail-src.src-ab { color:rgba(255,88,74,.8); border-color:rgba(255,88,74,.3); background:rgba(255,88,74,.06); }
/* ---- CTA ---- */
.avail-cta-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin-top: 44px; text-align: center;
}
.avail-cta-note {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,232,213,.3);
}
/* ---- Responsive ---- */
@media (max-width: 700px) {
  .apt-avail { padding: 60px 20px; }
  .avail-months { grid-template-columns: 1fr; }
  .avail-nav-lbl { min-width: 200px; font-size: 14px; }
  .avail-foot { flex-direction: column; align-items: flex-start; }
  .cal-cell { height: 40px; }
}

/* ---- Clickable days ---- */
.cal-cell.clickable { cursor: pointer; }
.cal-cell.clickable:hover:not(.in-sel):not(.in-prev) .c-n {
  color: var(--apt-accent, var(--sol));
}

/* ---- Selection range ---- */
.c-sel-strip { background: var(--sel-fill, rgba(58,170,187,.22)); }
.c-sel-circ  { background: var(--sel-circ, rgba(58,170,187,.9)); }
.cal-cell.sel-s .c-n,
.cal-cell.sel-e .c-n { color: var(--crema); font-weight: 400; }
.cal-cell.sel-m .c-n { color: rgba(240,232,213,.45); }

/* ---- Preview range (hover) ---- */
.c-prev-strip { background: var(--prev-fill, rgba(58,170,187,.11)); }
.c-prev-circ  { background: var(--prev-circ, rgba(58,170,187,.48)); }
.cal-cell.prev-s .c-n,
.cal-cell.prev-e .c-n { color: rgba(240,232,213,.85); }
.cal-cell.prev-m .c-n { color: rgba(240,232,213,.35); }

/* ---- Selection hint bar ---- */
.avail-hint {
  max-width: 820px;
  margin: 0 auto 20px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 12px;
  color: rgba(42,15,46,.65);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(42,15,46,.12);
  border-radius: 10px 0 10px 0; padding: 10px 18px;
}
.avail-hint-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--apt-accent, var(--sol)); flex-shrink: 0;
  animation: avail-pulse 1.8s ease-in-out infinite;
}
.avail-hint strong { color: rgba(42,15,46,.9); }

/* ---- Inline sel message (error / info) ---- */
.avail-sel-msg {
  max-width: 820px; margin: 14px auto 0;
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--sans); font-size: 12px;
  padding: 10px 16px; border-radius: 10px 0 10px 0;
}
.avail-sel-msg.error {
  color: rgba(180,50,30,.9);
  background: rgba(255,220,215,.85);
  border: 1px solid rgba(180,50,30,.25);
}
.avail-sel-msg.info {
  color: rgba(42,15,46,.65);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(42,15,46,.12);
}
.avail-sel-msg svg { flex-shrink: 0; margin-top: 1px; }

/* ---- Legend selection dot ---- */
.leg-dot.lg-sel {
  background: var(--apt-accent, var(--sol));
  opacity: .9;
}

/* ============================================================
   REQUEST PANEL
   ============================================================ */
.req-panel {
  max-width: 820px; margin: 32px auto 0;
  background: var(--crema);
  border: 1px solid rgba(42,15,46,.1);
  border-top: 2px solid var(--req-accent, var(--sol));
  border-radius: 10px 0 10px 0;
  padding: 32px 32px 28px;
  box-shadow: 0 8px 48px rgba(42,15,46,.18);
  animation: req-in .35s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes req-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dates summary */
.req-dates {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(42,15,46,.08);
}
.req-date-col { display: flex; flex-direction: column; gap: 4px; }
.req-date-col--r { text-align: right; }
.req-date-lbl {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(42,15,46,.45);
}
.req-date-val {
  font-family: var(--serif); font-size: 17px;
  color: var(--ber-dk);
  font-weight: 300;
}
.req-nights {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex-shrink: 0;
}
.req-nights-n {
  font-family: var(--serif); font-size: 38px; font-weight: 300;
  color: var(--req-accent, var(--sol)); line-height: 1;
}
.req-nights-lbl {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(42,15,46,.45);
}

/* Guests */
.req-guests {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px; margin-bottom: 24px;
}
.req-guests-lbl {
  font-family: var(--sans); font-size: 13px;
  color: rgba(42,15,46,.65);
}
.req-guests-ctrl {
  display: flex; align-items: center; gap: 0;
  border: 1px solid rgba(42,15,46,.15); border-radius: 10px 0 10px 0;
  overflow: hidden;
}
.req-g-btn {
  background: none; border: none;
  width: 40px; height: 40px;
  font-size: 20px; line-height: 1;
  color: rgba(42,15,46,.55);
  cursor: pointer;
  transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center;
}
.req-g-btn:hover { background: rgba(42,15,46,.05); color: rgba(42,15,46,.9); }
.req-g-num {
  min-width: 44px; text-align: center;
  font-family: var(--serif); font-size: 20px;
  color: var(--ber-dk);
  border-left: 1px solid rgba(42,15,46,.12);
  border-right: 1px solid rgba(42,15,46,.12);
  line-height: 40px;
}

/* Why no direct price */
.req-why {
  margin-bottom: 24px;
  padding: 22px 20px;
  background: rgba(42,15,46,.03);
  border: 1px solid rgba(42,15,46,.1);
  border-radius: 10px 0 10px 0;
}
.req-why-q {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: rgba(42,15,46,.78);
  margin-bottom: 12px;
}
.req-why-p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(42,15,46,.6);
  margin: 0 0 10px;
}
.req-why-p:last-child { margin-bottom: 0; }
.req-why-p strong { color: rgba(42,15,46,.85); font-weight: 500; }
.req-why-close { color: rgba(42,15,46,.5); }
.req-why-close em {
  font-style: italic;
  font-family: var(--serif);
  font-size: 14px;
  color: rgba(42,15,46,.7);
}

/* Disclaimer */
.req-disclaimer {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(240,190,60,.06);
  border: 1px solid rgba(240,190,60,.18);
  border-radius: 10px 0 10px 0; padding: 14px 16px;
  margin-bottom: 24px;
  color: rgba(42,15,46,.65);
}
.req-disclaimer svg { flex-shrink: 0; margin-top: 2px; color: rgba(180,130,20,.85); }
.req-disclaimer p {
  font-family: var(--sans); font-size: 13px; line-height: 1.6; margin: 0;
}
.req-disclaimer strong { color: rgba(240,190,60,.9); font-weight: 500; }

/* Disabled state — shared by req-panel, home-search cards */
.req-btn-dis { opacity: .60; pointer-events: none; cursor: default; }
.req-hint { font-family: var(--sans); font-size: 11px; letter-spacing: .08em; color: #D42B80; margin: 0 0 10px; }

/* Action buttons */
.req-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
/* CTA primary "Avanzar con la reserva" — alto contraste: turquesa con
   texto eggplant oscuro (#2A0F2E) sobre sol (#3AAABB), ratio AA+. */
.hs-forward-btn,
.req-btn-forward {
  background: var(--sol) !important;
  border: 2px solid var(--sol) !important;
  color: var(--ber-dk) !important;
  padding: 16px 26px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  width: 100%;
  justify-content: center;
  box-shadow:
    0 10px 28px rgba(42, 142, 158, 0.45),
    0 2px 6px rgba(42, 15, 46, 0.18);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.hs-forward-btn:hover,
.req-btn-forward:hover {
  background: var(--sol-h) !important;
  border-color: var(--sol-h) !important;
  color: var(--crema) !important;
  transform: translateY(-1px);
  box-shadow:
    0 14px 36px rgba(42, 142, 158, 0.55),
    0 4px 10px rgba(42, 15, 46, 0.22);
}
.hs-forward-btn:active,
.req-btn-forward:active {
  transform: scale(0.98);
}

/* Sticky bar CTA "RESERVAR" — bulletproof. Selector .asb-cta sin
   acoplarse a btn-primary (que tiene su propio cascade). Hex literales
   sin var() para que NINGÚN parser viejo pueda romperlo. */
a.asb-cta,
.asb-cta {
  background-color: #3AAABB !important;          /* sol */
  background-image: none !important;
  color: #2A0F2E !important;                     /* ber-dk */
  border: 0 !important;
  border-radius: 8px 0 8px 0 !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none !important;
}
a.asb-cta:hover,
.asb-cta:hover {
  background-color: #2A8E9E !important;          /* sol-h */
  color: #2A0F2E !important;                     /* mantener ber-dk para AA */
}
.asb-cta:active {
  transform: scale(0.97);
}

/* ═══════════════════════════════════════════════════════════
   BOTONES "CRISTAL METÁLICO ANIMADO" EN PÁGINAS APARTAMENTO
   ───────────────────────────────────────────────────────────
   En las páginas de cada Hestía, los CTAs (sticky-bar, hero
   "Reservar", widget-mini plegados) llevan tratamiento glass +
   metallic + animated tint. Cada apt usa SU color:
   - Mar      → olivo  #6B7A3A / claro #8B9A52
   - Thalassa → siena  #8A4A24 / claro #B86A3C
   - Salinas  → dorado #9E7A2C / claro #D4A84A
   El metálico = gradient 3-stop (oscuro / claro / oscuro) animado
   por background-position 8 s. El sheen = banda blanca 25% en
   ::after que pasa cada 8 s. Contraste arena (Mar/Thalassa) o
   ber-dk (Salinas) — todos >4.5 AA. */
[data-apt="mar"]      .asb-cta,
[data-apt="thalassa"] .asb-cta,
[data-apt="salinas"]  .asb-cta,
body[data-apt="mar"]      a.apt-page-reserve-btn,
body[data-apt="thalassa"] a.apt-page-reserve-btn,
body[data-apt="salinas"]  a.apt-page-reserve-btn,
[data-apt="mar"]      .widget-cta,
[data-apt="thalassa"] .widget-cta,
[data-apt="salinas"]  .widget-cta,
body[data-apt="mar"]      .widget-cta,
body[data-apt="thalassa"] .widget-cta,
body[data-apt="salinas"]  .widget-cta,
[data-apt="mar"]      .ads-btn,
[data-apt="thalassa"] .ads-btn,
[data-apt="salinas"]  .ads-btn,
body[data-apt="mar"]      .ads-btn,
body[data-apt="thalassa"] .ads-btn,
body[data-apt="salinas"]  .ads-btn,
[data-apt="mar"]      .ag-nav-btn-primary,
[data-apt="thalassa"] .ag-nav-btn-primary,
[data-apt="salinas"]  .ag-nav-btn-primary,
body[data-apt="mar"]      .ag-nav-btn-primary,
body[data-apt="thalassa"] .ag-nav-btn-primary,
body[data-apt="salinas"]  .ag-nav-btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px 0 10px 0 !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.35);
          backdrop-filter: blur(6px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 6px 22px var(--apt-glow, rgba(58, 170, 187, 0.45)) !important;
  border: 1px solid rgba(240, 232, 213, 0.22) !important;
  animation: aptCtaFlow 9s ease-in-out infinite;
  background-size: 220% 220% !important;
}
/* Mar — olivo metálico */
[data-apt="mar"]      .asb-cta,
body[data-apt="mar"]      a.apt-page-reserve-btn,
[data-apt="mar"]      .widget-cta,
body[data-apt="mar"]      .widget-cta,
[data-apt="mar"]      .ads-btn,
body[data-apt="mar"]      .ads-btn,
[data-apt="mar"]      .ag-nav-btn-primary,
body[data-apt="mar"]      .ag-nav-btn-primary {
  background-image: linear-gradient(135deg,
    #6B7A3A 0%, #8B9A52 32%, #6B7A3A 55%, #556330 78%, #6B7A3A 100%) !important;
  background-color: #6B7A3A !important;
  color: #F0E8D5 !important;
  --apt-glow: rgba(107, 122, 58, 0.55);
}
/* Thalassa — siena metálico */
[data-apt="thalassa"] .asb-cta,
body[data-apt="thalassa"] a.apt-page-reserve-btn,
[data-apt="thalassa"] .widget-cta,
body[data-apt="thalassa"] .widget-cta,
[data-apt="thalassa"] .ads-btn,
body[data-apt="thalassa"] .ads-btn,
[data-apt="thalassa"] .ag-nav-btn-primary,
body[data-apt="thalassa"] .ag-nav-btn-primary {
  background-image: linear-gradient(135deg,
    #8A4A24 0%, #B86A3C 32%, #8A4A24 55%, #6E3A1C 78%, #8A4A24 100%) !important;
  background-color: #8A4A24 !important;
  color: #F0E8D5 !important;
  --apt-glow: rgba(184, 106, 60, 0.55);
}
/* Salinas — dorado metálico */
[data-apt="salinas"]  .asb-cta,
body[data-apt="salinas"]  a.apt-page-reserve-btn,
[data-apt="salinas"]  .widget-cta,
body[data-apt="salinas"]  .widget-cta,
[data-apt="salinas"]  .ads-btn,
body[data-apt="salinas"]  .ads-btn,
[data-apt="salinas"]  .ag-nav-btn-primary,
body[data-apt="salinas"]  .ag-nav-btn-primary {
  background-image: linear-gradient(135deg,
    #9E7A2C 0%, #D4A84A 32%, #9E7A2C 55%, #7E6022 78%, #9E7A2C 100%) !important;
  background-color: #9E7A2C !important;
  color: #2A0F2E !important;
  --apt-glow: rgba(212, 168, 74, 0.55);
}
/* Sheen sweep — banda blanca 25% que cruza cada 8 s. Sin lavar el bg. */
[data-apt="mar"]      .asb-cta::after,
[data-apt="thalassa"] .asb-cta::after,
[data-apt="salinas"]  .asb-cta::after,
body[data-apt="mar"]      a.apt-page-reserve-btn::after,
body[data-apt="thalassa"] a.apt-page-reserve-btn::after,
body[data-apt="salinas"]  a.apt-page-reserve-btn::after,
[data-apt="mar"]      .widget-cta::after,
[data-apt="thalassa"] .widget-cta::after,
[data-apt="salinas"]  .widget-cta::after,
body[data-apt="mar"]      .widget-cta::after,
body[data-apt="thalassa"] .widget-cta::after,
body[data-apt="salinas"]  .widget-cta::after,
[data-apt="mar"]      .ads-btn::after,
[data-apt="thalassa"] .ads-btn::after,
[data-apt="salinas"]  .ads-btn::after,
body[data-apt="mar"]      .ads-btn::after,
body[data-apt="thalassa"] .ads-btn::after,
body[data-apt="salinas"]  .ads-btn::after,
[data-apt="mar"]      .ag-nav-btn-primary::after,
[data-apt="thalassa"] .ag-nav-btn-primary::after,
[data-apt="salinas"]  .ag-nav-btn-primary::after,
body[data-apt="mar"]      .ag-nav-btn-primary::after,
body[data-apt="thalassa"] .ag-nav-btn-primary::after,
body[data-apt="salinas"]  .ag-nav-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%);
  background-size: 240% 100%;
  background-position: -50% 0%;
  animation: aptCtaSheen 8s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
[data-apt="mar"]      .asb-cta > *,
[data-apt="thalassa"] .asb-cta > *,
[data-apt="salinas"]  .asb-cta > *,
body[data-apt="mar"]      a.apt-page-reserve-btn > *,
body[data-apt="thalassa"] a.apt-page-reserve-btn > *,
body[data-apt="salinas"]  a.apt-page-reserve-btn > *,
[data-apt="mar"]      .widget-cta > *,
[data-apt="thalassa"] .widget-cta > *,
[data-apt="salinas"]  .widget-cta > *,
body[data-apt="mar"]      .widget-cta > *,
body[data-apt="thalassa"] .widget-cta > *,
body[data-apt="salinas"]  .widget-cta > *,
[data-apt="mar"]      .ads-btn > *,
[data-apt="thalassa"] .ads-btn > *,
[data-apt="salinas"]  .ads-btn > *,
body[data-apt="mar"]      .ads-btn > *,
body[data-apt="thalassa"] .ads-btn > *,
body[data-apt="salinas"]  .ads-btn > *,
[data-apt="mar"]      .ag-nav-btn-primary > *,
[data-apt="thalassa"] .ag-nav-btn-primary > *,
[data-apt="salinas"]  .ag-nav-btn-primary > *,
body[data-apt="mar"]      .ag-nav-btn-primary > *,
body[data-apt="thalassa"] .ag-nav-btn-primary > *,
body[data-apt="salinas"]  .ag-nav-btn-primary > * { position: relative; z-index: 2; }

/* Hover — más glow */
[data-apt="mar"]      .asb-cta:hover,
[data-apt="thalassa"] .asb-cta:hover,
[data-apt="salinas"]  .asb-cta:hover,
body[data-apt="mar"]      a.apt-page-reserve-btn:hover,
body[data-apt="thalassa"] a.apt-page-reserve-btn:hover,
body[data-apt="salinas"]  a.apt-page-reserve-btn:hover,
[data-apt="mar"]      .widget-cta:hover,
[data-apt="thalassa"] .widget-cta:hover,
[data-apt="salinas"]  .widget-cta:hover,
body[data-apt="mar"]      .widget-cta:hover,
body[data-apt="thalassa"] .widget-cta:hover,
body[data-apt="salinas"]  .widget-cta:hover,
[data-apt="mar"]      .ads-btn:hover,
[data-apt="thalassa"] .ads-btn:hover,
[data-apt="salinas"]  .ads-btn:hover,
body[data-apt="mar"]      .ads-btn:hover,
body[data-apt="thalassa"] .ads-btn:hover,
body[data-apt="salinas"]  .ads-btn:hover,
[data-apt="mar"]      .ag-nav-btn-primary:hover,
[data-apt="thalassa"] .ag-nav-btn-primary:hover,
[data-apt="salinas"]  .ag-nav-btn-primary:hover,
body[data-apt="mar"]      .ag-nav-btn-primary:hover,
body[data-apt="thalassa"] .ag-nav-btn-primary:hover,
body[data-apt="salinas"]  .ag-nav-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 10px 32px var(--apt-glow, rgba(58, 170, 187, 0.65)) !important;
}

@keyframes aptCtaFlow {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}
@keyframes aptCtaSheen {
  0%   { background-position: -50% 0%; }
  55%  { background-position: 150% 0%; }
  100% { background-position: 150% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-apt="mar"]      .asb-cta,
  [data-apt="thalassa"] .asb-cta,
  [data-apt="salinas"]  .asb-cta,
  body[data-apt="mar"]      a.apt-page-reserve-btn,
  body[data-apt="thalassa"] a.apt-page-reserve-btn,
  body[data-apt="salinas"]  a.apt-page-reserve-btn,
  [data-apt="mar"]      .widget-cta,
  [data-apt="thalassa"] .widget-cta,
  [data-apt="salinas"]  .widget-cta,
  [data-apt="mar"]      .ads-btn,
  [data-apt="thalassa"] .ads-btn,
  [data-apt="salinas"]  .ads-btn,
  [data-apt="mar"]      .ag-nav-btn-primary,
  [data-apt="thalassa"] .ag-nav-btn-primary,
  [data-apt="salinas"]  .ag-nav-btn-primary { animation: none; }
  [data-apt="mar"]      .asb-cta::after,
  [data-apt="thalassa"] .asb-cta::after,
  [data-apt="salinas"]  .asb-cta::after,
  body[data-apt="mar"]      a.apt-page-reserve-btn::after,
  body[data-apt="thalassa"] a.apt-page-reserve-btn::after,
  body[data-apt="salinas"]  a.apt-page-reserve-btn::after,
  [data-apt="mar"]      .widget-cta::after,
  [data-apt="thalassa"] .widget-cta::after,
  [data-apt="salinas"]  .widget-cta::after,
  [data-apt="mar"]      .ads-btn::after,
  [data-apt="thalassa"] .ads-btn::after,
  [data-apt="salinas"]  .ads-btn::after,
  [data-apt="mar"]      .ag-nav-btn-primary::after,
  [data-apt="thalassa"] .ag-nav-btn-primary::after,
  [data-apt="salinas"]  .ag-nav-btn-primary::after { animation: none; }
}

/* Widget-mini plegados sobre apt — añadir sheen metálico encima del
   ghost actual (cult-ui Family Button feel pero más sutil). El bg
   ghost translúcido se mantiene; añadimos sólo la banda animada. */
[data-apt="mar"]      .widget-mini::after,
[data-apt="thalassa"] .widget-mini::after,
[data-apt="salinas"]  .widget-mini::after,
body[data-apt="mar"]      .widget-mini::after,
body[data-apt="thalassa"] .widget-mini::after,
body[data-apt="salinas"]  .widget-mini::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 65%);
  background-size: 240% 100%;
  background-position: -50% 0%;
  animation: aptCtaSheen 10s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
[data-apt="mar"]      .widget-mini,
[data-apt="thalassa"] .widget-mini,
[data-apt="salinas"]  .widget-mini,
body[data-apt="mar"]      .widget-mini,
body[data-apt="thalassa"] .widget-mini,
body[data-apt="salinas"]  .widget-mini {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-apt="mar"]      .widget-mini > *,
[data-apt="thalassa"] .widget-mini > *,
[data-apt="salinas"]  .widget-mini > *,
body[data-apt="mar"]      .widget-mini > *,
body[data-apt="thalassa"] .widget-mini > *,
body[data-apt="salinas"]  .widget-mini > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-apt="mar"]      .widget-mini::after,
  [data-apt="thalassa"] .widget-mini::after,
  [data-apt="salinas"]  .widget-mini::after { animation: none; }
}
.req-actions-forward,
.hs-rc-actions-forward {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.req-actions-forward .hs-rc-link,
.hs-rc-actions-forward .hs-rc-link {
  font-size: 12px;
  opacity: 0.7;
}

.req-btn-wa { background: var(--bug) !important; border-color: var(--bug) !important; }
.req-btn-wa:hover { background: var(--err-dk) !important; }
.req-btn-wa, .req-btn-mail {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.req-btn-mail {
  color: rgba(42,15,46,.65) !important;
  border-color: rgba(42,15,46,.25) !important;
  background: transparent !important;
}
.req-btn-mail:hover {
  background: rgba(42,15,46,.08) !important;
  color: rgba(42,15,46,.9) !important;
  border-color: rgba(42,15,46,.5) !important;
}

/* Reset link */
.req-reset {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px;
  letter-spacing: .08em; color: rgba(42,15,46,.35);
  padding: 0; transition: color .2s;
}
.req-reset:hover { color: rgba(42,15,46,.65); }

/* ================================================================
   PRICE ENGINE — Motor de precios
   ================================================================ */
.price-engine {
  background: linear-gradient(135deg, rgba(42,15,46,0.04) 0%, rgba(58,170,187,0.06) 100%);
  border: 1px solid rgba(42,15,46,0.1);
  border-radius: 10px 0 10px 0;
  padding: 24px;
  margin: 20px 0;
}
.price-engine-form {
  margin: 0 0 24px;
}
.price-main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.price-direct-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.price-label-sm {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ber);
  opacity: 0.6;
  font-family: var(--sans);
}
.price-direct-total {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  color: var(--ber-dk);
  line-height: 1;
}
.price-avg-night {
  font-size: 13px;
  color: var(--ber);
  opacity: 0.7;
}
.price-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.price-booking-ref {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 4px;
}
.price-ref-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ber);
  opacity: 0.5;
}
.price-ref-val {
  font-size: 18px;
  color: var(--ber);
  opacity: 0.45;
  text-decoration: line-through;
  font-family: var(--serif);
}
.price-savings-badge {
  background: var(--bug);
  color: var(--crema);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--sans);
  padding: 4px 10px;
  border-radius: 10px 0 10px 0;
  white-space: nowrap;
}
.price-breakdown {
  border-top: 1px solid rgba(42,15,46,0.1);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-soft);
  font-family: var(--sans);
}
.price-line-disc {
  color: #D42B80;
}
.price-line-total {
  font-weight: 600;
  color: var(--ber-dk);
  border-top: 1px solid rgba(42,15,46,0.12);
  padding-top: 8px;
  margin-top: 2px;
  font-size: 14px;
}
.price-note {
  font-size: 11px;
  color: var(--ber);
  opacity: 0.55;
  margin: 12px 0 0;
  line-height: 1.5;
  font-family: var(--sans);
}
/* Contact form inside RequestPanel */
.req-contact-form {
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.req-form-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ber);
  opacity: 0.6;
  font-family: var(--sans);
  margin-bottom: 4px;
}
.req-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .req-form-row { grid-template-columns: 1fr; }
}
.req-input, .req-textarea {
  width: 100%;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(42,15,46,0.18);
  border-radius: 6px 0 6px 0;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--sans);
  color: var(--ber-dk);
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.req-input:focus, .req-textarea:focus {
  border-color: var(--sol);
}
.req-input-full { width: 100%; }
.req-textarea {
  min-height: 80px;
  resize: vertical;
}
.req-pets-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ber);
  cursor: pointer;
  margin-left: 12px;
}
.req-pets-toggle input { accent-color: var(--sol); }

/* Responsive panel */
@media (max-width: 600px) {
  .req-panel { padding: 24px 20px 20px; }
  .req-dates { flex-direction: column; text-align: center; }
  .req-date-col, .req-date-col--r { text-align: center; }
  .req-guests { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* ============================================================
   HOME BOOKING MODAL (HomeBookingModal)
   ============================================================ */
.hbm-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(42,15,46,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: hbm-in .25s ease both;
}
@keyframes hbm-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hbm-card {
  background: var(--crema);
  border-radius: 10px 0 10px 0;
  box-shadow: 0 24px 80px rgba(42,15,46,.4);
  padding: 40px 40px 32px;
  width: 100%; max-width: 580px;
  position: relative;
  animation: hbm-up .28s cubic-bezier(.22,.68,0,1.2) both;
  max-height: 90vh; overflow-y: auto;
}
@keyframes hbm-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.hbm-close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: rgba(42,15,46,.4);
  line-height: 1; padding: 4px 6px;
  transition: color .15s;
}
.hbm-close:hover { color: var(--ber-dk); }
.hbm-head { margin-bottom: 28px; }
.hbm-apt-num {
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sol-text); margin-bottom: 4px;
}
.hbm-apt-name {
  font-family: var(--serif); font-size: clamp(22px, 3vw, 30px);
  font-weight: 300; color: var(--ber-dk); line-height: 1.1;
}
.hbm-apt-name strong { font-weight: 400; }
.hbm-sub {
  font-family: var(--sans); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(42,15,46,.45); margin: 8px 0 0;
}
/* Form */
.hbm-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.hbm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .hbm-row { grid-template-columns: 1fr; } }
.hbm-field { display: flex; flex-direction: column; gap: 5px; }
.hbm-field label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ber); opacity: .8;
}
.hbm-opt { font-weight: 300; opacity: .65; text-transform: none; letter-spacing: 0; }
.hbm-field input, .hbm-field textarea {
  font-family: var(--sans); font-size: 14px; font-weight: 300;
  color: var(--ink); background: var(--crema);
  border: 1px solid rgba(42,15,46,.22); border-radius: 10px 0 10px 0;
  padding: 10px 13px; outline: none; transition: border-color .2s;
  width: 100%; box-sizing: border-box;
}
.hbm-field input:focus, .hbm-field textarea:focus { border-color: var(--sol); }
.hbm-field textarea { min-height: 64px; resize: vertical; }
.hbm-hint {
  font-family: var(--sans); font-size: 12px;
  color: rgba(42,15,46,.5); margin: 0;
}
/* Buttons */
.hbm-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.hbm-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px; border-radius: 10px 0 10px 0;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-align: center;
  transition: filter .2s, opacity .2s;
  cursor: pointer;
}
.hbm-wa  { background: var(--bug); color: var(--crema); }
.hbm-wa:hover  { background: var(--err-dk); }
.hbm-mail { background: none; border: 1.5px solid rgba(42,15,46,.25); color: rgba(42,15,46,.7); }
.hbm-mail:hover { border-color: var(--ber); color: var(--ber-dk); }
.hbm-dis { opacity: .38; cursor: not-allowed; pointer-events: none; }
.hbm-note {
  font-family: var(--sans); font-size: 11px; color: rgba(42,15,46,.42);
  margin: 0; text-align: center; line-height: 1.5;
}
@media (max-width: 480px) {
  .hbm-card { padding: 32px 24px 28px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .topbar .contacts { font-size: 11px; gap: 10px; }
  .topbar .contacts .hide-mobile { display: none; }
  .header { display: flex; justify-content: space-between; align-items: center; gap: 0; }
  .header nav.desktop-nav { display: none; }
  .hamburger-btn { display: flex; }
  .mobile-menu { display: flex; }
  .compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-grid { min-width: 580px; }
  .compare-grid .head { padding-top: 30px; }
  .compare-grid > div { padding: 12px 16px; }
  .team-head { grid-template-columns: 1fr; gap: 30px; }
  .team-grid { grid-template-columns: 1fr; }
  .manifest-inner { grid-template-columns: 1fr; gap: 40px; }
  .gallery-mosaic { grid-template-columns: repeat(6, 1fr); }
  .g-1, .g-2, .g-3, .g-4, .g-5, .g-6 { grid-column: span 3; min-height: 220px; }
  .g-1 { grid-column: span 6; min-height: 280px; }
  .counters-grid { grid-template-columns: 1fr; }
  .counter { border-left: none; border-top: 1px solid rgba(240,232,213,0.12); }
  .counter:first-child { border-top: none; }
  .ratings-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .float-chat { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px; }
  /* La regla global con --apt-sticky-h ya cubre el caso "barra visible";
     aquí solo redefinimos el bottom de reposo para móvil. */
  body.apt-bar-shown .float-chat { bottom: calc(var(--apt-sticky-h, 60px) + 12px); }
  .float-chat .bubble-panel { width: calc(100vw - 40px); }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .topbar .contacts .email { display: none; }
  .cookies { left: 12px; right: 12px; max-width: none; }
  .hero-logo-wrap { width: clamp(80px, 22vw, 110px); height: clamp(80px, 22vw, 110px); }
  /* Language switcher: show short label only */
  .lang-full { display: none; }
  .lang-abbr { display: inline; }
  /* Phones: smaller */
  .tl-num { font-size: 11px; letter-spacing: 0; }
  .topbar .contacts { gap: 4px; }
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }

/* Parallax */
.parallax { will-change: transform; }
body.no-stars .hero .stars { display: none; }
body.no-parallax .g-tile .img { transform: none !important; }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks-panel {
  position: fixed;
  top: 90px; right: 20px;
  width: 280px;
  background: var(--ber-dk);
  color: var(--arena);
  border-radius: 10px 0 10px 0;
  padding: 20px 22px;
  z-index: 300;
  box-shadow: 0 30px 80px rgba(42,15,46,0.42);
  border: 1px solid rgba(240,232,213,0.15);
  font-family: var(--sans);
  font-size: 13px;
}
.tweaks-head {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(240,232,213,0.12);
  margin-bottom: 16px;
  text-align: center;
}
.tweaks-head .wordmark { color: var(--sol-lt); letter-spacing: 0.44em; }
.tweaks-row {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.tweaks-row label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.7; font-weight: 400;
}
.seg-control, .tweaks-jumps {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: rgba(240,232,213,0.06);
  border-radius: 10px 0 10px 0;
  padding: 3px;
}
.tweaks-jumps {
  background: transparent; padding: 0; gap: 6px;
}
.seg-control button {
  flex: 1;
  padding: 7px 10px;
  border-radius: 10px 0 10px 0;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--arena); opacity: 0.65;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.seg-control button.active {
  background: var(--sol); color: var(--ber-dk); opacity: 1;
}
.tweaks-jumps button {
  padding: 6px 12px;
  border-radius: 10px 0 10px 0;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--arena);
  background: rgba(240,232,213,0.08);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.tweaks-jumps button:hover { background: var(--sol); color: var(--ber-dk); }

/* Header auto-adjust based on scrolled/mode — colors */
.header.night nav a { color: var(--arena); }
.header.day nav a { color: var(--ber-dk); }
.header .brand-lockup { color: inherit; }
.header.night .brand-lockup { color: var(--arena); }
.header.day .brand-lockup { color: var(--ber-dk); }

/* Prevent horizontal scrollbar flash from gallery */
.gallery-mosaic { box-sizing: border-box; }

/* cursor: pointer on anchor-styled elements */
.apt-card .apt-cta { cursor: pointer; }

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

/* Fix: compare head cell alignment on mobile */
@media (max-width: 900px) {
  .compare-grid .head {
    padding-top: 24px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(61,26,53,0.2);
  }
}

/* ================================================================
   UI/UX PRO MAX — Liquid Glass · Aurora Mesh · Luxury Serif
   Estilo: Premium, cinemático, espectacular
   ================================================================ */

/* ---- Variables del sistema Liquid Glass ---- */
:root {
  --serif:       'Playfair Display', Georgia, serif;
  --sans:        'Inter', system-ui, sans-serif;
  --ease-liquid: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-liquid:  480ms;
}

/* ---- Gradient text para itálicas del hero ---- */
.hero-title .it {
  /* Shimmer cult-ui — el italic mantiene sol-lt como base pero un
     brillo crema más intenso lo cruza cada 6 s. Contraste base
     #6FC4D1 sobre eggplant ~6.4 (AA). El brillo crema #F0E8D5 da
     ~10.5 (AAA) — nunca baja. */
  background: linear-gradient(
    100deg,
    #6FC4D1 0%,
    #6FC4D1 40%,
    #F0E8D5 50%,
    #6FC4D1 60%,
    #6FC4D1 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroItShimmer 7s ease-in-out infinite;
}
@keyframes heroItShimmer {
  0%   { background-position: 100% center; }
  100% { background-position: 0% center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title .it {
    background: none;
    -webkit-text-fill-color: #6FC4D1;
    animation: none;
  }
}
/* ---- HERO: banda Aurora animada (sobre el wash, bajo el contenido) ---- */
.hero::after {
  content: '';
  position: absolute;
  width: 160%; height: 55%;
  top: 0; left: -30%;
  background: linear-gradient(
    90deg,
    transparent           0%,
    rgba(58,170,187,.14)  20%,
    rgba(111,196,209,.28) 40%,
    rgba(58,170,187,.10)  58%,
    transparent           75%
  );
  filter: blur(48px);
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: auroraMove 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes auroraMove {
  0%   { transform: translateX(-12%) scaleY(.9) rotate(-2deg); opacity: .6; }
  50%  { transform: translateX(18%)  scaleY(1.3) rotate(2deg);  opacity: 1; }
  100% { transform: translateX(-12%) scaleY(.9) rotate(-2deg); opacity: .6; }
}

/* ---- HEADER: shimmer line ---- */
.header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent               0%,
    rgba(111,196,209,.65)    25%,
    rgba(240,232,213,.40)    50%,
    rgba(111,196,209,.65)    75%,
    transparent              100%
  );
  background-size: 300% 100%;
  animation: shimmerLine 7s linear infinite;
  transition: background .5s ease;
}
.header.day::after {
  background: linear-gradient(
    90deg,
    transparent              0%,
    rgba(220,140,60,.5)     25%,
    rgba(255,200,100,.45)   50%,
    rgba(220,140,60,.5)     75%,
    transparent             100%
  );
  background-size: 300% 100%;
}
@keyframes shimmerLine {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ---- APARTAMENTOS: Liquid Glass hover + glow por color ---- */
.apt-card.vm { --apt-glow: rgba(107,122,58,.45); }
.apt-card.vt { --apt-glow: rgba(0,195,220,.5); }
.apt-card.vt .apt-photo { filter: brightness(1.07) saturate(1.22) contrast(1.04); }
.apt-card.vs { --apt-glow: rgba(212,168,74,.45); }

@media (hover: hover) {
  .apt-card:hover {
    transform: translateY(-14px) scale(1.025) translateZ(0);
    box-shadow:
      0 64px 128px rgba(42,15,46,.55),
      0 0   80px var(--apt-glow, rgba(58,170,187,.3)),
      inset 0 1px 0 rgba(255,255,255,.14);
    transition:
      transform   var(--dur-liquid) var(--ease-liquid),
      box-shadow  var(--dur-liquid) var(--ease-liquid);
  }
}

/* Glass sheen sobre las tarjetas */
.apt-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.04) 40%,
    transparent           60%
  );
  opacity: 0;
  transition: opacity var(--dur-liquid) var(--ease-liquid);
  z-index: 5;
  pointer-events: none;
}
@media (hover: hover) {
  .apt-card:hover::after { opacity: 1; }
}

/* Ken Burns en la foto de cada apartamento */
.apt-card .apt-photo { transition: transform 9s ease; }
@media (hover: hover) {
  .apt-card:hover .apt-photo { transform: scale(1.09); }
}

/* ---- GALERÍA: overlay dramático al hover ---- */
.g-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(42,15,46,.85) 0%,
    rgba(42,15,46,.30) 38%,
    transparent        65%
  );
  opacity: 0;
  transition: opacity .42s ease;
  z-index: 2;
  pointer-events: none;
}
@media (hover: hover) {
  .g-tile:hover::before { opacity: 1; }
  .g-tile:hover .img {
    transform: scale(1.12) !important;
    transition: transform .65s cubic-bezier(.23,1,.32,1) !important;
  }
}

/* Caption reveal desde abajo */
.g-tile .caption {
  z-index: 3;
  mix-blend-mode: normal;
  color: var(--arena);
  bottom: 22px; left: 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
}
@media (hover: hover) {
  .g-tile:hover .caption { opacity: 1; transform: translateY(0); }
}

/* ---- COUNTERS: números con gradiente luminoso ---- */
.counter .num {
  background: linear-gradient(
    135deg,
    var(--sol-lt) 0%,
    var(--arena)  55%,
    var(--sol-lt) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(111,196,209,.38));
}
.counter .plus,
.counter .unit {
  -webkit-text-fill-color: var(--arena);
  filter: none;
  opacity: .65;
}

/* ---- BRIDGE: sol más dramático ---- */
.bridge .celestial {
  box-shadow:
    0 0  70px rgba(245,201,122,.60),
    0 0 150px rgba(240,232,213,.28),
    0 0 260px rgba(184,136,58,.20);
  animation: sunPulse 5s ease-in-out infinite;
}
@keyframes sunPulse {
  0%,100% {
    box-shadow:
      0 0  70px rgba(245,201,122,.60),
      0 0 150px rgba(240,232,213,.28),
      0 0 260px rgba(184,136,58,.20);
  }
  50% {
    box-shadow:
      0 0  90px rgba(245,201,122,.80),
      0 0 200px rgba(240,232,213,.40),
      0 0 340px rgba(184,136,58,.28);
  }
}

/* ---- MANIFEST: números romanos en gradiente + hover slide ---- */
.manifest .p-num {
  background: linear-gradient(135deg, var(--sol-lt), var(--arena));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (hover: hover) {
  .manifest .principle { transition: transform var(--dur-liquid) var(--ease-liquid); }
  .manifest .principle:hover { transform: translateX(10px); }
}

/* ---- RATINGS: hover más dramático ---- */
.rating-card {
  transition:
    transform  var(--dur-liquid) var(--ease-liquid),
    box-shadow var(--dur-liquid) var(--ease-liquid);
}
@media (hover: hover) {
  .rating-card:hover {
    transform: translateY(-8px) translateZ(0);
    box-shadow: 0 30px 64px rgba(61,26,53,.16);
  }
}
.rating-card .score {
  filter: drop-shadow(0 0 18px rgba(58,170,187,.18));
}

/* ---- CONTACT CTA: fondo aurora animado ---- */
.contact-cta {
  /* background-image (no shorthand) para NO resetear el background-color
     fallback definido en la regla anterior. */
  background-image: linear-gradient(
    -45deg,
    var(--ber-void), #2A0F2E, #2A0F2E,
    #2A0F2E, #2A0F2E, var(--ber-void)
  );
  background-size: 500% 500%;
  animation: ctaAurora 15s ease infinite;
}
@keyframes ctaAurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.contact-cta::before {
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(58,170,187,.14), transparent 70%),
    radial-gradient(ellipse 30% 25% at 15% 75%, rgba(111,196,209,.07), transparent 60%);
}

/* ---- FLOATING CHAT: glass premium ---- */
.float-chat .bubble-panel {
  backdrop-filter: blur(28px) saturate(1.9);
  -webkit-backdrop-filter: blur(28px) saturate(1.9);
  box-shadow:
    0 36px 90px rgba(42,15,46,.45),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* ---- BOTONES: sheen + transición suave ---- */
.btn {
  position: relative;
  overflow: hidden;
  transition: background var(--dur-liquid) var(--ease-liquid), color var(--dur-liquid) var(--ease-liquid), border-color var(--dur-liquid) var(--ease-liquid), box-shadow var(--dur-liquid) var(--ease-liquid);
}
/* Shine sweep cult-ui — banda blanca al 42% que cruza el botón en
   hover (650 ms, sólo izquierda → derecha, no vuelve). Narrow + skew
   para que no lave el bg. Inhabilitado en buttons dark-bulletproof
   por su propio override más abajo. */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent       30%,
    rgba(255,255,255, 0.42) 50%,
    transparent       70%
  );
  transform: skewX(-22deg);
  transition: left .65s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
  border-radius: inherit;
}
.btn:hover::before { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
  .btn:hover::before { left: -75%; }
}

/* ---- SCROLLBAR refinado teal ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--ber-dk); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sol-lt), var(--sol-h));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sol-lt); }

/* ---- FOCUS RING premium ---- */
:focus-visible {
  outline: 2px solid var(--sol-lt);
  outline-offset: 3px;
}

/* ================================================================
   PÁGINAS INTERIORES — estilos comunes y por sección
   ================================================================ */

/* ---- Page Hero (todas las páginas interiores) ---- */
.page-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--topbar-h, 36px) + 120px) var(--page-pad) 80px;
  background-color: var(--ber-dk);
  background-image: linear-gradient(125deg,
    #2A0F2E 0%, #2A0F2E 8%, #2A0F2E 16%, #3D1A35 24%,
    #2A0F2E 32%, var(--ber-cosmic) 40%, #2A0F2E 48%, #2A0F2E 56%,
    #2A0F2E 64%, #2A0F2E 72%, #3D1A35 80%, #2A0F2E 88%,
    #2A0F2E 100%
  );
  background-size: 400% 400%;
  animation: sky-night 30s ease infinite;
  overflow: hidden;
}
.page-hero .stars {
  position: absolute; inset: 0;
  background-image:
    /* tiny very faint */
    radial-gradient(0.8px 0.8px at  3%  7%, rgba(240,232,213,.22) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at  9% 22%, rgba(240,232,213,.20) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 17% 47%, rgba(240,232,213,.25) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 24%  8%, rgba(240,232,213,.18) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 31% 63%, rgba(240,232,213,.22) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 38% 82%, rgba(240,232,213,.20) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at  6% 34%, rgba(240,232,213,.25) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 13% 56%, rgba(240,232,213,.18) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 20% 78%, rgba(240,232,213,.22) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 28% 18%, rgba(240,232,213,.20) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 35% 41%, rgba(240,232,213,.25) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 42% 69%, rgba(240,232,213,.18) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 49% 25%, rgba(240,232,213,.22) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 57% 88%, rgba(240,232,213,.20) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 63% 12%, rgba(240,232,213,.25) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 70% 52%, rgba(240,232,213,.18) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 78% 34%, rgba(240,232,213,.22) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 84% 71%, rgba(240,232,213,.20) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 91% 18%, rgba(240,232,213,.25) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 96% 83%, rgba(240,232,213,.18) 0%, transparent 100%),
    /* small dim */
    radial-gradient(1px 1px at  5% 89%, rgba(240,232,213,.38) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 39%, rgba(240,232,213,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 73%, rgba(240,232,213,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 54%, rgba(240,232,213,.32) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 11%, rgba(240,232,213,.38) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 78%, rgba(240,232,213,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 46%, rgba(240,232,213,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 23%, rgba(240,232,213,.32) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 64%, rgba(240,232,213,.38) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 87%, rgba(240,232,213,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 52%, rgba(240,232,213,.38) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 88%, rgba(240,232,213,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 32%, rgba(240,232,213,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 73%, rgba(240,232,213,.32) 0%, transparent 100%),
    radial-gradient(1px 1px at 36%  6%, rgba(240,232,213,.38) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 58%, rgba(240,232,213,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 91%, rgba(240,232,213,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 44%, rgba(240,232,213,.32) 0%, transparent 100%),
    /* small bright */
    radial-gradient(1px 1px at  8% 14%, rgba(240,232,213,.58) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 38%, rgba(240,232,213,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 66%, rgba(240,232,213,.62) 0%, transparent 100%),
    radial-gradient(1px 1px at 46% 22%, rgba(240,232,213,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 55%, rgba(240,232,213,.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 80%, rgba(240,232,213,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 28%, rgba(240,232,213,.62) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 62%, rgba(240,232,213,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 77%, rgba(240,232,213,.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 39% 16%, rgba(240,232,213,.55) 0%, transparent 100%),
    /* medium */
    radial-gradient(1.5px 1.5px at  7% 25%, rgba(240,232,213,.50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 72%, rgba(240,232,213,.48) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 36% 43%, rgba(240,232,213,.52) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 51% 89%, rgba(240,232,213,.48) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 64% 17%, rgba(240,232,213,.50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 77% 61%, rgba(240,232,213,.48) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 38%, rgba(240,232,213,.52) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 91%, rgba(240,232,213,.48) 0%, transparent 100%),
    /* large bright */
    radial-gradient(2.5px 2.5px at 11% 19%, rgba(240,232,213,.78) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 55% 35%, rgba(240,232,213,.75) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 89% 73%, rgba(240,232,213,.78) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 23% 81%, rgba(240,232,213,.75) 0%, transparent 100%),
    /* teal accent */
    radial-gradient(1.2px 1.2px at 16% 31%, rgba(111,196,209,.62) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 44% 67%, rgba(111,196,209,.58) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 72% 14%, rgba(111,196,209,.62) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 91% 48%, rgba(111,196,209,.58) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 38%  5%, rgba(111,196,209,.62) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 62% 89%, rgba(111,196,209,.58) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: stars-drift 80s ease-in-out infinite, starsWink 28s linear infinite;
}
.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}
.page-hero-content .eyebrow {
  color: var(--sol-lt);
  margin-bottom: 20px;
}
.page-hero-content h1 {
  color: var(--arena);
  line-height: 1.05;
  margin-bottom: 24px;
}
.page-hero-content h1 em {
  font-style: italic;
  color: var(--sol-lt);
}
.page-hero-sub {
  color: var(--arena);
  opacity: 0.72;
  font-size: clamp(16px, 1.8vw, 20px);
  max-width: 600px;
  margin: 0;
}

/* ---- btn-ghost (dark background variant) ---- */
.btn-ghost {
  border: 1px solid rgba(240,232,213,.35);
  color: var(--arena);
  padding: 14px 28px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur-liquid) var(--ease-liquid), color var(--dur-liquid) var(--ease-liquid), border-color var(--dur-liquid) var(--ease-liquid);
  display: inline-block;
}
@media (hover: hover) {
  .btn-ghost:hover {
    border-color: rgba(240,232,213,.7);
    background: rgba(240,232,213,.06);
  }
}

/* ---- section-cream (inner pages) ---- */
.section-cream {
  /* Fallback sólido: si el gradient falla por cualquier razón
     (color tokens, parser, etc.), esta queda y los textos dark se ven. */
  background-color: var(--crema);
  background-image: linear-gradient(90deg,
    var(--crema-alba)  0%,
    var(--crema-dawn)  8%,
    var(--crema-noon) 20%,
    var(--crema-dusk) 33%,
    var(--crema-warm) 50%,
    var(--crema-dusk) 67%,
    var(--crema-noon) 80%,
    var(--crema-dawn) 92%,
    var(--crema-alba) 100%
  );
  background-size: 200% 100%;
  animation: sky-day 80s linear infinite;
  animation-delay: -20s;
  color: var(--ber-dk);
}

/* ================================================================
   PÁGINA DE APARTAMENTO
   ================================================================ */

/* --- Hero de apartamento --- */
.apt-page-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--page-pad) 80px;
  overflow: hidden;
}
.apt-page-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
/* Ken Burns — movimiento contínuo y visible diferente por apartamento.
   Cada Hestía con su propio recorrido de zoom + pan + leve rotación
   para que el huésped perciba el movimiento sin que sea agresivo. */
@keyframes kb-vm {
  0%   { transform: scale(1.04) translate( 1.5%,  1.0%) rotate(0deg); }
  50%  { transform: scale(1.14) translate(-1.0%, -0.7%) rotate(0.4deg); }
  100% { transform: scale(1.08) translate( 0.6%, -1.2%) rotate(-0.2deg); }
}
@keyframes kb-vt {
  0%   { transform: scale(1.05) translate(-1.4%,  1.2%) rotate(0deg); }
  50%  { transform: scale(1.15) translate( 1.2%, -0.8%) rotate(-0.3deg); }
  100% { transform: scale(1.09) translate(-0.6%, -1.4%) rotate(0.4deg); }
}
@keyframes kb-vs {
  0%   { transform: scale(1.04) translate( 0.8%,  1.4%) rotate(0deg); }
  50%  { transform: scale(1.13) translate(-1.4%, -0.6%) rotate(0.3deg); }
  100% { transform: scale(1.08) translate( 1.2%, -1.0%) rotate(-0.4deg); }
}
/* !important sobre duration/iteration para sobrescribir la regla
   universal de prefers-reduced-motion (línea ~3300) que las pone a
   0.01ms / count 1 — iOS Safari activa esa preferencia por defecto. */
.apt-page-hero[data-apt="vm"] .apt-page-hero-img {
  animation: kb-vm 18s ease-in-out infinite alternate !important;
  animation-iteration-count: infinite !important;
  animation-duration: 18s !important;
  transform-origin: 55% 58%;
  will-change: transform, filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.apt-page-hero[data-apt="vt"] .apt-page-hero-img {
  animation: kb-vt 17s ease-in-out infinite alternate !important;
  animation-iteration-count: infinite !important;
  animation-duration: 17s !important;
  transform-origin: 44% 45%;
  will-change: transform, filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.apt-page-hero[data-apt="vs"] .apt-page-hero-img {
  animation: kb-vs 19s ease-in-out infinite alternate !important;
  animation-iteration-count: infinite !important;
  animation-duration: 19s !important;
  transform-origin: 50% 52%;
  will-change: transform, filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
/* Filtro de saturación/contraste por Hestía — los mismos retoques que
   se aplican en las cards de la home para que el hero "respire" igual. */
.apt-page-hero[data-apt="vt"] .apt-page-hero-img {
  filter: brightness(1.06) saturate(1.20) contrast(1.04);
}
.apt-page-hero[data-apt="vm"] .apt-page-hero-img {
  filter: brightness(1.04) saturate(1.10) contrast(1.02);
}
.apt-page-hero[data-apt="vs"] .apt-page-hero-img {
  filter: brightness(1.05) saturate(1.16) contrast(1.03);
}
/* No respetamos prefers-reduced-motion para el hero del Hestía: el
   movimiento es muy gentil (zoom < 15 %, pan < 1.5 %) y forma parte
   de la identidad visual. iOS lo activa por defecto en muchos iPhones,
   por lo que la regla anterior dejaba el hero estático en móvil. */
/* prefers-reduced-motion: NO desactivamos la animación del hero de
   Hestía a propósito (ver nota arriba). Si algún huésped lo encuentra
   molesto, podemos exponer un toggle en el futuro. */
.apt-page-hero-wash {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(42,15,46,.88) 0%,
    rgba(42,15,46,.50) 38%,
    rgba(42,15,46,.18) 70%,
    transparent 100%
  );
  z-index: 1;
}
.apt-page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding-top: calc(var(--topbar-h, 36px) + 80px);
}
.apt-page-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--apt-accent, var(--sol-lt));
  margin-bottom: 16px;
}
.apt-page-eyebrow .sep { margin: 0 8px; opacity: 0.75; }
.apt-page-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.95;
  color: var(--arena);
  margin: 0 0 16px;
}
.apt-page-name .small-label {
  display: block;
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: 0.44em;
  margin-bottom: 4px;
  opacity: 0.6;
}
.apt-page-concept {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--arena);
  opacity: 0.82;
  margin: 0 0 40px;
}
.apt-page-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
/* Botón "Reservar" del hero del apt — bulletproof, color del apartamento
   con hex literales !important para que NUNCA quede oscurecido por el
   washer del hero. Texto arena en Mar/Thalassa (bg oscuro), ber-dk en
   Salinas (bg dorado claro). */
a.apt-page-reserve-btn {
  background-color: #3AAABB !important;        /* fallback sol */
  background-image: none !important;
  color: #2A0F2E !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 22px rgba(58,170,187,.45);
}
a.apt-page-reserve-btn::before { display: none !important; }
.apt-page-hero[data-apt="vm"] a.apt-page-reserve-btn,
body[data-apt="mar"] a.apt-page-reserve-btn {
  background-color: #6B7A3A !important;        /* olivo Mar */
  color: #F0E8D5 !important;
  box-shadow: 0 6px 22px rgba(107,122,58,.55) !important;
}
.apt-page-hero[data-apt="vm"] a.apt-page-reserve-btn:hover,
body[data-apt="mar"] a.apt-page-reserve-btn:hover {
  background-color: #8B9A52 !important;
  color: #2A0F2E !important;
  box-shadow: 0 8px 28px rgba(107,122,58,.70) !important;
}
.apt-page-hero[data-apt="vt"] a.apt-page-reserve-btn,
body[data-apt="thalassa"] a.apt-page-reserve-btn {
  background-color: #B86A3C !important;        /* siena Thalassa */
  color: #F0E8D5 !important;
  box-shadow: 0 6px 22px rgba(184,106,60,.55) !important;
}
.apt-page-hero[data-apt="vt"] a.apt-page-reserve-btn:hover,
body[data-apt="thalassa"] a.apt-page-reserve-btn:hover {
  background-color: #D4906A !important;
  color: #2A0F2E !important;
  box-shadow: 0 8px 28px rgba(184,106,60,.70) !important;
}
.apt-page-hero[data-apt="vs"] a.apt-page-reserve-btn,
body[data-apt="salinas"] a.apt-page-reserve-btn {
  background-color: #D4A84A !important;        /* dorado Salinas */
  color: #2A0F2E !important;
  box-shadow: 0 6px 22px rgba(212,168,74,.55) !important;
}
.apt-page-hero[data-apt="vs"] a.apt-page-reserve-btn:hover,
body[data-apt="salinas"] a.apt-page-reserve-btn:hover {
  background-color: #E8C170 !important;
  color: #2A0F2E !important;
  box-shadow: 0 8px 28px rgba(212,168,74,.70) !important;
}
.apt-page-price {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--arena);
  margin: 0 0 24px;
  line-height: 1.2;
}
.apt-page-price .app-per {
  font-size: 0.52em;
  opacity: 0.65;
  font-style: italic;
}
.apt-page-cancel {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--arena);
  opacity: 0.62;
}

/* --- Gallery carousel lightbox --- */
.gc-stage { cursor: zoom-in; }
.gc-zoom-hint {
  position: absolute;
  top: 12px; right: 16px;
  font-size: 18px;
  color: rgba(240,232,213,.5);
  pointer-events: none;
  z-index: 2;
}
.gc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.93);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gc-lb-pic {
  /* picture wrapper: deja que el img haga su size; sin layout extra */
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
}
.gc-lb-img {
  max-width: min(90vw, 1200px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px 0 12px 0;
  user-select: none;
  display: block;
}
.gc-lb-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  color: rgba(240,232,213,.8);
  font-size: 28px;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  transition: opacity .2s;
  z-index: 2;
}
.gc-lb-close:hover { opacity: .55; }
.gc-lb-prev, .gc-lb-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(240,232,213,.1);
  border: none;
  color: var(--arena);
  font-size: 30px;
  padding: 20px 14px;
  cursor: pointer;
  border-radius: 10px 0 10px 0;
  transition: background .2s;
  line-height: 1;
  z-index: 2;
}
.gc-lb-prev:hover, .gc-lb-next:hover { background: rgba(240,232,213,.2); }
.gc-lb-prev { left: 12px; }
.gc-lb-next { right: 12px; }
.gc-lb-caption {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  font-family: var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,232,213,.55);
  pointer-events: none;
}
.gc-lb-counter {
  position: absolute;
  top: 20px; left: 20px;
  font-size: 11px;
  font-family: var(--sans);
  letter-spacing: .12em;
  color: rgba(240,232,213,.45);
}

/* --- Apartment sticky booking bar --- */
/* will-change:transform omitido — creaba nuevo containing block en algunos
   navegadores (Safari/WebKit) rompiendo position:fixed. */
.apt-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  z-index: 200;
  background: var(--ber);
  border-top: 1px solid rgba(240,232,213,.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--page-pad);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.apt-sticky-bar.asb-visible { transform: translateY(0); }

/* Chip "Ver ventajas" en sticky bar — corporativo, glass tenue,
   tipográficamente subordinado al RESERVAR pero accesible siempre. */
.asb-perks {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px 0 8px 0;
  background: rgba(240, 232, 213, 0.08);
  color: #F0E8D5;
  border: 1px solid rgba(240, 232, 213, 0.30);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.asb-perks:hover {
  background: rgba(240, 232, 213, 0.16);
  border-color: rgba(240, 232, 213, 0.55);
}
.asb-perks:active { transform: scale(.97); }
.asb-perks-icon { color: #6FC4D1; font-size: 12px; opacity: .9; }
@media (max-width: 540px) {
  /* En pantallas estrechas mantenemos el chip pero ocultamos el texto
     largo "✓ ¿mejor precio?…" del .asb-match para no saturar. */
  .apt-sticky-bar .asb-match { display: none; }
  .asb-perks { padding: 7px 10px; font-size: 12px; }
}
@media (min-width: 900px) {
  /* En desktop el widget-card "Reserva directa" del WidgetStack ya
     ofrece el botón a la derecha — el chip de la sticky es redundante. */
  .asb-perks { display: none; }
}

/* (regla movida arriba al bloque .cookies) */
.asb-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.asb-name {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--arena);
  opacity: .6;
  white-space: nowrap;
}
.asb-price {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 20px;
  color: var(--arena);
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asb-match {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sol-lt);
  opacity: 0.95;
  white-space: normal;
  line-height: 1.3;
  max-width: 100%;
  display: block;
}
.asb-cta { flex-shrink: 0; white-space: nowrap; }

/* Botón ✕ para cerrar la sticky bar — esquina superior derecha. */
.asb-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  color: var(--arena);
  border: 1px solid rgba(240, 232, 213, 0.3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.65;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.asb-close:hover {
  opacity: 1;
  background: rgba(240, 232, 213, 0.1);
}
.apt-sticky-bar { padding-right: 40px; }
@media (max-width: 480px) {
  .asb-price { font-size: 17px; }
  .asb-match { font-size: 11px; }
  .apt-sticky-bar { padding: 10px 40px 10px 16px; }
}

/* --- Descripción + Features --- */
.apt-page-desc {
  padding: 80px var(--page-pad);
  background: var(--crema);
}
.apt-desc-inner {
  max-width: 780px;
  margin: 0 auto;
}
.apt-desc-lead {
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.65;
  font-weight: 300;
  color: var(--ber);
  margin: 0 0 22px;
}
.apt-desc-body {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(42,15,46,.75);
  margin: 0;
}

/* ================================================================
   APT VIDEO + DESCRIPCION — sección combinada
   ================================================================ */
.apt-video-desc {
  background: var(--ber-dk);
  color: var(--arena);
  padding: 72px var(--page-pad);
}
.avd-inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
.avd-eyebrow {
  color: var(--apt-accent);
  display: block;
  margin-bottom: 20px;
}
.avd-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px 0 12px 0;
  overflow: hidden;
  background: #000;
}
.avd-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.avd-concept {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.3;
  color: var(--arena);
  margin: 0 0 24px;
}
.avd-desc {
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  font-weight: 300;
  color: var(--arena);
  opacity: 0.85;
  margin: 0 0 16px;
}
.avd-desc2 {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(240,232,213,.6);
  margin: 0;
}
.avd-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}
@media (max-width: 820px) {
  .avd-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .apt-video-desc {
    padding: 36px var(--page-pad) 40px;
  }
  /* Hide verbose descriptions on mobile — they duplicate the hero content */
  .avd-desc, .avd-desc2 { display: none; }
  .avd-concept { font-size: 18px; margin-bottom: 0; }
  .avd-cta-row { margin-top: 20px; }
}

/* ================================================================
   EQUIPAMIENTO — sección de iconos y características
   ================================================================ */
.apt-equip {
  padding: 72px var(--page-pad) 80px;
  background: var(--crema);
  color: var(--ink);
}

/* Narrativa "Tu día en Hestía X" — bloque de tres cards horizontales:
   mañana / lo que tienes / trabajo detrás. Pre-cede al grid de iconos
   y comunica el carácter de hospitalidad (no solo amenities). */
.apt-day {
  margin-bottom: 56px;
}
.apt-day-eyebrow {
  margin-bottom: 24px;
  color: var(--apt-accent);
}
.apt-day-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .apt-day-grid { grid-template-columns: 1fr; } }
.apt-day-card {
  position: relative;
  padding: 22px 22px 24px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid rgba(61,26,53,.08);
  border-top: 3px solid var(--apt-accent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apt-day-card-tag {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.apt-day-card-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--apt-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.apt-day-card-tlabel {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.apt-day-card-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
/* La tercera card (trabajo detrás) lleva acento sutil para que
   se entienda que es la cara invisible de la hospitalidad. */
.apt-day-card-behind {
  background: rgba(232, 194, 107, 0.07);
}
.apt-equip-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(42,15,46,.42);
  margin-bottom: 28px;
}
.apt-equip-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding: 20px 0;
  border-top: 1px solid rgba(42,15,46,.12);
  border-bottom: 1px solid rgba(42,15,46,.12);
  margin-bottom: 48px;
}
.apt-equip-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.aes-val {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}
.aes-unit {
  font-family: var(--serif);
  font-size: 14px;
  color: rgba(42,15,46,.48);
}
.aes-lbl {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(42,15,46,.4);
  margin-top: 2px;
}
.apt-equip-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 8px;
}
.apt-equip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
}
.aei-icon { font-size: 17px; flex-shrink: 0; line-height: 1; }
.aei-label {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(42,15,46,.65);
  line-height: 1.35;
}
.apt-equip-categories {
  display: flex; flex-direction: column; gap: 40px;
  margin-top: 48px;
}
.apt-equip-cat { }
.aec-label {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(42,15,46,0.12);
}
.apt-equip-icons { margin-top: 0; }
@media (max-width: 860px) {
  .apt-equip-icons { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 480px) {
  .apt-equip-icons { grid-template-columns: 1fr 1fr; }
}

/* --- Plano del apartamento --- */
.apt-floorplan {
  padding: 80px var(--page-pad);
}
.apt-fp-eyebrow {
  margin-bottom: 12px;
  color: var(--ber);
}
.apt-fp-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
  color: var(--ber);
  margin-bottom: 20px;
}
.apt-fp-title em {
  font-style: italic;
  font-weight: 400;
}
.apt-fp-desc {
  max-width: 640px;
  color: var(--ber);
  opacity: 0.70;
  margin-bottom: 48px;
  line-height: 1.65;
}
.apt-fp-img-wrap {
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid rgba(61,26,53,.12);
  border-radius: 20px 0 20px 0;
  overflow: hidden;
  background: #fff;
}
.apt-fp-img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 600px) {
  .apt-floorplan { padding: 48px var(--page-pad); }
  .apt-fp-img-wrap { border-radius: 12px 0 12px 0; }
}

/* --- Galería de apartamento --- */
.apt-page-gallery {
  padding: 80px var(--page-pad);
  background: var(--ink);
}

/* ---- Visita virtual (Vimeo embed) ---- */
.apt-video-tour {
  background: var(--ber-dk);
  padding: 72px var(--page-pad);
}
.apt-vt-eyebrow {
  color: var(--apt-accent);
  display: block;
  margin-bottom: 16px;
}
.apt-vt-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 3.5vw, 38px);
  color: var(--arena);
  margin: 0 0 36px;
}
.apt-vt-wrap {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  border-radius: 12px 0 12px 0;
  overflow: hidden;
  background: #000;
}
.apt-vt-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 600px) {
  .apt-video-tour { padding: 48px var(--page-pad); }
  .apt-vt-play svg { width: 56px; height: 56px; padding: 14px; }
}

.apt-gallery-eyebrow {
  color: var(--arena);
  margin-bottom: 40px;
}
.apt-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto 24px;
}
@media (max-width: 680px) {
  .apt-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
.apt-photo-placeholder {
  position: relative;
  background: color-mix(in srgb, var(--ph-accent, var(--sol)) 15%, var(--ink-soft));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px 0 10px 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
}
.ph-ratio { display: none; }
.ph-inner {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(240,232,213,.45);
}
.ph-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  opacity: 0.25;
}
.ph-caption {
  position: absolute;
  bottom: 12px; left: 14px; right: 14px;
  font-size: 11px;
  font-family: var(--sans);
  letter-spacing: 0.08em;
  color: rgba(240,232,213,.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-note {
  text-align: center;
  font-size: 13px;
  color: rgba(240,232,213,.35);
  font-family: var(--sans);
  margin: 0;
}
/* --- Gallery carousel --- */
.gc-wrap { width: 100%; user-select: none; }
@media (min-width: 600px) {
  .gc-wrap {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px) {
  .gc-wrap {
    max-width: 680px;
  }
}
.gc-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px 0 24px 0;
  transition: box-shadow .35s ease;
  touch-action: pan-y;
}
/* ::before establishes 4:3 height reliably even with all-absolute children */
.gc-stage::before {
  content: '';
  display: block;
  padding-top: 75%;
}
.gc-slide {
  position: absolute;
  inset: 0;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  backface-visibility: hidden;
}
.gc-slide-active { will-change: transform; }
.gc-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .8s ease;
}
@media (hover: hover) {
  .gc-stage:hover {
    box-shadow: 0 10px 40px rgba(27,200,216,.22), 0 4px 16px rgba(42,15,46,.4);
  }
  .gc-stage:hover .gc-slide img {
    transform: scale(1.04);
  }
}
.gc-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gc-overlay .wm-badge { pointer-events: auto; }
.gc-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 70px 14px 16px;
  background: linear-gradient(to top, rgba(42,15,46,.72), transparent);
  font-size: 11px;
  font-family: var(--sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(240,232,213,.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  pointer-events: none;
}
.gc-counter {
  position: absolute;
  top: 12px; left: 16px;
  font-size: 11px;
  font-family: var(--sans);
  letter-spacing: 0.12em;
  color: rgba(240,232,213,.55);
  z-index: 2;
  pointer-events: none;
}
.gc-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gc-thumbs::-webkit-scrollbar { display: none; }
.gc-thumb {
  flex-shrink: 0;
  width: 76px;
  aspect-ratio: 4/3;
  border-radius: 6px 0 6px 0;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.42;
  transition: opacity .25s ease, border-color .25s ease, transform .2s ease;
  padding: 0;
  background: none;
}
.gc-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gc-thumb.gc-thumb-on {
  opacity: 1;
  border-color: var(--turquesa);
  box-shadow: 0 0 0 2px var(--turquesa);
  transform: scale(1.10);
}
@media (hover: hover) {
  .gc-thumb:hover { opacity: 0.82; transform: scale(1.06); }
  .gc-thumb.gc-thumb-on:hover { opacity: 1; transform: scale(1.12); }
}
.gc-thumb:focus-visible { opacity: 0.85; outline: 2px solid var(--sol); outline-offset: 2px; }
@media (hover: none) {
  .gc-thumb { opacity: 0.7; }
}

/* --- Otros apartamentos --- */
.apt-page-others {
  padding: 96px var(--page-pad);
  background: var(--crema);
}
.apt-page-others > .eyebrow {
  text-align: center;
}
.apt-others-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .apt-others-grid { grid-template-columns: 1fr; }
}
.apt-other-card {
  position: relative;
  border-radius: 10px 0 10px 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: block;
  text-decoration: none;
  transition: transform var(--dur-liquid) var(--ease-liquid);
}
@media (hover: hover) {
  .apt-other-card { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .apt-other-card:hover { -webkit-transform: translateY(-6px) translateZ(0); transform: translateY(-6px) translateZ(0); }
}
.apt-other-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 6s ease;
}
@media (hover: hover) {
  .apt-other-card:hover .apt-other-img { transform: scale(1.07); }
}
.apt-other-wash {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(42,15,46,.85) 0%, transparent 60%);
  z-index: 1;
}
.apt-other-content {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
}
.apt-other-num {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--other-accent, var(--sol-lt));
  margin-bottom: 4px;
}
.apt-other-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--serif);
  color: var(--arena);
}
.apt-other-name span { font-size: 12px; letter-spacing: 0.3em; opacity: 0.6; }
.apt-other-name strong { font-size: clamp(20px, 3vw, 28px); font-weight: 300; }
.apt-other-concept {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(240,232,213,.6);
  margin: 4px 0 10px;
}
.apt-other-cta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--other-accent, var(--sol-lt));
}

/* ================================================================
   PÁGINA DE CONTACTO
   ================================================================ */

.contacto-persons {
  padding: 96px var(--page-pad);
  background: var(--crema);
}
.contacto-persons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 980px;
  margin: 0 auto 48px;
}
@media (max-width: 700px) {
  .contacto-persons-grid { grid-template-columns: 1fr; }
}
.contacto-card {
  background: var(--crema);
  border-radius: 10px 0 10px 0;
  padding: 40px 36px;
  border-top: 3px solid var(--card-accent, var(--sol));
  box-shadow: 0 8px 40px rgba(61,26,53,.07);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contacto-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--card-accent, var(--sol));
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  overflow: hidden;
  flex-shrink: 0;
}
.contacto-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.contacto-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contacto-card-lang {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--card-accent, var(--sol));
  margin-bottom: 4px;
}
.contacto-card-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 300;
  color: var(--ber);
}
.contacto-card-role {
  font-size: 13px;
  color: var(--ink);
  opacity: 0.6;
}
.contacto-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-left: 2px solid var(--card-accent, var(--sol));
  padding-left: 16px;
  margin: 12px 0;
}
.contacto-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.contacto-email-row {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.contacto-addr {
  font-size: 13px;
  color: var(--ink);
  opacity: 0.55;
}

/* Reservas steps */
.contacto-reservas {
  padding: 80px var(--page-pad);
  background: linear-gradient(125deg,
    #2A0F2E 0%, #2A0F2E 10%, #2A0F2E 22%, #3D1A35 35%,
    #2A0F2E 50%, var(--ber-cosmic) 65%, #2A0F2E 80%, #2A0F2E 100%
  );
  background-size: 400% 400%;
  animation: sky-night 36s ease infinite;
  animation-delay: -16s;
  color: var(--arena);
}
.contacto-reservas .eyebrow { color: var(--sol-h); }
.contacto-reservas h2 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  margin-top: 10px; margin-bottom: 52px;
}
.reservas-steps {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.reserva-step {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(240,232,213,.1);
}
.reserva-step:last-child { border-bottom: none; }
.step-num {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  color: var(--sol-h);
  opacity: 0.6;
  line-height: 1;
  flex-shrink: 0;
  min-width: 52px;
}
.step-title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 6px;
  color: var(--arena);
}
.step-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--arena);
  opacity: 0.72;
  line-height: 1.6;
}

/* FAQ */
.contacto-faq {
  padding: 80px var(--page-pad);
}
.faq-title {
  font-size: clamp(28px, 3vw, 44px);
  margin-bottom: 48px;
  color: var(--ber);
}
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid rgba(61,26,53,.12);
}
.faq-q {
  width: 100%;
  text-align: left;
  padding: 22px 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--ber);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  background: none;
  border: none;
}
.faq-chevron {
  font-size: 22px;
  color: var(--ber);
  flex-shrink: 0;
  transition: transform var(--dur-liquid) var(--ease-liquid);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
  padding: 0;
  transition: max-height .4s ease, padding .4s ease;
}
.faq-item.open .faq-a {
  max-height: 320px;
  padding-bottom: 20px;
}
.faq-a a {
  color: var(--ber);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(61,26,53,.35);
  transition: color .2s, text-decoration-color .2s;
}
@media (hover: hover) {
  .faq-a a:hover { color: var(--sol-h); text-decoration-color: var(--sol-h); }
}
.faq-item.open .faq-chevron {
  transform: rotate(0deg);
}

/* ================================================================
   QUICK FAQ (shared across pages)
   ================================================================ */
.quick-faq {
  padding: 72px var(--page-pad);
}
.qfaq-eyebrow {
  color: var(--ber);
  margin-bottom: 32px;
}
.qfaq-grid {
  max-width: 720px;
  margin: 0 auto;
}
.qfaq-item {
  border-bottom: 1px solid rgba(61,26,53,.1);
}
.qfaq-q {
  width: 100%;
  text-align: left;
  padding: 18px 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ber);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  background: none;
  border: none;
}
.qfaq-chevron {
  font-size: 20px;
  color: var(--ber);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.qfaq-a {
  max-height: 0;
  overflow: hidden;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.65;
  padding: 0;
  transition: max-height .35s ease, padding .35s ease;
}
.qfaq-item.open .qfaq-a {
  max-height: 160px;
  padding-bottom: 18px;
}
.qfaq-a a {
  color: var(--ber);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(61,26,53,.3);
  transition: color .2s, text-decoration-color .2s;
}
@media (hover: hover) {
  .qfaq-a a:hover { color: var(--sol-h); text-decoration-color: var(--sol-h); }
}
.qfaq-more {
  text-align: center;
  margin-top: 36px;
}

/* ================================================================
   PÁGINA DE OPINIONES
   ================================================================ */

.opiniones-platforms {
  padding: 80px var(--page-pad);
}
.opiniones-platforms .ratings-grid {
  max-width: 980px;
  margin: 0 auto;
}
.platform-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-family: var(--sans);
  letter-spacing: 0.1em;
  color: var(--ber-dk);
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .2s;
}
@media (hover: hover) {
  .platform-link:hover { opacity: 0.7; }
}

/* Pull-quotes marquee — cinta de frases cortas entre Ratings y Grid.
   Bg eggplant #2A0F2E + texto arena #F0E8D5 (~11:1 ratio). Pausa hover. */
.opiniones-quotes-marquee {
  background-color: #2A0F2E;
  color: #F0E8D5;
  border-top: 1px solid rgba(240, 232, 213, 0.10);
  border-bottom: 1px solid rgba(240, 232, 213, 0.10);
  overflow: hidden;
  padding: 18px 0;
  position: relative;
}
.opiniones-quotes-marquee::before,
.opiniones-quotes-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 1;
  pointer-events: none;
}
.opiniones-quotes-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #2A0F2E, transparent);
}
.opiniones-quotes-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #2A0F2E, transparent);
}
.oqm-track {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
  width: max-content;
  animation: oqmScroll 90s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.oqm-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 300;
  color: #F0E8D5;
  letter-spacing: 0.005em;
}
.oqm-mark {
  color: #6FC4D1;       /* sol-lt — el «...» con pinta de marca */
  font-style: normal;
  font-weight: 600;
  opacity: 0.85;
  margin: 0 4px;
}
.oqm-text { opacity: 0.95; }
.oqm-attr {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78em;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.55;
  margin-left: 4px;
}
.oqm-dot {
  color: #6FC4D1;
  font-size: 11px;
  opacity: 0.5;
}
@keyframes oqmScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) and (pointer: fine) {
  .opiniones-quotes-marquee:hover .oqm-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .oqm-track { animation: none; }
}

.opiniones-testimonials {
  padding: 96px var(--page-pad);
  background: var(--ink);
}
.opiniones-testimonials h2 {
  color: var(--arena);
  margin-bottom: 56px;
  text-align: center;
}
.opiniones-testimonials h2 em {
  color: var(--sol-lt);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}
.testimonial-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px 0 10px 0;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background var(--dur-liquid) var(--ease-liquid);
}
@media (hover: hover) {
  .testimonial-card:hover {
    background: rgba(255,255,255,.07);
  }
}
.stars-row { display: flex; gap: 3px; }
.star { color: var(--sol-lt); font-size: 14px; }
.testimonial-card blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: var(--arena);
  margin: 0;
  flex: 1;
}
.testimonial-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  font-family: var(--sans);
}
.testimonial-name { color: var(--arena); font-weight: 400; }
.testimonial-apt { color: var(--sol-lt); }
.testimonial-year { color: rgba(240,232,213,.35); }

/* ================================================================
   PÁGINA NOSOTROS
   ================================================================ */

.nosotros-story {
  padding: 96px var(--page-pad);
}
.nosotros-story-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 760px) {
  .nosotros-story-inner { grid-template-columns: 1fr; gap: 40px; }
}
.nosotros-story-head h2 {
  color: var(--ber);
  margin-top: 16px;
}
.nosotros-story-head h2 em { color: var(--sol-h); }
.nosotros-story-text p {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.nosotros-team {
  padding: 96px var(--page-pad);
  background: linear-gradient(125deg,
    var(--ber-glow) 0%, #4E2446 12%, var(--ber-twilight) 26%, #4E2446 42%,
    var(--ber-glow) 58%, #3D1A35 74%, var(--ber-glow) 88%, #4E2446 100%
  );
  background-size: 400% 400%;
  animation: sky-night 40s ease infinite;
  animation-delay: -4s;
  color: var(--arena);
}
/* Headings inside dark sections must be explicitly light */
.nosotros-team h2,
.nosotros-team h3,
.section-dark h2,
.section-dark h3,
.section-night h2,
.section-night h3,
.sabias-que h2,
.sabias-que h3,
.sticky-facts h2,
.sticky-facts h3 {
  color: var(--arena);
}
.nosotros-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .nosotros-team-grid { grid-template-columns: 1fr; }
}
.nosotros-person {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.nosotros-person .portrait {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 3 / 4;
  background: var(--ber-lt);
  border-radius: 10px 0 10px 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.nosotros-person .portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* La foto de Fran es más vertical que la de Alex (925×2000 vs ratio
   estándar). object-position: center top dejaba ver sólo el techo y
   la pared. Bajamos hasta 38 % para encuadrar cabeza y hombros, y
   subimos un poco el ancho del contenedor para dejarle aire alrededor. */
.nosotros-person.nosotros-fran .portrait,
.nosotros-person:has(img[src*="photo-fran"]) .portrait {
  max-width: 240px;
  aspect-ratio: 4 / 5;
}
.nosotros-person .portrait img[src*="photo-fran"] {
  object-position: center 38%;
}
.nosotros-person .portrait svg {
  width: 100%;
  height: 100%;
  display: none; /* shown only if photo fails to load */
}
.nosotros-person-name {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  color: var(--arena);
  margin: 8px 0 4px;
}
.nosotros-person-body p {
  font-size: 15px;
  color: rgba(240,232,213,.85);
  line-height: 1.65;
  margin: 0 0 16px;
}
.nosotros-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--arena);
  border-left: 2px solid var(--sol);
  padding-left: 16px;
  margin: 0 0 20px;
  opacity: 0.85;
}
.nosotros-person .contacts-inline {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.nosotros-person .contacts-inline a {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sol-lt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nosotros-style {
  padding: 80px var(--page-pad);
}
.nosotros-style h2 { color: var(--ber); margin-top: 16px; margin-bottom: 40px; }
.style-placeholder {
  max-width: 760px;
  margin: 0 auto;
  border: 1px dashed rgba(61,26,53,.25);
  border-radius: 10px 0 10px 0;
  padding: 60px 40px;
}
.style-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  color: var(--ink);
}
.style-placeholder-inner p {
  margin: 0;
  opacity: 0.55;
  font-size: 15px;
  max-width: 480px;
}

/* ================================================================
   LIQUID GLASS — páginas interiores (aurora en hero)
   ================================================================ */
.page-hero::after {
  content: '';
  position: absolute;
  width: 160%; height: 55%;
  top: 0; left: -30%;
  background: linear-gradient(
    90deg,
    transparent           0%,
    rgba(58,170,187,.08)  20%,
    rgba(111,196,209,.18) 40%,
    rgba(58,170,187,.06)  58%,
    transparent           75%
  );
  filter: blur(48px);
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: auroraMove 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::after { animation: none; }
  /* Dark sections: static dark fallback so light text stays readable */
  .page-hero,
  footer,
  .manifest,
  .contact-cta,
  .nosotros-team,
  .contacto-reservas,
  .section-night,
  .section-dark { animation: none; background: var(--ber-dk); }
  /* Light sections: static cream fallback */
  .section-cream,
  .section-day { animation: none; background: var(--crema); }
  .page-hero .stars,
  footer::before { animation: none; }
}
/* Override aurora on contact hero — replace with twinkling stars */
.contacto-hero::after {
  width: auto; height: auto; top: 0; left: 0;
  filter: none; border-radius: 0; mix-blend-mode: normal;
  background-image:
    radial-gradient(circle 1.5px at  9% 21%, rgba(240,232,213,1) 0%, transparent 100%),
    radial-gradient(circle 1px   at 37% 67%, rgba(111,196,209,1)  0%, transparent 100%),
    radial-gradient(circle 1.5px at 68% 14%, rgba(240,232,213,1) 0%, transparent 100%),
    radial-gradient(circle 1px   at 82% 73%, rgba(111,196,209,1)  0%, transparent 100%),
    radial-gradient(circle 1.5px at 53% 42%, rgba(240,232,213,1) 0%, transparent 100%);
  background-size: 100% 100%;
  opacity: 0;
  animation: starsWink 24s ease-in-out infinite;
  animation-delay: -4s;
}

/* ================================================================
   PÁGINAS LEGALES (Cookies + Privacidad)
   ================================================================ */

.legal-content {
  padding: 80px var(--page-pad) 120px;
}
.legal-body {
  max-width: 740px;
  margin: 0 auto;
}
.legal-section {
  margin-bottom: 48px;
}
.legal-section h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 300;
  color: var(--ber);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(61,26,53,.10);
}
.legal-section p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0;
}
.legal-footer-note { margin-top: 60px; }

/* Cookie table */
.legal-cookie-table {
  margin-top: 12px;
  border: 1px solid rgba(61,26,53,.10);
  border-radius: 6px 0 6px 0;
  overflow: hidden;
}
.cookie-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 2fr;
  gap: 0;
  font-size: 13px;
}
@media (max-width: 620px) {
  .cookie-row { grid-template-columns: 1fr 1fr; }
}
.cookie-row span {
  padding: 10px 14px;
  border-right: 1px solid rgba(61,26,53,.06);
  border-bottom: 1px solid rgba(61,26,53,.06);
  color: var(--ink-soft);
  line-height: 1.4;
}
.cookie-row span:last-child { border-right: none; }
.cookie-head { background: rgba(61,26,53,.04); }
.cookie-head span { font-weight: 500; font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ber); }
.cookie-name { font-family: monospace; font-size: 12px; color: var(--sol-h); font-weight: 500; }

/* ================================================================
   COLORES DE APARTAMENTO — clases utilitarias
   ================================================================ */
.cl-vm { color: var(--vm-dk); }
.cl-vt { color: var(--vt-dk); }
.cl-vs { color: var(--vs-dk); }
.cl-vm a, a.cl-vm { color: var(--vm-dk); text-decoration: underline; text-underline-offset: 2px; }
.cl-vt a, a.cl-vt { color: var(--vt-dk); text-decoration: underline; text-underline-offset: 2px; }
.cl-vs a, a.cl-vs { color: var(--vs-dk); text-decoration: underline; text-underline-offset: 2px; }

/* ================================================================
   TOPBAR — idioma con banderitas
   ================================================================ */
.topbar .lang button {
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ================================================================
   NOSOTROS — nuevas secciones
   ================================================================ */
/* --- PorqueEvolucion — transformation video section ------ */
.pq-evolucion { padding: 96px var(--page-pad); }
.pq-evolucion .eyebrow { color: var(--sol-lt); margin-bottom: 16px; }
.pq-evolucion h2 { color: var(--arena); margin-bottom: 56px; max-width: 30ch; }
.pq-evolucion h2 em { color: var(--sol-lt); font-style: italic; }

/* --- PorqueLogo — vitruvio section ----------------------- */
.porque-logo { padding: 96px var(--page-pad); }
.porque-logo .eyebrow { color: var(--sol-lt); margin-bottom: 16px; }
.porque-logo h2 { color: var(--arena); margin-bottom: 56px; max-width: 24ch; }
.porque-logo h2 em { color: var(--sol-lt); font-style: italic; }
.porque-logo-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
  max-width: 1100px;
}
@media (max-width: 860px) {
  .porque-logo-inner { grid-template-columns: 1fr; gap: 48px; }
}
.porque-logo-video {
  position: relative;
  border-radius: 20px 0 20px 0;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 4px 24px rgba(0,0,0,.35);
}
.porque-logo-video video {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1; /* vitruvio es cuadrado; los demás usan el ratio intrínseco */
}
.pq-evolucion .porque-logo-video video {
  aspect-ratio: 16 / 9;
}
.porque-logo-text p {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(240,232,213,.78);
  margin: 0 0 24px;
  max-width: 54ch;
}
.pls-symbols {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 36px;
  border-top: 1px solid rgba(240,232,213,.1);
  padding-top: 32px;
}
.pls-sym {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pls-sym-t {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sol-lt);
}
.pls-sym-d {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  color: rgba(240,232,213,.65);
  line-height: 1.5;
}

.nos-intro {
  padding: 96px var(--page-pad);
}
.nos-intro .container {
  max-width: 1100px;
  margin: 0 auto;
}
.nos-intro-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 760px) {
  .nos-intro-inner { grid-template-columns: 1fr; gap: 40px; }
}
.nos-intro-head h2 {
  color: var(--ber);
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.08;
}
.nos-intro-head h2 em { color: var(--sol-h); font-style: italic; }
.nos-intro-body p {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--ink-soft);
  line-height: 1.72;
  margin: 0 0 20px;
}
.nos-blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--ber);
  border-left: 2px solid var(--sol);
  padding-left: 20px;
  margin: 28px 0 0;
}
.nos-blockquote cite {
  display: block;
  font-size: 12px;
  font-style: normal;
  font-family: var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 8px;
}
.nos-blockquote-cream {
  color: var(--ber);
  border-left-color: var(--ber);
  opacity: 0.85;
}
.nos-bq-text { display: block; }

.nos-why {
  padding: 96px var(--page-pad);
}
.nos-why .container {
  max-width: 820px;
  margin: 0 auto;
}
.nos-why .eyebrow { color: var(--ber); margin-bottom: 20px; }
.nos-why h2 {
  color: var(--ber);
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.08;
  margin-bottom: 28px;
}
.nos-why h2 em { font-style: italic; color: var(--sol-h); }
.nos-why-p {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--ink-soft);
  line-height: 1.72;
  max-width: 68ch;
}

.nos-principios {
  padding: 96px var(--page-pad);
  background: var(--ber-dk);
  color: var(--arena);
}
.nos-principios .container {
  max-width: 1100px;
  margin: 0 auto;
}
.nos-principios-eyebrow { color: var(--sol-lt); }
.nos-principios h2 {
  color: var(--arena);
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.08;
  margin: 16px 0 56px;
}
.nos-principios h2 em { font-style: italic; color: var(--sol-lt); }
.nos-principios-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 820px;
}
.nos-principio {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid rgba(240,232,213,.1);
}
.nos-principio:last-child { border-bottom: none; }
.nos-p-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 44px;
  font-weight: 300;
  color: var(--sol-h);
  opacity: 0.55;
  line-height: 1;
}
.nos-p-title {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 300;
  color: var(--arena);
  margin-bottom: 8px;
}
.nos-p-desc {
  font-size: 15px;
  font-weight: 300;
  color: rgba(240,232,213,.68);
  line-height: 1.65;
}

/* --- PorqueValores · acrónimo HESTIA (cinematic) --- */
/* ================================================================
   PorqueValores v3 — sección "Nuestros valores", pinned cinemático

   Filosofía: una pantalla pinned (sticky) sostiene el stage; el scroll
   avanza por 6 fases que muestran las 6 letras de HESTIA. Cada cambio
   de fase orquesta: letra gigante (crossfade + blur bridge + parallax
   de ratón), texto a la derecha (name letter-by-letter, desc desliza
   con blur), atmósfera de fondo (radial-gradients por hue), strip
   inferior (letra activa con glow + riel horizontal continuo).

   Hidden details: scroll y mouse escriben CSS vars directamente — sin
   re-render React por frame. Sólo cuando cruza una fase se reactualiza
   el estado (para regenerar el texto con stagger). Sólo transform /
   opacity / filter animados.
   ================================================================ */

:root {
  --pq-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

.pq-valores {
  padding: 0;
  background: var(--ber-dk);
  color: var(--arena);
  position: relative;
}
.pq-valores .container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ============================================================
   v4 — Intro estático + Stage interactivo + Outro estático
   ============================================================ */

.pq-v4-intro {
  padding: clamp(56px, 7vw, 96px) var(--page-pad) clamp(20px, 3vw, 40px);
  max-width: 1240px;
}
.pq-v4-outro {
  padding: clamp(16px, 2.4vw, 32px) var(--page-pad) clamp(56px, 7vw, 96px);
  max-width: 1240px;
}
.pq-valores-eyebrow { color: var(--sol-lt); }
.pq-valores-title {
  color: var(--arena);
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.06;
  margin: 16px 0 28px;
  letter-spacing: -0.005em;
  max-width: 720px;
}
.pq-valores-title em { font-style: italic; color: var(--sol-lt); }
.pq-valores-lede {
  font-size: clamp(15px, 1.55vw, 18px);
  color: rgba(240,232,213,.78);
  line-height: 1.75;
  max-width: 60ch;
  margin: 0;
}

/* Stage interactivo: una pantalla, sin sticky */
.pq-v4-stage {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 48px) clamp(20px, 4vw, 80px) clamp(24px, 3.5vw, 56px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px 0 20px 0;
}

/* Atmósfera: stack de capas con hue, crossfade por opacity */
/* Stack de fotos — un detalle de cada Hestía por letra, blur 36px +
   opacity baja (24%) + saturate boost. Crossfade 1.2 s con la letra
   activa. Cada layer es absoluta sobre el stage, debajo del wash. */
.pq-v4-photo-stack {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.pq-v4-photo-layer {
  position: absolute;
  inset: -8%;                              /* margen para que el blur no enseñe bordes */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(36px) saturate(1.25) brightness(0.78);
  opacity: 0;
  transition: opacity 1.2s var(--pq-ease, cubic-bezier(.2, .8, .2, 1)),
              transform 12s ease-in-out;
  transform: scale(1.05);
  will-change: opacity, transform;
}
.pq-v4-photo-layer[style*="opacity: 1"] {
  /* La activa hace un slow zoom in mientras está visible (10 s de
     autoplay = breathing). */
  transform: scale(1.12);
}

.pq-v4-wash-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.pq-v4-wash-layer {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 700px at 20% 25%, rgba(var(--hue), 0.30), transparent 60%),
    radial-gradient(700px 600px at 80% 75%, rgba(var(--hue), 0.16), transparent 70%);
  transition: opacity 900ms var(--pq-ease);
  will-change: opacity;
}

/* Grain sutil */
.pq-v4-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,0.6) 0.5px, transparent 0.5px),
    radial-gradient(rgba(0,0,0,0.4) 0.5px, transparent 0.5px);
  background-size: 4px 4px, 5px 5px;
  background-position: 0 0, 2px 2px;
}

/* Cuerpo principal */
.pq-v4-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  min-height: clamp(260px, 36vh, 380px);
}

.pq-v4-letter {
  position: relative;
  height: clamp(200px, 28vh, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
/* Variable Playfair Display tiene ejes opsz (5-1200) y wght (400-900).
   @property permite interpolar smoothly los valores numéricos en el
   keyframe; sin @property las variables saltarían entre fases.       */
@property --pq-wght {
  syntax: '<number>';
  inherits: true;
  initial-value: 400;
}
@property --pq-opsz {
  syntax: '<number>';
  inherits: true;
  initial-value: 14;
}
@property --pq-halo {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.30;
}

.pq-v4-glyph {
  position: absolute;
  font-family: 'Playfair Display', var(--serif);
  font-style: italic;
  font-size: clamp(160px, 22vw, 300px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  /* Cristalización — gradient multi-stop con highlights blancos en
     posiciones diagonales + arena translúcida + sol-lt + dorado.
     background-size 200% para animar shimmer cromático. */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    var(--sol-lt) 18%,
    rgba(255, 255, 255, 0.85) 35%,
    var(--sol-h)  55%,
    rgba(240, 232, 213, 0.75) 72%,
    rgba(184, 122, 44, 0.88) 100%);
  background-size: 220% 220%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* Glass-like inner stroke vía text-shadow blanco mínimo */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 -1px 0 rgba(0, 0, 0, 0.12);

  /* Estado base (cuando NO is-active): la letra está oculta */
  --pq-wght: 400;
  --pq-opsz: 14;
  --pq-halo: 0.20;
  font-variation-settings: 'opsz' var(--pq-opsz), 'wght' var(--pq-wght);
  filter: drop-shadow(0 30px 60px rgba(212, 168, 74, var(--pq-halo))) blur(14px);
  opacity: 0;
  transform: scale(0.96) translateY(4px);
  transition:
    opacity   1400ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter    1400ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, filter, transform, font-variation-settings, background-position;
}
/* Shimmer cromático sobre la letra activa — el gradient se desplaza
   muy lentamente dando sensación de luz que pasa por cristal. */
.pq-v4-glyph.is-active {
  animation:
    pqV4LetterMorph   10000ms cubic-bezier(0.33, 0, 0.2, 1) forwards,
    pqV4GlyphShimmer  9000ms ease-in-out infinite;
}
@keyframes pqV4GlyphShimmer {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
/* La letra activa corre una secuencia continua de 10 s que vuelve al
   estado inicial — síncrono con el setInterval del autoplay. El peso
   crece de 400 a 850 y la talla óptica de 14 a 120 antes de regresar.
   El halo dorado respira en paralelo. La opacity se gestiona dentro
   del keyframe (definida arriba con doble animation). */
@keyframes pqV4LetterMorph {
  0% {
    --pq-wght: 400;
    --pq-opsz: 14;
    --pq-halo: 0.18;
    opacity: 0;
    transform: scale(0.97) translateY(4px);
    filter: drop-shadow(0 30px 60px rgba(212, 168, 74, 0.18)) blur(10px);
  }
  16% {
    --pq-wght: 480;
    --pq-opsz: 40;
    --pq-halo: 0.36;
    opacity: 1;
    transform: scale(1.00) translateY(0);
    filter: drop-shadow(0 46px 90px rgba(212, 168, 74, 0.36)) blur(0);
  }
  32% {
    --pq-wght: 620;
    --pq-opsz: 80;
    --pq-halo: 0.50;
    opacity: 1;
    transform: scale(1.02) translateY(-2px) rotate(-0.3deg);
    filter: drop-shadow(0 56px 110px rgba(212, 168, 74, 0.50)) blur(0);
  }
  50% {
    --pq-wght: 820;
    --pq-opsz: 120;
    --pq-halo: 0.62;
    opacity: 1;
    transform: scale(1.035) translateY(0) rotate(0deg);
    filter: drop-shadow(0 66px 130px rgba(212, 168, 74, 0.62)) blur(0);
  }
  68% {
    --pq-wght: 620;
    --pq-opsz: 80;
    --pq-halo: 0.50;
    opacity: 1;
    transform: scale(1.02) translateY(2px) rotate(0.3deg);
    filter: drop-shadow(0 56px 110px rgba(212, 168, 74, 0.50)) blur(0);
  }
  84% {
    --pq-wght: 480;
    --pq-opsz: 40;
    --pq-halo: 0.34;
    opacity: 1;
    transform: scale(1.00) translateY(0) rotate(0deg);
    filter: drop-shadow(0 46px 90px rgba(212, 168, 74, 0.34)) blur(0);
  }
  100% {
    --pq-wght: 400;
    --pq-opsz: 14;
    --pq-halo: 0.18;
    opacity: 0;
    transform: scale(0.97) translateY(-4px);
    filter: drop-shadow(0 30px 60px rgba(212, 168, 74, 0.18)) blur(10px);
  }
}

/* Texto: re-anima cada cambio de activeIdx via key */
.pq-v4-text {
  position: relative;
  max-width: 56ch;
  animation: pqV4Slide 750ms var(--pq-ease);
}
@keyframes pqV4Slide {
  0%   { opacity: 0; transform: translateY(18px); filter: blur(3px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.pq-v4-text-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(240, 232, 213, 0.55);
}
.pq-v4-text-idx { font-variant-numeric: tabular-nums; }
.pq-v4-text-idx-sep { opacity: 0.4; }
.pq-v4-text-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(212, 168, 74, 0.55);
  border-radius: 999px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sol-lt);
  background: rgba(212, 168, 74, 0.07);
}

.pq-v4-text-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--arena);
  margin: 0 0 24px;
  white-space: pre-wrap;
}
.pq-v4-name-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  animation: pqV4NameChar 680ms var(--pq-ease) forwards;
  animation-delay: var(--ch-delay, 0ms);
  text-shadow: 0 6px 26px rgba(212, 168, 74, 0.20);
}
@keyframes pqV4NameChar {
  0%   { opacity: 0; transform: translateY(24px); filter: blur(4px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.pq-v4-text-desc {
  font-size: clamp(15px, 1.35vw, 17.5px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(240, 232, 213, 0.85);
  max-width: 50ch;
  margin: 0;
}

/* Strip de tabs (HESTIA) — clickable, role=tab */
.pq-v4-strip {
  position: relative;
  z-index: 2;
  margin-top: clamp(28px, 4vw, 48px);
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 16px);
}
.pq-v4-strip-btn {
  position: relative;
  width: clamp(52px, 5vw, 64px);
  height: clamp(52px, 5vw, 64px);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  transition:
    background 320ms var(--pq-ease),
    transform  320ms var(--pq-ease),
    box-shadow 320ms var(--pq-ease);
}
.pq-v4-strip-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hue), 0.35) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 320ms var(--pq-ease);
  z-index: -1;
}
.pq-v4-strip-btn:hover::before { opacity: 0.6; }
.pq-v4-strip-btn:focus-visible {
  outline: 2px solid var(--sol-lt);
  outline-offset: 4px;
}
.pq-v4-strip-letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 28px);
  color: rgba(240, 232, 213, 0.45);
  line-height: 1;
  transition: color 320ms var(--pq-ease), transform 320ms var(--pq-ease);
}
.pq-v4-strip-btn:hover .pq-v4-strip-letter {
  color: rgba(240, 232, 213, 0.9);
  transform: scale(1.08);
}
.pq-v4-strip-btn.is-active::before { opacity: 1; }
.pq-v4-strip-btn.is-active .pq-v4-strip-letter {
  background: linear-gradient(180deg, var(--sol-lt), var(--sol-h));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(1.18);
  text-shadow: 0 8px 24px rgba(212, 168, 74, 0.45);
}

/* Ring de autoplay (SVG): se llena en autoplay-ms y se reinicia con key */
.pq-v4-strip-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
}
.pq-v4-strip-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.pq-v4-strip-ring-track {
  fill: none;
  stroke: rgba(240, 232, 213, 0.12);
  stroke-width: 1.2;
}
.pq-v4-strip-ring-fill {
  fill: none;
  stroke: var(--sol-lt);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 65.97;     /* 2 * PI * 10.5 */
  stroke-dashoffset: 65.97;
  filter: drop-shadow(0 0 6px rgba(212, 168, 74, 0.7));
  animation: pqV4Ring var(--autoplay-ms, 7000ms) linear forwards;
}
@keyframes pqV4Ring {
  to { stroke-dashoffset: 0; }
}

/* Mobile */
@media (max-width: 820px) {
  .pq-v4-stage {
    padding: 28px 18px 32px;
    border-radius: 14px 0 14px 0;
  }
  .pq-v4-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 4px;
    min-height: 0;
  }
  .pq-v4-letter {
    height: clamp(140px, 22vh, 200px);
  }
  .pq-v4-glyph { font-size: clamp(130px, 38vw, 220px); }
  .pq-v4-text-name { font-size: clamp(28px, 8vw, 42px); margin-bottom: 16px; }
  .pq-v4-text-desc { font-size: 15px; max-width: 100%; }
  .pq-v4-strip { gap: 4px; margin-top: 24px; }
  .pq-v4-strip-btn { width: 44px; height: 44px; }
  .pq-v4-strip-letter { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pq-v4-wash-layer,
  .pq-v4-glyph,
  .pq-v4-strip-letter,
  .pq-v4-strip-btn {
    transition: opacity 200ms ease, color 200ms ease;
    transform: none !important;
    filter: none !important;
  }
  .pq-v4-glyph.is-active {
    /* drop el morph en reduced-motion: peso medio fijo, sin transform */
    animation: none;
    --pq-wght: 500;
    --pq-opsz: 36;
    opacity: 1;
  }
  .pq-v4-text { animation: none; }
  .pq-v4-name-char {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .pq-v4-strip-ring-fill { animation: none; stroke-dashoffset: 0; }
}

.pq-valores-closing {
  margin-top: clamp(24px, 3.5vw, 56px);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 300;
  color: var(--arena);
  letter-spacing: 0.002em;
  line-height: 1.35;
  padding-top: 0;
  border-top: 0;
  position: relative;
}
.pq-valores-closing::before { content: none; }
.pq-valores-closing em {
  font-style: italic;
  color: var(--sol-lt);
  background: linear-gradient(180deg, var(--sol-lt), var(--sol-h));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* (reduced-motion para v4 está dentro del bloque .pq-v4-* arriba) */

.nos-viajero {
  padding: 96px var(--page-pad);
}
.nos-viajero .container {
  max-width: 1100px;
  margin: 0 auto;
}
.nos-viajero .eyebrow { color: var(--ber); margin-bottom: 20px; }
.nos-viajero h2 {
  color: var(--ber);
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.08;
  margin-bottom: 28px;
}
.nos-viajero h2 em { font-style: italic; color: var(--sol-h); }
.nos-viajero-intro {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--ink-soft);
  line-height: 1.72;
  max-width: 68ch;
  margin-bottom: 56px;
}
.nos-viajero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1000px;
}
@media (max-width: 760px) {
  .nos-viajero-grid { grid-template-columns: 1fr; gap: 24px; }
}
.nos-viajero-card {
  background: var(--crema);
  border-radius: 10px 0 10px 0;
  padding: 36px 30px;
  box-shadow: 0 4px 24px rgba(61,26,53,.07);
}
.nos-viajero-icon {
  font-size: 32px;
  margin-bottom: 16px;
}
.nos-viajero-title {
  font-family: var(--serif);
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 300;
  color: var(--ber);
  margin-bottom: 10px;
  line-height: 1.3;
}
.nos-viajero-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.65;
  opacity: 0.82;
}
.nos-team-eyebrow { color: var(--sol-lt); margin-bottom: 20px; }
.nos-person-lang {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--sol-lt);
  margin: 6px 0 2px;
}

/* --- NosotrosColores --- */
.nos-colores {
  padding: 96px var(--page-pad);
}
.nos-colores .eyebrow { margin-bottom: 16px; }
.nos-colores h2 { font-size: clamp(32px, 4vw, 58px); line-height: 1.1; margin-bottom: 0; }
.nos-colores h2 em { font-style: italic; color: var(--sol-h); }
.nos-colores-intro {
  font-size: 17px;
  line-height: 1.75;
  max-width: 62ch;
  color: var(--ink-soft);
  margin: 28px 0 64px;
}
.nos-colores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 48px;
}
@media (max-width: 900px) {
  .nos-colores-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 540px) {
  .nos-colores-grid { grid-template-columns: 1fr; gap: 28px; }
}
.nos-color-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 22px;
  position: relative;
  border-radius: 20px 0 20px 0;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}
/* Hover fill — sweeps in from top-left using corporate corner shape */
.nos-color-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--nc, #2A0F2E);
  clip-path: inset(0 100% 100% 0 round 20px 0 20px 0);
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.nos-color-card:hover::before { clip-path: inset(0 0 0 0 round 20px 0 20px 0); }
/* Crystalline idle glow — soft radial pulse of each card's own colour */
.nos-color-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 28% 38%, var(--nc, #2A0F2E) 0%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  animation: nos-crystal-glow 4.2s ease-in-out infinite;
  animation-delay: var(--crystal-delay, 0s);
}
@keyframes nos-crystal-glow {
  0%, 100% { opacity: 0; }
  50%       { opacity: 0.13; }
}
.nos-color-card:hover::after { animation: none; opacity: 0; }
.nos-color-card > * { position: relative; z-index: 1; }
.nos-color-hex,
.nos-color-name,
.nos-color-story { transition: color 0.3s, opacity 0.3s; }
.nos-color-card:hover .nos-color-hex { color: var(--nc-text-soft, rgba(255,255,255,0.65)); opacity: 1; }
.nos-color-card:hover .nos-color-name { color: var(--nc-text, rgba(255,255,255,0.95)); }
.nos-color-card:hover .nos-color-story { color: var(--nc-text, rgba(255,255,255,0.95)); opacity: 0.85; }
.nos-color-card:hover .nos-color-swatch {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 4px 14px rgba(0,0,0,0.22);
}
@media (prefers-reduced-motion: reduce) {
  .nos-color-card::before { transition: none; }
  .nos-color-card::after { animation: none; }
  .nos-color-hex, .nos-color-name, .nos-color-story { transition: none; }
}
.nos-color-swatch {
  width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 10px 0 10px 0;
  box-shadow:
    0 6px 20px rgba(42,15,46,0.20),
    0 2px 6px rgba(42,15,46,0.16),
    inset 0 1px 0 rgba(255,255,255,0.22);
  position: relative;
}
.nos-color-hex {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ber);
  opacity: 0.5;
  margin-bottom: 3px;
}
.nos-color-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--ber-dk);
  margin-bottom: 8px;
  line-height: 1.2;
}
.nos-color-story {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  opacity: 0.85;
}

/* --- BrandGuide · landscape palette ----------------------- */
.bg-landscape-section { margin-top: 80px; }
.bg-landscape-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 36px;
  margin-top: 40px;
}
@media (max-width: 860px) {
  .bg-landscape-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
  .bg-landscape-grid { grid-template-columns: 1fr; gap: 20px; }
}
.bg-landscape-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.bg-ls-swatch {
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 10px 0 10px 0;
  box-shadow: 0 4px 16px rgba(42,15,46,.22), 0 2px 6px rgba(42,15,46,.14);
  display: flex;
  align-items: flex-end;
  padding: 4px 5px;
  flex-shrink: 0;
}
.bg-ls-var {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(250,246,240,.65);
  line-height: 1;
}
.bg-ls-info { flex: 1; }
.bg-ls-hex {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ber);
  opacity: .5;
  margin-bottom: 2px;
}
.bg-ls-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--ber-dk);
  margin-bottom: 5px;
  line-height: 1.2;
}
.bg-ls-story {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  opacity: .8;
}

/* ================================================================
   CONTACTO — nuevas secciones (contacto simplificado)
   ================================================================ */
.contacto-intro {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--ink-soft);
  line-height: 1.72;
  max-width: 72ch;
  margin: 0 auto 52px;
  text-align: center;
}
.contacto-address {
  padding: 80px var(--page-pad);
}
.contacto-addr-grid {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 780px) {
  .contacto-addr-grid { grid-template-columns: 1fr; gap: 36px; }
}
.contacto-addr-text {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-top: 12px;
}
.contacto-lic-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.contacto-lic-list span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
}
.contacto-lic-list a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contacto-book-cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.contacto-book-cta .eyebrow { margin-bottom: 4px; color: var(--ber); }

/* ================================================================
   RESERVAS — página de reserva directa
   ================================================================ */
/* ---- NOSOTROS HERO PHOTO ---- */
.nosotros-hero { min-height: 65vh; }

.nosotros-hero-img-wrap {
  position: absolute; inset: -6%;
  overflow: hidden;
  z-index: 0;
}
.nosotros-hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  animation: nos-drift 18s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
  transform: translateZ(0);
}
@keyframes nos-drift {
  0%   { transform: scale(1.08) translateX(-3%)   translateY( 2%); }
  25%  { transform: scale(1.12) translateX(-0.5%) translateY(-1%); }
  50%  { transform: scale(1.16) translateX( 3%)   translateY(-4%); }
  75%  { transform: scale(1.13) translateX( 1.5%) translateY(-2%); }
  100% { transform: scale(1.08) translateX(-3%)   translateY( 2%); }
}

/* shimmer bands scrolling upward — simulate cloud reflections moving on water */
.nosotros-hero-ripple {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 10px,
    rgba(180,160,220,0.10) 10px,
    rgba(180,160,220,0.10) 12px
  );
  animation: nos-ripple 4.5s linear infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes nos-ripple {
  from { transform: translateY(0); }
  to   { transform: translateY(24px); }
}

/* berenjena/eggplant semi-transparent veil */
.nosotros-hero-wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,  rgba(61,26,53,.90) 0%, rgba(61,26,53,.58) 38%, rgba(61,26,53,.32) 100%),
    linear-gradient(to right, rgba(61,26,53,.42) 0%, transparent 68%);
  z-index: 2;
}
.nosotros-hero .page-hero-content { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .nosotros-hero-img { animation: none; transform: scale(1.08); }
  .nosotros-hero-ripple { animation: none; }
}

/* ---- RESERVAS HERO VIDEO ---- */
.reservas-hero { min-height: 60vh; }
.reservas-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  opacity: 0.55;
}
.reservas-hero-wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(42,15,46,.88) 0%, rgba(42,15,46,.55) 40%, rgba(42,15,46,.1) 100%),
    linear-gradient(to right, rgba(42,15,46,.5) 0%, transparent 70%);
  z-index: 1;
}
.reservas-hero .page-hero-content { z-index: 3; }

/* ---- CONTACTO HERO VIDEO ---- */
.contacto-hero { min-height: 70vh; }
.contacto-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 72%;
  z-index: 0;
  opacity: 0.90;
}
.contacto-hero-wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(42,15,46,.80) 0%, rgba(42,15,46,.45) 35%, rgba(42,15,46,.12) 70%, transparent 100%),
    linear-gradient(to right, rgba(42,15,46,.28) 0%, transparent 55%);
  z-index: 1;
}
.contacto-hero .page-hero-content { z-index: 3; }

.reservas-body {
  padding: 80px var(--page-pad) 120px;
  background: var(--crema);
}
.reservas-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 860px) {
  .reservas-inner { grid-template-columns: 1fr; gap: 56px; }
}
.reservas-form-wrap {
  background: var(--crema);
  border-radius: 10px 0 10px 0;
  padding: 48px 44px;
  box-shadow: 0 12px 56px rgba(61,26,53,.09);
}
@media (max-width: 560px) {
  .reservas-form-wrap { padding: 32px 24px; }
}
.reservas-form-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 300;
  color: var(--ber);
  margin: 0 0 8px;
}
.reservas-form-sub {
  font-size: 14px;
  color: var(--ink-soft);
  opacity: 0.72;
  margin: 0 0 36px;
}
.reservas-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ber);
  opacity: 0.85;
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  background: var(--crema);
  border: 1px solid rgba(61,26,53,.32);
  border-radius: 10px 0 10px 0;
  padding: 11px 14px;
  outline: none;
  transition: border-color .2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--sol);
}
.form-field textarea { min-height: 90px; resize: vertical; }
.form-help-note {
  font-size: 12.5px;
  color: var(--sol-text);
  font-style: italic;
  margin: 8px 0 0;
}
.rf-extras-block {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--ber) 14%, transparent);
}
.form-extras-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ber);
  opacity: 0.85;
  margin-bottom: 10px;
}
.form-extras-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
@media (max-width: 460px) {
  .form-extras-grid { grid-template-columns: 1fr; }
}
.form-extra-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.form-extra-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--sol);
  padding: 0;
  flex-shrink: 0;
}
.form-extra-item .form-extra-text { flex: 1; min-width: 0; }
.form-extra-item .form-extra-price {
  color: var(--ber);
  font-weight: 500;
  white-space: nowrap;
}
.form-extra-item.is-checked { color: var(--ber-dk); }
.form-extra-qty-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.form-extra-qty {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--ber) 18%, transparent);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  text-align: center;
  background: white;
}
.form-extra-qty:focus-visible { outline: 2px solid var(--sol); outline-offset: 1px; }
.form-extra-qty-unit { color: var(--ink-soft); font-size: 12px; }
/* Submit del form de reservas — sol turquesa con texto crema lograba
   contraste 1.8:1 (FAIL AA). Cambio a ber-dk #2A0F2E con peso 700
   sobre sol sólido → ratio ~4.5 OK. Hex literales para evitar fallos
   de var() en iPad. */
.reservas-submit {
  width: 100%;
  padding: 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-color: #3AAABB !important;
  background-image: none !important;
  color: #2A0F2E !important;
  border: 0 !important;
  border-radius: 10px 0 10px 0;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(58,170,187,.45);
  transition: background-color var(--dur-liquid) var(--ease-liquid), box-shadow .25s ease, transform .15s ease;
  margin-top: 8px;
}
.reservas-submit:hover {
  background-color: #6FC4D1 !important;
  color: #2A0F2E !important;
  box-shadow: 0 8px 28px rgba(58,170,187,.60);
  transform: translateY(-1px);
}
.reservas-submit:active { transform: translateY(0) scale(.99); }
.reservas-submit::before { display: none !important; }
.reservas-note {
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.55;
  text-align: center;
  margin-top: 8px;
}
.reservas-aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.reservas-aside-title {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 300;
  color: var(--ber);
  margin: 0 0 20px;
}
.reservas-person-card {
  background: var(--crema);
  border-radius: 10px 0 10px 0;
  padding: 28px 24px;
  border-top: 3px solid var(--card-accent, var(--sol));
  box-shadow: 0 6px 28px rgba(61,26,53,.07);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reservas-person-card .r-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--card-accent, var(--sol));
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  overflow: hidden;
  flex-shrink: 0;
}
.reservas-person-card .r-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.reservas-person-card .r-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  color: var(--ber);
}
.reservas-person-card .r-lang {
  font-size: 13px;
  color: var(--card-accent, var(--sol));
  letter-spacing: 0.06em;
}
.reservas-person-card .r-role {
  font-size: 12px;
  color: var(--ink);
  opacity: 0.55;
  letter-spacing: 0.06em;
}
.reservas-person-card .r-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.reservas-guarantee {
  background: var(--ber-dk);
  border-radius: 10px 0 10px 0;
  padding: 24px;
  color: var(--arena);
}
.reservas-guarantee .rg-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sol-lt);
  margin-bottom: 10px;
}
.reservas-guarantee .rg-lede {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(240, 232, 213, 0.82);
  margin: 0 0 14px;
}
.reservas-guarantee .rg-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(240, 232, 213, 0.10);
  color: #F0E8D5;
  border: 1px solid rgba(240, 232, 213, 0.32);
  border-radius: 8px 0 8px 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .15s ease;
}
.reservas-guarantee .rg-cta:hover {
  background: rgba(240, 232, 213, 0.20);
  border-color: rgba(240, 232, 213, 0.55);
}
.reservas-guarantee .rg-cta:active { transform: scale(.98); }
.reservas-guarantee .rg-cta-arrow {
  color: #6FC4D1;
  font-size: 14px;
  line-height: 1;
  transition: transform .25s ease;
}
.reservas-guarantee .rg-cta:hover .rg-cta-arrow { transform: translateX(3px); }
.reservas-guarantee ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reservas-guarantee li {
  font-size: 13px;
  font-weight: 300;
  color: rgba(240,232,213,.78);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.reservas-guarantee li::before {
  content: '✓';
  color: var(--sol-lt);
  flex-shrink: 0;
  font-size: 11px;
  margin-top: 2px;
}

/* ============================================================
   FRASE HOGAR — franja crema tras el hero
   ============================================================ */
.frase-hogar {
  background: var(--arena);
  color: var(--ber-dk);
  padding: clamp(32px, 4vw, 48px) var(--page-pad);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Altura fija para que QUEPA SIEMPRE la frase más larga del pool
     ("Una casa se construye con ladrillos y vigas; un hogar se edifica
     con amor y sueños." → 3-4 líneas en móvil) + attr en una línea.
     Cálculo: 4 líneas × line-height 1.5 × 18px ≈ 108 px + gap + attr
     18 px + padding 32 px × 2 = ~210 px. Margen extra → 220 px. */
  min-height: 220px;
  text-align: center;
  border-bottom: 1px solid var(--arena-dk);
}
@media (min-width: 820px) {
  /* Desktop: la frase suele caber en 1-2 líneas, baja el min-height
     pero seguimos garantizando holgura. */
  .frase-hogar { min-height: 180px; }
}
.fh-body {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2vw, 24px);
  flex-wrap: wrap;
  justify-content: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.fh-body.fh-in  { opacity: 1; transform: translateY(0); }
.fh-body.fh-out { opacity: 0; transform: translateY(4px); }
.fh-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.5;
  color: var(--ber);
  opacity: 0.85;
}
.fh-attr {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  white-space: nowrap;
}

/* ============================================================
   SABÍAS QUE — STRIP ROTANTE
   ============================================================ */
.sabias-que {
  background: var(--ber-dk);
  color: var(--arena);
  padding: clamp(28px, 3.5vw, 48px) var(--page-pad);
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 60px);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  min-height: 90px;
}
.sabias-que::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--sol);
}
.sq-label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--arena);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 130px;
}
.sq-body {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.sq-body.sq-in  { opacity: 1; transform: translateY(0); }
.sq-body.sq-out { opacity: 0; transform: translateY(6px); }
.sq-fact {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.5;
  max-width: 72ch;
  opacity: 0.96;
}
.sq-attr {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.14em;
  opacity: 0.55;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .sq-label { min-width: unset; }
  .sq-body { flex-direction: column; gap: 6px; }
}

/* ── Sticky facts corner widget ── */
/* En las páginas de Hestía, a partir de tablet/iPad, ocultamos el
   widget "¿Sabías que?" — lo sustituye el sidebar con ventajas + guía. */
@media (min-width: 900px) {
  body.has-apt-sticky .sticky-facts { display: none !important; }
}
.sticky-facts {
  position: fixed;
  top: 50%; right: 20px;
  transform: translateY(-50%);
  z-index: 88;
  transition: opacity .4s ease, transform .4s ease;
}
.sticky-facts.sf-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(16px);
}
.sticky-facts {
  width: 340px;
  background: var(--ber-dk);
  border-radius: 10px 0 10px 0;
  border-left: 4px solid var(--sol);
  padding: 18px 42px 16px 20px;
  box-shadow: 0 8px 36px rgba(42,15,46,.48);
}
.sticky-facts.sf-closed {
  width: auto;
  height: auto;
  border-radius: 10px 0 10px 0;
  border-left: 3px solid var(--sol);
  padding: 10px 16px 10px 14px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.sticky-facts.sf-closed:hover { background: var(--ber-lt); }
.sf-toggle {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none;
  color: var(--arena); opacity: .45;
  font-size: 17px; line-height: 1;
  cursor: pointer; padding: 2px 4px;
  transition: opacity .2s;
}
.sf-toggle:hover,
.sf-toggle:focus-visible { opacity: 1; }
@media (hover: none) {
  .sf-toggle { opacity: .85; }
}
.sticky-facts.sf-closed .sf-toggle {
  position: static; opacity: .8; font-size: 15px;
  order: 2;
}
.sf-body { transition: opacity .35s; }
.sf-body.sf-in  { opacity: 1; }
.sf-body.sf-out { opacity: 0; }
.sf-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sol-lt); margin-bottom: 10px;
}
.sf-text {
  display: block;
  font-family: var(--serif);
  font-size: 17px; line-height: 1.52;
  color: var(--arena);
}
.sf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(240,232,213,.12);
}
.sf-nav-btn {
  background: none; border: none;
  color: var(--sol-lt);
  font-size: 22px; line-height: 1;
  cursor: pointer; padding: 4px 10px;
  opacity: 0.65;
  transition: opacity .18s, transform .18s;
}
@media (hover: hover) and (pointer: fine) {
  .sf-nav-btn:hover { opacity: 1; transform: scale(1.18); }
}
.sf-nav-btn:focus-visible { opacity: 1; }
@media (hover: none) {
  .sf-nav-btn { opacity: .9; }
}
.sf-counter {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .1em;
  color: var(--arena); opacity: 0.38;
}
@media (max-width: 767px), (max-height: 500px) { .sticky-facts { display: none; } }

/* ═══════════════════════════════════════════════════════════
   HOME SEARCH WIDGET  (.home-search / .hs-*)
   ═══════════════════════════════════════════════════════════ */
.home-search {
  background: linear-gradient(180deg, var(--ber-dk) 0%, #2A0F2E 100%);
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
}
.home-search::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f0e8d5' fill-opacity='0.022'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.hs-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* Header */
.hs-hd { text-align: center; margin-bottom: 44px; }
.hs-eyebrow { color: var(--sol-lt); margin-bottom: 14px; }
.hs-title {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 300;
  color: var(--arena);
  line-height: 1.25;
  margin: 0 0 14px;
}
.hs-title em { color: var(--sol); font-style: italic; }
.hs-sub {
  font-family: var(--sans);
  font-size: 14px; font-weight: 300;
  color: rgba(240,232,213,.6);
  max-width: 560px; margin: 0 auto;
  line-height: 1.7;
}

/* Form */
.hs-form {
  background: rgba(240,232,213,.04);
  border: 1px solid rgba(240,232,213,.1);
  border-radius: 10px 0 10px 0;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Apartment selector */
.hs-apt-sel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hs-apt-btn {
  font-family: var(--sans);
  font-size: 12px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 10px 0 10px 0;
  border: 1.5px solid rgba(240,232,213,.22);
  background: transparent;
  color: rgba(240,232,213,.7);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.hs-apt-btn:hover {
  border-color: rgba(240,232,213,.45);
  color: var(--arena);
}
.hs-apt-btn.active {
  background: var(--btn-accent, var(--sol));
  border-color: transparent;
  color: var(--crema);
  font-weight: 500;
}

/* Row layout */
.hs-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.hs-row--wrap { flex-wrap: wrap; }

/* Field */
.hs-field { flex: 1; min-width: 140px; }
.hs-field--full { flex: unset; width: 100%; }
.hs-field--inline { flex: unset; display: flex; align-items: center; gap: 12px; }

/* Label */
.hs-lbl {
  display: block;
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(240,232,213,.5);
  margin-bottom: 8px;
}
.hs-field--inline .hs-lbl { margin-bottom: 0; }

/* Date inputs */
.hs-input {
  width: 100%;
  background: rgba(240,232,213,.06);
  border: 1.5px solid rgba(240,232,213,.14);
  border-radius: 10px 0 10px 0;
  color: var(--arena);
  font-family: var(--sans);
  font-size: 14px; font-weight: 300;
  padding: 10px 14px;
  transition: border-color .2s;
  appearance: none; -webkit-appearance: none;
  color-scheme: dark;
}
.hs-input:focus {
  outline: none;
  border-color: rgba(240,232,213,.4);
}

/* Nights badge */
.hs-nights-badge {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--sol);
  color: var(--ber-dk);
  border-radius: 10px 0 10px 0;
  padding: 8px 16px;
  min-width: 62px;
}
.hs-nights-n {
  font-family: var(--serif);
  font-size: 22px; font-weight: 400;
  line-height: 1;
}
.hs-nights-lbl {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  margin-top: 2px;
}

/* Guest counter */
.hs-counter {
  display: flex; align-items: center; gap: 4px;
}
.hs-cnt-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,232,213,.08);
  border: 1.5px solid rgba(240,232,213,.16);
  border-radius: 10px 0 10px 0;
  color: var(--arena);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.hs-cnt-btn:hover {
  background: rgba(240,232,213,.16);
  border-color: rgba(240,232,213,.32);
}
.hs-cnt-num {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--arena);
  min-width: 28px;
  text-align: center;
}

/* Toggle buttons (baby / pet) */
.hs-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.hs-toggle {
  font-family: var(--sans);
  font-size: 12px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 10px 0 10px 0;
  border: 1.5px solid rgba(240,232,213,.2);
  background: transparent;
  color: rgba(240,232,213,.6);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hs-toggle:hover { border-color: rgba(240,232,213,.38); color: var(--arena); }
.hs-toggle.on {
  background: rgba(240,232,213,.12);
  border-color: rgba(240,232,213,.45);
  color: var(--arena);
}

/* Extras checkboxes */
.hs-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hs-extra-item {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,232,213,.65);
  background: rgba(240,232,213,.04);
  border: 1.5px solid rgba(240,232,213,.12);
  border-radius: 10px 0 10px 0;
  padding: 7px 14px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hs-extra-item input[type="checkbox"] { display: none; }
.hs-extra-item:hover { border-color: rgba(240,232,213,.28); color: var(--arena); }
.hs-extra-item.checked {
  background: rgba(240,232,213,.1);
  border-color: rgba(240,232,213,.38);
  color: var(--arena);
}
.hs-extra-item.checked::before {
  content: '✓';
  font-size: 11px;
  color: var(--sol-lt);
}

/* Error */
.hs-form-err {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--err);
  background: rgba(184, 36, 110, 0.10);    /* err con baja alpha */
  border: 1px solid rgba(184, 36, 110, 0.25);
  border-radius: 10px 0 10px 0;
  padding: 10px 14px;
}

/* Submit row */
.hs-submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hs-submit { font-size: 15px; padding: 13px 28px; }

/* ──────────────────────────────────────────────────────────────────
   .btn-primary BULLETPROOF SOBRE FONDOS OSCUROS
   ──────────────────────────────────────────────────────────────────
   El .btn-primary genérico (sol var() + ber-dk var()) se desvanecía
   sobre fondos oscuros (.home-search, .section-dark, .section-night,
   .hero, .contact-cta, .apt-page-hero) en algunos parsers (iPad
   Safari con color-mix legacy). El ::before sheen + alpha bg llegaba
   a aparecer transparente — el botón quedaba sólo como outline.
   Este bloque ataca el problema en TODOS los sitios a la vez con
   hex literales y peso 700.
   ────────────────────────────────────────────────────────────────── */
.home-search .btn-primary,
.section-dark .btn-primary,
.section-night .btn-primary,
.contact-cta .btn-primary,
.hero .btn-primary,
.eo-hero .btn-primary,
.apt-page-hero .btn-primary,
.page-hero .btn-primary {
  background-color: #3AAABB !important;        /* sol turquesa */
  background-image: none !important;
  color: #2A0F2E !important;                   /* ber-dk */
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 22px rgba(58,170,187,.50), 0 0 0 1px rgba(240,232,213,.18) !important;
}
.home-search .btn-primary::before,
.section-dark .btn-primary::before,
.section-night .btn-primary::before,
.contact-cta .btn-primary::before,
.hero .btn-primary::before,
.eo-hero .btn-primary::before,
.apt-page-hero .btn-primary::before,
.page-hero .btn-primary::before {
  display: none !important;
}
.home-search .btn-primary:hover,
.section-dark .btn-primary:hover,
.section-night .btn-primary:hover,
.contact-cta .btn-primary:hover,
.hero .btn-primary:hover,
.eo-hero .btn-primary:hover,
.apt-page-hero .btn-primary:hover,
.page-hero .btn-primary:hover {
  background-color: #6FC4D1 !important;        /* sol-lt */
  color: #2A0F2E !important;
  box-shadow: 0 8px 28px rgba(58,170,187,.65), 0 0 0 1px rgba(240,232,213,.32) !important;
  transform: translateY(-1px);
}
.hs-loading-note {
  font-family: var(--sans);
  font-size: 12px; font-weight: 300;
  color: rgba(240,232,213,.45);
  font-style: italic;
}

/* Results section */
.hs-results {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hs-results-hd {
  font-family: var(--serif);
  font-size: 18px; font-weight: 300;
  color: rgba(240,232,213,.75);
  font-style: italic;
  margin-bottom: 4px;
}

/* Result card */
.hs-result-card {
  display: flex;
  background: rgba(240,232,213,.04);
  border: 1px solid rgba(240,232,213,.1);
  border-radius: 10px 0 10px 0;
  overflow: hidden;
  transition: border-color .2s;
}
.hs-result-card.avail {
  border-color: rgba(240,232,213,.14);
}
.hs-result-card.taken {
  opacity: .7;
}
.hs-rc-bar {
  width: 5px;
  flex-shrink: 0;
  background: var(--hs-accent, var(--sol));
  opacity: .85;
}
.hs-result-card.taken .hs-rc-bar { opacity: .32; }
.hs-rc-body {
  flex: 1;
  padding: 20px 22px;
}
.hs-rc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hs-rc-ident {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hs-rc-num {
  font-family: var(--serif);
  font-size: 28px; font-weight: 300;
  color: var(--hs-accent, var(--sol));
  opacity: .7;
  line-height: 1;
  flex-shrink: 0;
}
.hs-rc-name {
  font-family: var(--serif);
  font-size: 18px; font-weight: 400;
  color: var(--arena);
  line-height: 1.2;
}
.hs-rc-concept {
  font-family: var(--serif);
  font-size: 12px; font-weight: 300;
  color: rgba(240,232,213,.45);
  font-style: italic;
  margin-top: 3px;
}
.hs-rc-status {
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 10px 0 10px 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.hs-rc-status.ok {
  background: rgba(100,180,80,.15);
  color: var(--ok);
  border: 1px solid rgba(100,180,80,.25);
}
.hs-rc-status.no {
  background: rgba(200,90,70,.12);
  color: var(--alb);
  border: 1px solid rgba(200,90,70,.2);
}

/* Available card actions */
.hs-rc-contact { margin-bottom: 12px; }
.hs-rc-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.hs-rc-input {
  flex: 1 1 140px;
  padding: 8px 12px;
  border-radius: 6px 0 6px 0;
  border: 1px solid rgba(240,232,213,.2);
  background: rgba(255,255,255,.06);
  color: var(--arena);
  font-family: var(--sans);
  font-size: 12px;
  outline: none;
  transition: border-color .18s;
}
.hs-rc-input::placeholder { color: rgba(240,232,213,.35); }
.hs-rc-input:focus { border-color: rgba(240,232,213,.5); }
.hs-rc-hint { font-family: var(--sans); font-size: 11px; color: #D42B80; margin: 0 0 8px; letter-spacing: .06em; }
.hs-rc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.hs-wa-btn { font-size: 13px; padding: 9px 18px; gap: 7px; }
.hs-mail-btn { font-size: 13px; padding: 9px 16px; }
.hs-rc-link {
  font-family: var(--sans);
  font-size: 12px; font-weight: 400;
  color: rgba(240,232,213,.45);
  text-decoration: none;
  transition: color .18s;
  margin-left: 4px;
}
.hs-rc-link:hover { color: var(--arena); }
.hs-rc-note {
  font-family: var(--sans);
  font-size: 12px; font-weight: 300;
  color: rgba(240,232,213,.38);
  font-style: italic;
  line-height: 1.55;
  margin: 0;
}
/* Dark-theme price block inside home search result cards */
.hs-price-block {
  background: rgba(240,232,213,.05);
  border: 1px solid rgba(240,232,213,.1);
  border-radius: 10px 0 10px 0;
  padding: 16px 18px;
  margin: 0 0 14px;
}
.hs-pb-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.hs-pb-direct { display: flex; flex-direction: column; gap: 2px; }
.hs-pb-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: rgba(240,232,213,.5); font-family: var(--sans);
}
.hs-pb-total {
  font-family: var(--serif); font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 400; color: var(--arena); line-height: 1;
}
.hs-pb-avg { font-size: 12px; color: rgba(240,232,213,.6); }
.hs-pb-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.hs-pb-ref { display: flex; flex-direction: column; align-items: flex-end; }
.hs-pb-ref-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(240,232,213,.4); }
.hs-pb-ref-val {
  font-size: 16px; color: rgba(240,232,213,.38);
  text-decoration: line-through; font-family: var(--serif);
}
.hs-pb-breakdown {
  border-top: 1px solid rgba(240,232,213,.1);
  padding-top: 12px; display: flex; flex-direction: column; gap: 5px;
}
.hs-pb-line {
  display: flex; justify-content: space-between;
  font-size: 12px; color: rgba(240,232,213,.5); font-family: var(--sans);
}
.hs-pb-disc { color: #D42B80; }
.hs-pb-total-line {
  font-weight: 600; color: var(--arena);
  border-top: 1px solid rgba(240,232,213,.1);
  padding-top: 7px; margin-top: 2px; font-size: 13px;
}
.hs-pb-note {
  font-size: 12px; color: rgba(240,232,213,.38);
  margin: 10px 0 0; line-height: 1.5; font-family: var(--sans);
}

.hs-rc-unavail-note {
  font-family: var(--sans);
  font-size: 13px; font-weight: 300;
  color: rgba(240,232,213,.5);
  margin: 0;
}
.hs-rc-unavail-note a {
  color: rgba(240,232,213,.65);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* No data fallback */
.hs-no-data {
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 300;
  color: rgba(240,232,213,.55);
  background: rgba(240,232,213,.04);
  border: 1px solid rgba(240,232,213,.1);
  border-radius: 10px 0 10px 0;
  padding: 20px 22px;
  line-height: 1.65;
}
.hs-no-data a {
  color: var(--sol-lt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Reset button */
.hs-reset {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px; font-weight: 300;
  color: rgba(240,232,213,.4);
  cursor: pointer;
  padding: 4px 0;
  letter-spacing: .04em;
  transition: color .18s;
  text-align: left;
  margin-top: 4px;
}
.hs-reset:hover { color: rgba(240,232,213,.75); }

/* Trust bar */
.hs-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,232,213,.38);
  margin-top: 16px;
}
.hs-trust-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(240,232,213,.22);
  flex-shrink: 0;
}

/* Notify me */
.hs-notify {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(240,232,213,.08);
  text-align: center;
}
.hs-notify-text {
  font-family: var(--sans);
  font-size: 14px; font-weight: 300;
  color: rgba(240,232,213,.5);
  line-height: 1.65;
  margin: 0 auto 22px;
  max-width: 520px;
}
.hs-notify-btn { font-size: 12px; padding: 11px 22px; }

/* ── Calendar range picker (home search) ──────────────────────── */
/* Cell/grid rendering reuses the existing .cal-* and .c-* classes */
.hscal-wrap { display: flex; flex-direction: column; }

/* Tema CLARO del datepicker en /reservas — el calendario base está
   pensado para fondos oscuros (home-search hero). Aquí el contenedor
   .reservas-form-wrap es cream, así que sobreescribimos los colores
   de texto para que se lean correctamente.                          */
.reservas-form-wrap .cal-mhd          { color: var(--ber-dk); }
.reservas-form-wrap .cal-yr           { color: var(--ber); opacity: 0.55; }
.reservas-form-wrap .cal-wd           { color: var(--ber); opacity: 0.5; }
.reservas-form-wrap .c-n              { color: var(--ber-dk); opacity: 0.85; }
.reservas-form-wrap .cal-cell.past .c-n { color: var(--ber); opacity: 0.25; }
.reservas-form-wrap .cal-cell.blk  .c-n { color: var(--ber-dk); opacity: 0.7; }
.reservas-form-wrap .cal-cell.today:not(.blk) .c-n { color: var(--apt-accent, var(--sol)); font-weight: 600; }
.reservas-form-wrap .cal-cell.in-sel .c-n,
.reservas-form-wrap .cal-cell.sel-s  .c-n,
.reservas-form-wrap .cal-cell.sel-e  .c-n { color: var(--ber-dk); font-weight: 600; opacity: 1; }
.reservas-form-wrap .cal-cell.sel-m  .c-n { color: var(--ber-dk); opacity: 0.7; }
.reservas-form-wrap .cal-cell.prev-s .c-n,
.reservas-form-wrap .cal-cell.prev-e .c-n { color: var(--ber-dk); opacity: 0.85; }
.reservas-form-wrap .cal-cell.prev-m .c-n { color: var(--ber-dk); opacity: 0.5; }
.reservas-form-wrap .hscal-phase-hint { color: var(--sol-h); }
.reservas-form-wrap .avail-nav-lbl    { color: var(--ber-dk); opacity: 0.85; }
.reservas-form-wrap .avail-arr        { color: var(--ber); }
.reservas-form-wrap .hscal-sel-lbl    { color: var(--ber); opacity: 0.7; }
.reservas-form-wrap .hscal-sel-item strong { color: var(--ber-dk); }

.hscal-phase-hint {
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--turq);
  min-height: 18px;
  margin-bottom: 12px;
}
.avail-nav.hscal-nav { margin-bottom: 16px; }
.hscal-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Selection summary */
.hscal-sel-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(240,232,213,.1);
}
.hscal-sel-item { display: flex; flex-direction: column; gap: 2px; }
.hscal-sel-lbl {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,232,213,.4);
}
.hscal-sel-item strong {
  font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--arena);
}
.hscal-clear {
  font-family: var(--sans); font-size: 11px; font-weight: 400;
  letter-spacing: .08em; color: rgba(240,232,213,.4);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  transition: color .15s; margin-left: auto;
}
.hscal-clear:hover { color: rgba(240,232,213,.7); }

/* Mobile */
@media (max-width: 600px) {
  .hs-form { padding: 22px 16px; }
  .hs-row { gap: 10px; }
  .hs-nights-badge { flex: 0 0 auto; }
  .hs-rc-head { flex-direction: column; gap: 8px; }
  .hs-rc-actions { flex-direction: column; align-items: stretch; }
  .hs-wa-btn, .hs-mail-btn { text-align: center; justify-content: center; }
  .hscal-months { grid-template-columns: 1fr; }
}

/* ================================================================
   NOTICIAS & BLOG
   ================================================================ */

/* Hero */
.porque-hero {
  min-height: 70vh;
  background: var(--ber-dk);
  display: flex;
  align-items: center;
  padding: 140px var(--page-pad) 80px;
  position: relative;
  overflow: hidden;
}
.porque-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  opacity: 0.5;
}
.porque-hero-wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,  rgba(42,15,46,.95) 0%, rgba(42,15,46,.6) 45%, rgba(42,15,46,.18) 100%),
    linear-gradient(to right, rgba(42,15,46,.65) 0%, transparent 65%);
  z-index: 1;
  pointer-events: none;
}
.porque-hero .page-hero-content { z-index: 2; }

.noticias-hero {
  min-height: 70vh;
  background: var(--ber-dk);
  display: flex;
  align-items: center;
  padding: calc(var(--chrome-h, 116px) + 24px) var(--page-pad) 80px;
  position: relative;
  overflow: hidden;
}
.noticias-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
  opacity: 0.55;
}
.noticias-hero-wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,  rgba(42,15,46,.92) 0%, rgba(42,15,46,.55) 45%, rgba(42,15,46,.15) 100%),
    linear-gradient(to right, rgba(42,15,46,.6) 0%, transparent 65%);
  z-index: 1;
  pointer-events: none;
}
.noticias-hero-inner {
  position: relative; z-index: 2;
  max-width: 780px;
  color: var(--arena);
}
.noticias-edition-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sol-lt);
  background: rgba(58,170,187,.12);
  border: 1px solid rgba(58,170,187,.3);
  border-radius: 10px 0 10px 0;
  padding: 6px 16px;
  margin-bottom: 20px;
}
.noticias-hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(42px, 6vw, 88px);
  line-height: 1.08;
  color: var(--arena);
  margin: 0 0 20px;
}
.noticias-hero-sub {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: rgba(240,232,213,.65);
  line-height: 1.65;
  max-width: 560px;
  margin: 0;
}

/* La Voz de Hestía */
.noticias-voz {
  background: linear-gradient(160deg, var(--ink) 0%, var(--ber-dk) 60%, #2A0F2E 100%);
  padding: 90px var(--page-pad);
}
.noticias-voz-eyebrow {
  color: var(--sol-lt);
  margin-bottom: 16px;
}
.noticias-voz-title {
  color: var(--arena);
  font-size: clamp(28px, 4vw, 52px);
  margin-bottom: 52px;
}
.voz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.voz-card {
  background: rgba(240,232,213,.04);
  border: 1px solid rgba(240,232,213,.08);
  border-top: 3px solid var(--voz-accent, var(--sol));
  border-radius: 10px 0 10px 0;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.voz-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.voz-num {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 300;
  color: var(--voz-accent, var(--sol));
  opacity: 0.7;
}
.voz-apt-name {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 300;
  color: var(--arena);
  text-decoration: none;
  transition: color .2s;
}
.voz-apt-name:hover { color: var(--sol-lt); }
.voz-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voz-block-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--voz-accent, var(--sol));
  opacity: 0.85;
}
.voz-block-text {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  color: rgba(240,232,213,.8);
  line-height: 1.65;
  margin: 0;
}
.voz-apt-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--voz-accent, var(--sol));
  text-decoration: none;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(240,232,213,.08);
  transition: opacity .2s;
}
.voz-apt-link:hover { opacity: 0.7; }

/* Noticias del territorio */
.noticias-territorio {
  padding: 90px var(--page-pad);
}
.noticias-terr-eyebrow {
  color: var(--ber);
  margin-bottom: 14px;
}
.noticias-terr-title {
  color: var(--ber);
  font-size: clamp(28px, 4vw, 52px);
  margin-bottom: 56px;
}
.noticias-terr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 56px;
}
.noticias-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--cat-accent, var(--sol));
}
.noticias-cat-icon { font-size: 22px; }
.noticias-cat-name {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 300;
  color: var(--ber);
  margin: 0;
}
.noticias-articles {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.noticias-article {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(61,26,53,.07);
}
.noticias-article:last-child { border-bottom: none; padding-bottom: 0; }
.noticias-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cat-accent, var(--sol));
  background: rgba(58,170,187,.08);
  border-radius: 10px 0 10px 0;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.noticias-titulo {
  font-family: var(--serif);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 300;
  color: var(--ber-dk);
  margin: 0 0 8px;
  line-height: 1.35;
}
.noticias-cuerpo {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
  opacity: 0.85;
}

/* Próxima edición */
.noticias-next {
  background: linear-gradient(125deg, var(--ber-dk) 0%, #2A0F2E 50%, var(--ber) 100%);
  padding: 80px var(--page-pad);
  text-align: center;
}
.noticias-next-inner {
  max-width: 620px;
  margin: 0 auto;
}
.noticias-next-text {
  font-family: var(--serif);
  font-size: clamp(16px, 1.8vw, 20px);
  font-style: italic;
  color: rgba(240,232,213,.7);
  line-height: 1.65;
  margin: 18px 0 32px;
}
.noticias-next-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 900px) {
  .voz-grid { grid-template-columns: 1fr; }
  .noticias-terr-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .noticias-hero { padding-top: calc(var(--chrome-h, 116px) + 16px); padding-bottom: 60px; }
  .noticias-voz, .noticias-territorio, .noticias-next { padding: 60px var(--page-pad); }
}

/* ================================================================
   POR QUÉ HESTÍA — crosslink & mobile nav
   ================================================================ */
.pq-crosslink {
  text-align: center;
  padding: 72px 24px;
}
.pq-cl-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D42B80;
  text-decoration: none;
  border-bottom: 1px solid #D42B80;
  padding-bottom: 3px;
  transition: opacity .2s;
}
.pq-cl-link:hover { opacity: .7; }

/* ─── Forma corporativa + armonía perfecta de esquinas ──────────────────────
   Principio: la sección A tiene z-index mayor que B y se extiende 32 px
   hacia abajo (margin-bottom: -32px). Así son visibles AMBAS esquinas:
   · Esquina inferior-derecha de A: A está encima, su radio transparente
     deja ver el color de B por debajo (esquina derecha ✓).
   · Esquina superior-izquierda de B: B está detrás, el color de A aparece
     a través del notch redondeado de B (esquina izquierda ✓).
   padding-top compensado en B = original + 32 px para que el contenido
   de B empiece bajo la zona de solape.                                      */

/* ── Primeras secciones — esquina de salida + extensión hacia abajo */
.hero,
.apt-page-hero,
.page-hero {
  position: relative;
  z-index: 50;
  border-radius: 32px 0 32px 0;
  margin-bottom: -32px;
}

/* ── Resto de secciones — forma completa, sin margin-top */
.frase-hogar,
.home-search,
.apartments-intro,
.compare,
.counters,
.team,
.manifest,
.ratings,
.ratings-marquee,
.quick-faq,
.direct-perks-teaser,
.contact-cta,
.apt-page-desc,
.apt-page-gallery,
.opiniones-share-cta,
.eo-form-sec,
.mapa-page,
.bridge,
.gallery {
  border-radius: 32px 0 32px 0;
  position: relative;
  margin-bottom: -32px;
}

/* Clases de fondo utilitarias — solo forma y contexto */
.section-night,
.section-dark,
.section-violet,
.section-day,
.section-cream {
  border-radius: 32px 0 32px 0;
  position: relative;
}

/* ── z-index decreciente: A siempre encima de B ── */
.frase-hogar          { z-index: 49; }
.home-search          { z-index: 48; }
.apartments-intro     { z-index: 47; }
.compare              { z-index: 46; }
.counters             { z-index: 45; }
.team                 { z-index: 44; }
.manifest             { z-index: 43; }
.ratings              { z-index: 42; }
.ratings-marquee      { z-index: 41; }
.quick-faq            { z-index: 40; }
.direct-perks-teaser  { z-index: 40; }
.contact-cta          { z-index: 40; }
.apt-page-desc        { z-index: 49; }
.apt-page-gallery     { z-index: 48; }
.opiniones-share-cta  { z-index: 46; }
.eo-form-sec          { z-index: 49; }
.mapa-page            { z-index: 50; }
.bridge               { z-index: 49; }
.gallery              { z-index: 49; }

/* ── Compensación de padding-top en B (original + 32 px) ── */
.frase-hogar         { padding-top: calc(clamp(22px,  3vw,  36px)  + 32px); }
.home-search         { padding-top: calc(80px                       + 32px); }
.apartments-intro    { padding-top: calc(clamp(100px, 10vw, 160px) + 32px); }
.compare             { padding-top: 32px; }
.counters            { padding-top: calc(clamp(80px,  10vw, 140px) + 32px); }
.team                { padding-top: calc(clamp(100px, 12vw, 200px) + 32px); }
.manifest            { padding-top: calc(clamp(100px, 10vw, 160px) + 32px); }
.ratings             { padding-top: calc(clamp(90px,  10vw, 140px) + 32px); }
.ratings-marquee     { padding-top: calc(16px                       + 32px); }
.quick-faq           { padding-top: calc(72px                       + 32px); }
.direct-perks-teaser { padding-top: calc(clamp(20px, 3vw,  36px)  + 32px); }
.contact-cta         { padding-top: calc(clamp(100px, 12vw, 180px) + 32px); }
.apt-page-desc       { padding-top: calc(80px                       + 32px); }
.apt-page-gallery    { padding-top: calc(80px                       + 32px); }
.opiniones-share-cta { padding-top: calc(clamp(56px, 8vw,  88px)  + 32px); }
.eo-form-sec         { padding-top: calc(clamp(56px, 8vw,  96px)  + 32px); }

/* Body oscuro: la primera y última sección también quedan limpias */
body:has(.hero),
body:has(.apt-page-hero) {
  background: var(--ink);
}
html:has(.hero),
html:has(.apt-page-hero) {
  background: var(--ink);
}

/* ── Secciones secundarias — stacking completo (todos los inner pages) ──────
   Estas secciones no estaban en el sistema de overlap y exponían el fondo
   crema del body (≈ #FAF6F0) en las esquinas redondeadas de secciones oscuras.
   Se añaden border-radius + margin-bottom + z-index + padding-top compensado. */

/* Secciones sin .section-* class — necesitan border-radius explícito */
.nos-intro,
.porque-logo,
.nosotros-team,
.contacto-persons,
.contacto-faq,
.opiniones-quotes-marquee,
.opiniones-testimonials,
.noticias-voz,
.apt-trust-strip,
.apt-video-desc,
.apt-equip,
.dbt-band,
.apt-avail,
.apt-page-others {
  border-radius: 32px 0 32px 0;
  position: relative;
  margin-bottom: -32px;
}

/* Secciones con .section-* — ya tienen border-radius, solo faltan overlap */
.nos-why,
.nos-colores,
.nos-viajero,
.pq-evolucion,
.pq-valores,
.pq-crosslink,
.contacto-address,
.opiniones-platforms,
.noticias-territorio,
.apt-floorplan { margin-bottom: -32px; }

/* Z-index decreciente por posición en página (reutilizable entre páginas
   distintas — valores en el rango 40-49, same as home, no conflict) */
.nos-intro,
.contacto-persons,
.opiniones-platforms,
.noticias-voz,
.apt-trust-strip { z-index: 49; }

.porque-logo,
.contacto-address,
.opiniones-quotes-marquee,
.noticias-territorio,
.apt-video-desc { z-index: 48; }

.nos-why,
.pq-evolucion,
.nosotros-team,
.contacto-faq,
.opiniones-testimonials { z-index: 47; }

.nos-colores,
.apt-equip { z-index: 46; }

.nos-viajero,
.apt-floorplan { z-index: 45; }

.pq-valores,
.dbt-band { z-index: 44; }

.apt-avail { z-index: 43; }

.apt-page-others { z-index: 42; }

.pq-crosslink { z-index: 40; }

/* Compensación padding-top (+32px para recuperar el espacio solapado) */
.nos-intro      { padding-top: calc(96px  + 32px); }
.porque-logo    { padding-top: calc(96px  + 32px); }
.pq-evolucion   { padding-top: calc(96px  + 32px); }
.nos-why        { padding-top: calc(96px  + 32px); }
.nos-colores    { padding-top: calc(96px  + 32px); }
.nos-viajero    { padding-top: calc(96px  + 32px); }
.pq-valores     { padding-top: 32px; }
.pq-crosslink   { padding-top: calc(72px  + 32px); }
.nosotros-team  { padding-top: calc(96px  + 32px); }
.contacto-persons { padding-top: calc(96px + 32px); }
.contacto-address { padding-top: calc(80px + 32px); }
.contacto-faq   { padding-top: calc(80px  + 32px); }
.opiniones-platforms    { padding-top: calc(80px + 32px); }
.opiniones-quotes-marquee { padding-top: calc(18px + 32px); }
.opiniones-testimonials { padding-top: calc(96px + 32px); }
.noticias-voz        { padding-top: calc(90px + 32px); }
.noticias-territorio { padding-top: calc(90px + 32px); }
.apt-trust-strip { padding-top: calc(18px + 32px); }
.apt-video-desc  { padding-top: calc(72px + 32px); }
.apt-equip       { padding-top: calc(72px + 32px); }
.apt-floorplan   { padding-top: calc(80px + 32px); }
.dbt-band        { padding-top: calc(56px + 32px); }
.apt-avail       { padding-top: calc(90px + 32px); }
.apt-page-others { padding-top: calc(96px + 32px); }

/* apt-page-gallery: reordenado de z-index 48→47 para caber apt-video-desc en 48 */
.apt-page-gallery { z-index: 47; }

/* ── Correcciones z-index por página ──────────────────────────────────────────
   .nos-why y .nosotros-team comparten z-47: en la página nosotros, nos-why
   debe quedar por encima (está antes en el DOM).
   En porque-hestia, pq-valores (antes que nos-colores) necesita z > 46. */
body:has(.nosotros-hero) .nos-why    { z-index: 48; }
body:has(.porque-hero)  .pq-valores  { z-index: 46; }
body:has(.porque-hero)  .nos-colores { z-index: 45; }

/* ── Capa GPU: recorte border-radius correcto en Chromium/WebKit ─────────────
   overflow:hidden + border-radius en el mismo elemento puede no recortar el
   fondo propio en algunos navegadores. translateZ(0) fuerza composición GPU
   y asegura que la esquina BR de cada sección oscura quede transparente
   para que el color de la sección siguiente sea visible.                      */
.hero, .apt-page-hero, .page-hero,
.home-search, .counters, .manifest,
.contact-cta, .contacto-hero,
.ratings-marquee, .direct-perks-teaser, .opiniones-share-cta {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── Destellos y estrellitas decorativos — desactivados ── */
.hero .stars,
.hero .stars::before,
.hero .stars::after,
.page-hero .stars { display: none !important; }

footer::before { background-image: none !important; animation: none !important; }

.contact-cta::after,
.contacto-hero::after,
.bridge::after { animation: none !important; opacity: 0 !important; }

.header::after { animation: none !important; opacity: 0 !important; }

/* ── sky-night background animation — desactivado globalmente ── */
.section-night,
.section-dark,
.section-violet,
.manifest,
.contact-cta,
footer,
.page-hero,
.contacto-reservas,
.nosotros-team { animation: none !important; }

/* ================================================================
   STAGGER ENTRANCES — apt-cards & gallery tiles (Emil Kowalski)
   Each card fades up with a 60ms delay after the previous one.
   fill-mode: backwards keeps base transform/hover working post-animation.
   ================================================================ */
@keyframes hestia-fade-up {
  from { opacity: 0; transform: translateY(14px) translateZ(0); }
  to   { opacity: 1; transform: translateY(0)   translateZ(0); }
}

.apartments-track .apt-card,
.gallery-mosaic  .g-tile {
  animation: hestia-fade-up 420ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) backwards;
}

.apartments-track .apt-card:nth-child(1),
.gallery-mosaic  .g-tile:nth-child(1) { animation-delay:   0ms; }
.apartments-track .apt-card:nth-child(2),
.gallery-mosaic  .g-tile:nth-child(2) { animation-delay:  60ms; }
.apartments-track .apt-card:nth-child(3),
.gallery-mosaic  .g-tile:nth-child(3) { animation-delay: 120ms; }
.apartments-track .apt-card:nth-child(4),
.gallery-mosaic  .g-tile:nth-child(4) { animation-delay: 180ms; }
.apartments-track .apt-card:nth-child(5),
.gallery-mosaic  .g-tile:nth-child(5) { animation-delay: 240ms; }
.apartments-track .apt-card:nth-child(6),
.gallery-mosaic  .g-tile:nth-child(6) { animation-delay: 300ms; }
.gallery-mosaic  .g-tile:nth-child(7) { animation-delay: 360ms; }
.gallery-mosaic  .g-tile:nth-child(8) { animation-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .apartments-track .apt-card,
  .gallery-mosaic  .g-tile { animation: none; }
}

/* ================================================================
   GUÍA DESCARGABLE — sección protegida por PIN en cada apartamento
   ================================================================ */
.apt-guide {
  padding: clamp(60px, 9vw, 120px) var(--page-pad);
  background:
    radial-gradient(ellipse 70% 80% at 80% 0%, color-mix(in srgb, var(--apt-accent2) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--crema), var(--arena));
  color: var(--ink);
}
.apt-guide-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.apt-guide-copy { max-width: 44ch; }
.apt-guide-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--apt-accent);
  margin-bottom: 18px;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 50%, transparent);
}
.apt-guide-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ber-dk);
  margin: 0 0 18px;
}
.apt-guide-desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

.apt-guide-form {
  background: var(--crema);
  border: 1px solid color-mix(in srgb, var(--apt-accent) 22%, transparent);
  border-radius: 16px 0 16px 0;
  padding: 28px;
  box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--apt-accent) 50%, transparent);
  transition: border-color var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              box-shadow   var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.apt-guide-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.apt-guide-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.apt-guide-input {
  flex: 1;
  min-width: 0;
  font-family: 'Inter', system-ui, monospace;
  font-size: 15px;
  letter-spacing: 0.16em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ber-dk);
  background: var(--arena);
  border: 1.5px solid color-mix(in srgb, var(--apt-accent) 18%, transparent);
  border-radius: 10px 0 10px 0;
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              background   var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.apt-guide-input::placeholder { color: color-mix(in srgb, var(--ink-soft) 45%, transparent); letter-spacing: 0.16em; }
.apt-guide-input:focus {
  border-color: var(--apt-accent);
  background: var(--crema);
}
.apt-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crema);
  background: var(--apt-accent);
  border: 1.5px solid var(--apt-accent);
  border-radius: 10px 0 10px 0;
  padding: 12px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              border-color var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.apt-guide-arrow {
  display: inline-block;
  transition: transform var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
  .apt-guide-btn:hover {
    background: color-mix(in srgb, var(--apt-accent) 80%, var(--ber-dk));
    border-color: color-mix(in srgb, var(--apt-accent) 80%, var(--ber-dk));
  }
  .apt-guide-btn:hover .apt-guide-arrow { transform: translateY(2px); }
}
.apt-guide-btn:active {
  transform: scale(0.97);
  transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.apt-guide-msg {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin: 14px 0 0;
  color: var(--ink-soft);
  min-height: 1.4em;
  transition: color var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.apt-guide-form.is-error .apt-guide-input {
  border-color: var(--err);
  animation: apt-guide-shake 380ms cubic-bezier(.36,.07,.19,.97);
}
.apt-guide-form.is-error .apt-guide-msg { color: var(--err); }
.apt-guide-form.is-success .apt-guide-msg { color: var(--apt-accent); }

@keyframes apt-guide-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

@media (max-width: 760px) {
  .apt-guide-inner { grid-template-columns: 1fr; gap: 28px; }
  .apt-guide-row { flex-direction: column; }
  .apt-guide-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .apt-guide-form.is-error .apt-guide-input { animation: none; }
}

/* ================================================================
   GUIDE GATE — botón "Solo para huéspedes" en la página de apartamento
   ================================================================ */
.apt-guide-gate {
  padding: clamp(60px, 9vw, 110px) var(--page-pad);
  background:
    radial-gradient(ellipse 80% 70% at 80% 0%, color-mix(in srgb, var(--apt-accent, var(--sol)) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--crema), var(--arena));
  text-align: center;
}
.apt-guide-gate-inner {
  max-width: 720px;
  margin: 0 auto;
}
.apt-guide-gate-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--apt-accent, var(--sol));
  margin-bottom: 18px;
}
.apt-guide-gate-title {
  font-family: var(--serif);
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ber-dk);
  margin: 0 0 18px;
}
.apt-guide-gate-title em {
  font-style: italic;
  color: var(--apt-accent, var(--sol));
}
.apt-guide-gate-desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto 24px;
}
.apt-guide-gate-desc strong {
  color: var(--ink);
  font-weight: 600;
}
.apt-guide-gate-stats {
  list-style: none;
  margin: 0 auto 28px;
  padding: 22px 28px;
  max-width: 60ch;
  background: rgba(255, 251, 244, 0.55);
  border: 1px solid rgba(61, 26, 53, 0.10);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  text-align: left;
}
/* OJO — display: block (no flex). El flex en cada li trataba cada
   <strong> inline como un flex item independiente y descolocaba el
   texto en columnas raras cuando el li tenía varios <strong>. */
.apt-guide-gate-stats li {
  display: block;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}
.apt-guide-gate-stats li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--apt-accent, var(--sol));
  font-size: 12px;
  top: 3px;
}
.apt-guide-gate-stats li strong {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.apt-guide-gate-stats li strong + strong { margin-left: 0; }
.apt-guide-gate-foot {
  font-family: var(--sans);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 auto 20px;
  opacity: 0.85;
}
.apt-guide-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crema);
  background: var(--apt-accent, var(--sol));
  border: 1.5px solid var(--apt-accent, var(--sol));
  border-radius: 12px 0 12px 0;
  padding: 16px 32px;
  cursor: pointer;
  transition: background var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              border-color var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              box-shadow   var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--apt-accent, var(--sol)) 70%, transparent);
}
.apt-guide-gate-arrow {
  display: inline-block;
  transition: transform var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
  .apt-guide-gate-btn:hover {
    background: color-mix(in srgb, var(--apt-accent, var(--sol)) 80%, var(--ber-dk));
    border-color: color-mix(in srgb, var(--apt-accent, var(--sol)) 80%, var(--ber-dk));
    box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--apt-accent, var(--sol)) 70%, transparent);
  }
  .apt-guide-gate-btn:hover .apt-guide-gate-arrow { transform: translateX(4px); }
}
.apt-guide-gate-btn:active {
  transform: scale(0.97);
  transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* ================================================================
   PIN MODAL — diálogo para introducir el PIN de la guía
   ================================================================ */
.ag-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 12, 24, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: ag-fade-in 200ms var(--ease-out, ease-out);
}
.ag-modal {
  background: var(--crema);
  border-radius: 18px 0 18px 0;
  padding: 36px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(26, 12, 24, 0.5);
  position: relative;
  animation: ag-modal-in 320ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.ag-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease-out),
              color      var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ag-modal-close:hover { background: rgba(0,0,0,0.06); color: var(--ber-dk); }
}
.ag-modal-title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  color: var(--ber-dk);
  margin: 0 0 12px;
  padding-right: 36px;
}
.ag-modal-desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.ag-modal-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.ag-modal-input {
  width: 100%;
  font-family: 'Inter', system-ui, monospace;
  font-size: 18px;
  letter-spacing: 0.2em;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  color: var(--ber-dk);
  background: var(--arena);
  border: 1.5px solid color-mix(in srgb, var(--apt-accent, var(--sol)) 22%, transparent);
  border-radius: 10px 0 10px 0;
  padding: 14px;
  outline: none;
  transition: border-color var(--dur-base, 220ms) var(--ease-out, ease-out),
              background   var(--dur-base, 220ms) var(--ease-out, ease-out);
}
.ag-modal-input::placeholder { color: rgba(0,0,0,0.3); letter-spacing: 0.2em; }
.ag-modal-input:focus {
  border-color: var(--apt-accent, var(--sol));
  background: var(--crema);
}
.ag-modal-msg {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  margin: 12px 0 24px;
  color: var(--ink-soft);
  min-height: 1.4em;
  transition: color var(--dur-base, 220ms) var(--ease-out, ease-out);
}
.ag-modal.is-error .ag-modal-input {
  border-color: var(--err);
  animation: apt-guide-shake 380ms cubic-bezier(.36,.07,.19,.97);
}
.ag-modal.is-error .ag-modal-msg { color: var(--err); }
.ag-modal.is-success .ag-modal-msg { color: var(--apt-accent, var(--sol)); }

.ag-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.ag-modal-cancel,
.ag-modal-submit {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 10px 0 10px 0;
  padding: 12px 22px;
  cursor: pointer;
  transition: background var(--dur-base, 220ms) var(--ease-out, ease-out),
              color      var(--dur-base, 220ms) var(--ease-out, ease-out),
              border-color var(--dur-base, 220ms) var(--ease-out, ease-out);
}
.ag-modal-cancel {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--ink-soft) 30%, transparent);
  color: var(--ink-soft);
}
.ag-modal-submit {
  background: var(--apt-accent, var(--sol));
  border: 1.5px solid var(--apt-accent, var(--sol));
  color: var(--crema);
}
@media (hover: hover) and (pointer: fine) {
  .ag-modal-cancel:hover { border-color: var(--ber-dk); color: var(--ber-dk); }
  .ag-modal-submit:hover {
    background: color-mix(in srgb, var(--apt-accent, var(--sol)) 80%, var(--ber-dk));
    border-color: color-mix(in srgb, var(--apt-accent, var(--sol)) 80%, var(--ber-dk));
  }
}
.ag-modal-cancel:active,
.ag-modal-submit:active {
  transform: scale(0.97);
  transition: transform var(--dur-fast, 160ms) var(--ease-out, ease-out);
}

@keyframes ag-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ag-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ================================================================
   GUIDE VIEW — guía web integrada en la página del apartamento
   - Hero al inicio, layout sidebar + contenido, scrollspy
   - Sin chrome propio (Header/Footer del portal envuelven todo)
   ================================================================ */
.apt-guide-view {
  background-color: var(--crema);
  background-image: linear-gradient(180deg, var(--crema), color-mix(in srgb, var(--apt-accent2, var(--sol)) 4%, var(--crema)));
  color: var(--ink);
  min-height: 70vh;
}

/* HERO ----------------------------------------------------------- */
.ag-hero {
  position: relative;
  overflow: hidden;
  /* Top padding = topbar + header (~80px) + breathing room */
  padding: calc(var(--topbar-h, 36px) + 100px) var(--page-pad) clamp(56px, 8vw, 96px);
  text-align: center;
  border-bottom: none;
  background: var(--noche);
}
.ag-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ag-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.ag-hero-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.48) 0%,
    rgba(0,0,0,.62) 60%,
    rgba(0,0,0,.75) 100%
  );
}
.ag-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ag-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin: 0 0 18px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.3);
}
.ag-hero-title {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 12px;
}
.ag-hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: rgba(255,255,255,.75);
  margin: 0;
}
.ag-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 8px 0 8px 0;
  cursor: pointer;
  margin-bottom: 24px;
  backdrop-filter: blur(6px);
  transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.ag-back:hover {
  background: color-mix(in srgb, var(--apt-accent) 8%, transparent);
}
.ag-back:active { transform: scale(0.97); }

/* LAYOUT (sidebar + content) ------------------------------------ */
.ag-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--page-pad) clamp(60px, 9vw, 120px);
}
@media (max-width: 900px) {
  .ag-layout {
    display: block;
    padding-bottom: 60px;
  }
}

/* NAV LATERAL --------------------------------------------------- */
.ag-nav {
  position: sticky;
  top: calc(var(--topbar-h, 36px) + 80px);
  height: calc(100vh - 48px);
  align-self: start;
  padding-top: clamp(32px, 4vw, 56px);
}
.ag-nav-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding-right: 4px;
}
.ag-nav-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--apt-accent);
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 22%, transparent);
}
.ag-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.ag-nav-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px 7px 0;
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -10px;
  color: var(--ink-soft);
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              border-left-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.ag-nav-list a:hover {
  color: var(--ber-dk);
  border-left-color: color-mix(in srgb, var(--apt-accent) 30%, transparent);
}
.ag-nav-list a.is-active {
  color: var(--apt-accent);
  border-left-color: var(--apt-accent);
  font-weight: 600;
}
.ag-nav-num {
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
  opacity: 0.55;
  width: 22px;
  flex-shrink: 0;
}
.ag-nav-list a.is-active .ag-nav-num { opacity: 1; }
.ag-nav-text { flex: 1; }

.ag-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--apt-accent) 18%, transparent);
}
.ag-nav-btn {
  display: block;
  text-align: center;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--apt-accent) 35%, transparent);
  border-radius: 10px 0 10px 0;
  background: transparent;
  color: var(--apt-accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.ag-nav-btn:hover {
  background: color-mix(in srgb, var(--apt-accent) 8%, transparent);
}
.ag-nav-btn-primary {
  background: var(--apt-accent);
  color: var(--crema);
  border-color: var(--apt-accent);
}
.ag-nav-btn-primary:hover {
  background: color-mix(in srgb, var(--apt-accent) 80%, var(--ber-dk));
}
.ag-nav-btn:active { transform: scale(0.97); }

/* Mobile: botón de índice siempre visible (sticky) --------------- */
.ag-nav-toggle {
  display: none;
}
@media (max-width: 900px) {
  .ag-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Sticky: se queda pegado bajo el header al hacer scroll.
       topbar-h (dinámica) + ~80px de header height real en móvil */
    position: sticky;
    top: calc(var(--topbar-h, 36px) + 80px);
    z-index: 50;
    width: 100%;
    margin: 20px 0 0;
    padding: 14px 20px;
    /* Botón corporativo Hestía */
    background: var(--apt-accent);
    color: #fff;
    border: none;
    border-radius: 10px 0 10px 0;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--apt-accent) 40%, transparent);
    transition: background 0.18s ease, box-shadow 0.18s ease;
  }
  .ag-nav-toggle:hover {
    background: color-mix(in srgb, var(--apt-accent) 85%, var(--ber-dk));
    box-shadow: 0 6px 24px color-mix(in srgb, var(--apt-accent) 50%, transparent);
  }
  .ag-nav-toggle:active { transform: scale(0.98); }
  .ag-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    height: 100dvh;
    background: var(--crema);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
    padding: 24px;
  }
  .ag-nav.is-open {
    transform: translateX(0);
  }
  .ag-nav.is-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: -1;
    width: 100vw;
    margin-left: calc(-100vw + 100%);
  }
  .ag-nav-inner { height: 100%; }
}

/* CONTENT -------------------------------------------------------- */
.ag-content {
  padding-top: clamp(32px, 4vw, 56px);
  min-width: 0;
}

.ag-section {
  padding: 0 0 clamp(48px, 7vw, 80px);
  margin-bottom: clamp(48px, 7vw, 80px);
  border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 14%, transparent);
  scroll-margin-top: 24px;
}
.ag-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
.ag-section-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--apt-accent);
  margin-bottom: 12px;
}

.ag-h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ber-dk);
  margin: 0 0 24px;
  position: relative;
  padding-bottom: 16px;
}
.ag-h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--apt-accent);
}
.ag-h3 {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: var(--ber-dk);
  margin: 32px 0 14px;
}
.ag-para {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 16px;
}
.ag-para-lead {
  font-size: 17px;
  color: var(--ink);
}
.ag-note {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 15px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--apt-accent) 6%, var(--crema));
  border-left: 3px solid var(--apt-accent);
  border-radius: 0 8px 8px 0;
  margin: 16px 0 24px;
}
.ag-sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  margin: 32px 0 4px;
  color: var(--ink-soft);
}
.ag-signer {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--apt-accent);
  margin: 0;
  font-weight: 500;
}

/* RECOMMENDATIONS LIST ------------------------------------------- */
.ag-recs {
  list-style: none;
  counter-reset: rec;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 12px;
}
.ag-recs li {
  counter-increment: rec;
  position: relative;
  padding: 12px 14px 12px 44px;
  background: color-mix(in srgb, var(--apt-accent) 4%, var(--crema));
  border-radius: 10px 0 10px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.ag-recs li::before {
  content: counter(rec, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 12px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--apt-accent);
  font-size: 13px;
  font-weight: 600;
}

/* Normas de Hestía — grid de 16 items con icono + título + descripción.
   Estilo card-like sobre fondo cream tenue, dos columnas en desktop. */
.ag-section-rules .ag-h2 { margin-bottom: 8px; }
.ag-rules-grid {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px) {
  .ag-rules-grid { grid-template-columns: 1fr; }
}
.ag-rule {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--ber) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ber) 10%, transparent);
  border-radius: 12px 0 12px 0;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ag-rule:hover {
  background: color-mix(in srgb, var(--sol) 6%, transparent);
  border-color: color-mix(in srgb, var(--sol) 28%, transparent);
}
.ag-rule-icon {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sol) 12%, white);
  border: 1px solid color-mix(in srgb, var(--sol) 30%, transparent);
}
.ag-rule-body { flex: 1; min-width: 0; }
.ag-rule-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--ber-dk);
  margin: 0 0 4px;
  line-height: 1.2;
}
.ag-rule-desc {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}

/* Leyenda del mapa de la urbanización: misma estructura que .ag-recs
   pero numeración no padded (1, 2, 3...) para coincidir con los
   círculos sobre el plano aéreo. */
.ag-map-legend li::before {
  content: counter(rec);
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
}

/* SITIOS WEB TURÍSTICOS ----------------------------------------- */
.ag-sites { margin: 32px 0 0; }
.ag-sites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 22px;
  margin-top: 16px;
}
.ag-sites-group {
  background: color-mix(in srgb, var(--apt-accent) 4%, var(--crema));
  border-radius: 10px 0 10px 0;
  padding: 16px 18px 14px;
}
.ag-sites-group-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--apt-accent);
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.3;
}
.ag-sites-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.ag-sites-list li { line-height: 1.45; }
.ag-sites-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.ag-sites-list a:hover {
  color: var(--apt-accent);
  border-bottom-color: currentColor;
}
.ag-sites-arrow {
  color: var(--apt-accent);
  font-size: 12px;
  flex-shrink: 0;
}

/* PHOTO GRID ----------------------------------------------------- */
.ag-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 28px 0 32px;
}
/* Si solo hay 1 foto, hacerla full-width grande */
.ag-photo-grid[data-count="1"] {
  grid-template-columns: 1fr;
}
.ag-photo-grid[data-count="1"] .ag-photo img {
  aspect-ratio: 16/9;
}
/* 2 fotos: side by side */
.ag-photo-grid[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.ag-photo {
  margin: 0;
}
/* Frame: contiene img + watermark con anchor de posición. Sin overflow:hidden
   ni border-radius (eso va en el <img> directamente para evitar el bug de
   Safari iOS de rasterización a baja resolución). */
.ag-photo-frame {
  display: block;
  position: relative;
  line-height: 0;
}
.ag-photo-frame > img,
.ag-photo > img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px 0 10px 0;
}
.ag-photo-grid[data-count="1"] .ag-photo-frame > img,
.ag-photo-grid[data-count="1"] .ag-photo > img { aspect-ratio: 16/9; }
.ag-photo-frame > .wm-badge { z-index: 2; }
.ag-photo figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px;
  letter-spacing: 0.01em;
}

/* SURROUNDINGS / CATEGORIES ------------------------------------- */
.ag-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 24px 0;
}
.ag-cat {
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--apt-accent) 18%, transparent);
  border-radius: 12px 0 12px 0;
  background: color-mix(in srgb, var(--apt-accent) 3%, var(--crema));
}
.ag-cat .ag-h3 {
  margin: 0 0 12px;
  font-size: 17px;
}
.ag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ag-list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 14px;
  position: relative;
}
.ag-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--apt-accent);
  font-weight: 700;
  font-size: 18px;
}
.ag-list-num {
  list-style: none;
  counter-reset: r;
  padding: 0;
  margin: 16px 0 0;
}
.ag-list-num li {
  counter-increment: r;
  padding: 10px 14px 10px 40px;
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 12%, transparent);
}
.ag-list-num li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute;
  left: 12px;
  top: 10px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--apt-accent);
  font-size: 13px;
}
.ag-list-num li:last-child { border-bottom: none; }

/* MI WIFI · sección dedicada en la guía ---------------------------- */
.ag-section-wifi { /* hereda layout de .ag-section */ }
.ag-wifi-card {
  margin-top: 16px;
  padding: clamp(20px, 3vw, 32px);
  background: color-mix(in srgb, var(--apt-accent, #3AAABB) 8%, var(--crema));
  border: 1px solid color-mix(in srgb, var(--apt-accent, #3AAABB) 28%, transparent);
  border-left: 4px solid var(--apt-accent, #3AAABB);
  border-radius: 12px 0 12px 0;
  display: grid;
  gap: 14px;
  max-width: 520px;
}
.ag-wifi-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--ber-dk) 18%, transparent);
}
.ag-wifi-row:last-of-type { border-bottom: 0; }
.ag-wifi-row-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--apt-accent, #176E80);
  font-weight: 700;
  min-width: 96px;
  flex-shrink: 0;
}
.ag-wifi-row-value {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--ber-dk);
  font-weight: 700;
  letter-spacing: 0.01em;
  user-select: all;
}
.ag-wifi-row-pass {
  background: color-mix(in srgb, var(--apt-accent, #3AAABB) 14%, var(--crema));
  padding: 4px 10px;
  border-radius: 6px 0 6px 0;
}
.ag-wifi-note {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(42, 15, 46, 0.74);
  font-style: italic;
}

/* PHONES TABLE --------------------------------------------------- */
/* (regla .ag-wifi antigua eliminada — sustituida por .ag-wifi-card
   en sección dedicada). */
.ag-phones-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.ag-phones-table th {
  text-align: left;
  padding: 10px 14px 10px 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 14%, transparent);
}
.ag-phones-table td {
  text-align: right;
  padding: 10px 0 10px 14px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 15px;
  color: var(--apt-accent);
  font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 14%, transparent);
}

/* CONTENT END (back button) ------------------------------------- */
.ag-content-end {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--apt-accent) 18%, transparent);
  text-align: center;
}

/* PRINT — clean A4 export ---------------------------------------- */
@media print {
  @page { size: A4; margin: 14mm 16mm; }
  body { background: white !important; }
  body.guide-mode .apt-guide-view {
    background: white !important;
    color: black !important;
  }
  .no-print { display: none !important; }

  /* Layout becomes single column */
  .ag-layout { display: block !important; padding: 0 !important; }
  .ag-nav { display: none !important; }
  .ag-content { padding: 0 !important; }

  /* Hero */
  .ag-hero {
    background: white !important;
    border-bottom: 2px solid #ddd;
    page-break-after: always;
    padding: 40mm 0 0 !important;
    text-align: center;
  }
  .ag-hero-title { color: black !important; }
  .ag-hero-sub  { color: #555 !important; }

  /* Sections */
  .ag-section {
    padding: 0 0 14mm !important;
    margin-bottom: 14mm !important;
    border-bottom: 1px solid #ddd !important;
    page-break-inside: avoid;
    background: white !important;
  }
  .ag-h2 { color: black !important; }
  .ag-h2::after { background: var(--apt-accent) !important; }
  .ag-para, .ag-recs li, .ag-list li, .ag-phones-table th { color: #222 !important; }

  /* Photos: keep but smaller */
  .ag-photo-grid { gap: 6mm; margin: 6mm 0 8mm; }
  .ag-photo img {
    aspect-ratio: 4/3;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }

  /* Recommendations: avoid background fill in print */
  .ag-recs li {
    background: transparent !important;
    border-bottom: 1px dotted #ccc;
    border-radius: 0;
    padding: 8px 0 8px 36px;
  }

  a { color: black; text-decoration: none; }
  a:after { content: ''; }

  .ag-recs li::before, .ag-list li::before, .ag-list-num li::before { color: var(--apt-accent) !important; }
}

/* ================================================================
   GUIDE MAP — embed de Google Maps (sin coordenadas hardcoded)
   ================================================================ */
.ag-map-block {
  margin: 28px 0 36px;
  border: 1px solid color-mix(in srgb, var(--apt-accent) 18%, transparent);
  border-radius: 14px 0 14px 0;
  overflow: hidden;
  background: var(--crema);
}
.ag-map {
  width: 100%;
  height: clamp(320px, 50vh, 520px);
  display: block;
  border: 0;
}
.ag-map-note {
  padding: 12px 18px;
  border-top: 1px solid color-mix(in srgb, var(--apt-accent) 14%, transparent);
  background: color-mix(in srgb, var(--apt-accent) 4%, var(--crema));
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}
.ag-map-legend {
  padding: 16px 18px;
  border-top: 1px solid color-mix(in srgb, var(--apt-accent) 14%, transparent);
  background: color-mix(in srgb, var(--apt-accent) 4%, var(--crema));
}
.ag-map-legend-title {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--apt-accent);
  margin-bottom: 12px;
}
.ag-map-legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ag-map-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--apt-accent) 25%, transparent);
  background: var(--crema);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              opacity var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.ag-map-legend-chip:hover {
  background: color-mix(in srgb, var(--apt-accent) 6%, var(--crema));
}
.ag-map-legend-chip.is-off {
  opacity: 0.4;
  text-decoration: line-through;
}
.ag-map-legend-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.ag-map-legend-count {
  font-size: 11px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--apt-accent) 8%, transparent);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 4px;
}

/* Map markers */
.ag-map-marker { background: transparent; border: none; }
.ag-map-pin {
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.ag-map-pin span {
  transform: rotate(45deg);
  color: white;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--serif);
}
.ag-map-pin.is-home {
  width: 36px; height: 36px;
  border-radius: 50%;
  border-width: 3px;
  transform: none;
}
.ag-map-pin.is-home span {
  transform: none;
  font-size: 14px;
}

/* Popup styling */
.ag-map-popup strong { color: var(--ber-dk); font-size: 14px; }
.ag-map-popup em { color: var(--apt-accent); font-style: italic; }
.ag-map-popup a {
  display: inline-block;
  margin-top: 6px;
  color: var(--apt-accent);
  font-weight: 500;
  text-decoration: none;
}
.ag-map-popup a:hover { text-decoration: underline; }

/* ================================================================
   GUIDE PLACES LIST — lista categorizada por tipo
   ================================================================ */
.ag-cat-group {
  margin: 18px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--apt-accent) 12%, transparent);
}
.ag-cat-group:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 12%, transparent);
}
/* El head ahora es un <button> plegable. Se comporta visualmente como un h3
   pero con cursor pointer, chevron y hover. Mantengo la familia del h3. */
.ag-cat-h {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--ber-dk);
  text-align: left;
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease);
}
.ag-cat-h:hover { background: color-mix(in srgb, var(--apt-accent) 4%, transparent); }
.ag-cat-h:active { transform: scale(.998); }
.ag-cat-label { flex: 1; min-width: 0; }
.ag-cat-chev {
  font-size: 14px;
  color: var(--ink-soft);
  transition: transform .35s var(--ease-out, cubic-bezier(.23,1,.32,1));
}
.ag-cat-chev.open { transform: rotate(180deg); }
.ag-cat-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease-out, cubic-bezier(.23,1,.32,1)),
              padding .35s ease;
}
.ag-cat-group.is-open .ag-cat-body {
  max-height: 6000px;
  padding: 4px 0 18px;
}
.ag-cat-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.15);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ag-cat-h:hover .ag-cat-dot {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.22);
}
.ag-cat-icon {
  font-size: 15px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
.ag-cat-count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
  margin-left: 6px;
}
.ag-places {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.ag-place {
  padding: 12px 14px;
  background: color-mix(in srgb, var(--apt-accent) 3%, var(--crema));
  border-radius: 10px 0 10px 0;
  border: 1px solid color-mix(in srgb, var(--apt-accent) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ag-place-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ag-place-name {
  font-weight: 500;
  color: var(--ber-dk);
  font-size: 15px;
}
.ag-place-tier {
  font-family: var(--serif);
  font-style: italic;
  color: var(--apt-accent);
  font-size: 13px;
}
.ag-place-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.ag-place-link {
  font-size: 12px;
  color: var(--apt-accent);
  text-decoration: none;
  align-self: flex-start;
  letter-spacing: 0.04em;
  margin-top: 4px;
  transition: opacity var(--dur-fast, 160ms);
}
.ag-place-link:hover { opacity: 0.7; }

/* Sub-cabecera "Imperdibles" / "Más recomendaciones" dentro de cada categoría */
.ag-cat-sub-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 10px;
  padding: 0 4px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--apt-accent);
}
.ag-cat-sub-h-rest {
  color: var(--ink-soft);
  margin-top: 22px;
}
.ag-cat-sub-star {
  color: var(--apt-accent);
  font-size: 13px;
  line-height: 1;
}
.ag-place.is-featured {
  border-left: 3px solid var(--apt-accent);
  background: color-mix(in srgb, var(--apt-accent) 6%, var(--crema));
}
.ag-place-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-right: 6px;
  color: var(--apt-accent);
  font-size: 12px;
  flex-shrink: 0;
}
.ag-places-featured { margin-bottom: 4px; }

/* Rating + servicios + acceso de cada lugar (sobre todo playas) */
.ag-place-rating {
  display: inline-flex; align-items: center;
  margin-left: 8px;
  font-size: 12px;
  color: var(--apt-accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ag-place-services,
.ag-place-access {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ag-place-access { font-style: italic; opacity: .85; }
.ag-place-level {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ber-dk);
  background: rgba(232, 194, 107, 0.18);
  border-left: 3px solid var(--sol);
  border-radius: 4px;
}
.ag-place-level-tag {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ber);
  margin-right: 4px;
}

.ag-disclaimer {
  margin: 20px 0 24px;
  padding: 14px 18px;
  background: rgba(141, 110, 99, 0.08);
  border-left: 4px solid var(--ber);
  border-radius: 6px;
  display: block;
}
.ag-disclaimer-tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ber-dk);
  margin-bottom: 6px;
}
.ag-disclaimer-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Sección de Llegada y salida (check-in) */
.ag-section-checkin .ag-h3 {
  margin-top: 24px;
  margin-bottom: 10px;
}
.ag-checkin-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0 8px;
}
@media (max-width: 720px) {
  .ag-checkin-modes { grid-template-columns: 1fr; }
}
.ag-checkin-mode {
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  background: rgba(255, 251, 244, 0.6);
}
.ag-checkin-mode-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-dk);
  background: rgba(58, 170, 187, 0.14);
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.ag-checkin-mode-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.ag-checkin-garage {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(232, 194, 107, 0.18);
  border-left: 4px solid var(--sol);
  border-radius: 6px;
  margin: 6px 0 10px;
}
.ag-checkin-garage-apt {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}
.ag-checkin-garage-sep {
  color: var(--ink-soft);
}
.ag-checkin-garage-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ber-dk);
}
.ag-checkin-garage-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--ber-dk);
  font-variant-numeric: tabular-nums;
}
.ag-para-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: -4px;
}

/* Platos típicos — bloque al inicio de Sabores */
.ag-dishes {
  margin: 28px 0 36px;
}
.ag-dishes-title {
  margin: 0 0 6px;
  font-size: 19px;
}
.ag-dishes-intro {
  margin: 0 0 18px;
  color: var(--ink-soft);
}
.ag-dishes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px) {
  .ag-dishes-grid { grid-template-columns: 1fr; }
}
.ag-dish-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255, 251, 244, 0.6);
  break-inside: avoid;
}
.ag-dish-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.ag-dish-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.ag-dish-titles { flex: 1; min-width: 0; }
.ag-dish-name {
  margin: 0 0 2px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.ag-dish-region {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vt);
  background: rgba(202, 75, 38, 0.10);
  padding: 2px 7px;
  border-radius: 3px;
}
.ag-dish-desc {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.ag-dish-tip {
  margin: 6px 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: rgba(232, 194, 107, 0.14);
  border-left: 3px solid var(--sol);
  padding: 6px 10px;
  border-radius: 3px;
}
.ag-dish-tip-tag {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ber);
  margin-right: 3px;
}
.ag-dish-where {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
}
.ag-dish-where-tag {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ber-dk);
  margin-right: 6px;
}
.ag-dish-where-text {
  color: var(--ink);
}
.ag-dish-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  vertical-align: middle;
}
.ag-dish-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 11px;
  background: rgba(58, 170, 187, 0.10);
  color: var(--vt-dk);
  text-decoration: none;
  border: 1px solid rgba(58, 170, 187, 0.30);
  transition: background 150ms, border-color 150ms;
}
.ag-dish-chip:hover {
  background: rgba(58, 170, 187, 0.20);
  border-color: rgba(58, 170, 187, 0.55);
}
.ag-dish-extlink {
  color: var(--vt-dk);
  text-decoration: underline;
  font-weight: 500;
}

/* ============================================================
   Rutas de tapas — acordeón por ciudad en sección Sabores
   ============================================================ */
.ag-cat-h--static {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--apt-accent) 6%, transparent);
  border-radius: 10px 10px 0 0;
  cursor: default;
}
.ag-tapas-routes {
  border: 1px solid color-mix(in srgb, var(--apt-accent) 18%, transparent);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.ag-tapas-route { border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 12%, transparent); }
.ag-tapas-route:last-child { border-bottom: none; }
.ag-tapas-route-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  transition: background 0.15s;
}
.ag-tapas-route-btn:hover { background: color-mix(in srgb, var(--apt-accent) 5%, transparent); }
.ag-tapas-route.is-open .ag-tapas-route-btn { background: color-mix(in srgb, var(--apt-accent) 8%, transparent); }
.ag-tapas-route-city { flex: 1; }
.ag-tapas-route-body { padding: 0 16px 16px; }
.ag-tapas-intro {
  font-size: 0.88rem;
  color: var(--ink-60);
  margin: 0 0 12px;
  line-height: 1.55;
}
.ag-tapas-stops {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ag-tapas-stop {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--apt-accent) 5%, white);
  border-radius: 8px;
  border-left: 3px solid color-mix(in srgb, var(--apt-accent) 50%, transparent);
}
.ag-tapas-stop-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}
.ag-tapas-stop-what {
  font-size: 0.84rem;
  color: var(--ink-60);
  line-height: 1.5;
}
.ag-tapas-tip {
  font-size: 0.84rem;
  color: var(--ink-60);
  background: color-mix(in srgb, var(--apt-accent) 7%, transparent);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   Lugares compactos (no-featured) — solo headline, click para expandir
   ============================================================ */
.ag-places-compact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.ag-place-compact {
  background: transparent;
  border: none;
  padding: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ber) 8%, transparent);
}
.ag-place-compact:last-child { border-bottom: none; }
.ag-place-compact-head {
  display: flex;
  align-items: baseline;
  gap: 8px 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  flex-wrap: wrap;
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.ag-place-compact-head:hover {
  background: color-mix(in srgb, var(--apt-accent, var(--ber)) 4%, transparent);
}
.ag-place-compact-head:disabled {
  cursor: default;
}
.ag-place-compact-head:disabled:hover {
  background: transparent;
}
.ag-place-compact-head .ag-place-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ber-dk);
  flex: 1;
}
.ag-place-compact-head .ag-place-tier {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.ag-place-compact-head .ag-place-rating {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.ag-place-compact-chev {
  font-size: 11px;
  color: var(--ink-soft);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  margin-left: 4px;
}
.ag-place-compact-chev.open { transform: rotate(180deg); }
.ag-place-compact-body {
  padding: 0 10px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  animation: ag-compact-expand 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes ag-compact-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ag-place-compact-body { animation: none; }
  .ag-place-compact-chev { transition: none; }
}

/* Specialty / tip / best — micro-pills antes del texto en kursive */
.ag-place-specialty,
.ag-place-best,
.ag-place-tip {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}
.ag-place-specialty-tag,
.ag-place-best-tag,
.ag-place-tip-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--apt-accent, var(--ber-dk)) 75%, var(--ber-dk));
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 8px 0 8px 0;
  background: color-mix(in srgb, var(--apt-accent, var(--ber)) 8%, transparent);
  vertical-align: 1px;
}

/* Eventos y fiestas — lista de festividades por pueblo */
.ag-place-events {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--apt-accent, var(--ber)) 4%, var(--crema));
  border-left: 3px solid color-mix(in srgb, var(--apt-accent, var(--ber)) 40%, transparent);
  border-radius: 10px 0 10px 0;
}
.ag-place-events-tag {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--apt-accent, var(--ber-dk)) 80%, var(--ber-dk));
  margin-bottom: 4px;
}
.ag-place-events-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ag-place-event {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 2px 0;
  color: var(--ink);
}
.ag-place-event-name {
  font-weight: 600;
  color: var(--ber-dk);
}
.ag-place-event-when {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 12px;
}
.ag-place-event-desc {
  color: var(--ink-soft);
}

/* (Reglas de .ag-photo-wrap eliminadas — la estructura ahora es figure>img directo) */

/* ================================================================
   PRINT — hide map, keep place list
   ================================================================ */
@media print {
  .ag-map-block { display: none !important; }
  .ag-place {
    background: transparent !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
  }
  .ag-place-link { display: none; }
}

/* ================================================================
   GUIDE — Animaciones (Top 6 + bonuses)
   1) apt ↔ guide crossfade        -> .apt-main[data-phase]
   2) PIN modal success exit        -> .ag-modal.is-success
   3) Photo grid stagger reveal     -> .ag-photo[data-revealed]
   4) Map marker fade on toggle     -> .ag-map-marker.is-hidden-cat
   5) Section number slide-in       -> .ag-section-num[data-revealed]
   6) Sidebar nav active state      -> .ag-nav-list a (existing, refined)
   + gate button :active + arrow hover
   + prefers-reduced-motion handling
   ================================================================ */

/* Variables que faltaban */
:root {
  --dur-mid:  240ms;
  --dur-slow: 380ms;
}

/* 1) Apt ↔ Guide crossfade — solo opacity (filter:blur en el padre rompe
   position:fixed de hermanos como la sticky bar en algunos navegadores). */
.apt-main {
  transition: opacity var(--dur-mid) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.apt-main[data-phase="out"],
.apt-main[data-phase="in"] {
  opacity: 0;
  pointer-events: none;
}
/* phase=idle (default) → opacity 1, no blur */

/* 2) PIN modal — entry ya existe vía @keyframes ag-modal-in.
      Añadimos transición para que .is-success pueda animar el salir. */
.ag-modal {
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity   220ms cubic-bezier(0.23, 1, 0.32, 1),
              filter    220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.ag-modal.is-success {
  transform: scale(0.96);
  opacity: 0;
  filter: blur(4px);
  /* deshabilita la entry keyframe para que la transition tome el control */
  animation: none;
}
/* El backdrop del modal acompaña el desvanecimiento */
.ag-modal-backdrop:has(.ag-modal.is-success) {
  background: rgba(20, 8, 24, 0);
  transition: background 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* 3) Photo grid — render limpio sin halos + entry fade safe.
   Estructura simplificada: <figure class="ag-photo"> contiene <img> directo
   más watermark. Sin wrap intermedio. El border-radius va en el <img> mismo
   para evitar el bug de Safari iOS de rasterización a baja resolución que
   creaba el halo. La animación de entrada usa SOLO opacity — sin filter ni
   transform — para garantizar que no produzca halos ni soft-focus. */
.ag-photo,
.ag-photo-frame,
.ag-photo-frame > img,
.ag-photo > img {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.ag-photo-frame > img,
.ag-photo > img {
  background: transparent !important;
  image-rendering: auto;
}
.ag-photo {
  opacity: 1;
  transition: opacity 500ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  transition-delay: calc(var(--i, 0) * 60ms);
}
@starting-style {
  .ag-photo { opacity: 0; }
}

/* 4) Map markers — fade y scale al togglear categoría */
.ag-map-pin {
  transition: opacity 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.ag-map-marker.is-hidden-cat .ag-map-pin {
  opacity: 0;
  transform: rotate(-45deg) scale(0.55);
  pointer-events: none;
}
.ag-map-marker.is-hidden-cat .ag-map-pin.is-home {
  transform: scale(0.55);
}

/* 5) Section numbers — slide-in lateral via @starting-style.
   Solo transform + opacity — sin filter, no causa halo. */
.ag-section-num {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 600ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@starting-style {
  .ag-section-num {
    opacity: 0;
    transform: translateX(-10px);
  }
}

/* 6) Sidebar nav — transición suave del active state + bg fade */
.ag-nav-list a {
  transition: color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              border-left-color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              padding-left 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.ag-nav-list a.is-active {
  background: color-mix(in srgb, var(--apt-accent) 5%, transparent);
}

/* + Gate button: :active scale + arrow translate on hover */
.apt-guide-gate-btn {
  transition: transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              border-color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.apt-guide-gate-btn:active { transform: scale(0.97); }
.apt-guide-gate-arrow {
  transition: transform 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
  .apt-guide-gate-btn:hover .apt-guide-gate-arrow { transform: translateX(4px); }
}

/* + Map legend chip: :active feedback */
.ag-map-legend-chip { transition: background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
                                  opacity 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
                                  transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
.ag-map-legend-chip:active { transform: scale(0.97); }

/* + Back button (volver al apartamento): :active scale */
.ag-back { transition: background 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
                       transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
.ag-back:active { transform: scale(0.97); }

/* prefers-reduced-motion — desactivamos movimiento, mantenemos opacity/color */
@media (prefers-reduced-motion: reduce) {
  .apt-main,
  .ag-photo,
  .ag-section-num,
  .ag-map-pin,
  .ag-modal,
  .ag-nav-list a {
    transition-property: opacity, color, background, border-color !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .ag-photo,
  .ag-section-num {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .apt-guide-gate-btn:active,
  .ag-back:active,
  .ag-map-legend-chip:active {
    transform: none !important;
  }
  .ag-map-marker.is-hidden-cat .ag-map-pin {
    transform: rotate(-45deg) scale(1) !important;
    /* Solo opacity para "ocultar" sin movimiento */
  }
}

/* Map legend head: title + show all / hide all */
.ag-map-legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.ag-map-legend-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ag-map-legend-action {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--apt-accent);
  cursor: pointer;
  border-radius: 4px;
  transition: background 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  font-weight: 500;
}
.ag-map-legend-action:hover { background: color-mix(in srgb, var(--apt-accent) 8%, transparent); }
.ag-map-legend-action:active { transform: scale(0.97); }
.ag-map-legend-sep { color: var(--ink-soft); opacity: 0.5; font-size: 12px; }

/* ================================================================
   LAYER 99 · /p-edit.html (admin de precios, oculto, no enlazado)
   ================================================================ */
.pe-body { background: var(--crema); min-height: 100vh; font-family: var(--sans); color: var(--ber-dk); }
.pe-shell { max-width: 920px; margin: 0 auto; padding: 32px 20px 80px; }
.pe-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; margin-bottom: 24px;
  background: var(--ber-dk); color: var(--arena);
  border-radius: 10px 0 10px 0;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.pe-topbar .pe-meta { font-size: 11px; opacity: .65; letter-spacing: .04em; text-transform: none; margin-left: auto; }
.pe-card {
  background: var(--crema); padding: 24px 26px;
  border: 1px solid rgba(61,26,53,0.08);
  border-radius: 10px 0 10px 0;
  margin-bottom: 18px;
}
.pe-card h1 { font-family: var(--serif); font-size: 28px; font-weight: 400; margin: 0 0 12px; }
.pe-card h2 { font-family: var(--serif); font-size: 19px; font-weight: 400; margin: 0 0 14px; }
.pe-lede { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 14px; }
.pe-grid {
  display: grid; gap: 18px 22px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pe-field { display: flex; flex-direction: column; gap: 6px; }
.pe-field label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); display: flex; align-items: center; gap: 8px;
}
.pe-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.pe-input {
  width: 100%; padding: 10px 12px;
  background: white;
  border: 1px solid rgba(61,26,53,0.18);
  border-radius: 6px 0 6px 0;
  font: inherit; font-size: 14px;
  color: var(--ber-dk);
  transition: border-color .15s ease;
}
.pe-input:focus { outline: none; border-color: var(--ber); }
.pe-input-num { font-variant-numeric: tabular-nums; }
.pe-input-row { display: flex; align-items: center; gap: 8px; }
.pe-suffix { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.pe-hint { font-size: 11px; color: var(--ink-soft); display: block; }
.pe-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pe-textarea {
  width: 100%; padding: 12px 14px;
  background: var(--crema);
  border: 1px solid rgba(61,26,53,0.18);
  border-radius: 6px 0 6px 0;
  font-size: 12px; line-height: 1.45;
  resize: vertical; min-height: 320px;
}
.pe-textarea:focus { outline: none; border-color: var(--ber); }
.pe-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pe-table th, .pe-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(61,26,53,.08); }
.pe-table th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.pe-table input { max-width: 110px; }
.pe-btn {
  padding: 11px 22px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 8px 0 8px 0; border: 1px solid var(--ber);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.pe-btn-primary { background: var(--ber); color: var(--crema); }
.pe-btn-primary:hover { background: var(--ber-dk); border-color: var(--ber-dk); }
.pe-btn-primary:active { transform: scale(0.98); }
.pe-btn-primary[disabled] { opacity: .4; cursor: not-allowed; }
.pe-btn-ghost {
  background: transparent;
  color: var(--ber);                                  /* eggplant sobre crema, AA */
  border-color: rgba(61, 26, 53, 0.35);
}
.pe-btn-ghost:hover {
  background: rgba(61, 26, 53, 0.06);
  border-color: var(--ber);
  color: var(--ber-dk);
}
/* En la topbar oscura, el ghost necesita color cream — eggplant sobre
   eggplant es invisible. Override con !important para vencer cualquier
   especificidad de hover/active heredada del crema. */
.pe-topbar .pe-btn-ghost {
  color: var(--crema) !important;
  border-color: rgba(240, 232, 213, 0.42) !important;
}
.pe-topbar .pe-btn-ghost:hover {
  background: rgba(240, 232, 213, 0.10) !important;
  border-color: var(--crema) !important;
  color: var(--crema) !important;
}
.pe-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px 0; }
.pe-error {
  padding: 12px 16px; margin-top: 12px;
  background: var(--err-bg); color: var(--err-dk);
  border-left: 3px solid var(--err);
  border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.5;
}
.pe-success {
  padding: 12px 16px; margin-bottom: 18px;
  background: var(--ok-bg); color: var(--ok-dk);
  border-left: 3px solid var(--ok-dk);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
}
.pe-help {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(61,26,53,.08);
  font-size: 12px; line-height: 1.6; color: var(--ink-soft);
}
.pe-help ol { margin: 6px 0 0 18px; padding: 0; }
.pe-help code { background: rgba(61,26,53,.06); padding: 1px 5px; border-radius: 3px; }
.pe-lbl {
  display: block; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
}
@media (max-width: 600px) {
  .pe-shell { padding: 18px 12px 60px; }
  .pe-card { padding: 18px 16px; }
  .pe-topbar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pe-topbar .pe-meta { margin-left: 0; }
}

/* ================================================================
   LAYER 60 · Direct booking — banda compacta + modal con carrusel
   La banda (.dbt-*) se coloca encima del calendario; el botón abre
   el modal (.dbm-*) que muestra cifras clave + carrusel de ventajas.
   ================================================================ */
.app-match {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  opacity: 0.85;
  color: var(--sol-lt);
}

/* ── Trigger band ──
   Fondo crema sólido con un wash sol — siempre legible sobre cualquier
   sección que la rodee (hero oscuro, calendario oscuro, etc.). Bordes
   redondeados visibles arriba/abajo para que la banda 'flote' del flujo. */
.dbt-band {
  padding: 56px var(--page-pad) 56px;
  text-align: center;
  /* Solid fallback: si los color-mix() de los gradients fallan, esta queda */
  background-color: var(--crema);
  background-image:
    radial-gradient(1100px 320px at 50% 0%, color-mix(in srgb, var(--sol) 30%, transparent), transparent 60%),
    linear-gradient(180deg, var(--crema), color-mix(in srgb, var(--sol) 10%, var(--crema)));
  border-top: 1px solid color-mix(in srgb, var(--sol) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--sol) 30%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Elemento decorativo: dos comillas serif tenues en el fondo */
.dbt-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--sol) 18%, transparent), transparent 80px),
    radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--ber) 8%, transparent), transparent 80px);
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   Reserva directa · banda animada — hace que la sección llame
   la atención sin saturar.
   Animaciones (todas respetan prefers-reduced-motion):
     · gradient sweep:  el aura dorada superior se desplaza
       suavemente de izquierda a derecha y vuelve.
     · sparkles:        cinco asteriscos serif flotan en bucle
       en posiciones distintas y con tempos distintos.
     · eyebrow dot:     punto que late.
     · em underline:    'siempre' lleva un subrayado que se
       dibuja en bucle.
     · button pulse:    halo dorado que pulsa alrededor del
       botón CTA cada 2.6 s.
   ============================================================ */
@keyframes dbt-bg-sweep {
  0%   { background-position: 50% 0%, 0 0; }
  50%  { background-position: 60% 0%, 0 0; }
  100% { background-position: 40% 0%, 0 0; }
}
@keyframes dbt-spark-float {
  0%, 100% { transform: translateY(0) rotate(0deg);   opacity: .55; }
  50%      { transform: translateY(-14px) rotate(180deg); opacity: 1; }
}
@keyframes dbt-pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: .35; }
}
@keyframes dbt-underline-draw {
  0%, 12%   { transform: scaleX(0); transform-origin: left center; }
  55%       { transform: scaleX(1); transform-origin: left center; }
  56%       { transform-origin: right center; }
  88%, 100% { transform: scaleX(0); transform-origin: right center; }
}
@keyframes dbt-btn-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.dbt-band-animated {
  background-size: 1100px 320px, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: dbt-bg-sweep 9s ease-in-out infinite;
}
.dbt-spark {
  position: absolute;
  font-family: var(--serif);
  font-size: 18px;
  color: color-mix(in srgb, var(--sol) 70%, var(--ber-dk));
  opacity: .55;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 0;
}
.dbt-spark-1 { top: 18%; left: 8%;  font-size: 22px; animation: dbt-spark-float 5.0s ease-in-out infinite; }
.dbt-spark-2 { top: 68%; left: 14%; font-size: 14px; animation: dbt-spark-float 6.4s ease-in-out -1.2s infinite; color: color-mix(in srgb, var(--ber) 60%, var(--ber-dk)); }
.dbt-spark-3 { top: 26%; right: 12%; font-size: 16px; animation: dbt-spark-float 5.8s ease-in-out -2.6s infinite; }
.dbt-spark-4 { top: 74%; right: 9%;  font-size: 20px; animation: dbt-spark-float 7.2s ease-in-out -3.4s infinite; color: color-mix(in srgb, var(--sol) 80%, transparent); }
.dbt-spark-5 { top: 50%; left: 50%; transform: translateX(-50%); font-size: 12px; animation: dbt-spark-float 4.6s ease-in-out -0.6s infinite; opacity: .35; }

.dbt-eyebrow {
  position: relative;
  z-index: 1;
}
.dbt-eyebrow-dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--sol);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sol) 30%, transparent);
  animation: dbt-pulse-dot 1.8s ease-in-out infinite;
}
.dbt-title em {
  position: relative;
}
.dbt-title em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: linear-gradient(90deg, var(--sol), var(--ber));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: dbt-underline-draw 5.2s ease-in-out infinite;
}
.dbt-btn { position: relative; overflow: visible; isolation: isolate; }
.dbt-btn-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 10px 0 10px 0;
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--sol) 70%, transparent);
  pointer-events: none;
  z-index: -1;
  animation: dbt-btn-pulse 2.6s cubic-bezier(.4,0,.2,1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dbt-band-animated { animation: none; }
  .dbt-spark,
  .dbt-eyebrow-dot,
  .dbt-title em::after,
  .dbt-btn-pulse { animation: none; }
  .dbt-title em::after { transform: scaleX(1); opacity: .5; }
  .dbt-spark { display: none; }
}
.dbt-inner { max-width: 720px; margin: 0 auto; }
.dbt-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--ber);
}
.dbt-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 28px;
  color: var(--ber-dk);
}
.dbt-title em { font-style: italic; color: var(--ber); }
.dbt-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  background: var(--sol);
  color: var(--ber-dk);
  border: 1px solid var(--sol);
  border-radius: 10px 0 10px 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--sol) 28%, transparent);
  transition: transform .25s var(--ease-out, cubic-bezier(.23,1,.32,1)),
              background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.dbt-btn:hover {
  background: var(--sol-h);
  border-color: var(--sol-h);
  color: var(--crema);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--sol) 40%, transparent);
}
.dbt-btn:active { transform: translateY(0) scale(.98); }
.dbt-arrow {
  font-size: 16px;
  transition: transform .25s var(--ease-out, cubic-bezier(.23,1,.32,1));
}
.dbt-btn:hover .dbt-arrow { transform: translateX(4px); }

/* ── Modal backdrop + container ── */
/* 1. ENTRADA CINEMATOGRÁFICA — backdrop con blur progresivo + modal spring */
.dbm-backdrop {
  position: fixed; inset: 0;
  z-index: 9000;
  background: rgba(26, 12, 24, 0.0);
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: dbm-backdrop .42s cubic-bezier(.4, 0, .2, 1) forwards;
  isolation: isolate;
}
@keyframes dbm-backdrop {
  0%   { background: rgba(26, 12, 24, 0.0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
  100% { background: rgba(26, 12, 24, 0.74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.dbm-modal {
  position: relative;
  background: var(--crema);
  border-radius: 18px 0 18px 0;
  max-width: 600px;
  width: 100%;
  max-height: min(90vh, 720px);
  overflow: hidden auto;
  padding: 40px 36px 28px;
  box-shadow: 0 30px 80px rgba(42,15,46,.45),
              0 0 0 1px color-mix(in srgb, var(--perk-c1, #3AAABB) 24%, transparent);
  animation: dbm-rise .55s cubic-bezier(.22, 1.18, .36, 1) both;
  text-align: center;
  isolation: isolate;
  /* tinte por perk — la card se sintoniza con el color de la ventaja */
  --perk-c1: #3AAABB;
  --perk-c2: #6FC4D1;
  transition: box-shadow .5s ease;
}
@keyframes dbm-rise {
  0%   { opacity: 0; transform: translateY(32px) scale(.92); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* 5 · MOTES ambientales — partículas turquesas flotando detrás */
.dbm-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.dbm-mote {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--perk-c1) 80%, white) 0%, transparent 70%);
  filter: blur(0.5px);
  opacity: 0;
  /* posiciones distribuidas con seed */
  --mote-x: calc((var(--mote-i) * 73) % 100 * 1%);
  --mote-y: calc((var(--mote-i) * 137 + 13) % 100 * 1%);
  --mote-dur: calc(7s + ((var(--mote-i) * 13) % 6) * 1s);
  --mote-delay: calc((var(--mote-i) * 0.4s) - 2s);
  left: var(--mote-x);
  top: var(--mote-y);
  animation: dbm-mote var(--mote-dur) ease-in-out infinite;
  animation-delay: var(--mote-delay);
}
.dbm-mote:nth-child(odd)  { width: 5px; height: 5px; }
.dbm-mote:nth-child(3n)   { width: 3px; height: 3px; }
@keyframes dbm-mote {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  20%      { opacity: 0.65; }
  50%      { transform: translate3d(20px, -28px, 0) scale(1.1); opacity: 0.9; }
  80%      { opacity: 0.45; }
}
/* el contenido del modal va por encima de las motas */
.dbm-modal > *:not(.dbm-motes) { position: relative; z-index: 1; }
.dbm-close {
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1;
  color: var(--ber-dk);
  border-radius: 50%;
  transition: background .25s ease;
}
.dbm-close:hover { background: rgba(61,26,53,.08); }

.dbm-head { margin-bottom: 22px; }
.dbm-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.2;
  margin: 8px 0 0;
  color: var(--ber-dk);
}
.dbm-title em { font-style: italic; color: var(--ber); }

/* ── Stat ribbon dentro del modal ── */
.dbm-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 24px;
}
.dbm-stat {
  background: color-mix(in srgb, var(--perk-c1, var(--sol)) 14%, var(--crema));
  padding: 12px 6px;
  border-radius: 10px 0 10px 0;
  border-left: 2px solid var(--perk-c1, var(--sol));
  text-align: center;
  /* Stagger entrance — cada stat entra 80 ms después del anterior */
  opacity: 0;
  transform: translateY(8px);
  animation: dbm-stat-in .55s cubic-bezier(.22, 1.18, .36, 1) forwards;
  animation-delay: calc(380ms + var(--stagger, 0ms));
  transition: background .5s ease, border-color .5s ease;
}
@keyframes dbm-stat-in {
  to { opacity: 1; transform: translateY(0); }
}
.dbm-num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 400;
  color: var(--ber-dk);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dbm-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Carrusel: nav + card ── */
.dbm-carousel {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
}
.dbm-nav {
  width: 36px; height: 36px;
  background: var(--crema);
  border: 1px solid rgba(61,26,53,.18);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--ber);
  font-family: var(--serif);
  line-height: 1;
  transition: background .25s, color .25s, transform .15s var(--ease-out);
}
.dbm-nav:hover { background: var(--ber); color: var(--crema); border-color: var(--ber); }
.dbm-nav:active { transform: scale(.92); }
/* 6 · TINTE POR PERK — la card cambia su acento con el color de la ventaja
   actual (data-perk en el JSX). 3 · DIRECTION-AWARE SLIDE: .is-from-right
   entra desde la derecha, .is-from-left desde la izquierda. */
.dbm-card {
  background-color: var(--crema);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--perk-c1, var(--sol)) 12%, var(--crema)),
    color-mix(in srgb, var(--perk-c2, var(--sol-lt)) 4%, var(--crema)));
  border-left: 4px solid var(--perk-c1, var(--sol));
  border-radius: 14px 0 14px 0;
  padding: 26px 24px 22px;
  text-align: left;
  min-height: 184px;
  transition: background-image .5s ease, border-color .5s ease, box-shadow .5s ease;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--perk-c2, var(--sol-lt)) 18%, transparent);
  animation: dbm-card-in .45s cubic-bezier(.22, 1, .36, 1) both;
}
.dbm-card.is-from-right { animation-name: dbm-card-from-right; }
.dbm-card.is-from-left  { animation-name: dbm-card-from-left; }
@keyframes dbm-card-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
@keyframes dbm-card-from-right {
  from { opacity: 0; transform: translateX(36px); filter: blur(3px); }
  to   { opacity: 1; transform: translateX(0);    filter: blur(0); }
}
@keyframes dbm-card-from-left {
  from { opacity: 0; transform: translateX(-36px); filter: blur(3px); }
  to   { opacity: 1; transform: translateX(0);     filter: blur(0); }
}

/* 4 · STAGGER REVEAL dentro de la card — cada hijo entra escalonado */
.dbm-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(6px);
  animation: dbm-staggered .42s cubic-bezier(.22, 1, .36, 1) .08s forwards;
}
.dbm-card-t {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--ber-dk);
  line-height: 1.22;
  opacity: 0;
  transform: translateY(6px);
  animation: dbm-staggered .42s cubic-bezier(.22, 1, .36, 1) .20s forwards;
}
.dbm-card-d {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  animation: dbm-staggered .55s cubic-bezier(.22, 1, .36, 1) .32s forwards;
}
@keyframes dbm-staggered {
  to { opacity: 1; transform: translateY(0); }
}
.dbm-icon {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--perk-c1, #2A0F2E) 35%, transparent));
  display: inline-block;
  animation: dbm-icon-pop .55s cubic-bezier(.22, 1.4, .36, 1) both;
}
@keyframes dbm-icon-pop {
  from { opacity: 0; transform: scale(.4) rotate(-12deg); }
  to   { opacity: 1; transform: scale(1)  rotate(0); }
}
.dbm-card-stat {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--perk-c1, var(--ber));
  font-variant-numeric: tabular-nums;
  transition: color .5s ease;
}

/* ── Dots + counter ── */
.dbm-dots {
  display: flex; justify-content: center; gap: 8px;
  margin: 0 0 10px;
}
.dbm-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(61,26,53,.2);
  border: 0; padding: 0; cursor: pointer;
  transition: background .25s ease, transform .25s var(--ease-out, cubic-bezier(.23,1,.32,1));
}
.dbm-dot:hover { background: rgba(61,26,53,.4); }
.dbm-dot.active {
  background: var(--perk-c1, var(--ber));
  transform: scale(1.4);
  box-shadow: 0 0 8px color-mix(in srgb, var(--perk-c1, var(--sol)) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .dbm-backdrop, .dbm-modal, .dbm-stat, .dbm-card,
  .dbm-card-head, .dbm-card-t, .dbm-card-d, .dbm-icon { animation: none; opacity: 1; transform: none; filter: none; }
  .dbm-mote { animation: none; opacity: 0; }
}
.dbm-counter {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.dbm-cta {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--ber);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: 10px 0 10px 0;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--ber) 35%, transparent);
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.dbm-cta:hover {
  background: color-mix(in srgb, var(--ber) 85%, #000);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--ber) 45%, transparent);
  transform: translateY(-1px);
}
.dbm-cta:active { transform: translateY(0); }

@media (max-width: 600px) {
  .dbt-band { padding: 36px var(--page-pad) 30px; }
  .dbm-modal { padding: 32px 22px 24px; max-height: 92vh; }
  .dbm-ribbon { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .dbm-carousel { grid-template-columns: 32px 1fr 32px; }
  .dbm-card { padding: 22px 20px; min-height: 0; }
  .dbm-card-stat { font-size: 22px; }
  .dbm-card-t { font-size: 18px; }
}

/* ================================================================
   LAYER 65 · Guía · Top-5 playas destacadas
   ================================================================ */
.ag-top5 {
  margin: 28px 0 32px;
  padding: 24px 22px 18px;
  background-color: var(--crema);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--apt-accent) 6%, var(--crema)), var(--crema));
  border-left: 4px solid var(--apt-accent);
  border-radius: 14px 0 14px 0;
}
.ag-top5-head {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 14%, transparent);
}
.ag-top5-head .eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--apt-accent);
}
.ag-top5-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ag-top5-item {
  display: grid;
  grid-template-columns: 36px 88px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 4px;
  border-radius: 10px 0 10px 0;
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease);
}
.ag-top5-item:hover { background: color-mix(in srgb, var(--apt-accent) 4%, transparent); }
.ag-top5-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--apt-accent);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ag-top5-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 64px; width: 88px;
  background: color-mix(in srgb, var(--apt-accent) 14%, var(--crema));
  border: 1px solid color-mix(in srgb, var(--apt-accent) 22%, transparent);
  border-radius: 8px 0 8px 0;
  text-decoration: none;
  color: var(--apt-accent);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform .15s var(--ease-out);
}
.ag-top5-photo:hover {
  background: var(--apt-accent);
  color: var(--crema);
  transform: translateY(-2px);
}
.ag-top5-photo-icon { font-size: 22px; line-height: 1; }
.ag-top5-photo-label { font-size: 11px; }
.ag-top5-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ag-top5-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ber-dk);
  line-height: 1.2;
}
.ag-top5-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ag-top5-links {
  display: flex;
  gap: 18px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.ag-top5-links a {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--apt-accent);
  font-weight: 500;
  text-decoration: none;
}
.ag-top5-links a:hover { opacity: 0.7; }
.ag-top5-name-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.ag-top5-rating {
  font-size: 12px;
  color: var(--apt-accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ag-top5-meta {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 2px;
}
.ag-top5-meta em {
  font-style: normal;
  font-weight: 500;
  color: var(--ber-dk);
  margin-right: 4px;
}

/* ================================================================
   LAYER 66 · Planes de día (itinerarios curados de Alex y Fran)
   ================================================================ */
.ag-day-plans {
  margin: 36px 0 12px;
  padding: 24px 22px 18px;
  background-color: var(--crema);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--apt-accent) 5%, var(--crema)), var(--crema));
  border-left: 4px solid var(--apt-accent);
  border-radius: 14px 0 14px 0;
}
.ag-day-plans-head {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 14%, transparent);
}
.ag-day-plans-head .eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--apt-accent);
}
.ag-day-plans-disclaimer {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-style: italic;
  margin: 10px 0 0;
}
/* Filtro de audiencia (con niños / sin niños / todos) */
.dp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  background: transparent;
  width: fit-content;
}
.dp-tab {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--apt-accent, var(--ber)) 22%, transparent);
  padding: 7px 14px;
  border-radius: 10px 0 10px 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ber-dk);
  cursor: pointer;
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease), color var(--dur-fast) var(--ease-out);
}
.dp-tab:hover {
  color: var(--apt-accent);
  background: color-mix(in srgb, var(--apt-accent, var(--ber)) 6%, transparent);
}
.dp-tab.active {
  background: var(--apt-accent);
  color: var(--crema);
  border-color: var(--apt-accent);
}

.dp-group { margin: 18px 0 10px; }
.dp-group-title {
  display: flex; flex-direction: column;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--ber-dk);
}
.dp-group-title small {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}
.dp-cards { display: flex; flex-direction: column; gap: 10px; }

.dp-card {
  background: var(--crema);
  border: 1px solid color-mix(in srgb, var(--apt-accent) 14%, transparent);
  border-radius: 10px 0 10px 0;
  overflow: hidden;
  transition: border-color var(--dur-fast, 160ms) var(--ease-out, ease);
}
.dp-card.is-open { border-color: color-mix(in srgb, var(--apt-accent) 35%, transparent); }
.dp-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.dp-card-head:hover { background: color-mix(in srgb, var(--apt-accent) 4%, transparent); }
.dp-card-time {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--apt-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: .02em;
}
.dp-card-arrow { margin: 0 4px; opacity: .6; }
.dp-card-title {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ber-dk);
  line-height: 1.25;
  min-width: 0;
}
.dp-card-chev {
  font-size: 13px;
  color: var(--ink-soft);
  transition: transform .35s var(--ease-out, cubic-bezier(.23,1,.32,1));
}
.dp-card-chev.open { transform: rotate(180deg); }
.dp-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease-out, cubic-bezier(.23,1,.32,1)),
              padding .35s ease;
}
.dp-card.is-open .dp-card-body {
  max-height: 2400px;
  padding: 0 18px 18px;
}
.dp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dp-tag {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--apt-accent);
  background: color-mix(in srgb, var(--apt-accent) 8%, var(--crema));
  padding: 4px 10px;
  border-radius: 999px;
}

/* Timeline */
.dp-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  position: relative;
}
.dp-timeline::before {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px; left: 4px;
  width: 2px;
  background: color-mix(in srgb, var(--apt-accent) 22%, transparent);
}
.dp-step {
  position: relative;
  padding: 10px 0 10px 22px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: baseline;
}
.dp-step::before {
  content: '';
  position: absolute;
  left: -4px; top: 16px;
  width: 10px; height: 10px;
  background: var(--apt-accent);
  border: 2px solid var(--crema);
  border-radius: 50%;
}
.dp-step-time {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--apt-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dp-step-body { display: flex; flex-direction: column; gap: 2px; }
.dp-step-what {
  font-size: 14px;
  font-weight: 500;
  color: var(--ber-dk);
  line-height: 1.3;
}
.dp-step-detail {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.dp-tip {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--sol) 14%, var(--crema));
  border-left: 3px solid var(--sol);
  border-radius: 0 10px 0 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.dp-tip-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ber-dk);
  font-weight: 500;
}
.dp-tip-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ber-dk);
  font-style: italic;
}

@media (max-width: 600px) {
  .ag-day-plans { padding: 18px 14px; }
  .dp-card-head { grid-template-columns: auto 1fr auto; gap: 10px; padding: 10px 12px; }
  .dp-card-time { font-size: 12px; }
  .dp-card-title { font-size: 14px; }
  .dp-step { grid-template-columns: 48px 1fr; gap: 10px; padding-left: 18px; }
  .dp-step-time { font-size: 12px; }
}
@media (max-width: 600px) {
  .ag-top5 { padding: 18px 16px; }
  .ag-top5-item { grid-template-columns: 28px 64px 1fr; gap: 10px; }
  .ag-top5-photo { width: 64px; height: 52px; }
  .ag-top5-photo-icon { font-size: 18px; }
}

/* ================================================================
   LAYER 67 · AptDesktopSidebar · widget lateral de reserva directa
   y acceso a la guía. Solo visible en escritorio/iPad (≥900 px).
   ================================================================ */
.apt-desktop-sidebar {
  display: none;  /* hidden by default; revealed at min-width: 900 */
}
@media (min-width: 900px) {
  .apt-desktop-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 296px;
    max-width: 28vw;
    z-index: 88;
    pointer-events: auto;
  }
}
.ads-min {
  position: absolute;
  top: -10px; right: -10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ber-dk);
  color: var(--sol);
  border: 0;
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(42,15,46,.4);
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 4px;
  transition: background .25s ease, transform .15s var(--ease-out, ease);
}
.ads-min:hover { background: var(--ber); transform: scale(1.06); }

/* Estado minimizado: pill flotante a la derecha que restaura al pulsarse */
.apt-desktop-sidebar-mini {
  display: none;
}
@media (min-width: 900px) {
  .apt-desktop-sidebar-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 88;
    background: var(--ber-dk);
    color: var(--crema);
    border: 0;
    padding: 12px 14px 12px 18px;
    border-radius: 999px 0 0 999px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    box-shadow: -6px 8px 24px rgba(42,15,46,.36);
    transition: background .25s ease, padding .25s ease;
  }
  .apt-desktop-sidebar-mini:hover {
    background: var(--ber);
    padding-right: 18px;
  }
}
.ads-mini-star { color: var(--sol); font-size: 14px; }
.ads-mini-label { line-height: 1; }

.ads-card {
  background: var(--ber-dk);
  color: var(--arena);
  border-radius: 14px 0 14px 0;
  border-left: 4px solid var(--sol);
  padding: 22px 22px 20px;
  box-shadow: 0 12px 40px rgba(42,15,46,.36);
  position: relative;
}
.ads-card .eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--sol);
  font-size: 11px;
  letter-spacing: .18em;
}
.ads-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--crema);
}
.ads-title em { font-style: italic; color: var(--sol); }

.ads-stats {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ads-stat {
  background: rgba(255,255,255,.05);
  border-left: 2px solid var(--sol);
  padding: 10px 12px;
  border-radius: 6px 0 6px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ads-stat strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}
.ads-stat span {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arena);
  opacity: .75;
}

.ads-text {
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 14px;
  color: var(--arena);
  opacity: .85;
}

.ads-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  background-color: #3AAABB !important;
  background-image: none !important;
  color: #2A0F2E !important;
  border: 0 !important;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(58,170,187,.35);
  transition: background-color .25s ease, transform .15s var(--ease-out, ease), box-shadow .25s ease;
}
.ads-btn:hover {
  background-color: #6FC4D1 !important;
  color: #2A0F2E !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(58,170,187,.5);
}
.ads-btn:active { transform: translateY(0) scale(.98); }
.ads-btn-ghost {
  background-color: transparent !important;
  background-image: none !important;
  color: #F0E8D5 !important;
  border: 1px solid #F0E8D5 !important;
  box-shadow: none;
}
.ads-btn-ghost:hover {
  background-color: rgba(240,232,213,.16) !important;
  color: #F0E8D5 !important;
  border-color: #F0E8D5 !important;
}

@media (min-width: 1100px) {
  .apt-desktop-sidebar { width: 320px; }
}

/* ================================================================
   LAYER 68 · WidgetStack · pila de widgets flotantes independientes
   en el lateral derecho. Cada widget se minimiza a una pastilla
   corporativa (forma rounded-left, recta a la derecha, ✦ + label).
   Tres widgets posibles: Reserva directa, ¿Sabías que?, Mi guía
   privada (este último solo en páginas Hestía).
   ================================================================ */

.widget-stack {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 88;
  display: none; /* hidden by default; revealed at min-width: 900 */
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  max-height: calc(100vh - 120px);
  pointer-events: auto;
  transition: opacity .35s ease, transform .35s ease;
}
@media (min-width: 900px) {
  .widget-stack { display: flex; }
}
.widget-stack.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(20px);
}

/* Card común — fondo ber-dk, borde apt-accent (default sol),
   redondeado asimétrico. */
.widget-card {
  position: relative;
  width: 244px;
  max-width: 24vw;
  /* Bulletproof: hex literal + bordes muy explícitos para que el
     widget se vea sobre CUALQUIER fondo, incluido ber-dk eggplant
     animado del contact-cta / footer / section-dark.                */
  background: #4E2446 !important;            /* ber-lt literal — distintos de bg page */
  color: #F0E8D5 !important;                 /* arena literal */
  border-radius: 12px 0 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.18);   /* borde blanco tenue siempre visible */
  border-left: 3px solid var(--apt-accent, #3AAABB);
  padding: 13px 14px 12px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(58, 170, 187, 0.30);          /* halo sol más fuerte */
}
@media (min-width: 1100px) {
  .widget-card { width: 260px; }
}

/* Botón minimizar de cada card (arriba-derecha del propio card). */
.widget-min-btn {
  position: absolute;
  top: -8px; right: -8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ber-dk);
  color: var(--apt-accent, var(--sol));
  border: 0;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 9px rgba(42,15,46,.4);
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 3px;
  transition: background .25s ease, transform .15s var(--ease-out, ease);
}
.widget-min-btn:hover { background: var(--ber); transform: scale(1.06); }

/* Eyebrow + título dentro del card. */
.widget-card .eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--apt-accent, var(--sol));
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.widget-title {
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 500;
  color: var(--arena);
  margin: 0 0 12px;
  line-height: 1.22;
}
.widget-title em {
  font-style: italic;
  color: var(--apt-accent, var(--sol));
  font-weight: 500;
}

/* Stats del widget de Reserva directa. */
.widget-stats {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.widget-stat {
  display: flex; flex-direction: column;
}
.widget-stat strong {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--apt-accent, var(--sol));
  font-weight: 500;
  line-height: 1.05;
}
.widget-stat span {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--arena);
  opacity: .85;
  margin-top: 2px;
  line-height: 1.3;
}

/* Texto del widget de guía. */
.widget-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--arena);
  opacity: .88;
  margin: 0 0 12px;
}

/* CTA común a todos los widgets — bulletproof, **formato botón**.
   Full-width dentro de la card, padding generoso, esquinas asimétricas
   (mismo lenguaje que .btn-primary / .dbt-btn). Default sol turquesa
   sólido. En apt pages, override por data-apt cambia al accent. */
.widget-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 6px;
  border-radius: 10px 0 10px 0;
  background-color: #3AAABB !important;
  background-image: none !important;
  color: #2A0F2E !important;
  border: 0 !important;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(58,170,187,.40);
  transition: background-color .25s ease, color .25s ease, transform .15s ease, box-shadow .25s ease;
}
.widget-cta > span:last-child {
  font-size: 14px;
  line-height: 1;
  transition: transform .25s var(--ease-out, cubic-bezier(.23,1,.32,1));
}
.widget-cta:hover {
  background-color: #6FC4D1 !important;
  color: #2A0F2E !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 20px rgba(58,170,187,.55);
}
.widget-cta:hover > span:last-child { transform: translateX(3px); }
.widget-cta:active { transform: translateY(0) scale(.98); }
.widget-cta-ghost {
  background-color: transparent !important;
  color: #F0E8D5 !important;
  border: 1px solid #F0E8D5 !important;
  font-weight: 700 !important;
  box-shadow: none;
}
.widget-cta-ghost:hover {
  background-color: rgba(240,232,213,.16) !important;
  color: #F0E8D5 !important;
  border-color: #F0E8D5 !important;
}

/* Overrides por apt — botón ventajas toma color del Hestía.
   Selector reforzado con [data-apt=…] sobre el body O sobre .apt-main
   para que gane al !important del default. */
[data-apt="mar"] .widget-cta,
body[data-apt="mar"] .widget-cta {
  background-color: #6B7A3A !important;
  color: #F0E8D5 !important;
  box-shadow: 0 4px 14px rgba(107,122,58,.50) !important;
}
[data-apt="mar"] .widget-cta:hover,
body[data-apt="mar"] .widget-cta:hover {
  background-color: #8B9A52 !important;
  color: #2A0F2E !important;
  box-shadow: 0 7px 20px rgba(107,122,58,.65) !important;
}
[data-apt="thalassa"] .widget-cta,
body[data-apt="thalassa"] .widget-cta {
  background-color: #B86A3C !important;
  color: #2A0F2E !important;
  box-shadow: 0 4px 14px rgba(184,106,60,.50) !important;
}
[data-apt="thalassa"] .widget-cta:hover,
body[data-apt="thalassa"] .widget-cta:hover {
  background-color: #D4906A !important;
  color: #2A0F2E !important;
  box-shadow: 0 7px 20px rgba(184,106,60,.65) !important;
}
[data-apt="salinas"] .widget-cta,
body[data-apt="salinas"] .widget-cta {
  background-color: #D4A84A !important;
  color: #2A0F2E !important;
  box-shadow: 0 4px 14px rgba(212,168,74,.50) !important;
}
[data-apt="salinas"] .widget-cta:hover,
body[data-apt="salinas"] .widget-cta:hover {
  background-color: #E8C170 !important;
  color: #2A0F2E !important;
  box-shadow: 0 7px 20px rgba(212,168,74,.65) !important;
}

/* Body del Sabías que. */
.widget-sabias .sf-body { transition: opacity .35s; }
.widget-sabias .sf-body.sf-in  { opacity: 1; }
.widget-sabias .sf-body.sf-out { opacity: 0; }
/* Override: tamaños compactos para el sabias-que dentro del widget */
.widget-sabias .sf-label {
  font-size: 12px;
  letter-spacing: .14em;
  margin-bottom: 6px;
  color: var(--apt-accent, var(--sol-lt));
}
.widget-sabias .sf-text {
  font-size: 13px;
  line-height: 1.42;
}
.widget-sabias .sf-nav {
  margin-top: 9px;
  padding-top: 8px;
}
.widget-sabias .sf-nav-btn {
  font-size: 16px;
  padding: 2px 8px;
  color: var(--apt-accent, var(--sol-lt));
}
.widget-sabias .sf-counter {
  font-size: 12px;
}

/* ── Widget Top Recomendaciones (Imprescindibles Vera y Almería) ── */
.widget-recs .tr-body { transition: opacity .35s; }
.widget-recs .tr-body.tr-in  { opacity: 1; }
.widget-recs .tr-body.tr-out { opacity: 0; }
.widget-recs .tr-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
}
.widget-recs .tr-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.widget-recs .tr-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--sol);
  margin: 0;
  line-height: 1.2;
}
.widget-recs .tr-place {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--arena);
  opacity: .65;
  margin: 4px 0 6px;
}
.widget-recs .tr-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--arena);
  opacity: .85;
  margin: 0;
}
.widget-recs .sf-nav {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(240,232,213,.12);
}
.widget-recs .tr-map {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sol);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--sol);
  transition: background .25s ease, color .25s ease;
}
.widget-recs .tr-map:hover {
  background: var(--sol);
  color: var(--ber-dk);
}

/* ── Botón corporativo unificado de los 3 widgets ──────────────────
   Forma con dos esquinas redondeadas en diagonal + border-left
   (igual que las .widget-card). Color: --apt-accent del Hestía
   actual (vm cyan, vt marrón, vs dorado). Default sol en el resto
   de la web. */
/* widget-mini bulletproof — hex literales para que iPad no pueda
   renderizar nada distinto a sol turquesa con texto eggplant.
   Background animado (gradient pan + sutil pulso de halo) para llamar
   la atención sin agredir. */
.widget-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #3AAABB !important;
  background-image: linear-gradient(
    105deg,
    #3AAABB 0%,
    #6FC4D1 32%,
    #3AAABB 55%,
    #2A8E9E 78%,
    #3AAABB 100%
  ) !important;
  background-size: 280% 100% !important;
  background-position: 0% 50%;
  color: #2A0F2E !important;
  border: 0;
  border-left: 3px solid #3AAABB !important;
  border-radius: 12px 0 12px 0;
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 6px 18px rgba(42,15,46,.45),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 18px rgba(58,170,187,.30);
  transition: transform .15s ease, border-color .25s ease, box-shadow .35s ease;
  white-space: nowrap;
  animation: widgetMiniShimmer 7s ease-in-out infinite, widgetMiniPulse 3.4s ease-in-out infinite;
}
@keyframes widgetMiniShimmer {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes widgetMiniPulse {
  0%, 100% {
    box-shadow:
      0 6px 18px rgba(42,15,46,.45),
      0 0 0 1px rgba(255,255,255,.10),
      0 0 14px rgba(58,170,187,.25);
  }
  50% {
    box-shadow:
      0 8px 22px rgba(42,15,46,.50),
      0 0 0 1px rgba(255,255,255,.18),
      0 0 28px rgba(58,170,187,.55);
  }
}
.widget-mini:hover {
  transform: translateX(-2px);
  animation-play-state: paused;
  background-image: linear-gradient(105deg, #6FC4D1 0%, #3AAABB 100%) !important;
  background-position: 0% 50% !important;
}
@media (prefers-reduced-motion: reduce) {
  .widget-mini { animation: none !important; background-image: none !important; }
}
.widget-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(42, 15, 46, 0.22);         /* eggplant tinte sobre sol */
  color: #2A0F2E;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background .25s ease, color .25s ease;
}
.widget-mini:hover .widget-mini-icon {
  background: rgba(240,232,213,.18);
  color: #2A0F2E;
}
.widget-mini-label { line-height: 1; }

/* Compat: alias .widget-mini-access se mantiene como no-op (ya hereda
   todo el estilo unificado del .widget-mini). */
.widget-mini-access {}

/* En páginas Hestía (Mar/Thalassa/Salinas) los widgets plegados toman
   el color del apartamento. Hex literales para evitar fallos de parser
   en iPad y mantener AA con texto crema #F0E8D5. */
/* Widget-mini en páginas apt: chip ghost — fondo casi transparente
   sobre el bg del apt, borde + halo del color del Hestía, y el texto
   del label se rellena con el gradient del apt (background-clip: text).
   Pierde el shimmer pero gana ligereza visual. */
[data-apt="mar"] .widget-mini,
body[data-apt="mar"] .widget-mini {
  background-color: rgba(107, 122, 58, 0.18) !important;
  background-image: none !important;
  border: 1px solid rgba(139, 154, 82, 0.55) !important;
  border-left: 3px solid #8B9A52 !important;
  box-shadow:
    0 6px 18px rgba(42,15,46,.45),
    0 0 22px rgba(107,122,58,.35) !important;
  animation: widgetMiniPulse 3.4s ease-in-out infinite !important;
}
[data-apt="mar"] .widget-mini .widget-mini-label,
body[data-apt="mar"] .widget-mini .widget-mini-label {
  background: linear-gradient(105deg, #B5C77A 0%, #8B9A52 50%, #B5C77A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-apt="mar"] .widget-mini-icon,
body[data-apt="mar"] .widget-mini-icon {
  background: rgba(139, 154, 82, 0.30) !important;
  color: #B5C77A !important;
}
[data-apt="mar"] .widget-mini:hover,
body[data-apt="mar"] .widget-mini:hover {
  background-color: rgba(107, 122, 58, 0.30) !important;
  border-color: #B5C77A !important;
  box-shadow:
    0 8px 22px rgba(42,15,46,.50),
    0 0 32px rgba(107,122,58,.55) !important;
}
[data-apt="mar"] .widget-mini-icon {
  background: rgba(240,232,213,.20);
  color: #F0E8D5;
}
[data-apt="mar"] .widget-mini:hover .widget-mini-icon {
  background: rgba(42,15,46,.22);
  color: #2A0F2E;
}

[data-apt="thalassa"] .widget-mini,
body[data-apt="thalassa"] .widget-mini {
  background-color: rgba(138, 74, 36, 0.20) !important;
  background-image: none !important;
  border: 1px solid rgba(184, 106, 60, 0.55) !important;
  border-left: 3px solid #B86A3C !important;
  box-shadow:
    0 6px 18px rgba(42,15,46,.45),
    0 0 22px rgba(184,106,60,.35) !important;
  animation: widgetMiniPulse 3.4s ease-in-out infinite !important;
}
[data-apt="thalassa"] .widget-mini .widget-mini-label,
body[data-apt="thalassa"] .widget-mini .widget-mini-label {
  background: linear-gradient(105deg, #E69875 0%, #B86A3C 50%, #E69875 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-apt="thalassa"] .widget-mini-icon,
body[data-apt="thalassa"] .widget-mini-icon {
  background: rgba(184, 106, 60, 0.30) !important;
  color: #E69875 !important;
}
[data-apt="thalassa"] .widget-mini:hover,
body[data-apt="thalassa"] .widget-mini:hover {
  background-color: rgba(138, 74, 36, 0.32) !important;
  border-color: #E69875 !important;
  box-shadow:
    0 8px 22px rgba(42,15,46,.50),
    0 0 32px rgba(184,106,60,.55) !important;
}
[data-apt="thalassa"] .widget-mini-icon {
  background: rgba(240,232,213,.22);
  color: #F0E8D5;
}
[data-apt="thalassa"] .widget-mini:hover .widget-mini-icon {
  background: rgba(42,15,46,.22);
  color: #2A0F2E;
}

[data-apt="salinas"] .widget-mini,
body[data-apt="salinas"] .widget-mini {
  background-color: rgba(158, 122, 44, 0.22) !important;
  background-image: none !important;
  border: 1px solid rgba(212, 168, 74, 0.60) !important;
  border-left: 3px solid #D4A84A !important;
  box-shadow:
    0 6px 18px rgba(42,15,46,.45),
    0 0 22px rgba(212,168,74,.40) !important;
  animation: widgetMiniPulse 3.4s ease-in-out infinite !important;
}
[data-apt="salinas"] .widget-mini .widget-mini-label,
body[data-apt="salinas"] .widget-mini .widget-mini-label {
  background: linear-gradient(105deg, #F0CE7A 0%, #D4A84A 50%, #F0CE7A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-apt="salinas"] .widget-mini-icon,
body[data-apt="salinas"] .widget-mini-icon {
  background: rgba(212, 168, 74, 0.30) !important;
  color: #F0CE7A !important;
}
[data-apt="salinas"] .widget-mini:hover,
body[data-apt="salinas"] .widget-mini:hover {
  background-color: rgba(158, 122, 44, 0.34) !important;
  border-color: #F0CE7A !important;
  box-shadow:
    0 8px 22px rgba(42,15,46,.50),
    0 0 32px rgba(212,168,74,.60) !important;
}
[data-apt="salinas"] .widget-mini-icon {
  background: rgba(42,15,46,.22);
  color: #2A0F2E;
}
[data-apt="salinas"] .widget-mini:hover .widget-mini-icon {
  background: rgba(42,15,46,.30);
  color: #2A0F2E;
}

/* En mobile el stack se oculta — ya hay banda inline en cada página
   y el mobile-chat se encarga de la guía. */
@media (max-width: 767px), (max-height: 600px) {
  .widget-stack { display: none !important; }
}

/* Respeta la sticky bar de Hestía: si está activa, sube el stack
   un poco más para no chocar visualmente con el chat flotante. */
body.apt-bar-shown .widget-stack {
  top: calc(50% - var(--apt-sticky-h, 0px) / 2);
}

/* ================================================================
   LAYER 69 · GuestAccessModal · acceso huéspedes desde cualquier
   página, con selector de Hestía + entrada de PIN.
   ================================================================ */
.ga-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,12,24,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: ag-fade-in 200ms var(--ease-out, ease-out);
}
.ga-modal {
  background: var(--crema);
  border-radius: 18px 0 18px 0;
  padding: 32px 32px 28px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(26,12,24,.5);
  position: relative;
  animation: ag-modal-in 320ms var(--ease-out, cubic-bezier(.23,1,.32,1));
}
.ga-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border: 0; background: transparent;
  font-size: 24px; color: var(--ink-soft);
  cursor: pointer; border-radius: 8px;
  transition: background .16s ease, color .16s ease;
}
.ga-modal-close:hover { background: rgba(0,0,0,.06); color: var(--ber-dk); }
.ga-modal-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ga-accent, var(--apt-accent, var(--sol)));
  font-weight: 600;
  margin-bottom: 6px;
}
.ga-modal-title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  color: var(--ber-dk);
  margin: 0 0 10px;
  padding-right: 36px;
}
.ga-modal-desc {
  font-family: var(--sans);
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

/* PASO 1 · selector de Hestía: 3 cards filled-accent */
.ga-apt-grid {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.ga-apt-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--ga-accent) 8%, var(--crema));
  border: 1.5px solid color-mix(in srgb, var(--ga-accent) 30%, transparent);
  border-left: 4px solid var(--ga-accent);
  border-radius: 12px 0 12px 0;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .15s ease;
}
.ga-apt-card:hover {
  background: color-mix(in srgb, var(--ga-accent) 16%, var(--crema));
  border-color: var(--ga-accent);
  transform: translateX(2px);
}
.ga-apt-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ga-accent);
  color: var(--crema);
  font-size: 14px;
}
.ga-apt-name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ber-dk);
  font-weight: 500;
  line-height: 1.2;
}
.ga-apt-concept {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.ga-apt-arrow {
  font-size: 18px;
  color: var(--ga-accent);
  transition: transform .25s ease;
}
.ga-apt-card:hover .ga-apt-arrow { transform: translateX(3px); }

/* PASO 2 · entrada de PIN */
.ga-modal-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.ga-modal-input {
  width: 100%;
  font-family: 'Inter', system-ui, monospace;
  font-size: 18px;
  letter-spacing: .2em;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  color: var(--ber-dk);
  background: var(--arena);
  border: 1.5px solid color-mix(in srgb, var(--ga-accent, var(--sol)) 22%, transparent);
  border-radius: 10px 0 10px 0;
  padding: 14px;
  outline: none;
  transition: border-color .22s ease, background .22s ease;
}
.ga-modal-input::placeholder { color: rgba(0,0,0,.3); letter-spacing: .2em; }
.ga-modal-input:focus {
  border-color: var(--ga-accent, var(--sol));
  background: var(--crema);
}
.ga-modal-msg {
  font-family: var(--sans);
  font-size: 12px; line-height: 1.5;
  margin: 12px 0 22px;
  color: var(--ink-soft);
  min-height: 1.4em;
  transition: color .22s ease;
}
.ga-modal.is-error .ga-modal-input {
  border-color: var(--err);
  animation: apt-guide-shake 380ms cubic-bezier(.36,.07,.19,.97);
}
.ga-modal.is-error .ga-modal-msg { color: var(--err); }
.ga-modal.is-success .ga-modal-msg { color: var(--ga-accent, var(--sol)); }

.ga-modal-actions {
  display: flex; gap: 10px;
  justify-content: space-between;
  align-items: center;
}
.ga-modal-back,
.ga-modal-submit {
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 10px 0 10px 0;
  padding: 12px 22px;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.ga-modal-back {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--ink-soft) 30%, transparent);
  color: var(--ink-soft);
}
.ga-modal-back:hover { border-color: var(--ber-dk); color: var(--ber-dk); }
.ga-modal-submit {
  background: var(--ga-accent, var(--apt-accent, var(--sol)));
  border: 1.5px solid var(--ga-accent, var(--apt-accent, var(--sol)));
  color: var(--crema);
  margin-left: auto;
}
.ga-modal-submit:hover {
  background: color-mix(in srgb, var(--ga-accent, var(--sol)) 80%, var(--ber-dk));
  border-color: color-mix(in srgb, var(--ga-accent, var(--sol)) 80%, var(--ber-dk));
}
.ga-modal-back:active,
.ga-modal-submit:active { transform: scale(.97); transition: transform .16s ease; }

/* ── Calendar editor in p-edit ── */
.pe-h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  margin: 24px 0 12px;
  color: var(--ber-dk);
}
/* Calendar editor — cards horizontales (antes apilados a ancho
   completo, demasiado verticales). Grid auto-fit que pone 2-4
   cards por fila según el ancho. Cada card es compacto y los
   rangos son filas flex en lugar de una <table> con thead. */
.pe-cal-seasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.pe-cal-card {
  background: rgba(61,26,53,.025);
  border-left: 3px solid var(--season-c, rgba(61,26,53,.18));
  border-radius: 6px 0 6px 0;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pe-cal-card-special { border-left-color: rgba(176,106,60,.5); }
.pe-cal-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pe-cal-card-head strong {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ber-dk);
  line-height: 1.1;
}
.pe-cal-mult {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pe-cal-add {
  margin-left: auto;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61,26,53,.18);
  background: #FFFBF4;
  color: var(--ber-dk);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease;
}
.pe-cal-add:hover { background: rgba(58,170,187,.12); }
.pe-cal-empty {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}
.pe-cal-ranges {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pe-cal-range {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pe-cal-range .pe-input-date { flex: 1 1 0; min-width: 0; }
.pe-cal-arrow {
  font-size: 11px;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.pe-cal-remove {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.pe-cal-remove:hover {
  background: rgba(176,106,60,.12);
  color: #8a4a24;
}
/* Puentes: una fila por puente, ocupa todo el ancho */
.pe-cal-bridges-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.pe-cal-bridges-h .pe-h3 { margin: 0; }
.pe-cal-bridges-h .pe-btn-sm { margin-left: auto; }
.pe-cal-bridges {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}
.pe-cal-bridge {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pe-cal-bridge-name { flex: 2 1 0; min-width: 0; }
.pe-cal-bridge .pe-input-date { flex: 1 1 0; min-width: 0; }
.pe-input-date {
  font-family: var(--sans);
  font-size: 12.5px;
  padding: 5px 7px;
}
.pe-btn-sm {
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .08em;
  margin-left: auto;
}

/* ── Opiniones hero · vídeo de fondo ── */
.opiniones-hero { min-height: 60vh; position: relative; overflow: hidden; }
.opiniones-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.85;
}
.opiniones-hero-wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(42,15,46,.78) 0%, rgba(42,15,46,.42) 38%, rgba(42,15,46,.10) 75%, transparent 100%),
    linear-gradient(to right, rgba(42,15,46,.22) 0%, transparent 55%);
  z-index: 1;
  pointer-events: none;
}
.opiniones-hero .stars { z-index: 2; }
.opiniones-hero .page-hero-content { position: relative; z-index: 3; }

/* Validación de cobertura del calendario en p-edit */
.pe-validate-ok {
  margin: 0 0 18px;
  font-size: 13px;
}
.pe-validate {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}
.pe-validate-block {
  padding: 12px 14px;
  border-radius: 8px 0 8px 0;
  border-left: 3px solid;
  font-size: 13px;
  line-height: 1.5;
}
.pe-validate-block strong { display: block; margin-bottom: 6px; font-weight: 600; }
.pe-validate-block ul { margin: 0; padding-left: 18px; }
.pe-validate-block li { margin: 2px 0; font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 12.5px; }
.pe-validate-gaps {
  background: rgba(245, 158, 11, .08);
  border-left-color: var(--warn);
  color: var(--warn-dk);
}
.pe-validate-overlaps {
  background: rgba(239, 68, 68, .08);
  border-left-color: var(--err);
  color: var(--err-dk);
}
.pe-validate-sources { color: var(--ink-soft); font-size: 12px; }

/* ── Mejor precio garantizado · sustituye a la comparativa vs OTAs ── */
.price-guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px 0 12px 0;
  background: var(--apt-accent, var(--sol));
  color: var(--ber-dk);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-guarantee-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ber);
  opacity: 0.78;
  text-align: right;
  max-width: 200px;
  line-height: 1.4;
}

/* Acciones del formulario de reservas: 2 botones (WhatsApp + Email)
   en fila, cada uno se habilita según campos rellenos. */
.reservas-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.reservas-actions > .btn { flex: 1 1 220px; }
.reservas-submit-mail {
  width: 100%;
  padding: 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ber);
  border: 1.5px solid var(--ber);
  border-radius: 10px 0 10px 0;
  cursor: pointer;
  transition: background var(--dur-liquid) var(--ease-liquid),
              color var(--dur-liquid) var(--ease-liquid);
}
.reservas-submit-mail:hover { background: var(--ber); color: var(--crema); }

/* ================================================================
   PROFESIONALIZACIÓN DE FOTOS INTERIORES POR HESTÍA
   ================================================================
   Mismo enfoque sutil que las cards de la home: brightness +
   saturate + contrast ligeramente elevados para que la luz natural
   de cada Hestía "respire", sin que parezca un filtro de Instagram.
   Aplicado a galería principal, plano de planta y miniaturas de
   "otros Hestías". transition para que el efecto sea suave al
   cargar la imagen. */

.apt-main[data-apt="vm"] .gc-slide img,
.apt-main[data-apt="vm"] .apt-fp-img,
.apt-main[data-apt="vm"] .apt-other-img {
  filter: brightness(1.04) saturate(1.10) contrast(1.02);
  transition: filter .6s ease, transform .8s ease;
}
.apt-main[data-apt="vt"] .gc-slide img,
.apt-main[data-apt="vt"] .apt-fp-img,
.apt-main[data-apt="vt"] .apt-other-img {
  filter: brightness(1.06) saturate(1.18) contrast(1.04);
  transition: filter .6s ease, transform .8s ease;
}
.apt-main[data-apt="vs"] .gc-slide img,
.apt-main[data-apt="vs"] .apt-fp-img,
.apt-main[data-apt="vs"] .apt-other-img {
  filter: brightness(1.05) saturate(1.14) contrast(1.03);
  transition: filter .6s ease, transform .8s ease;
}

/* Sutil "lift" al pasar el cursor sobre una foto de la galería —
   refuerza la sensación profesional sin ser invasivo. */
@media (hover: hover) and (pointer: fine) {
  .apt-main[data-apt="vm"] .gc-slide:hover img { filter: brightness(1.05) saturate(1.14) contrast(1.03); }
  .apt-main[data-apt="vt"] .gc-slide:hover img { filter: brightness(1.07) saturate(1.22) contrast(1.05); }
  .apt-main[data-apt="vs"] .gc-slide:hover img { filter: brightness(1.06) saturate(1.18) contrast(1.04); }
}

/* ── Tabs y filtros de la nueva sección de opiniones ───────────── */
.opiniones-tt-sub {
  text-align: center;
  font-size: 14px;
  color: color-mix(in srgb, var(--arena) 78%, transparent);
  max-width: 620px;
  margin: 14px auto 24px;
  line-height: 1.5;
}
.opiniones-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 28px;
}
.opiniones-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px 0 12px 0;
  border: 1.5px solid rgba(240, 232, 213, 0.45);   /* +contraste vs antes 0.22 */
  background: transparent;
  color: #F0E8D5;                                  /* arena sólido literal */
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.opiniones-tab:hover {
  background: rgba(240, 232, 213, 0.10);
  border-color: rgba(240, 232, 213, 0.75);
  color: #FFFFFF;
}
.opiniones-tab.is-active {
  background: #3AAABB !important;                  /* sol sólido — AAA con ber-dk text */
  color: #2A0F2E !important;                       /* ber-dk literal */
  border-color: #3AAABB !important;
  font-weight: 700;
}
.opiniones-tab.is-active .opiniones-tab-count { color: #2A0F2E; opacity: 0.85; }
.opiniones-tab-count {
  font-size: 11px;
  opacity: 0.85;
  letter-spacing: .04em;
  font-weight: 500;
}
.opiniones-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sol-h);
  font-weight: 600;
  margin: 24px 0 14px;
}
.osl-star { color: var(--sol); font-size: 14px; }
.opiniones-empty {
  text-align: center;
  font-size: 14px;
  color: color-mix(in srgb, var(--arena) 70%, transparent);
  font-style: italic;
  padding: 40px 0;
}
.testimonial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.testimonial-source {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--src-color, #3D1A35) 10%, transparent);
  color: var(--src-color, var(--ber-dk));
  border: 1px solid color-mix(in srgb, var(--src-color, #3D1A35) 32%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
}
.opiniones-expand-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.opiniones-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px 0 12px 0;
  background-color: #3AAABB !important;   /* sol turquesa sólido */
  background-image: none !important;
  color: #2A0F2E !important;              /* ber-dk */
  border: 0 !important;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background-color .25s ease, transform .15s ease, box-shadow .25s ease;
  box-shadow: 0 4px 18px rgba(58,170,187,.35);
}
.opiniones-expand-btn:hover {
  background-color: #6FC4D1 !important;
  color: #2A0F2E !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(58,170,187,.5);
}

/* CTA WhatsApp en .contact-cta — bulletproof. El .btn-primary genérico
   queda lavado por el ::before sheen sobre el fondo oscuro animado.
   Forzamos sol turquesa sólido + ber-dk text con hex literales. */
a.cta-wa-btn,
.contact-cta a.cta-wa-btn {
  background-color: #3AAABB !important;
  background-image: none !important;
  color: #2A0F2E !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(58,170,187,.35);
}
a.cta-wa-btn:hover,
.contact-cta a.cta-wa-btn:hover {
  background-color: #6FC4D1 !important;
  color: #2A0F2E !important;
  box-shadow: 0 6px 22px rgba(58,170,187,.5);
}
a.cta-wa-btn::before,
.contact-cta a.cta-wa-btn::before { display: none !important; }

/* ================================================================
   ESCRIBIR OPINIÓN — formulario público en /escribir-opinion
   ================================================================ */
.eo-hero {
  min-height: 40vh;
  background: linear-gradient(135deg, var(--ber-dk) 0%, var(--ber) 60%, color-mix(in srgb, var(--sol) 18%, var(--ber)) 100%);
  color: var(--crema);
  position: relative;
}
.eo-hero .page-hero-content { color: var(--crema); }

.eo-form-sec {
  background: var(--crema);
  padding: clamp(56px, 8vw, 96px) var(--page-pad);
}
.eo-form {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
  background: var(--arena);
  padding: clamp(24px, 4vw, 40px);
  border-radius: 18px 0 18px 0;
  border-left: 3px solid var(--sol);
  box-shadow: 0 12px 40px rgba(42,15,46,.10);
}
.eo-row { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .eo-row { grid-template-columns: 1fr 1fr; } }

.eo-field { display: flex; flex-direction: column; gap: 6px; }
.eo-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ber);
  font-weight: 600;
}
.eo-input, .eo-textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 14.5px;
  padding: 12px 14px;
  background: var(--crema);
  border: 1.5px solid color-mix(in srgb, var(--ber) 18%, transparent);
  border-radius: 10px 0 10px 0;
  color: var(--ber-dk);
  transition: border-color .25s ease;
}
.eo-input:focus, .eo-textarea:focus {
  outline: none;
  border-color: var(--sol);
}
.eo-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.eo-help {
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
}
.eo-help-warn {
  color: #b85a00;
}
/* Honeypot: fuera del viewport — bots lo ven, humanos no */
.eo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  tabindex: -1;
}
.eo-err {
  font-size: 12px;
  color: var(--err);
  font-weight: 500;
  margin-top: 2px;
}
.eo-required {
  color: var(--err);
  font-weight: 600;
  margin-left: 2px;
}
.eo-input-pin {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
}
.eo-input-pin::placeholder {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-weight: 400;
}

/* Selector de Hestía */
.eo-apt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.eo-apt-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--crema);
  border: 1.5px solid color-mix(in srgb, var(--ber) 16%, transparent);
  border-radius: 10px 0 10px 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ber-dk);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.eo-apt-pick:hover { border-color: var(--ber); }
.eo-apt-pick.is-on {
  border-color: var(--sol);
  background: color-mix(in srgb, var(--sol) 12%, var(--crema));
}
.eo-apt-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
}
.eo-apt-dot[data-apt="vm"] { background: var(--sol); }
.eo-apt-dot[data-apt="vt"] { background: #8A4A24; }
.eo-apt-dot[data-apt="vs"] { background: var(--vs-dk); }

/* Estrellas clicables */
.eo-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.eo-star {
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--ber) 24%, transparent);
  font-size: 30px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.eo-star.is-on { color: var(--sol); }
.eo-star:hover { transform: scale(1.12); }
.eo-stars-num {
  margin-left: 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ber);
  font-weight: 500;
}

.eo-actions { display: flex; justify-content: flex-end; }
.eo-submit { min-width: 220px; justify-content: center; }
.eo-error-msg {
  margin-top: 8px;
  padding: 12px 16px;
  background: rgba(192,57,43,.1);
  border-left: 3px solid var(--err);
  border-radius: 8px 0 8px 0;
  color: var(--err-dk);
  font-size: 13px;
}

/* Estado success */
.eo-success {
  background: var(--crema);
  padding: clamp(56px, 8vw, 96px) var(--page-pad);
}
.eo-success-card {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
  background: var(--arena);
  padding: clamp(36px, 5vw, 56px);
  border-radius: 18px 0 18px 0;
  border-left: 3px solid var(--sol);
}
.eo-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sol);
  color: var(--ber-dk);
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 18px;
}
.eo-success-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  color: var(--ber-dk);
  margin: 0 0 14px;
}
.eo-success-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 14px;
}
.eo-success-extra {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 28px;
}

/* CTA en /opiniones que enlaza a /escribir-opinion */
.opiniones-share-cta {
  background: var(--ber-dk);
  color: var(--arena);
  padding: clamp(56px, 8vw, 88px) var(--page-pad);
  text-align: center;
}
.osc-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sol);
  margin-bottom: 14px;
}
.osc-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  color: var(--arena);
  margin: 0 0 16px;
  font-weight: 400;
}
.osc-title em { color: var(--sol); font-style: italic; }
.osc-text {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(240,232,213,.82);
}
.osc-btn { display: inline-flex; }

/* ── Reviews admin (/r-edit) ──────────────────────────────────── */
.pe-rev-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  margin-top: 8px;
}
.pe-rev-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pe-rev-flbl {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-right: 4px;
}
.pe-rev-row { position: relative; }
.pe-rev-pending { border-left: 4px solid var(--warn); }

/* PasteFromEmail — vista previa del parseo */
.pe-paste-err {
  color: var(--err);
  font-size: 13px;
  font-weight: 500;
}
.pe-paste-preview {
  margin-top: 18px;
  padding: 18px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
}
.pe-paste-preview-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.pe-paste-preview-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--warn);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pe-paste-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 14px;
  margin: 0;
  font-size: 14px;
}
.pe-paste-grid dt {
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: start;
  padding-top: 2px;
}
.pe-paste-grid dd {
  margin: 0;
  color: var(--ink);
}
.pe-paste-grid dd em { color: var(--ink-soft); font-style: italic; }
.pe-paste-text {
  white-space: pre-wrap;
  line-height: 1.55;
  padding: 8px 10px;
  background: white;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  max-height: 200px;
  overflow-y: auto;
}
.pe-rev-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pe-rev-status {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
}
.pe-rev-source-badge {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.pe-rev-id {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--ink-soft);
  opacity: .6;
}
.pe-rev-del { margin-left: auto; }
.pe-rev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.pe-link {
  color: var(--apt-accent, var(--ber));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.pe-link:hover { color: var(--ber-dk); }

/* ── Tabs en /p-edit (Pricing | Reviews) ──────────────────────── */
.pe-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.pe-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--arena);
  color: var(--ber);
  border: 1.5px solid color-mix(in srgb, var(--ber) 18%, transparent);
  border-radius: 12px 0 12px 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  position: relative;
}
.pe-tab:hover {
  background: color-mix(in srgb, var(--ber) 6%, var(--arena));
  border-color: var(--ber);
}
.pe-tab.is-active {
  background: var(--ber-dk);
  color: var(--crema);                                /* cream sobre dark eggplant — alto contraste */
  border-color: var(--ber-dk);
  font-weight: 600;
}
.pe-tab.is-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(240, 232, 213, 0.18);
  pointer-events: none;
}
.pe-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--warn);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}

/* ================================================================
   VIEW TRANSITIONS · animaciones nativas del navegador (Chrome
   111+, Safari 18.2+, Firefox 144+). Si el navegador no soporta,
   los cambios de estado pasan sin animación (degradación natural).
   ================================================================ */

/* Velocidad base de las cross-fades automáticas */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Galería de fotos: la transición la lleva .gc-slide vía
   transform: translateX (CSS transition .45s). No usamos
   View Transitions aquí: colisionaban con el slide-translate y
   producían flicker en mobile (notablemente iOS Safari y Chrome
   Android). */

/* Filtros de /opiniones: las cards reordenan con cross-fade más
   suave, sin nombres específicos por card (sería costoso). El root
   transition se basta. */

/* Modal de Acceso huéspedes: paso 1 ↔ paso 2 con fade gentle. */
.ga-modal {
  view-transition-name: ga-modal;
}
::view-transition-old(ga-modal),
::view-transition-new(ga-modal) {
  animation-duration: 280ms;
}

/* Guía Hestía: apt-main hace de contenedor; al abrir/cerrar guía
   el contenido swap se anima como una "deeper navigation". */
.apt-main {
  view-transition-name: apt-main;
}
::view-transition-old(apt-main),
::view-transition-new(apt-main) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Respeto a prefers-reduced-motion: las view transitions siguen
   funcionando pero más rápidas y sin movimiento amplio. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(gc-active-photo),
  ::view-transition-new(gc-active-photo),
  ::view-transition-old(ga-modal),
  ::view-transition-new(ga-modal),
  ::view-transition-old(apt-main),
  ::view-transition-new(apt-main) {
    animation-duration: 80ms;
  }
}

/* ===========================================================
   A11y · Focus rings (WCAG 2.4.7) — overrides
   - Mouse clicks: no outline (cleaner UX, border-color shift suffices).
   - Keyboard focus on cualquier elemento interactivo: ring cyan visible.
   Estos selectores ganan a las reglas .X:focus { outline: none }
   dispersas (mismo specificity, posición posterior en el archivo).
   =========================================================== */
:focus:not(:focus-visible) { outline: none; }

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="radio"]:focus-visible,
[role="checkbox"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sol-lt);
  outline-offset: 2px;
}

/* ================================================================
   /reservas — formulario en 3 secciones progresivas

   Layout: una página, tres steps (Datos / Disponibilidad+Precio /
   Canal). Cada step se desbloquea cuando el anterior es válido,
   permite editar volviendo atrás (step 1) y muestra summary
   compacto cuando está plegado.
   ================================================================ */

.rf-step {
  border-top: 1px solid color-mix(in srgb, var(--ber) 12%, transparent);
  padding: 24px 0;
  transition: opacity 200ms var(--ease-out, cubic-bezier(.23,1,.32,1));
}
.rf-step:first-of-type { border-top: 0; padding-top: 8px; }
.rf-step.is-locked { opacity: 0.42; pointer-events: none; }
.rf-step.is-locked .rf-step-title { color: var(--ink-soft); }

.rf-step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 0;
  position: relative;
}
.rf-step-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--sol-h);
  min-width: 28px;
}
.rf-step-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--ber-dk);
  margin: 0;
  flex: 1;
}
.rf-step-locked-note {
  font-size: 14px;
  opacity: 0.5;
}

/* Selectores textuales (chips) en /reservas — reemplazan los <select>
   por botones tipo radio, mismo lenguaje visual que el resto del sitio. */
.rf-apt-pick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 560px) {
  .rf-apt-pick { grid-template-columns: 1fr; }
}
.rf-apt-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: white;
  border: 2px solid color-mix(in srgb, var(--ber) 12%, transparent);
  border-radius: 10px 0 10px 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.rf-apt-chip:hover {
  border-color: var(--apt-accent, var(--sol));
  background: color-mix(in srgb, var(--apt-accent, var(--sol)) 6%, white);
}
.rf-apt-chip.is-on {
  border-color: var(--apt-accent, var(--sol));
  background: color-mix(in srgb, var(--apt-accent, var(--sol)) 10%, white);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--apt-accent, var(--sol)) 24%, transparent);
}
.rf-apt-chip:active { transform: scale(0.98); }
.rf-apt-chip-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--apt-accent, var(--sol));
  flex-shrink: 0;
}
.rf-apt-chip-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ber-dk);
}
.rf-apt-chip.is-on .rf-apt-chip-name { color: var(--ber-dk); font-weight: 500; }

/* Chip row genérico (huéspedes 1-6, mascota sí/no) */
.rf-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.rf-chip {
  min-width: 44px;
  padding: 11px 18px;
  background: white;
  border: 2px solid color-mix(in srgb, var(--ber) 18%, transparent);
  border-radius: 10px 0 10px 0;          /* esquinas asimétricas corporativas */
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ber);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.rf-chip-wide { min-width: 90px; }
.rf-chip:hover {
  border-color: var(--sol);
  background: color-mix(in srgb, var(--sol) 6%, white);
}
.rf-chip.is-on {
  background: var(--sol);
  border-color: var(--sol);
  color: var(--ber-dk);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(58, 170, 187, 0.32);
}
.rf-chip:active { transform: scale(0.96); }
.rf-chip-hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.7;
  font-style: italic;
}

/* Extras como chips selectables con icono ✓ / + a la izquierda */
.rf-extras-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 560px) {
  .rf-extras-chips { grid-template-columns: 1fr; }
}
.rf-extra-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.rf-extra-chip-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: white;
  border: 2px solid color-mix(in srgb, var(--ber) 12%, transparent);
  border-radius: 8px 0 8px 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.rf-extra-chip-btn:hover {
  border-color: var(--sol);
  background: color-mix(in srgb, var(--sol) 4%, white);
}
.rf-extra-chip.is-on .rf-extra-chip-btn {
  border-color: var(--sol);
  background: color-mix(in srgb, var(--sol) 10%, white);
  box-shadow: 0 3px 10px rgba(58, 170, 187, 0.20);
}
.rf-extra-chip-btn:active { transform: scale(0.98); }
.rf-extra-chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ber) 10%, transparent);
  color: var(--ber);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.rf-extra-chip.is-on .rf-extra-chip-mark {
  background: var(--sol);
  color: white;
}
.rf-extra-chip-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rf-extra-chip-label {
  font-size: 13.5px;
  color: var(--ber-dk);
  line-height: 1.3;
}
.rf-extra-chip-price {
  font-size: 12px;
  color: var(--ber);
  font-weight: 500;
  opacity: 0.75;
}
.rf-extra-chip-qty {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: 8px;
}

/* Stepper +/− para extras (toallas, sábanas, etc.) — 1 a N huéspedes.
   Sin input de texto: solo botones de incrementar/decrementar. */
.rf-extra-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 4px 6px;
  background: rgba(58, 170, 187, 0.10);
  border-radius: 10px 0 10px 0;
  border: 1.5px solid rgba(58, 170, 187, 0.32);
  flex-shrink: 0;
}
.rf-extra-step-btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #3AAABB;
  color: #2A0F2E;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease;
  box-shadow: 0 2px 8px rgba(58, 170, 187, 0.28);
}
.rf-extra-step-btn:hover:not(:disabled) {
  background: #6FC4D1;
  transform: scale(1.06);
  box-shadow: 0 3px 10px rgba(58, 170, 187, 0.40);
}
.rf-extra-step-btn:active:not(:disabled) { transform: scale(0.94); }
.rf-extra-step-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--ber);
  color: var(--arena);
  box-shadow: none;
}
.rf-extra-step-num {
  min-width: 22px;
  text-align: center;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ber-dk);
  font-variant-numeric: tabular-nums;
}

.rf-step-body {
  margin-top: 18px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 240ms cubic-bezier(.23,1,.32,1),
              transform 240ms cubic-bezier(.23,1,.32,1);
}
@starting-style {
  .rf-step-body {
    opacity: 0;
    transform: translateY(6px);
  }
}
/* Fallback Safari < 17.5: re-mount via key={step} hace que el elemento
   sea nuevo y la transición arranque desde el estado inicial vía
   transition. Sin keyframe = sin reinicio desde cero si interrumpe. */
@media (prefers-reduced-motion: reduce) {
  .rf-step-body { transition: opacity 160ms ease; transform: none; }
}

.rf-step-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rf-step-actions .btn { flex: 1 1 240px; min-width: 0; }

/* Resumen compacto cuando step 1 está plegado */
.rf-edit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  background: color-mix(in srgb, var(--sol) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--sol) 18%, transparent);
  color: var(--ber);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font: inherit;
  transition: background var(--dur-fast) var(--ease-out);
  max-width: 100%;
  text-align: left;
}
.rf-edit:hover { background: color-mix(in srgb, var(--sol) 10%, transparent); }
.rf-edit:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; }
.rf-edit-summary {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.rf-edit-action {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sol-h);
  font-weight: 500;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .rf-edit { width: 100%; margin-left: 0; margin-top: 8px; flex-wrap: wrap; }
  .rf-edit-summary { white-space: normal; max-width: none; }
}

/* Status badge (step 2) */
.rf-status {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 10px 0 10px 0;
  margin-bottom: 18px;
}
.rf-status .rf-status-icon {
  font-size: 18px;
  font-weight: 700;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  grid-row: span 2;
}
.rf-status .rf-status-main { font-weight: 500; color: var(--ber-dk); }
.rf-status .rf-status-sub { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.rf-status-ok {
  background: var(--ok-bg);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
.rf-status-ok .rf-status-icon { background: var(--ok); color: white; }
.rf-status-taken {
  background: color-mix(in srgb, var(--ber) 6%, var(--crema));
  border: 1px solid color-mix(in srgb, var(--ber) 18%, transparent);
}
.rf-status-taken .rf-status-icon { background: var(--ber); color: white; }
.rf-status-unknown {
  background: color-mix(in srgb, var(--sol) 5%, var(--crema));
  border: 1px solid color-mix(in srgb, var(--sol) 18%, transparent);
}
.rf-status-unknown .rf-status-icon { background: var(--sol-h); color: white; }

/* Canal tabs (step 3) */
.rf-channel-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sol-h);
  margin-bottom: 12px;
}
.rf-channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 560px) {
  .rf-channels { grid-template-columns: 1fr; }
}
.rf-channel {
  text-align: left;
  background: var(--crema);
  border: 2px solid color-mix(in srgb, var(--ber) 14%, transparent);
  border-radius: 10px 0 10px 0;
  padding: 16px 18px;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.rf-channel:hover {
  border-color: color-mix(in srgb, var(--sol) 40%, transparent);
}
.rf-channel:focus-visible {
  outline: 2px solid var(--sol);
  outline-offset: 2px;
}
.rf-channel.is-active {
  border-color: var(--sol);
  background: color-mix(in srgb, var(--sol) 6%, var(--crema));
}
.rf-channel-name {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ber-dk);
  font-weight: 500;
}
.rf-channel-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.rf-channel-form { background: none; padding: 0; box-shadow: none; }

/* ================================================================
   PDF — HESTÍA VERA SALINAS  (apt[data-apt="vs"])

   PDF brand-consistent: replica exactamente el lenguaje visual de
   la guía web (.apt-guide-view en pantalla) — mismas tipografías,
   misma paleta crema + ochre apt-accent, misma escala, esquinas
   asimétricas 10px 0 10px 0, recomendaciones en cards de crema
   con bullet apt-accent.

   Las únicas piezas exclusivas del PDF son:
   - Portada (.ag-print-cover) que reemplaza el .ag-hero del web.
   - Índice (.ag-print-toc) que reemplaza la sidebar de navegación.
   - @page con headers/footers brand minimal.

   Resto de apts (vm, vt) usan el print CSS legacy hasta que el
   usuario confirme si los quiere también.
   ================================================================ */

/* Mostrar elementos sólo en print (cover, TOC). */
.print-only { display: none; }

/* En pantalla, la leyenda del mapa (puntos numerados de la
   urbanización) usa la misma estética de .ag-recs, sólo cambia el
   formato del contador a 1, 2, 3 (sin padding 0). Es la clase
   .ag-urb-points (renombrada para no colisionar con el .ag-map-legend
   del Google Maps section). */
.ag-urb-points li::before {
  content: counter(rec) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

@media print {
  .apt-guide-view .print-only { display: block; }

  /* ── @page con headers/footers brand minimal ─────────────────── */
  @page vs-cover {
    size: A4;
    margin: 0;
  }
  @page vs-body {
    size: A4;
    margin: 22mm 18mm 22mm 18mm;
    @top-left {
      content: "HESTÍA  ·  SALINAS";
      font-family: 'Inter', sans-serif;
      font-size: 8pt;
      font-weight: 500;
      letter-spacing: 0.32em;
      color: var(--apt-accent-dk, var(--vs-dk));
      padding-bottom: 4mm;
    }
    @top-right {
      content: "GUÍA DEL HOGAR";
      font-family: 'Inter', sans-serif;
      font-size: 8pt;
      letter-spacing: 0.32em;
      color: var(--arena-dk);
      padding-bottom: 4mm;
    }
    @bottom-left {
      content: "www.hestiayourhome.com";
      font-family: 'Inter', sans-serif;
      font-size: 8pt;
      letter-spacing: 0.18em;
      color: var(--arena-dk);
      padding-top: 4mm;
    }
    @bottom-right {
      content: counter(page);
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 11pt;
      color: var(--apt-accent-dk, var(--vs-dk));
      padding-top: 4mm;
    }
  }
  .apt-guide-view { page: vs-body; }

  /* ── PORTADA ───────────────────────────────────────────────────
     Replica el .ag-hero de la web: gradient apt-accent2 8% → crema,
     eyebrow letterspaced ochre, h1 serif weight 400 con apt-name
     en italic, sub italic. Añade marca "Hestía your home!" arriba
     y firma + licencia + URL abajo. */
  .apt-guide-view .ag-print-cover {
    page: vs-cover;
    page-break-after: always;
    break-after: page;
    width: 210mm;
    height: 297mm;
    position: relative;
    overflow: hidden;
    color: #2A0F2E;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, #D4A84A 8%, #FAF6F0),
      #FAF6F0
    );
    font-family: 'Inter', sans-serif;
  }
  .apt-guide-view .ag-print-cover-bg {
    /* fondo decorativo eliminado — la portada es minimal brand */
    display: none;
  }
  .apt-guide-view .ag-print-cover-frame {
    position: absolute;
    inset: 22mm 22mm 26mm 22mm;
    z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 0;
  }
  .apt-guide-view .ag-print-cover-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 4mm;
  }
  .apt-guide-view .ag-print-cover-brand {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 13pt;
    color: #2A0F2E;
    letter-spacing: 0.04em;
  }
  .apt-guide-view .ag-print-cover-meta {
    font-family: 'Inter', sans-serif;
    font-size: 8pt;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--apt-accent-dk, var(--vs-dk));
  }
  /* Número decorativo eliminado — choca con el lenguaje brand */
  .apt-guide-view .ag-print-cover-num { display: none; }
  .apt-guide-view .ag-print-cover-mid {
    align-self: center;
    text-align: center;
    max-width: 150mm;
    margin: 0 auto;
  }
  .apt-guide-view .ag-print-cover-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 9pt;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--apt-accent-dk, var(--vs-dk));
    margin-bottom: 10mm;
    padding-bottom: 2mm;
    border-bottom: 1px solid color-mix(in srgb, var(--apt-accent-dk, var(--vs-dk)) 50%, transparent);
  }
  .apt-guide-view .ag-print-cover-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 56pt;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #2A0F2E;
    margin: 0;
  }
  .apt-guide-view .ag-print-cover-title em {
    font-style: italic;
    color: var(--apt-accent-dk, var(--vs-dk));
    margin-left: 0.18em;
  }
  .apt-guide-view .ag-print-cover-sub {
    margin: 6mm auto 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14pt;
    color: var(--ber-pitch);
    line-height: 1.45;
    max-width: 130mm;
  }
  .apt-guide-view .ag-print-cover-rule {
    width: 48px;
    height: 2px;
    background: var(--apt-accent-dk, var(--vs-dk));
    margin: 6mm 0 4mm;
    border-radius: 0;
  }
  .apt-guide-view .ag-print-cover-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-top: 1px solid color-mix(in srgb, var(--apt-accent-dk, var(--vs-dk)) 25%, transparent);
    padding-top: 6mm;
  }
  .apt-guide-view .ag-print-cover-sig-line {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 8pt;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--arena-dk);
    margin-bottom: 2mm;
  }
  .apt-guide-view .ag-print-cover-sig-name {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18pt;
    font-weight: 400;
    color: #2A0F2E;
  }
  .apt-guide-view .ag-print-cover-coord {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2mm;
    font-family: 'Inter', sans-serif;
    font-size: 8.5pt;
    color: var(--arena-dk);
    letter-spacing: 0.06em;
  }

  /* ── ÍNDICE ─────────────────────────────────────────────────── */
  .apt-guide-view .ag-print-toc {
    page-break-before: always;
    page-break-after: always;
    break-before: page;
    break-after: page;
    padding: 0;
    color: #2A0F2E;
    font-family: 'Inter', sans-serif;
  }
  .apt-guide-view .ag-print-toc-label {
    display: block;
    font-size: 9pt;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--apt-accent-dk, var(--vs-dk));
    margin-bottom: 4mm;
  }
  .apt-guide-view .ag-print-toc-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 32pt;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 12mm;
    color: #2A0F2E;
    padding-bottom: 6mm;
    position: relative;
  }
  .apt-guide-view .ag-print-toc-title em {
    font-style: italic;
    color: var(--apt-accent-dk, var(--vs-dk));
  }
  .apt-guide-view .ag-print-toc-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--apt-accent-dk, var(--vs-dk));
  }
  .apt-guide-view .ag-print-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .apt-guide-view .ag-print-toc-list li {
    display: grid;
    grid-template-columns: 12mm 1fr;
    gap: 4mm;
    align-items: baseline;
    padding: 3mm 0;
    border-bottom: 1px dotted color-mix(in srgb, var(--apt-accent-dk, var(--vs-dk)) 22%, transparent);
    page-break-inside: avoid;
  }
  .apt-guide-view .ag-print-toc-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 14pt;
    color: var(--apt-accent-dk, var(--vs-dk));
    line-height: 1;
  }
  .apt-guide-view .ag-print-toc-name {
    font-family: 'Playfair Display', serif;
    font-size: 13pt;
    color: #2A0F2E;
    line-height: 1.2;
  }
  .apt-guide-view .ag-print-toc-leader { display: none; }
  .apt-guide-view .ag-print-toc-foot {
    margin-top: 10mm;
    font-family: 'Inter', sans-serif;
    font-size: 9pt;
    color: var(--arena-dk);
    line-height: 1.55;
    max-width: 140mm;
    font-style: italic;
  }

  /* ── HERO oculto en print (la portada lo sustituye) ─────────── */
  .apt-guide-view .ag-hero { display: none !important; }

  /* ── SECCIONES: lenguaje brand idéntico al web ─────────────────
     Replica .ag-section, .ag-section-num, .ag-h2 (con ::after rule
     ochre 48×2px), .ag-h3, .ag-para, .ag-recs (cards crema con
     bullet italic apt-accent), .ag-photo-frame con asym radius. */

  .apt-guide-view .ag-section {
    background: white !important;
    color: #2A0F2E !important;
    padding: 0 !important;
    margin: 0 0 12mm !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--apt-accent-dk, var(--vs-dk)) 14%, transparent) !important;
    page-break-inside: auto;
    position: relative;
  }
  .apt-guide-view .ag-section:not(:first-child) {
    page-break-before: always;
    break-before: page;
    padding-top: 0 !important;
  }
  .apt-guide-view .ag-section:last-of-type {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }
  .apt-guide-view .ag-section-num {
    display: block !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 11pt !important;
    letter-spacing: 0.18em !important;
    color: var(--apt-accent-dk, var(--vs-dk)) !important;
    margin: 0 0 4mm !important;
    text-transform: none !important;
    background: none !important;
    border: 0 !important;
  }
  .apt-guide-view .ag-h2 {
    font-family: 'Playfair Display', serif !important;
    font-weight: 400 !important;
    font-size: 26pt !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    color: #2A0F2E !important;
    margin: 0 0 6mm !important;
    padding-bottom: 4mm !important;
    border-bottom: 0 !important;
    position: relative;
  }
  .apt-guide-view .ag-h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 48px !important;
    height: 2px !important;
    background: var(--apt-accent-dk, var(--vs-dk)) !important;
    display: block !important;
  }
  .apt-guide-view .ag-h3 {
    font-family: 'Playfair Display', serif !important;
    font-weight: 500 !important;
    font-size: 13pt !important;
    color: #2A0F2E !important;
    margin: 8mm 0 3mm !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .apt-guide-view .ag-para {
    font-family: 'Inter', sans-serif !important;
    font-size: 10.5pt !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: var(--ber-pitch) !important;
    margin: 0 0 4mm !important;
    text-align: left;
    widows: 3;
    orphans: 3;
  }
  .apt-guide-view .ag-para-lead {
    font-family: 'Inter', sans-serif !important;
    font-size: 11.5pt !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.55 !important;
    color: #2A0F2E !important;
    margin-bottom: 5mm !important;
  }

  /* Recomendaciones — replica exacta de .ag-recs en pantalla:
     cards crema con bullet italic apt-accent + asym radius */
  .apt-guide-view .ag-recs {
    list-style: none !important;
    padding: 0 !important;
    margin: 4mm 0 0 !important;
    counter-reset: rec;
    display: block !important;
    gap: 0 !important;
  }
  .apt-guide-view .ag-recs li {
    counter-increment: rec;
    position: relative;
    padding: 4mm 4mm 4mm 14mm !important;
    margin-bottom: 3mm !important;
    background: color-mix(in srgb, var(--apt-accent-dk, var(--vs-dk)) 4%, #FAF6F0) !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 10px 0 10px 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10pt !important;
    line-height: 1.55 !important;
    color: var(--ber-pitch) !important;
    page-break-inside: avoid;
  }
  .apt-guide-view .ag-recs li::before {
    content: counter(rec, decimal-leading-zero) !important;
    position: absolute;
    left: 4mm;
    top: 4mm;
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
    font-size: 11pt !important;
    color: var(--apt-accent-dk, var(--vs-dk)) !important;
  }
  /* Leyenda urb: número plano sin padding 01 02… */
  .apt-guide-view .ag-urb-points li::before {
    content: counter(rec) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 12pt !important;
  }

  /* Firma "With love" en bienvenida */
  .apt-guide-view .ag-sign {
    margin-top: 8mm !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 9pt !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: var(--arena-dk) !important;
  }
  .apt-guide-view .ag-signer {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 22pt !important;
    color: #2A0F2E !important;
    margin: 2mm 0 0 !important;
  }

  /* Fotos — replican el .ag-photo de pantalla: asym radius, sin
     watermark visual en print, caption italic discreta */
  .apt-guide-view .ag-photo-grid {
    gap: 4mm !important;
    margin: 6mm 0 !important;
  }
  .apt-guide-view .ag-photo {
    page-break-inside: avoid;
  }
  .apt-guide-view .ag-photo-frame > img,
  .apt-guide-view .ag-photo > img {
    aspect-ratio: 4/3 !important;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--apt-accent-dk, var(--vs-dk)) 25%, transparent) !important;
    border-radius: 10px 0 10px 0 !important;
    box-shadow: none !important;
  }
  /* Marca de agua: visible en print con tinta teal corporativa.
     Override de los inline-style de WatermarkBadge (filter + opacity)
     vía !important — necesario porque <img style="..."> gana al CSS
     a no ser que se eleve. print-color-adjust fuerza al navegador a
     respetar los colores en la impresión (por defecto Chrome los
     descarta para ahorrar tinta). */
  .apt-guide-view .ag-photo .wm-badge {
    display: block !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
  .apt-guide-view .ag-photo .wm-badge img {
    filter: none !important;
    opacity: 0.6 !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
  /* Recs cards y backgrounds en general: forzar colores en print
     para que la cremita y el border-left ochre no se pierdan. */
  .apt-guide-view .ag-recs li,
  .apt-guide-view .ag-print-cover,
  .apt-guide-view .ag-h2::after {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
  .apt-guide-view .ag-photo figcaption {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-size: 9pt !important;
    color: var(--arena-dk) !important;
    margin-top: 2mm !important;
    text-align: left;
  }

  /* Sección urbanización en página propia */
  .apt-guide-view .ag-room-urbanizacion {
    page-break-before: always;
    break-before: page;
  }

  /* Reset general: nav y back ocultos */
  .apt-guide-view {
    background: white !important;
    color: #2A0F2E !important;
  }
  .apt-guide-view .ag-content {
    padding: 0 !important;
  }
  .apt-guide-view .ag-layout {
    display: block !important;
    padding: 0 !important;
  }
  .apt-guide-view .ag-nav,
  .apt-guide-view .ag-nav-toggle,
  .apt-guide-view .ag-back,
  .apt-guide-view .no-print {
    display: none !important;
  }
}

/* @page rules per apt para los headers/footers del PDF.
   Cada apt usa su accent-dk en el page-number serif italic. */
@media print {
  @page vm-cover { size: A4; margin: 0; }
  @page vm-body {
    size: A4;
    margin: 22mm 18mm 22mm 18mm;
    @top-left {
      content: "HESTÍA  ·  MAR";
      font-family: 'Inter', sans-serif;
      font-size: 8pt; font-weight: 500;
      letter-spacing: 0.32em;
      color: #4A5628;
      padding-bottom: 4mm;
    }
    @top-right {
      content: "GUÍA DEL HOGAR";
      font-family: 'Inter', sans-serif;
      font-size: 8pt; letter-spacing: 0.32em;
      color: #E4D9BE; padding-bottom: 4mm;
    }
    @bottom-left {
      content: "www.hestiayourhome.com";
      font-family: 'Inter', sans-serif;
      font-size: 8pt; letter-spacing: 0.18em;
      color: #E4D9BE; padding-top: 4mm;
    }
    @bottom-right {
      content: counter(page);
      font-family: 'Playfair Display', serif;
      font-style: italic; font-size: 11pt;
      color: #4A5628; padding-top: 4mm;
    }
  }
  @page vt-cover { size: A4; margin: 0; }
  @page vt-body {
    size: A4;
    margin: 22mm 18mm 22mm 18mm;
    @top-left {
      content: "HESTÍA  ·  THALASSA";
      font-family: 'Inter', sans-serif;
      font-size: 8pt; font-weight: 500;
      letter-spacing: 0.32em;
      color: #8A4A24;
      padding-bottom: 4mm;
    }
    @top-right {
      content: "GUÍA DEL HOGAR";
      font-family: 'Inter', sans-serif;
      font-size: 8pt; letter-spacing: 0.32em;
      color: #E4D9BE; padding-bottom: 4mm;
    }
    @bottom-left {
      content: "www.hestiayourhome.com";
      font-family: 'Inter', sans-serif;
      font-size: 8pt; letter-spacing: 0.18em;
      color: #E4D9BE; padding-top: 4mm;
    }
    @bottom-right {
      content: counter(page);
      font-family: 'Playfair Display', serif;
      font-style: italic; font-size: 11pt;
      color: #8A4A24; padding-top: 4mm;
    }
  }
  /* Cada apt usa su page para body y cover */
  .apt-guide-view[data-apt="vm"] { page: vm-body; }
  .apt-guide-view[data-apt="vt"] { page: vt-body; }
  .apt-guide-view[data-apt="vm"] .ag-print-cover { page: vm-cover; }
  .apt-guide-view[data-apt="vt"] .ag-print-cover { page: vt-cover; }
}

/* ============================================================
   MAPA WEB · /mapa.html
   Accesible sólo desde el pie. Layout claro, jerarquía editorial,
   contraste seguro (cream + ber-dk).
   ============================================================ */
.mapa-page {
  background: var(--crema);
  color: var(--ber-dk);
  padding: calc(var(--chrome-h, 116px) + 40px) var(--page-pad) clamp(64px, 10vw, 120px);
  min-height: calc(100vh - var(--chrome-h, 116px));
  background-image: radial-gradient(ellipse 60% 40% at 80% 20%, rgba(58,170,187,.07) 0%, transparent 70%),
                    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(123,59,107,.06) 0%, transparent 70%);
}
.mapa-inner { max-width: 1100px; margin: 0 auto; }
.mapa-eyebrow {
  color: #176E80;
  letter-spacing: 0.18em;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
}
.mapa-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  color: #2A0F2E;
  margin: 0 0 16px;
  line-height: 1.05;
}
.mapa-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: #3D1A35;
  max-width: 60ch;
  margin: 0 0 48px;
  line-height: 1.6;
}
.mapa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.mapa-section {
  background: rgba(255,255,255,0.55);
  border-radius: 16px 0 16px 0;
  padding: 28px 24px 32px;
  border: 1px solid rgba(42,15,46,0.08);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s cubic-bezier(0.22,1,0.36,1),
              background 0.25s ease;
}
@media (hover: hover) {
  .mapa-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(42,15,46,0.1);
    background: rgba(255,255,255,0.85);
  }
}
.mapa-section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #176E80;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(42,15,46,0.12);
}
.mapa-section-num {
  font-variant-numeric: tabular-nums;
  opacity: 0.4;
  font-size: 10px;
}
.mapa-list { list-style: none; padding: 0; margin: 0; }
.mapa-item { margin-bottom: 22px; }
.mapa-item:last-child { margin-bottom: 0; }
.mapa-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: #2A0F2E;
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.005em;
  background: linear-gradient(#176E80, #176E80) no-repeat 0 100%;
  background-size: 0 1.5px;
  transition: color .2s ease, background-size .35s ease;
  margin-bottom: 4px;
}
.mapa-link:hover {
  color: #176E80;
  background-size: 100% 1.5px;
}
.mapa-link:hover .mapa-link-arrow { transform: translateX(5px); }
.mapa-link-arrow {
  font-size: 15px;
  color: #3AAABB;
  transition: transform .28s cubic-bezier(0.22,1,0.36,1);
  display: inline-block;
}
.mapa-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(42,15,46,0.65);
  max-width: 38ch;
}

/* ============================================================
   Video loop fade — disimula el corte de los <video loop> con
   fade-out 0.65 s antes del final y fade-in al recomenzar.
   Gestionado por _initVideoFadeLoop en shared.js — aquí solo
   la transición CSS y la clase .is-fading.
   ============================================================ */
video[loop] {
  transition: opacity 0.65s ease-in-out;
  will-change: opacity;
}
video[loop].is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  video[loop] { transition: none; }
  video[loop].is-fading { opacity: 1; }
}

/* ============================================================
   ALEX · close-up + wow filter consistente en toda la web
   ────────────────────────────────────────────────────────────
   La foto original (731×1014) tiene a Alex en plano medio con
   contexto de restaurante. Aquí la zoom-cropeamos vía
   object-position + transform: scale para que la cara quede en
   primer plano (similar al encuadre de Fran) — más calidez,
   contraste y saturación.
   Se excluyen los avatares circulares del chat (.avatar-img),
   que tienen su propio tratamiento.
   ============================================================ */
img[src$="photo-alex.jpg"]:not(.avatar-img) {
  object-fit: cover;
  object-position: 48% 32%;
  width: 100%;
  height: 100%;
  transform: scale(1.55);
  transform-origin: 48% 30%;
  filter:
    brightness(1.05)
    contrast(1.10)
    saturate(1.18)
    drop-shadow(0 10px 24px rgba(42, 15, 46, 0.22));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1),
              filter   .7s cubic-bezier(.2, .8, .2, 1);
}
img[src$="photo-alex.jpg"]:not(.avatar-img):hover {
  transform: scale(1.66);
  filter:
    brightness(1.09)
    contrast(1.14)
    saturate(1.26)
    drop-shadow(0 14px 32px rgba(42, 15, 46, 0.32));
}

/* Asegura que el contenedor recorta el scale (overflow hidden) */
.nosotros-person .portrait,
.team-member .portrait,
.reservas-person-card .r-avatar,
.contacto-avatar { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  img[src$="photo-alex.jpg"]:not(.avatar-img) { transition: none; }
}

/* ============================================================
   THALASSA · efecto cristal wow en las fotos del Hestía
   ────────────────────────────────────────────────────────────
   Aplica a todas las imágenes apt-vt-gallery-*.jpg en cualquier
   contexto del sitio (galería principal, room photos en la
   guía del huésped, hero secundario). Cristal: brillo +
   saturación + warmth + drop-shadow suave. En hover (donde
   aplique) intensifica.
   ============================================================ */
img[src*="apt-vt-gallery-"] {
  filter:
    brightness(1.04)
    contrast(1.10)
    saturate(1.18)
    drop-shadow(0 10px 26px rgba(138, 74, 36, 0.22));
  transition: filter .6s cubic-bezier(.2, .8, .2, 1),
              transform .8s cubic-bezier(.2, .8, .2, 1);
}
.gc-stage img[src*="apt-vt-gallery-"]:hover,
.ag-photo img[src*="apt-vt-gallery-"]:hover,
.apt-card.vt img[src*="apt-vt-gallery-"]:hover {
  filter:
    brightness(1.08)
    contrast(1.14)
    saturate(1.26)
    drop-shadow(0 14px 34px rgba(138, 74, 36, 0.32));
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  img[src*="apt-vt-gallery-"] { transition: none; }
}

/* Warning de estancia mínima en /reservas — visible si el usuario
   intenta menos noches que minNights (p.ej. 1 noche). */
.rf-min-nights-warn {
  margin: 20px 0 0;
  padding: 14px 18px;
  background: color-mix(in srgb, #D42B80 8%, var(--crema));
  border: 1px solid color-mix(in srgb, #D42B80 35%, transparent);
  border-left: 4px solid #D42B80;
  border-radius: 10px 0 10px 0;
  display: grid;
  gap: 4px;
}
.rf-min-nights-warn strong {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #D42B80;
}
.rf-min-nights-warn span {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ber-dk);
}

/* Calendario · días "too-soon" (rango < minNights desde el check-in)
   Visualmente desactivados — el huésped no puede pulsarlos. Tooltip
   nativo explica "Estancia mínima N noches". Aplica a ambos pickers
   (DateRangePicker en /reservas y home-search, CalMonth en apt page). */
.cal-cell.too-soon {
  cursor: not-allowed;
  opacity: 0.32;
  position: relative;
  pointer-events: auto;       /* deja pasar el title (tooltip) */
}
.cal-cell.too-soon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 1px;
  background: var(--ber-dk, #2A0F2E);
  opacity: 0.45;
  transform: translate(-50%, -50%) rotate(-30deg);
  pointer-events: none;
}

/* Mensajes de error del DateRangePicker (shared) — visible cuando se
   intenta una selección no permitida (1 noche, crítica < 7, etc.). */
.hscal-msg {
  margin: 10px 0 0;
  padding: 12px 16px;
  border-radius: 10px 0 10px 0;
  font-size: 13.5px;
  line-height: 1.5;
  border-left: 4px solid;
}
.hscal-msg-error {
  background: color-mix(in srgb, #D42B80 8%, var(--crema));
  border-left-color: #D42B80;
  color: var(--ber-dk);
}
.hscal-msg-info {
  background: color-mix(in srgb, var(--sol) 8%, var(--crema));
  border-left-color: var(--sol);
  color: var(--ber-dk);
}

/* Grid de disponibilidad por Hestía en /reservas — aparece en step 2
   cuando el huésped no ha elegido apt. Le muestra los 3 con su estado
   para esas fechas y le deja elegir uno con un click. */
.rf-apt-availability {
  margin: 0 0 20px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--sol) 5%, var(--crema));
  border: 1px solid color-mix(in srgb, var(--sol) 16%, transparent);
  border-radius: 12px 0 12px 0;
}
.rf-apt-avail-lede {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ber-dk);
  font-weight: 500;
}
.rf-apt-avail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.rf-apt-avail-card {
  --apt-c: #3AAABB;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  text-align: left;
  background: var(--crema);
  border: 1.5px solid var(--apt-c);
  border-left-width: 4px;
  border-radius: 10px 0 10px 0;
  cursor: pointer;
  font-family: var(--sans);
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.rf-apt-avail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--apt-c) 32%, transparent);
}
.rf-apt-avail-card.is-taken {
  opacity: 0.78;
  border-style: dashed;
}
.rf-apt-avail-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ber-dk);
}
.rf-apt-avail-badge {
  display: inline-block;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.rf-apt-avail-card.is-free .rf-apt-avail-badge {
  background: color-mix(in srgb, #6B7A3A 18%, var(--crema));
  color: #4A5628;
}
.rf-apt-avail-card.is-taken .rf-apt-avail-badge {
  background: color-mix(in srgb, #D42B80 18%, var(--crema));
  color: #8A1B53;
}
.rf-apt-avail-card.is-unknown .rf-apt-avail-badge {
  background: color-mix(in srgb, var(--ber-lt) 20%, var(--crema));
  color: var(--ink-soft);
}
.rf-apt-avail-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apt-c);
  margin-top: 4px;
}

/* ============================================================
   /p-edit · pestaña Analítica
   ============================================================ */
.pe-analytics h2 { margin-bottom: 6px; }
.pe-cf-link {
  display: inline-block;
  margin: 10px 0 24px;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.pe-funnel {
  display: flex;
  gap: 0;
  margin: 0 0 28px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(61,26,53,0.04);
  border: 1px solid rgba(61,26,53,0.10);
}
.pe-funnel-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 10px 14px;
  border-right: 1px solid rgba(61,26,53,0.10);
  position: relative;
}
.pe-funnel-step:last-child { border-right: none; }
.pe-funnel-n {
  font-size: 32px;
  font-weight: 700;
  color: var(--ber-dk);
  line-height: 1;
  margin-bottom: 6px;
}
.pe-funnel-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(42,15,46,0.65);
  text-align: center;
  line-height: 1.3;
}
.pe-funnel-conv {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sol-text);
  background: rgba(27,200,216,0.18);
  border-radius: 999px;
  padding: 2px 8px;
}
.pe-analytics-h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(42,15,46,0.65);
  margin: 0 0 12px;
}
.pe-table-events { width: 100%; font-size: 12px; }
.pe-table-events th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(42,15,46,0.60); }
.pe-ev-ts { white-space: nowrap; color: rgba(42,15,46,0.60); width: 120px; }
.pe-ev-name {
  font-weight: 600;
  color: var(--sol-text);
  white-space: nowrap;
  width: 160px;
}
.pe-ev-data { color: var(--ink); font-size: 11px; }
.pe-analytics-note {
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(61,26,53,0.04);
  border-left: 2px solid rgba(58,170,187,0.45);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(42,15,46,0.70);
  line-height: 1.5;
}
.pe-analytics-note strong { color: var(--ber-dk); }

/* ── Analytics tab · Cloudflare live data ───────────────────── */
.pe-analytics-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pe-analytics-hd h2 { margin: 0; }
.pe-period-tabs { display: flex; gap: 4px; }
.pe-period-tab {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(61,26,53,0.22);
  background: transparent;
  color: rgba(42,15,46,0.65);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pe-period-tab:hover { background: rgba(61,26,53,0.06); color: var(--ber-dk); }
.pe-period-tab.is-active {
  background: rgba(27,200,216,0.18);
  border-color: var(--sol);
  color: var(--sol-text);
}
.pe-analytics-loading {
  padding: 20px 0;
  color: rgba(42,15,46,0.50);
  font-size: 13px;
  font-style: italic;
}
.pe-cf-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}
.pe-cf-stat { text-align: left; }
.pe-cf-stat-n {
  font-size: 40px;
  font-weight: 700;
  color: var(--ber-dk);
  line-height: 1;
}
.pe-cf-stat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(42,15,46,0.60);
  margin-top: 4px;
}
.pe-cf-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 8px;
}
@media (max-width: 700px) { .pe-cf-cols { grid-template-columns: 1fr; } }
.pe-cf-col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ber-dk);
  margin-bottom: 10px;
}
.pe-cf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  position: relative;
}
.pe-cf-bar-wrap {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  overflow: hidden;
  z-index: 0;
}
.pe-cf-bar {
  height: 100%;
  background: rgba(27,200,216,0.20);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.pe-cf-row-label {
  position: relative;
  z-index: 1;
  flex: 1;
  font-size: 12.5px;
  color: var(--ink);
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-cf-row-bold { color: var(--ber-dk); font-weight: 700; }
.pe-cf-row-n {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--ber-dk);
  padding-right: 4px;
  white-space: nowrap;
}
.pe-analytics-sep {
  height: 1px;
  background: rgba(61,26,53,0.10);
  margin: 24px 0 16px;
}

/* ── Analytics tab · CF credentials form ───────────────────── */
.pe-cf-cfg {
  background: rgba(61,26,53,0.04);
  border: 1px solid rgba(61,26,53,0.10);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}
.pe-cf-cfg-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ber-dk);
  margin-bottom: 12px;
}
.pe-cf-cfg-toggle {
  margin-bottom: 16px;
  font-size: 11px;
}
.pe-input-wide { width: 100%; max-width: 420px; }

/* ── Analytics tab · Cloudflare banner ───────────────────── */
.pe-cf-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  margin: 16px 0 0;
  background: linear-gradient(135deg, rgba(244,128,32,0.10), rgba(27,200,216,0.08));
  border: 1px solid rgba(244,128,32,0.20);
  border-radius: 12px;
}
.pe-cf-banner-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(244,128,32,0.85);
  margin-bottom: 4px;
}
.pe-cf-banner-title {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--crema);
  font-weight: 500;
}
.pe-cf-banner-sub {
  font-size: 12px;
  color: rgba(240,232,213,0.55);
  margin-top: 2px;
}
.pe-cf-banner-btn { white-space: nowrap; }
@media (max-width: 600px) {
  .pe-cf-banner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================
   Apartment page · Trust strip
   ============================================================ */
.apt-trust-strip {
  background: linear-gradient(180deg, color-mix(in srgb, var(--apt-accent) 4%, var(--crema)) 0%, var(--crema) 100%);
  padding: 18px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--apt-accent) 18%, transparent);
}
.apt-trust-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  align-items: center;
}
.apt-trust-item {
  text-align: center;
  position: relative;
  padding: 12px 8px;
  overflow: visible;
}
.apt-trust-item + .apt-trust-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: color-mix(in srgb, var(--apt-accent) 22%, transparent);
}
.apt-trust-v {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--apt-accent);
  line-height: 1.3;
  padding: 2px 0;
}
.apt-trust-l {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}
.apt-trust-direct .apt-trust-v {
  font-style: italic;
  font-size: 17px;
}
@media (max-width: 600px) {
  .apt-trust-strip { padding: 14px 16px; }
  .apt-trust-inner { grid-template-columns: 1fr 1fr; gap: 12px; }
  .apt-trust-v { font-size: 18px; }
  .apt-trust-item + .apt-trust-item::before { display: none; }
}

/* ============================================================
   /reservas · step 2 · ReviewQuote (cita rotando)
   ============================================================ */
.rf-quote {
  margin: 0 0 22px;
  padding: 18px 20px 18px 28px;
  background: color-mix(in srgb, var(--sol) 5%, var(--crema));
  border-left: 3px solid var(--sol);
  border-radius: 10px 0 10px 0;
  position: relative;
}
.rf-quote-mark {
  position: absolute;
  top: 4px;
  left: 12px;
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1;
  color: color-mix(in srgb, var(--sol) 55%, transparent);
}
.rf-quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ber);
  margin: 0 0 10px;
}
.rf-quote-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rf-quote-name { font-weight: 700; color: var(--ber-dk); }
.rf-quote-sep { opacity: 0.4; }
.rf-quote-source { font-style: italic; text-transform: none; letter-spacing: 0.01em; }

/* ============================================================
   Opiniones — filtro por apartamento (debajo del de fuente)
   ============================================================ */
.opiniones-tabs-apt {
  margin: -8px 0 24px;
}
.opiniones-tab-apt {
  /* Borde y texto en el acento de cada Hestía cuando se hace hover/active */
  border-color: color-mix(in srgb, var(--apt-accent, var(--ber)) 55%, transparent);
}
.opiniones-tab-apt:hover {
  border-color: color-mix(in srgb, var(--apt-accent) 85%, transparent);
  background: color-mix(in srgb, var(--apt-accent) 12%, transparent);
}
.opiniones-tab-apt.is-active {
  background: var(--apt-accent) !important;
  border-color: var(--apt-accent) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   /p-edit · Reviews tab — listado compacto + expansión
   ============================================================ */
.pe-rev-row.is-collapsed { padding: 0; }
.pe-rev-row.is-expanded  { padding: 0; }
.pe-rev-row-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 14px 48px 64px 38px 64px 1.2fr 24px 60px 2fr;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: 10px 0 10px 0;
  transition: background 0.15s ease;
}
.pe-rev-row-summary:hover {
  background: color-mix(in srgb, var(--ber) 5%, transparent);
}
.pe-rev-row.is-expanded .pe-rev-row-summary {
  background: color-mix(in srgb, var(--ber) 6%, transparent);
  border-bottom: 1px solid rgba(61,26,53,0.10);
  border-radius: 10px 0 0 0;
}
.pe-rev-row-chevron {
  font-size: 11px;
  color: var(--ink-soft);
  width: 14px;
  text-align: center;
}
.pe-rev-row-summary .pe-rev-status {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-align: center;
}
.pe-rev-row-summary .pe-rev-source-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.pe-rev-apt-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--ber-dk);
  background: color-mix(in srgb, var(--ber) 8%, transparent);
  padding: 2px 4px;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 0.04em;
}
.pe-rev-date-cell {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pe-rev-name-cell {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ber-dk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pe-rev-country-cell {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  font-weight: 600;
}
.pe-rev-rating-cell {
  font-size: 11px;
  color: var(--ber-dk);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.pe-rev-snippet {
  font-size: 12px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}
.pe-rev-row.pe-rev-pending {
  border-left: 3px solid var(--warn, #C8975A);
}
.pe-rev-row-body {
  padding: 16px 18px 18px;
}
@media (max-width: 720px) {
  .pe-rev-row-summary {
    grid-template-columns: 14px 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
  }
  .pe-rev-status, .pe-rev-source-badge, .pe-rev-apt-badge, .pe-rev-rating-cell {
    grid-row: 1;
  }
  .pe-rev-name-cell {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 13px;
  }
  .pe-rev-date-cell, .pe-rev-country-cell, .pe-rev-snippet { display: none; }
}

/* ============================================================
   Opiniones · cards rediseñadas — light cream + eggplant text
   Cada card lleva el color del apt en la franja superior y un
   pill de apt con accent + pill de source en su color de plataforma.
   ============================================================ */
.opiniones-testimonials .testimonials-grid {
  gap: 28px;
  padding: 8px 0;
}
.testimonial-card {
  background: linear-gradient(180deg, #FFFCF6 0%, var(--crema) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--apt-color, var(--ber)) 12%, transparent) !important;
  border-radius: 14px 0 14px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 2px rgba(42,15,46,0.04), 0 8px 24px rgba(42,15,46,0.08);
  transition: transform 0.35s var(--ease-liquid), box-shadow 0.35s var(--ease-liquid);
  break-inside: avoid;
}
@media (hover: hover) {
  .testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(42,15,46,0.06), 0 16px 40px rgba(42,15,46,0.14);
    background: #FFFCF6 !important;
  }
}
.testimonial-stripe {
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--apt-color) 0%, color-mix(in srgb, var(--apt-color) 50%, transparent) 100%);
}
.testimonial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 22px 0;
}
.testimonial-source-pill {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--src-color);
  color: #FFFFFF;
  white-space: nowrap;
  flex-shrink: 0;
}
.testimonial-apt-pill {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--apt-color);
  white-space: nowrap;
}
.testimonial-quote-mark {
  display: block;
  font-family: var(--serif);
  font-size: 64px;
  line-height: 0.5;
  color: var(--apt-color);
  opacity: 0.28;
  padding: 18px 22px 0;
  font-weight: 600;
}
.testimonial-card blockquote.testimonial-quote {
  font-family: var(--serif) !important;
  font-style: normal !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: var(--ber-dk) !important;
  margin: 4px 22px 18px !important;
  flex: 1;
  padding: 0;
}
.testimonial-expand-btn {
  display: inline-block;
  margin: -8px 22px 12px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apt-color, var(--ber));
  cursor: pointer;
  opacity: 0.75;
  transition: opacity .2s;
}
.testimonial-expand-btn:hover { opacity: 1; }

/* Navegación paginada — flechas + contador */
.tc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}
.tc-arrow {
  width: 40px; height: 40px;
  border-radius: 8px 0 8px 0;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--arena);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.tc-arrow:hover:not(:disabled) { background: rgba(255,255,255,0.13); }
.tc-arrow:disabled { opacity: 0.25; cursor: default; }
.tc-counter {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(240,232,213,0.55);
  min-width: 80px;
  text-align: center;
}
.testimonial-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  background: color-mix(in srgb, var(--apt-color) 4%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--apt-color) 14%, transparent);
}
.testimonial-foot-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testimonial-foot .testimonial-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ber-dk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.testimonial-foot .testimonial-year {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ber) 65%, transparent);
}
.testimonial-foot .stars-row {
  flex-shrink: 0;
}
.testimonial-foot .star {
  color: var(--sol, #E8C26B);
  font-size: 13px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

/* ============================================================
   /reservas · resumen del paso 1 plegado — card neutra crema con
   acento sutil del color del Hestía (no fondo tintado)
   ============================================================ */
.rf-summary-card {
  background: #FFFCF6;
  border: 1px solid rgba(61,26,53,0.10);
  border-left: 4px solid var(--apt-accent);
  border-radius: 12px 0 12px 0;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  position: relative;
  box-shadow: 0 1px 2px rgba(42,15,46,0.04), 0 4px 12px rgba(42,15,46,0.06);
}
.rf-summary-apt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ber-dk);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.rf-summary-apt strong {
  font-weight: 600;
  color: var(--ber-dk);
}
.rf-summary-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--apt-accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--apt-accent) 22%, transparent);
}
.rf-summary-dates {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ber-dk);
  letter-spacing: 0.01em;
}
.rf-summary-date {
  background: var(--crema);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid rgba(61,26,53,0.08);
}
.rf-summary-arrow {
  color: var(--apt-accent);
  font-weight: 600;
  font-size: 14px;
}
.rf-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.rf-summary-pill {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ber-dk);
  background: var(--crema);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(61,26,53,0.10);
  white-space: nowrap;
}

/* Reset/override del antiguo rf-edit (que ahora envuelve la card) */
.rf-edit:has(.rf-summary-card) {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-left: 0;
  width: 100%;
  max-width: 100%;
}
.rf-edit:has(.rf-summary-card) .rf-edit-action {
  align-self: flex-end;
  color: var(--apt-accent, var(--sol-h));
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--apt-accent, var(--ber)) 28%, transparent);
}
.rf-edit:has(.rf-summary-card):hover .rf-edit-action {
  background: color-mix(in srgb, var(--apt-accent, var(--ber)) 8%, transparent);
}

/* ============================================================
   Guía · Day Plans — filtros nuevos (duración, tema) + meta de plan
   ============================================================ */
.dp-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 14px 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--apt-accent, var(--ber)) 4%, var(--crema));
  border-radius: 10px 0 10px 0;
  border: 1px solid color-mix(in srgb, var(--apt-accent, var(--ber)) 12%, transparent);
}
.dp-filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--apt-accent, var(--ber)) 80%, var(--ber-dk));
  min-width: 70px;
}
.dp-theme-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.dp-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--theme-color) 40%, transparent);
  color: var(--theme-color);
  border-radius: 10px 0 10px 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dp-theme-chip:hover {
  background: color-mix(in srgb, var(--theme-color) 12%, transparent);
}
.dp-theme-chip.active {
  background: var(--theme-color);
  color: #fff;
  border-color: var(--theme-color);
}
.dp-theme-clear {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
}
.dp-theme-clear:hover { color: var(--ber-dk); }

/* Meta-bar dentro de la card del plan */
.dp-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hair, rgba(61,26,53,0.10));
}
.dp-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 10px 0 10px 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dp-meta-duration, .dp-meta-km {
  background: color-mix(in srgb, var(--ber) 6%, transparent);
  color: var(--ber-dk);
  border: 1px solid color-mix(in srgb, var(--ber) 12%, transparent);
}
.dp-meta-theme {
  background: color-mix(in srgb, var(--theme-color) 12%, transparent);
  color: var(--theme-color);
  border: 1px solid color-mix(in srgb, var(--theme-color) 28%, transparent);
}

/* Extra info en cada step (km, rating, gmaps link) */
.dp-step-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 4px;
  font-size: 12px;
}
.dp-step-km {
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dp-step-rating {
  color: var(--apt-accent, var(--sol-text));
  font-weight: 700;
}
.dp-step-rating small {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.dp-step-gmaps {
  color: var(--apt-accent, var(--sol-text));
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.dp-step-gmaps:hover {
  border-bottom-style: solid;
}

/* ============================================================
   Kowalski polish — Fix #2 (scale on :active) + #3 (gate hover
   en touch) + #4 (transición en cambio de active de filtros)
   ============================================================ */

/* Fix #2 — Press feedback en botones que hoy no tienen scale en :active.
   Subtle scale(0.97) + transición específica de transform (no `all`).
   Aplicado a los botones más visibles que faltaban en la auditoría. */
.topbar-link,
.hamburger-btn,
.req-g-btn,
.dp-tab,
.dp-theme-chip,
.dp-theme-clear,
.pe-tab,
.opiniones-tab,
.opiniones-expand-btn,
.ag-place-link {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background 160ms cubic-bezier(0.23, 1, 0.32, 1),
              color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.topbar-link:active,
.hamburger-btn:active,
.req-g-btn:active,
.dp-tab:active,
.dp-theme-chip:active,
.dp-theme-clear:active,
.pe-tab:active,
.opiniones-tab:active,
.opiniones-expand-btn:active,
.ag-place-link:active {
  transform: scale(0.97);
}

/* Fix #3 — Hovers visuales SOLO en dispositivos con hover real
   (no en iPad/móvil donde el primer tap deja estado fantasma).
   Cubrimos los hovers más visibles del flujo principal. */
@media not (hover: hover) {
  .topbar-link:hover { background: transparent; color: inherit; }
  .ag-place-link:hover { opacity: 1; }
  .dp-tab:hover { background: transparent; color: var(--ber-dk); }
  .dp-theme-chip:hover { background: transparent; }
  .opiniones-tab:hover { background: transparent; }
  .ag-nav-list a:hover { color: var(--ink-soft); border-left-color: transparent; }
}

/* Fix #4 — Cambio de estado activo en filtros con transición suave
   (no flip instantáneo). Las propiedades ya están en la base de
   arriba; aquí solo nos aseguramos que la transición sea elegante
   también al activar/desactivar. */
.dp-tab.active,
.dp-theme-chip.active,
.opiniones-tab.is-active,
.pe-tab.is-active,
.rf-chip.is-on {
  transition: background 200ms cubic-bezier(0.23, 1, 0.32, 1),
              color 200ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Respeto reduced-motion — desactiva el scale al press sin perder
   feedback de color (sigue siendo perceptible y no causa mareo). */
@media (prefers-reduced-motion: reduce) {
  .topbar-link:active,
  .hamburger-btn:active,
  .req-g-btn:active,
  .dp-tab:active,
  .dp-theme-chip:active,
  .dp-theme-clear:active,
  .pe-tab:active,
  .opiniones-tab:active,
  .opiniones-expand-btn:active,
  .ag-place-link:active {
    transform: none;
  }
}

/* ============================================================
   Pestaña Contrato (/p-edit.html)
   ============================================================ */
.ct-form fieldset {
  border: 1px solid rgba(61,26,53,.10);
  border-radius: 8px;
  padding: 12px 18px 18px;
  margin: 0 0 18px;
  background: rgba(255, 251, 244, 0.4);
}
.ct-form legend {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ber-dk);
}
.ct-radio {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid rgba(61,26,53,.18);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.ct-radio:hover { border-color: var(--vt); }
.ct-radio.is-active {
  border-color: var(--vt);
  background: rgba(58,170,187,.06);
  box-shadow: 0 0 0 2px rgba(58,170,187,.10);
}
.ct-radio input { margin: 0 0 6px; align-self: flex-start; }
.ct-radio-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}
.ct-radio-meta {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ct-readonly {
  background: rgba(0,0,0,0.04) !important;
  color: var(--ink-soft);
  cursor: not-allowed;
}
.ct-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.ct-toggle input { margin: 0; }
.ct-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ct-actions-hint {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}

/* ============================================================
   Pestaña Reservas (/p-edit.html)
   ============================================================ */
.rv-count { font-size: 13px; color: var(--ink-soft); font-weight: 400; }

.rv-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 14px 0 6px;
}
.rv-stats-canal { grid-template-columns: repeat(4, 1fr); margin-top: 6px; }
@media (max-width: 760px) { .rv-stats, .rv-stats-canal { grid-template-columns: repeat(2, 1fr); } }

.rv-stat {
  background: rgba(255, 251, 244, 0.6);
  border: 1px solid rgba(61,26,53,.10);
  border-left: 4px solid var(--vt);
  padding: 8px 12px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rv-stat-small { padding: 6px 10px; }
.rv-stat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rv-stat-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rv-proximos {
  margin: 16px 0;
  padding: 12px 16px;
  background: rgba(232, 194, 107, 0.10);
  border-left: 4px solid var(--sol);
  border-radius: 4px;
}
.rv-proximos h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ber-dk); }
.rv-proximos ul { list-style: none; margin: 0; padding: 0; }
.rv-proximos li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.rv-prox-date { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 90px; }
.rv-prox-name { font-weight: 500; }
.rv-prox-meta { color: var(--ink-soft); font-size: 12px; margin-left: auto; }

.rv-apt-chip {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.rv-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 12px;
  flex-wrap: wrap;
}
.rv-toolbar label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.rv-toolbar select { padding: 4px 8px; }

.rv-table-wrap { overflow-x: auto; }
.rv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.rv-table th, .rv-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  text-align: left;
  vertical-align: middle;
}
.rv-table th {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ber-dk);
  background: rgba(255, 251, 244, 0.6);
}
.rv-table td.num, .rv-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rv-table tr.rv-past { opacity: 0.55; }
.rv-table tr.rv-edit input, .rv-table tr.rv-edit select { width: 100%; padding: 2px 4px; font-size: 12px; }
.rv-tiny { font-size: 11px; color: var(--ink-soft); }

/* ============================================================
   Sección Llegada · Aeropuertos + Basura
   ============================================================ */
.ag-airports {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 8px 0 6px;
}
.ag-airport {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 251, 244, 0.6);
  border: 1px solid rgba(61,26,53,.08);
  border-left: 4px solid var(--vt);
  border-radius: 6px;
}
.ag-airport-code {
  font-family: var(--mono, monospace);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vt-dk);
  align-self: center;
  text-align: center;
}
.ag-airport-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.ag-airport-meta {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 4px;
}
.ag-airport-km, .ag-airport-time { font-weight: 600; color: var(--ber-dk); }
.ag-airport-sep { margin: 0 6px; color: var(--ink-soft); }
.ag-airport-notes {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}

/* Estaciones: mismo layout que aeropuertos pero con badge en lugar
   de código IATA. Bordes de color por tipo (bus = albero · tren =
   ber teal) para distinguir de un vistazo. */
.ag-station-bus { border-left-color: var(--alb, #9E7A2C); }
.ag-station-trn { border-left-color: var(--vt2, #3AAABB); }
.ag-station-badge {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 6px;
  border-radius: 4px;
  align-self: center;
  color: #fff;
  text-align: center;
  line-height: 1;
}
.ag-station-bus .ag-station-badge { background: var(--alb, #9E7A2C); }
.ag-station-trn .ag-station-badge { background: var(--vt2, #3AAABB); }

/* Curiosidad del AVE Vera-Almanzora — bloque destacado con un
   gradiente sutil y un acento que sugiere modernidad sin romper
   la paleta del guide. */
.ag-ave-curiosity {
  margin: 16px 0 6px;
  padding: 16px 20px 18px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--vt2, #3AAABB) 14%, transparent),
      color-mix(in srgb, var(--ber) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--vt2, #3AAABB) 35%, transparent);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.ag-ave-curiosity::before {
  content: '';
  position: absolute;
  top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--vt2, #3AAABB), var(--ber));
}
.ag-ave-curiosity-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ber-dk);
  margin-bottom: 6px;
}
.ag-ave-curiosity-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}

/* Bloque "llegar en coche" — destaca la acompañación a distancia
   sin importar el medio de llegada. */
.ag-car-block {
  margin-top: 24px;
}
.ag-car-accompany {
  background: rgba(58, 170, 187, 0.08);
  border-left: 4px solid var(--vt2, #3AAABB);
  border-radius: 0 6px 6px 0;
  padding: 12px 16px 14px 14px;
  font-size: 13.5px;
  line-height: 1.55;
}
.ag-car-icon {
  display: inline-block;
  margin-right: 8px;
  color: var(--vt2, #3AAABB);
  font-weight: 700;
}

/* ============================================================
   Atlas de Lugares de interés · sección 13
   Cada subcategoría es un bloque con título + lista densa. Cada
   ítem en una sola línea: nombre (con link externo), desc, km,
   cómo llegar y opcional anchor a otra sección de la guía.
   ============================================================ */
.ag-poi-atlas {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 14px;
}
.ag-poi-cat {
  border-top: 2px solid color-mix(in srgb, var(--apt-accent, var(--sol)) 30%, transparent);
  padding-top: 14px;
}
.ag-poi-cat-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ber-dk);
}
.ag-poi-cat-icon {
  font-size: 18px;
}
.ag-poi-cat-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  background: var(--apt-accent, var(--sol));
  color: var(--ber-dk);
  border-radius: 9px;
}
.ag-poi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ag-poi-row {
  padding: 9px 0;
  border-bottom: 1px solid rgba(61,26,53,.06);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.ag-poi-row:last-child { border-bottom: none; }
.ag-poi-row-main {
  font-size: 14px;
  line-height: 1.4;
}
.ag-poi-name {
  font-weight: 600;
  color: var(--ber-dk);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--ber-dk) 35%, transparent);
}
.ag-poi-name:hover {
  color: var(--apt-accent, var(--sol));
  border-bottom-color: var(--apt-accent, var(--sol));
}
.ag-poi-desc {
  color: var(--ink);
}
.ag-poi-row-meta {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.ag-poi-km {
  font-weight: 700;
  color: var(--apt-accent, var(--sol));
}
.ag-poi-sep {
  margin: 0 6px;
  opacity: 0.5;
}
.ag-poi-how {
  font-style: italic;
}
.ag-poi-anchor {
  color: var(--vt2, #3AAABB);
  text-decoration: none;
  font-weight: 600;
}
.ag-poi-anchor:hover { text-decoration: underline; }
@media (min-width: 700px) {
  .ag-poi-row {
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: baseline;
  }
  .ag-poi-row-meta {
    text-align: right;
    max-width: 50%;
  }
}
.ag-checkin-garbage {
  margin-top: 4px;
  padding: 10px 14px;
  background: rgba(106, 122, 58, 0.08);
  border-left: 4px solid #6B7A3A;
  border-radius: 6px;
}
.ag-checkin-garbage p { margin: 0; }

/* ============================================================
   Calendario consolidado de eventos
   ============================================================ */
.ag-calendar { margin: 24px 0 28px; }
.ag-calendar .ag-h3 { margin-bottom: 4px; }

/* Calendario de eventos · acordeón por meses. Cada mes con eventos
   es un <details>. El mes actual viene `open` por defecto; el resto
   plegados. Al expandir se muestran las cards en grid wrap. */
.ag-cal-months {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
}
.ag-cal-month-acc {
  background: rgba(255, 251, 244, 0.5);
  border: 1px solid rgba(61,26,53,.10);
  border-radius: 6px;
  overflow: hidden;
  transition: background .2s ease;
}
.ag-cal-month-acc.is-current {
  background: rgba(232, 194, 107, 0.10);
  border-color: color-mix(in srgb, var(--sol) 40%, transparent);
}
.ag-cal-month-acc[open] {
  background: rgba(255, 251, 244, 0.75);
}
.ag-cal-month-acc.is-current[open] {
  background: rgba(232, 194, 107, 0.12);
}
.ag-cal-month-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  user-select: none;
}
.ag-cal-month-summary::-webkit-details-marker { display: none; }
.ag-cal-month-num {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.ag-cal-month-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ber-dk);
  text-transform: capitalize;
}
.ag-cal-month-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  background: var(--vt);
  color: #fff;
  border-radius: 9px;
}
.ag-cal-month-now {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--sol);
  color: var(--ber-dk);
  border-radius: 9px;
}
.ag-cal-month-chev {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-soft);
  transition: transform .2s ease;
}
.ag-cal-month-acc[open] .ag-cal-month-chev {
  transform: rotate(180deg);
}
.ag-cal-month-acc .ag-cal-cards {
  padding: 4px 16px 16px;
}

.ag-cal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ag-cal-card {
  background: rgba(255, 251, 244, 0.7);
  border: 1px solid rgba(61,26,53,.10);
  border-left: 3px solid var(--vt);
  border-radius: 0 6px 6px 0;
  padding: 10px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ag-cal-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(61,26,53,.08);
}
.ag-cal-card[data-region="murcia"] { border-left-color: var(--vs); }
.ag-cal-card.is-current {
  background: rgba(232, 194, 107, 0.14);
  border-color: var(--sol);
}
.ag-cal-card.is-star { border-left-width: 5px; }
.ag-cal-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ag-cal-card-month {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: var(--vt);
  padding: 2px 7px;
  border-radius: 3px;
}
.ag-cal-card[data-region="murcia"] .ag-cal-card-month { background: var(--vs); color: #3D1A35; }
.ag-cal-card-when {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .02em;
  flex: 1 1 0;
  min-width: 0;
}
.ag-cal-card-star {
  color: var(--sol);
  font-size: 13px;
  line-height: 1;
}
.ag-cal-card-name {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ber-dk);
  line-height: 1.25;
}
.ag-cal-card-place {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-soft);
}
.ag-cal-card-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
}

/* Acordeón de meses ---------------------------------------- */
.ag-cal-months {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}
.ag-cal-month {
  border: 1px solid rgba(61,26,53,.09);
  border-radius: 6px;
  overflow: hidden;
}
.ag-cal-month.is-current-month {
  border-color: var(--sol);
  box-shadow: 0 0 0 1px rgba(232,194,107,.25);
}
.ag-cal-month-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(255,251,244,.7);
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ber-dk);
  letter-spacing: .02em;
}
.ag-cal-month.is-current-month .ag-cal-month-btn {
  background: rgba(232,194,107,.12);
}
.ag-cal-month-btn:hover { background: rgba(232,194,107,.10); }
.ag-cal-month-name { flex: 1 1 0; }
.ag-cal-month-count {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  background: var(--vt);
  color: #fff;
  padding: 2px 7px;
  border-radius: 20px;
  min-width: 22px;
  text-align: center;
}
.ag-cal-month.is-current-month .ag-cal-month-count { background: var(--sol); color: var(--ber-dk); }
.ag-cal-month-chev {
  font-size: 13px;
  color: var(--ink-soft);
  transition: transform .18s ease;
}
.ag-cal-month-chev.open { transform: rotate(180deg); }
.ag-cal-month-body {
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(61,26,53,.07);
}
.ag-cal-month-body[aria-hidden="true"] { display: none; }

/* ============================================================
   Lugares de interés — lista compacta
   ============================================================ */
/* Tabla ultra-compacta de lugares de interés */
/* Gems grid — lugares curiosos, bellos y únicos (sección Lugares de interés) */
.ag-gems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.ag-gem-card {
  background: color-mix(in srgb, var(--apt-accent) 4%, var(--crema, #F5F0E8));
  border: 1px solid color-mix(in srgb, var(--apt-accent) 14%, transparent);
  border-radius: 12px 0 12px 0;
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ag-gem-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.ag-gem-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.ag-gem-dist {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--apt-accent);
  opacity: 0.75;
  text-align: right;
  line-height: 1.4;
}
.ag-gem-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 2px 0 0;
  line-height: 1.3;
}
.ag-gem-note {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}
.ag-gem-links {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ag-gem-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.ag-gem-map {
  background: color-mix(in srgb, var(--apt-accent) 9%, transparent);
  color: var(--apt-accent);
  border: 1px solid color-mix(in srgb, var(--apt-accent) 20%, transparent);
}
.ag-gem-map:hover { background: color-mix(in srgb, var(--apt-accent) 17%, transparent); }
.ag-gem-web {
  background: rgba(61,26,53,.06);
  color: var(--ink-soft);
  border: 1px solid rgba(61,26,53,.12);
}
.ag-gem-web:hover { background: rgba(61,26,53,.12); }
@media (max-width: 900px) {
  .ag-gems-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
  .ag-gems-grid { grid-template-columns: 1fr; gap: 8px; }
  .ag-gem-card { padding: 12px 12px 10px; }
}

/* ============================================================
   P.D. al final de la Bienvenida (sec 01) con link a /porque-hestia
   ============================================================ */
.ag-welcome-pd {
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(232, 194, 107, 0.10);
  border-left: 3px solid var(--sol);
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-style: italic;
}
.ag-welcome-pd-tag {
  display: inline-block;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ber);
  margin-right: 6px;
}
.ag-welcome-pd-link {
  font-style: italic;
  color: var(--sol);
  text-decoration: none;
  border-bottom: 1px solid var(--sol);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.ag-welcome-pd-link:hover {
  color: var(--ber);
  border-color: var(--ber);
}

/* ============================================================
   Reservas v2 · dashboard + tabla + panel de edición
   ============================================================ */
.rv-card { position: relative; }
.rv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.rv-head h2 { margin: 0; }
.rv-head .rv-count { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
.rv-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-head-actions .leila-loaded-at { font-size: 11px; color: var(--ink-soft); }

/* --- Dashboard KPI cards --- */
.rv-dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0;
}
@media (min-width: 1300px) { .rv-dashboard { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 980px)  { .rv-dashboard { grid-template-columns: repeat(2, 1fr); } }
.rv-yearly-min { color: #6B7A3A; }
.rv-yearly-max { color: #B86A3C; font-weight: 600; }
.rv-mini-link {
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(58,170,187,.4);
  color: var(--sol);
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.rv-mini-link:hover { background: rgba(58,170,187,.12); }
.rv-calc-em {
  font-size: 11px;
  color: var(--ink-soft);
  font-style: normal;
  display: inline-block;
}

/* Dashboard multi-año (cabecera) — comparativa Bruto/Comisión/Neto/Margen
   por año. Los datos vienen del Google Sheet de Hestía, clasificados
   por año de salida (criterio contable real). */
.rv-yearly {
  margin: 14px 0 18px;
  background: linear-gradient(180deg, rgba(58,170,187,0.04) 0%, rgba(255,251,244,0) 100%);
  border: 1px solid rgba(61,26,53,.08);
  border-radius: 10px;
  padding: 14px 16px 4px;
}
.rv-yearly-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rv-yearly-h h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ber);
}
.rv-yearly-sub { font-size: 11px; color: var(--ink-soft); }
.rv-yearly-wrap { overflow-x: auto; }
.rv-yearly-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rv-yearly-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 10px;
  border-bottom: 1px solid rgba(61,26,53,.10);
  white-space: nowrap;
}
.rv-yearly-table th.num { text-align: right; }
.rv-yearly-table td {
  padding: 8px 10px;
  border-bottom: 1px dashed rgba(61,26,53,.06);
}
.rv-yearly-table td.num { text-align: right; }
.rv-yearly-row { cursor: pointer; transition: background .12s ease; }
.rv-yearly-row:hover { background: rgba(58,170,187,0.06); }
.rv-yearly-row.is-focus {
  background: rgba(58,170,187,0.12);
  box-shadow: inset 3px 0 0 0 var(--sol);
}
.rv-yearly-row.is-focus td { font-weight: 600; }
.rv-yearly-neg { color: #8a4a24; }
.rv-kpi {
  background: rgba(255, 251, 244, 0.7);
  border: 1px solid rgba(61,26,53,.10);
  border-left: 3px solid var(--sol);
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rv-kpi-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rv-kpi-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.rv-kpi-sub {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Subrejilla por apt + por canal --- */
.rv-dashboard-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 6px 0 16px;
}
@media (max-width: 800px) { .rv-dashboard-2 { grid-template-columns: 1fr; } }
.rv-block {
  background: rgba(255, 251, 244, 0.5);
  border: 1px solid rgba(61,26,53,.08);
  border-radius: 4px;
  padding: 10px 14px;
}
.rv-block-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ber-dk);
  margin-bottom: 6px;
}
.rv-block-rows { display: flex; flex-direction: column; gap: 4px; }
.rv-block-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 3px;
}
/* Bloque por apartamento — fondo translúcido con el color del
   apt (Mar berenjena, Thalassa teal, Salinas vermillón). */
.rv-block-row-apt {
  background: color-mix(in srgb, var(--apt-c, transparent) 8%, transparent);
  border-left: 3px solid var(--apt-c, transparent);
  padding-left: 10px;
}
.rv-block-row-meta { font-size: 11px; color: var(--ink-soft); }
.rv-block-row-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ber-dk); }
.rv-canal-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ber);
  background: rgba(232,194,107,.25);
  padding: 2px 7px;
  border-radius: 3px;
  text-align: center;
}

/* --- Banners de estancia / próximas --- */
.rv-now {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 4px;
}
.rv-now h3 {
  margin: 0 0 8px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rv-now ul { list-style: none; margin: 0; padding: 0; }
.rv-now li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px dotted rgba(61,26,53,.10);
}
.rv-now li:last-child { border-bottom: none; }
.rv-banner-staying {
  background: rgba(106, 122, 58, 0.10);
  border-left: 3px solid #6B7A3A;
}
.rv-banner-staying h3 { color: #6B7A3A; }
.rv-banner-upcoming {
  background: rgba(232, 194, 107, 0.12);
  border-left: 3px solid var(--sol);
}
.rv-banner-upcoming h3 { color: var(--ber-dk); }
.rv-prox-date { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 90px; }
.rv-prox-meta { color: var(--ink-soft); font-size: 12px; margin-left: auto; }

/* --- Toolbar de filtros --- */
.rv-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 10px;
  flex-wrap: wrap;
}
.rv-toolbar label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.rv-toolbar select { padding: 4px 8px; font-family: inherit; }
.rv-hint { margin-left: auto; font-size: 12px; color: var(--ink-soft); font-style: italic; }
.rv-hint-inline { font-size: 12px; color: var(--ink-soft); font-weight: 400; font-style: italic; margin-left: 6px; }

/* --- Tabla principal --- */
.rv-table-wrap { overflow-x: auto; }
.rv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rv-table thead th {
  padding: 6px 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ber-dk);
  background: rgba(255, 251, 244, 0.6);
  border-bottom: 1px solid rgba(61,26,53,.15);
  text-align: left;
  font-weight: 700;
}
.rv-table tbody td {
  padding: 8px;
  border-bottom: 1px solid rgba(61,26,53,.06);
  vertical-align: middle;
}
.rv-table td.num, .rv-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.rv-row {
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  position: relative;
  /* Barra de color izquierda según apartamento (Mar berenjena,
     Thalassa teal, Salinas vermillón) — visible siempre al
     inicio de cada fila para identificar el apt de un vistazo. */
  box-shadow: inset 4px 0 0 0 var(--apt-c, transparent);
}
.rv-row:hover {
  background: color-mix(in srgb, var(--apt-c, var(--ber)) 6%, #FFFBF4);
}
.rv-row.is-selected {
  background: color-mix(in srgb, var(--apt-c, var(--sol)) 12%, #FFFBF4);
  box-shadow: inset 6px 0 0 0 var(--apt-c, var(--sol));
}
.rv-row-past { opacity: 0.55; }

.rv-status-th { width: 24px; padding: 0 !important; }
.rv-status {
  width: 24px;
  text-align: center;
  font-size: 14px;
  padding: 0 !important;
  border-bottom: none !important;
  position: relative;
}
.rv-status::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.rv-status-staying { color: #6B7A3A; }
.rv-status-staying::before { background: #6B7A3A; }
.rv-status-upcoming { color: var(--sol); }
.rv-status-upcoming::before { background: var(--sol); }
.rv-status-past { color: var(--ink-soft); }
.rv-status-past::before { background: transparent; }
.rv-status-unknown { color: var(--ink-soft); opacity: 0.4; }

.rv-row-staying { background: rgba(106, 122, 58, 0.04); }
.rv-row-upcoming { background: rgba(58, 170, 187, 0.04); }

.rv-apt-chip {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

/* --- Panel de edición (slide-in derecha) --- */
.rv-edit-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 15, 46, 0.40);
  z-index: 998;
  animation: rvFadeIn 0.18s ease;
}
@keyframes rvFadeIn { from { opacity: 0 } to { opacity: 1 } }
.rv-edit-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(520px, 92vw);
  background: #FFFBF4;
  border-left: 1px solid rgba(61,26,53,.20);
  box-shadow: -8px 0 24px rgba(42, 15, 46, 0.18);
  z-index: 999;
  display: flex;
  flex-direction: column;
  animation: rvSlideIn 0.20s ease;
}
@keyframes rvSlideIn { from { transform: translateX(100%) } to { transform: translateX(0) } }

.rv-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--apt-c, var(--ber));
  color: #FFFBF4;
  /* Gradiente sutil hacia berenjena para todos los apts —
     mantiene la marca incluso cuando es Thalassa (teal). */
  background-image: linear-gradient(135deg, var(--apt-c, var(--ber)) 0%, color-mix(in srgb, var(--apt-c, var(--ber)) 75%, #2A0F2E) 100%);
}
.rv-edit-head h3 {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: #FFFBF4;
}
.rv-edit-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sol-lt, #6FC4D1);
}
.rv-edit-close {
  background: transparent;
  border: 1px solid rgba(255,251,244,0.4);
  color: #FFFBF4;
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.rv-edit-close:hover { background: rgba(255,251,244,0.15); }

.rv-edit-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.rv-edit-body fieldset {
  border: none;
  margin: 0 0 18px;
  padding: 0;
  border-bottom: 1px solid rgba(61,26,53,.08);
  padding-bottom: 14px;
}
.rv-edit-body fieldset:last-of-type { border-bottom: none; }
.rv-edit-body legend {
  font-family: var(--serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ber-dk);
  margin-bottom: 8px;
  padding: 0;
}

.rv-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 9px;
}
.rv-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.rv-field input,
.rv-field select,
.rv-field textarea {
  padding: 6px 10px;
  border: 1px solid rgba(61,26,53,.18);
  border-radius: 3px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}
.rv-field input:focus, .rv-field select:focus, .rv-field textarea:focus {
  outline: none;
  border-color: var(--sol);
  box-shadow: 0 0 0 2px rgba(58, 170, 187, 0.15);
}
.rv-field input.rv-readonly,
.rv-readonly {
  background: rgba(232, 194, 107, 0.10);
  color: var(--ink-soft);
  border-style: dashed;
}
.rv-calc {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sol);
  background: rgba(58, 170, 187, 0.10);
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 5px;
}

.rv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rv-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.rv-calc-block {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(232, 194, 107, 0.10);
  border-left: 3px solid var(--sol);
  border-radius: 0 3px 3px 0;
}
.rv-calc-block-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ber-dk);
  margin-bottom: 6px;
}
.rv-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.rv-calc-grid > div { display: flex; justify-content: space-between; font-size: 12px; }
.rv-calc-grid span { color: var(--ink-soft); }
.rv-calc-grid strong { color: var(--ber-dk); font-variant-numeric: tabular-nums; }

.rv-edit-foot {
  padding: 14px 20px;
  border-top: 1px solid rgba(61,26,53,.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.rv-edit-foot-right { display: flex; gap: 8px; }
.rv-btn-danger { color: #B23A2B; }
.rv-btn-danger:hover { background: rgba(178,58,43,0.10); }
.rv-overlap-warn {
  margin: 0 20px 4px;
  padding: 8px 12px;
  background: #fff3cd; color: #7a5a00;
  border-left: 3px solid #e6a800;
  border-radius: 4px; font-size: 12px; font-weight: 500;
}

/* ── Leila tab ── */
.leila-hdr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.leila-sync-row { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; margin-top: 4px; align-items: center; }
.leila-loaded-at { font-size: 11px; color: var(--ink-soft); }
.leila-year-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.leila-saldo-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 8px 12px;
  background: rgba(61,26,53,0.04); border-radius: 8px;
  border: 1px solid rgba(61,26,53,0.12);
}
.leila-saldo-label { font-size: 12px; color: var(--ink-soft); letter-spacing: .02em; }
.leila-saldo-input {
  width: 90px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(61,26,53,0.25); font-size: 13px;
  background: #fff; color: var(--ber); text-align: right;
}
.leila-saldo-unit { font-size: 13px; color: var(--ink-soft); }
.leila-saldo-hint { font-size: 11px; color: var(--ber); opacity: .7; margin-left: 4px; }
.leila-yr-btn {
  padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(61,26,53,0.25);
  background: transparent; color: var(--ber); font-size: 13px; cursor: pointer;
}
.leila-yr-btn.active { background: var(--ber); color: var(--arena); border-color: var(--ber); }
.leila-month-block {
  margin-bottom: 24px;
  border: 1px solid rgba(61,26,53,0.12);
  border-radius: 10px;
  overflow: hidden;
}
.leila-month-hdr {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 16px 10px;
  background: rgba(61,26,53,0.04);
  border-bottom: 1px solid rgba(61,26,53,0.10);
}
.leila-month-name {
  font-size: 15px; font-weight: 700; color: var(--ber);
  border-left: 3px solid var(--ber); padding-left: 8px;
}
.leila-month-kpis {
  display: flex; gap: 0; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-soft);
}
.leila-month-kpis > span {
  padding: 0 14px 0 0; margin-right: 14px;
  border-right: 1px solid rgba(61,26,53,0.15);
}
.leila-month-kpis > span:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.leila-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.leila-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.leila-table th {
  padding: 8px 12px; text-align: left; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  background: rgba(61,26,53,0.02);
  border-bottom: 1px solid rgba(61,26,53,0.10);
}
.leila-table td { padding: 8px 12px; border-bottom: 1px solid rgba(61,26,53,0.06); vertical-align: middle; }
.leila-table .num { text-align: right; }
.leila-table tfoot td { border-top: 2px solid rgba(61,26,53,0.12); border-bottom: none; font-weight: 600; background: rgba(61,26,53,0.03); }
.leila-apt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap; }
.leila-guest { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leila-cobro-input {
  width: 72px; padding: 4px 6px; border: 1px solid rgba(61,26,53,0.25);
  border-radius: 4px; font-size: 13px; text-align: right; background: #fff;
}
.leila-cobro-input:focus { outline: 2px solid var(--ber); border-color: transparent; }
.leila-sync-date { width: 130px; text-align: left; }
.leila-owe { color: #B23A2B; }
.leila-over { color: #2B7A2B; }
.leila-ok { color: var(--ink-soft); }
.leila-foot-row td { background: rgba(61,26,53,0.04); }
.leila-liquid-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 9px 12px;
  background: rgba(58,170,187,0.06);
  border-top: 1px solid rgba(58,170,187,0.18);
}
.leila-liquid-lbl { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.leila-liquid-eur { font-size: 13px; color: var(--ink-soft); }
.leila-liquid-hint { font-size: 12px; color: var(--ink-soft); }
.leila-cum-row {
  text-align: right; font-size: 13px; font-weight: 500; color: var(--ink);
  padding: 8px 12px;
  background: rgba(61,26,53,0.02);
  border-top: 1px solid rgba(61,26,53,0.08);
}
.leila-year-total {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
  padding: 14px 16px; background: rgba(61,26,53,0.05);
  border-radius: 8px; font-size: 14px; margin-top: 8px;
}
.leila-year-total span:first-child { font-weight: 600; color: var(--ber); margin-right: 8px; }
.leila-month-sel {
  font-size: 13px; padding: 4px 8px; border: 1px solid rgba(61,26,53,0.2);
  border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer;
}
.leila-dates { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* ── BloquesTab ─────────────────────────────────────────────── */
.blk-desc { font-size: 14px; color: var(--gris2); margin-bottom: 24px; line-height: 1.5; }
.blk-apt-block { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--borde); }
.blk-apt-block:last-of-type { border-bottom: none; }
.blk-apt-name { font-size: 15px; font-weight: 600; color: var(--ber); margin: 0 0 12px; }
.blk-empty { font-size: 13px; color: var(--gris2); margin: 0 0 8px; font-style: italic; }
.blk-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.blk-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--gris2); padding: 4px 6px 8px; border-bottom: 1px solid var(--borde); }
.blk-table td { padding: 4px 6px; vertical-align: middle; }
.blk-table tr:not(:last-child) td { border-bottom: 1px solid rgba(0,0,0,0.04); }
.blk-date-input { border: 1px solid var(--borde); border-radius: 6px; padding: 5px 8px; font-size: 13px; background: var(--blanco); width: 130px; }
.blk-note-input { border: 1px solid var(--borde); border-radius: 6px; padding: 5px 8px; font-size: 13px; background: var(--blanco); width: 200px; }
.blk-del { background: none; border: none; color: #ef4444; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
.blk-del:hover { color: #b91c1c; }
.blk-add { background: none; border: 1px dashed var(--borde); border-radius: 6px; color: var(--gris2); font-size: 13px; padding: 5px 12px; cursor: pointer; margin-top: 4px; }
.blk-add:hover { border-color: var(--ber); color: var(--ber); }

/* ── Section Glow Transition (useSectionGlow) ───────────────── */
.sgt-bar {
  position: fixed;
  bottom: 0; left: 0;
  width: 100vw; height: 3px;
  background: var(--sgt-color, #1BC8D8);
  box-shadow: 0 0 22px 8px var(--sgt-color, #1BC8D8),
              0 0 60px 18px var(--sgt-color, #1BC8D8);
  z-index: 9999;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
}
.sgt-bar.sgt-running {
  animation: sgt-sweep 1.05s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes sgt-sweep {
  0%   { transform: scaleX(0); opacity: 1; }
  52%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}