/* ==========================================================
   Cacique Hotel — Piura, Perú
   styles.css — HTML5/CSS3 puro, sin frameworks
   ========================================================== */

/* ---------- Tipografía de marca ---------- */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2-variations'),
       url('../fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Natalic Script';
  src: url('../fonts/Natalic.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --morado-900: #451B36;
  --morado-700: #6B2D52;
  --morado-500: #9A4E7A;
  --lavanda:    #F3EAF0;
  --dorado:     #C9A227;
  --hueso:      #FAF7F2;
  --gris:       #6E6660;
  --texto:      #2B2624;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sombra: 0 4px 20px rgba(69, 27, 54, 0.10);
  --sombra-hover: 0 16px 40px rgba(69, 27, 54, 0.18);
  --radio: 14px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--texto);
  background: var(--hueso);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Satoshi', -apple-system, sans-serif; font-weight: 900; line-height: 1.2; color: var(--morado-900); }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.45rem); }

img { max-width: 100%; display: block; }
a { color: var(--morado-700); text-decoration: none; }
a:hover { color: var(--morado-500); }
ul { list-style: none; }

.container { width: min(1160px, 92%); margin-inline: auto; }
section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-lavanda { background: var(--lavanda); }
.section-morada { background: var(--morado-900); }
.section-morada h2, .section-morada h3 { color: #fff; }
.section-morada p { color: rgba(255, 255, 255, 0.85); }

.kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 0.6rem;
}
.section-head { max-width: 680px; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head p { color: var(--gris); margin-top: 0.8rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
  font-family: inherit;
}
.btn-primario { background: var(--morado-700); color: #fff; }
.btn-primario:hover { background: var(--morado-500); color: #fff; transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.btn-dorado { background: var(--dorado); color: var(--morado-900); }
.btn-dorado:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); color: var(--morado-900); }
.btn-borde { border-color: var(--morado-700); color: var(--morado-700); background: transparent; }
.btn-borde:hover { background: var(--morado-700); color: #fff; transform: translateY(-3px); }
.btn-borde-claro { border-color: rgba(255,255,255,0.85); color: #fff; background: transparent; }
.btn-borde-claro:hover { background: #fff; color: var(--morado-900); transform: translateY(-3px); }
.btn-ws { background: #25D366; color: #fff; }
.btn-ws:hover { background: #1ebe5b; color: #fff; transform: translateY(-3px); box-shadow: var(--sombra-hover); }

/* ---------- Header / Navbar ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  background: transparent;
}
.site-header.solid,
.site-header.scrolled {
  background: rgba(250, 247, 242, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 18px rgba(69, 27, 54, 0.12);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 0.65rem; font-family: 'Satoshi', sans-serif; font-size: 1.3rem; font-weight: 900; color: #fff; transition: color 0.4s var(--ease); }
.brand-mark {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--morado-700);
  color: #fff; display: grid; place-items: center;
  font-size: 1.25rem; font-weight: 700; border: 2px solid var(--dorado);
}
/* El .brand-mark se escribió para una caja de texto (display:grid + place-items).
   Aplicado a un <img>, que es un elemento reemplazado, Safari dimensiona mal el
   contenido y el logo sale descuadrado. Para la variante <img> se anula el grid
   y se fuerza el recorte al borde redondeado. */
img.brand-mark {
  display: block;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}
.site-header.solid .brand, .site-header.scrolled .brand { color: var(--morado-900); }
.brand span small { display: block; font-family: 'Satoshi', sans-serif; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.85; }

.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: #fff; transition: color 0.3s var(--ease); }
.site-header.solid .nav-links a, .site-header.scrolled .nav-links a { color: var(--texto); }
.nav-links a:hover, .site-header.solid .nav-links a:hover, .site-header.scrolled .nav-links a:hover { color: var(--dorado); }
.nav-links a.activo { color: var(--dorado); font-weight: 600; }
.nav-links .btn { padding: 0.55rem 1.3rem; font-size: 0.88rem; }

.lang-switch {
  display: inline-flex; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 999px; overflow: hidden; font-size: 0.78rem; font-weight: 600;
  transition: border-color 0.3s var(--ease);
}
.site-header.solid .lang-switch, .site-header.scrolled .lang-switch { border-color: var(--morado-500); }
.lang-switch a { padding: 0.28rem 0.7rem; color: #fff; }
.site-header.solid .lang-switch a, .site-header.scrolled .lang-switch a { color: var(--morado-700); }
.lang-switch a.activo { background: var(--dorado); color: var(--morado-900) !important; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; position: relative; z-index: 300; }
.nav-toggle span {
  display: block; width: 26px; height: 2.5px; margin: 5.5px auto; border-radius: 2px;
  background: #fff; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.site-header.solid .nav-toggle span, .site-header.scrolled .nav-toggle span { background: var(--morado-900); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  /* El backdrop-filter del header lo convierte en bloque contenedor de sus hijos
     position:fixed, lo que recortaba el menú a la altura de la barra. Con el menú
     abierto se desactiva para que el panel cubra toda la pantalla. */
  body.menu-abierto .site-header,
  body.menu-abierto .site-header.solid,
  body.menu-abierto .site-header.scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .nav-links {
    position: fixed; inset: 0; z-index: 250;
    background: var(--morado-900);
    flex-direction: column; justify-content: center; justify-content: safe center; gap: 1.6rem;
    min-height: 100vh; min-height: 100dvh;
    padding: calc(88px + env(safe-area-inset-top, 0px)) 1.4rem calc(2.2rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  }
  .nav-links.abierto { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links a, .site-header.solid .nav-links a, .site-header.scrolled .nav-links a { color: #fff; font-size: 1.15rem; }
  .lang-switch, .site-header.solid .lang-switch, .site-header.scrolled .lang-switch { border-color: rgba(255,255,255,0.6); }
  .lang-switch a, .site-header.solid .lang-switch a, .site-header.scrolled .lang-switch a { color: #fff; }
  .nav-links.abierto ~ * .nav-toggle span { background: #fff; }
  body.menu-abierto { overflow: hidden; }
  body.menu-abierto .nav-toggle span { background: #fff !important; }
}

/* El botón "Reservar" del menú mantiene siempre texto oscuro sobre dorado */
.nav-links a.btn-dorado,
.site-header.solid .nav-links a.btn-dorado,
.site-header.scrolled .nav-links a.btn-dorado,
.nav-links a.btn-dorado:hover,
.site-header.solid .nav-links a.btn-dorado:hover,
.site-header.scrolled .nav-links a.btn-dorado:hover { color: var(--morado-900); }
.nav-links a.btn-dorado:hover { filter: brightness(1.07); }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden; text-align: center; padding: 0;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img, .hero-bg picture { width: 100%; height: 100%; }
.hero-bg picture { position: absolute; inset: 0; }
.hero-bg img { object-fit: cover; animation: kenburns 14s var(--ease) infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-slide-b { opacity: 0; animation: heroFade 18s ease-in-out infinite; }
/* La fachada se ancla abajo para que se vea la base del hotel */
.hero-slide-b img { object-position: 50% 88%; transform-origin: 50% 100%; }
@keyframes heroFade {
  0%, 44% { opacity: 0; }
  50%, 94% { opacity: 1; }
  100% { opacity: 0; }
}
.hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(69,27,54,0.55) 0%, rgba(69,27,54,0.35) 45%, rgba(43,20,34,0.72) 100%);
}
/* Se sube 1,5 cm sobre el centro (pedido del cliente); en móvil se deja centrado */
.hero-contenido { position: relative; z-index: 2; padding: 7rem 1.2rem 4rem; max-width: 820px; transform: translateY(-1.5cm); }
.hero-contenido h1 { color: #fff; font-size: clamp(2.5rem, 7vw, 4.4rem); text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
.hero-contenido .hero-estrellas {
  color: #FFD75E; letter-spacing: 0.35em; font-size: 1.15rem; margin-bottom: 0.9rem;
  text-shadow: 0 0 4px rgba(255,215,94,0.9), 0 0 14px rgba(255,199,64,0.6), 0 0 28px rgba(201,162,39,0.45), 0 1px 3px rgba(0,0,0,0.4);
}
.hero-contenido p { color: rgba(255,255,255,0.92); font-size: clamp(1.05rem, 2.4vw, 1.35rem); margin: 1.1rem auto 2rem; max-width: 560px; }
.hero-cta { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.hero-anim { opacity: 0; transform: translateY(26px); animation: heroUp 0.8s var(--ease) forwards; }
.hero-anim.d1 { animation-delay: 0.25s; }
.hero-anim.d2 { animation-delay: 0.5s; }
.hero-anim.d3 { animation-delay: 0.78s; }
@keyframes heroUp { to { opacity: 1; transform: translateY(0); } }
.hero-flecha {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,0.8); animation: flota 2.4s ease-in-out infinite;
}
@keyframes flota { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/* ---------- Banner interior ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--morado-900) 0%, var(--morado-700) 70%, var(--morado-500) 100%);
  padding: calc(72px + clamp(2.8rem, 7vw, 4.5rem)) 0 clamp(2.8rem, 6vw, 4rem);
  text-align: center;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0.8rem auto 0; }
.page-hero-bg { position: absolute; inset: 0; }
.page-hero-bg picture, .page-hero-bg img { width: 100%; height: 100%; }
.page-hero-bg img { object-fit: cover; }
.page-hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(69,27,54,0.78) 0%, rgba(69,27,54,0.55) 100%);
}
.page-hero .container { position: relative; z-index: 1; }

/* ---------- Página de reserva (fondo fijo unificado) ---------- */
.reserva-bg { position: fixed; inset: 0; z-index: -1; }
.reserva-bg picture, .reserva-bg img { width: 100%; height: 100%; }
.reserva-bg img { object-fit: cover; }
.reserva-bg-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 18, 51, 0.62) 0%, rgba(30, 18, 51, 0.46) 40%, rgba(30, 18, 51, 0.26) 100%);
}
.reserva-hero {
  padding: calc(72px + clamp(2.5rem, 6vw, 4rem)) 0 clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
}
.reserva-hero h1 { color: #fff; text-shadow: 0 2px 16px rgba(30, 18, 51, 0.65), 0 1px 4px rgba(30, 18, 51, 0.5); }
.reserva-hero p { color: rgba(255, 255, 255, 0.95); max-width: 620px; margin: 0.8rem auto 0; text-shadow: 0 1px 10px rgba(30, 18, 51, 0.65); }
.reserva-hero .kicker { text-shadow: 0 1px 8px rgba(30, 18, 51, 0.6); }
.reserva-contenido { padding-top: 0; }
.reserva-contenido .form-caja { background: rgba(255, 255, 255, 0.94); padding: clamp(1.4rem, 3vw, 1.9rem); }
.reserva-contenido .aviso { background: rgba(255, 250, 240, 0.94); }

/* ---------- Tarjetas genéricas ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.6rem; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }

.card {
  background: #fff; border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sombra-hover); }
.card-media { overflow: hidden; aspect-ratio: 16 / 9; position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.card-body p { color: var(--gris); font-size: 0.94rem; }
.card-body .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Placeholder foto ---------- */
.ph-foto {
  aspect-ratio: 16 / 9; width: 100%;
  background: linear-gradient(135deg, var(--lavanda) 0%, #E3CBDA 45%, var(--morado-500) 160%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  color: var(--morado-700); text-align: center; padding: 1rem;
}
.ph-foto svg { width: 42px; height: 42px; opacity: 0.75; }
.ph-foto span { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Diferenciadores / servicios con ícono ---------- */
.icono-caja {
  width: 58px; height: 58px; border-radius: 16px;
  background: var(--lavanda); color: var(--morado-700);
  display: grid; place-items: center; margin-bottom: 0.9rem;
}
.icono-caja svg { width: 28px; height: 28px; }
.dif-card { background: #fff; border-radius: var(--radio); padding: 1.7rem 1.5rem; box-shadow: var(--sombra); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.dif-grid { grid-auto-rows: 1fr; }
.dif-grid .dif-card { height: 100%; }
.card-media[data-fotos] { cursor: zoom-in; }
.dif-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-hover); }
.dif-card p { color: var(--gris); font-size: 0.92rem; margin-top: 0.4rem; }
/* En celular las tarjetas de "Por qué elegirnos" van de dos en dos para que
   la sección no ocupe una pantalla entera por tarjeta. */
@media (max-width: 560px) {
  .dif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; grid-auto-rows: auto; }
  .dif-grid .dif-card { padding: 1.1rem 0.9rem 1.2rem; }
  .dif-grid .icono-caja { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0.65rem; }
  .dif-grid .icono-caja svg { width: 22px; height: 22px; }
  .dif-grid h3 { font-size: 1rem; line-height: 1.3; }
  .dif-grid p { font-size: 0.8rem; }
}
.nowrap { white-space: nowrap; }

/* ---------- Habitaciones (listado continuo de fichas) ---------- */
.hab-meta { display: flex; flex-wrap: wrap; gap: 0.9rem; color: var(--gris); font-size: 0.88rem; align-items: center; }
.hab-meta svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; color: var(--morado-500); }
.nota-tarifa { font-size: 0.8rem; color: var(--gris); font-style: italic; }

.hab-titulo { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0.6rem; }
.hab-intro { color: var(--gris); font-style: italic; max-width: 70ch; }

/* ---------- Habitaciones · selector (filtro + menú de fotos) ---------- */
.hab-selector { margin: 1.4rem 0 clamp(1.6rem, 4vw, 2.4rem); }
.hab-filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem;
  padding-bottom: 1.2rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid #EAE3DC;
}
.hab-filtros-tit { font-family: 'Satoshi', sans-serif; font-weight: 700; color: var(--morado-900); font-size: 0.95rem; }
.hab-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hab-chip {
  border: 1px solid #E4DAE1; background: #fff; color: var(--gris);
  border-radius: 999px; padding: 0.48rem 1.05rem; cursor: pointer;
  font-family: inherit; font-size: 0.87rem; line-height: 1.2;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.hab-chip:hover { border-color: var(--morado-500); color: var(--morado-700); }
.hab-chip.activo { background: var(--morado-900); border-color: var(--morado-900); color: #fff; }

.hab-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.hab-op {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 0; overflow: hidden; cursor: pointer;
  background: #fff; border: 1px solid #EAE3DC; border-radius: var(--radio);
  font-family: inherit; box-shadow: 0 2px 10px rgba(69, 27, 54, 0.06);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.hab-op[hidden] { display: none; }
.hab-op:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); border-color: #E0D2DC; }
.hab-op-foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lavanda); }
.hab-op-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.hab-op:hover .hab-op-foto img { transform: scale(1.06); }
.hab-op-foto.ph {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--lavanda) 0%, #E3CBDA 60%, var(--morado-500) 190%);
  color: var(--morado-700);
}
.hab-op-foto.ph svg { width: 26px; height: 26px; }
.hab-op-txt { display: block; padding: 0.75rem 0.9rem 0.85rem; }
.hab-op-nombre { display: block; font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 0.98rem; color: var(--morado-900); }
.hab-op-cama { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--gris); }
.hab-op-check {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--dorado); color: var(--morado-900);
  display: grid; place-items: center;
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.hab-op-check svg { width: 14px; height: 14px; }
.hab-op[aria-selected="true"] {
  border-color: var(--dorado);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.45), var(--sombra);
}
.hab-op[aria-selected="true"] .hab-op-check { opacity: 1; transform: scale(1); }
.hab-vacio { color: var(--gris); font-style: italic; }
@media (max-width: 560px) {
  .hab-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .hab-op-nombre { font-size: 0.9rem; }
}

/* ---------- Habitaciones · armador de grupo (filtro 3+ personas) ---------- */
.hab-op-cap { display: none; margin-top: 0.25rem; font-size: 0.78rem; font-weight: 700; color: var(--morado-700); }
.hab-menu.modo-grupo .hab-op-cap { display: block; }
.hab-menu.modo-grupo .hab-op-check { display: none; }
.hab-menu.modo-grupo .hab-op[aria-selected] { border-color: #EAE3DC; box-shadow: 0 2px 10px rgba(69, 27, 54, 0.06); }
.hab-menu.modo-grupo .hab-op.en-grupo {
  border-color: var(--morado-700);
  box-shadow: 0 0 0 2px rgba(107, 45, 82, 0.35), var(--sombra);
}
.hab-menu.modo-grupo .hab-op::after {
  content: '+'; position: absolute; right: 0.6rem; bottom: 0.6rem;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lavanda); color: var(--morado-900);
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1; font-weight: 700;
}
.hab-menu.modo-grupo .hab-op:hover::after { background: var(--dorado); }
.hab-op-qty {
  position: absolute; top: 0.6rem; right: 0.6rem;
  min-width: 30px; height: 26px; padding: 0 0.4rem; border-radius: 999px;
  background: var(--morado-900); color: #fff;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 700;
}
.hab-op-qty[hidden] { display: none; }
/* Al armar el grupo, cada ficha se ve como referencia: se reserva desde el panel */
.hab-lista.modo-grupo .hab-reservar { display: none; }

.hab-grupo-cab {
  background: var(--hueso); border: 1px solid #EAE3DC; border-radius: var(--radio);
  padding: 1.1rem 1.2rem; margin-bottom: 1.4rem;
}
.hab-grupo-cab[hidden], .hab-grupo-res[hidden] { display: none; }
.hab-grupo-top { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; align-items: center; justify-content: space-between; }
.hab-grupo-tit { display: block; font-family: 'Satoshi', sans-serif; font-weight: 900; color: var(--morado-900); font-size: 1.05rem; }
.hab-grupo-sub { color: var(--gris); font-size: 0.88rem; margin-top: 0.15rem; }
.hab-grupo-pers { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; color: var(--gris); }
.hab-grupo-pers strong { min-width: 1.4rem; text-align: center; font-size: 1.05rem; color: var(--morado-900); }
.hab-paso {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid #E4DAD3; background: #fff; color: var(--morado-900);
  font: inherit; font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hab-paso:hover { background: var(--lavanda); border-color: var(--lavanda); }

.hab-grupo-barra { height: 6px; border-radius: 999px; background: #EAE3DC; margin: 1rem 0 0.55rem; overflow: hidden; }
.hab-grupo-barra i { display: block; height: 100%; width: 0; background: var(--morado-500); transition: width 0.35s var(--ease); }
.hab-grupo-barra.completa i { background: var(--dorado); }
.hab-grupo-estado { font-size: 0.88rem; color: var(--gris); font-weight: 600; }
.hab-grupo-estado.ok { color: var(--morado-900); }

.hab-grupo-res {
  background: #fff; border: 1px solid #EAE3DC; border-radius: var(--radio);
  padding: 1.1rem 1.2rem; margin-top: 1.4rem; box-shadow: var(--sombra);
}
.hab-grupo-lista { list-style: none; margin: 0.7rem 0 1rem; }
.hab-grupo-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0; border-bottom: 1px solid #F0EAE3;
}
.hab-grupo-lista li:last-child { border-bottom: 0; }
.hab-grupo-fila-txt strong { display: block; font-size: 0.95rem; color: var(--morado-900); }
.hab-grupo-fila-txt small { display: block; font-size: 0.78rem; color: var(--gris); }
.hab-grupo-pasos { display: flex; align-items: center; gap: 0.45rem; }
.hab-grupo-pasos strong { min-width: 1.3rem; text-align: center; color: var(--morado-900); }
.hab-grupo-vacio { color: var(--gris); font-style: italic; font-size: 0.9rem; }
.hab-grupo-total { font-size: 0.9rem; color: var(--gris); }
.hab-grupo-total strong { color: var(--morado-900); }
.hab-grupo-ir { width: 100%; justify-content: center; }
.hab-grupo-ir:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

.hab-lista { display: flex; flex-direction: column; }
.hab-ficha[hidden] { display: none; }
/* Con el selector activo sólo se ve una ficha: sin separadores ni animación de scroll */
.hab-lista.con-selector .hab-ficha { border-top: 0; padding-top: 0; }
.hab-lista.con-selector .hab-ficha.reveal { opacity: 1; transform: none; transition: none; }
.hab-lista.con-selector .hab-ficha.entra { animation: habEntra 0.45s var(--ease) both; }
@keyframes habEntra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hab-ficha {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.8rem, 4vw, 3rem); align-items: start;
  padding: clamp(2.4rem, 5vw, 3.6rem) 0;
  border-top: 1px solid #EAE3DC;
  scroll-margin-top: 92px;
}
.hab-ficha:first-child { border-top: 0; padding-top: clamp(1.2rem, 3vw, 1.8rem); }
.hab-ficha:last-child { padding-bottom: 0.6rem; }
.hab-visor-marco { position: relative; }
.hab-visor-main {
  display: block; width: 100%;
  border: 0; padding: 0; background: none; cursor: zoom-in;
  border-radius: var(--radio); overflow: hidden; aspect-ratio: 16 / 9;
}
.hab-visor-main picture, .hab-visor-main img { width: 100%; height: 100%; }
.hab-visor-main img { object-fit: cover; display: block; }
.hab-visor-main.vertical { background: #2B1422; }
.hab-visor-main.vertical img { object-fit: contain; }
.hab-visor-ph { border-radius: var(--radio); overflow: hidden; aspect-ratio: 16 / 9; }
.hab-visor-ph .ph-foto { aspect-ratio: auto; height: 100%; }
.hab-expand {
  position: absolute; right: 0.85rem; bottom: 0.85rem;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(43, 20, 34, 0.55); color: #fff;
  display: grid; place-items: center; pointer-events: none;
}
.hab-expand svg { width: 18px; height: 18px; }
.hab-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--morado-900);
  display: grid; place-items: center;
  box-shadow: 0 2px 12px rgba(69, 27, 54, 0.28);
  transition: background-color 0.3s var(--ease);
}
.hab-flecha:hover { background: var(--dorado); }
.hab-flecha svg { width: 18px; height: 18px; }
.hab-prev { left: 0.85rem; }
.hab-next { right: 0.85rem; }
.hab-thumbs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.7rem; margin-top: 0.8rem; }
.hab-thumbs button {
  height: 70px; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; padding: 0; cursor: pointer; background: none;
  opacity: 0.7; transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hab-thumbs button img { height: 100%; width: auto; display: block; }
.hab-thumbs button:hover { opacity: 1; }
.hab-thumbs button.activo { border-color: var(--dorado); opacity: 1; }

.hab-info h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 0.7rem; }
.hab-ocupacion { margin-bottom: 0.4rem; }
.hab-ocupacion strong { color: var(--morado-900); }
.hab-desc { color: var(--gris); }
.hab-info .hab-meta { gap: 1.3rem; padding: 1rem 0 1.2rem; }
.hab-serv-titulo { font-weight: 700; color: var(--morado-900); margin-bottom: 0.6rem; }
.hab-servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1.2rem; margin-bottom: 1.7rem; }
.hab-servicios li { display: flex; align-items: center; gap: 0.5rem; color: var(--gris); font-size: 0.92rem; }
.hab-servicios svg { width: 15px; height: 15px; color: var(--dorado); flex-shrink: 0; }
.hab-reservar { display: flex; justify-content: flex-end; }
.hab-reservar .btn { font-size: calc(0.95rem + 1px); font-weight: 700; }
@media (max-width: 900px) {
  .hab-ficha { grid-template-columns: 1fr; gap: 1.1rem; }
  /* Miniaturas en una sola fila deslizable: ocupan menos alto */
  .hab-thumbs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 0.5rem; margin-top: 0.6rem;
    padding-bottom: 0.15rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hab-thumbs::-webkit-scrollbar { display: none; }
  .hab-thumbs button { height: 54px; flex: 0 0 auto; scroll-snap-align: start; }
  /* Móvil: el botón Reservar sube a la altura del título, justo debajo de las fotos */
  .hab-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.9rem;
    align-items: center;
  }
  .hab-info > * { grid-column: 1 / -1; }
  .hab-info > h3 {
    grid-column: 1; grid-row: 1;
    font-size: clamp(1.15rem, 4.6vw, 1.5rem);
    line-height: 1.2;
    margin-bottom: 0;
  }
  .hab-info > .hab-reservar {
    grid-column: 2; grid-row: 1;
    justify-content: flex-end;
  }
  .hab-info > .hab-reservar .btn {
    padding: 0.6rem 1.3rem;
    font-size: calc(0.88rem + 1px);
    font-weight: 700;
    white-space: nowrap;
  }
  .hab-info > .hab-ocupacion { margin-top: 0.7rem; margin-bottom: 0.35rem; }
  .hab-info .hab-meta { gap: 0.6rem 1.2rem; padding: 0.85rem 0 0.95rem; }
  .hab-info > .hab-servicios { margin-bottom: 0.2rem; }
}
@media (max-width: 560px) {
  .hab-servicios { grid-template-columns: 1fr; }
  .hab-info > .hab-reservar .btn { padding: 0.55rem 1.1rem; font-size: calc(0.85rem + 1px); }
}

/* ---------- Contadores ---------- */
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; text-align: center; }
.contador .cifra { font-family: 'Satoshi', sans-serif; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 900; color: var(--dorado); line-height: 1; }
.contador .etiqueta { color: rgba(255,255,255,0.85); font-size: 0.92rem; margin-top: 0.5rem; }

/* ---------- Testimonios ---------- */
.testimonio {
  background: #fff; border-radius: var(--radio); padding: 1.8rem; box-shadow: var(--sombra);
  border-top: 4px solid var(--dorado);
}
.testimonio .comillas { font-family: 'Natalic Script', cursive; font-size: 2.6rem; color: var(--morado-500); line-height: 0.6; }
.testimonio p { color: var(--gris); font-style: italic; margin: 0.8rem 0 1rem; }
.testimonio .autor { font-weight: 600; color: var(--morado-900); font-size: 0.9rem; }
.pendiente { outline: 2px dashed var(--morado-500); outline-offset: 4px; }

/* ---------- Logos empresas ---------- */
.logos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.2rem; }
.logo-ph {
  aspect-ratio: 3 / 1.4; border-radius: 10px;
  background: repeating-linear-gradient(45deg, #ECE7E1, #ECE7E1 10px, #E4DED7 10px, #E4DED7 20px);
  display: grid; place-items: center; color: var(--gris); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 0.5rem;
}

/* ---------- Ubicación ---------- */
.mapa-marco { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.mapa-marco iframe { width: 100%; height: 420px; border: 0; display: block; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.cercania { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid #EAE3DC; }
.cercania:last-child { border-bottom: 0; }
.cercania .icono-caja { width: 46px; height: 46px; margin: 0; flex-shrink: 0; border-radius: 12px; }
.cercania .icono-caja svg { width: 22px; height: 22px; }
.cercania strong { color: var(--morado-900); }
.cercania span { display: block; color: var(--gris); font-size: 0.88rem; }

/* ---------- Formularios ---------- */
.form-caja { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(1.6rem, 4vw, 2.6rem); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 0.35rem; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: 0.88rem; color: var(--morado-900); }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 0.95rem; color: var(--texto);
  padding: 0.75rem 0.9rem; border: 1.5px solid #DDD3CC; border-radius: 10px; background: var(--hueso);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--morado-500); box-shadow: 0 0 0 3px rgba(154, 78, 122, 0.15);
}
.campo .error-msg { color: #B3261E; font-size: 0.8rem; display: none; }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea { border-color: #B3261E; }
.campo.invalido .error-msg { display: block; }
.form-nota { font-size: 0.85rem; color: var(--gris); margin-top: 1rem; }
.form-acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }
.form-acciones .btn { flex: 1 1 auto; }
@media (max-width: 560px) { .form-acciones .btn { flex: 1 1 100%; padding-left: 1.2rem; padding-right: 1.2rem; } }
.radio-linea { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.radio-linea label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; font-size: 0.92rem; color: var(--texto); }
.radio-linea input { accent-color: var(--morado-700); width: 17px; height: 17px; }

.aviso {
  background: var(--lavanda); border-left: 4px solid var(--dorado);
  padding: 1rem 1.2rem; border-radius: 0 10px 10px 0; font-size: 0.9rem; color: var(--morado-900);
}

/* ---------- Galería ---------- */
.galeria-seccion { padding-top: clamp(2.2rem, 4vw, 3rem); }
.filtros { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin: clamp(2.2rem, 5vw, 3.2rem) 0 2.2rem; }
.filtros button {
  font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  padding: 0.55rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--morado-500);
  background: transparent; color: var(--morado-700);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.filtros button:hover { transform: translateY(-2px); }
.filtros button.activo { background: var(--morado-700); border-color: var(--morado-700); color: #fff; }
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.galeria-item {
  border-radius: 12px; overflow: hidden; cursor: zoom-in; position: relative;
  aspect-ratio: 4 / 3; box-shadow: var(--sombra); border: 0; padding: 0; background: var(--lavanda);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), opacity 0.4s var(--ease);
}
.galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.galeria-item:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.galeria-item:hover img { transform: scale(1.06); }
.galeria-item.oculto { display: none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 500; display: none;
  background: rgba(43, 20, 34, 0.94);
  align-items: center; justify-content: center;
}
.lightbox.abierto { display: flex; }
.lightbox figure {
  max-width: min(1100px, 92vw); max-height: 86vh; margin: 0;
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.lightbox.visible figure { opacity: 1; transform: scale(1); }
.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; }
.lightbox figcaption { color: rgba(255,255,255,0.8); text-align: center; margin-top: 0.7rem; font-size: 0.88rem; }
.lb-btn {
  position: absolute; background: rgba(255,255,255,0.12); border: 0; color: #fff; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.lb-btn:hover { background: rgba(255,255,255,0.28); transform: scale(1.08); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-cerrar { top: 1.2rem; right: 1.2rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.08); }
.lb-next:hover { transform: translateY(-50%) scale(1.08); }
@media (max-width: 640px) { .lb-prev, .lb-next { width: 42px; height: 42px; } }

/* ---------- Banner de habitaciones (inicio) ---------- */
.hab-banner { position: relative; overflow: hidden; padding: clamp(5rem, 12vw, 8.5rem) 0; }
.hab-banner-bg { position: absolute; inset: 0; }
.hab-banner-bg picture, .hab-banner-bg img { width: 100%; height: 100%; }
.hab-banner-bg img { object-fit: cover; }
.hab-banner-velo {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(30, 18, 51, 0.10), rgba(30, 18, 51, 0.16));
}
/* Video de recorrido: sin controles, sin pausa, siempre de fondo */
.hab-banner-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;      /* no se puede pausar ni interactuar */
  background: var(--morado, #2b1a4d);
}
.hab-banner-video::-webkit-media-controls,
.hab-banner-video::-webkit-media-controls-enclosure,
.hab-banner-video::-webkit-media-controls-start-playback-button { display: none !important; }
.hab-banner:has(.hab-banner-video) .hab-banner-velo {
  background: linear-gradient(rgba(30, 18, 51, 0.42), rgba(30, 18, 51, 0.52));
}
.hab-banner-contenido { position: relative; text-align: center; }
.hab-banner-contenido h2 { color: #fff; text-shadow: 0 2px 14px rgba(30, 18, 51, 0.65), 0 1px 4px rgba(30, 18, 51, 0.55); }
.hab-banner-contenido p { color: #fff; max-width: 560px; margin: 0.9rem auto 1.8rem; text-shadow: 0 2px 12px rgba(30, 18, 51, 0.65), 0 1px 4px rgba(30, 18, 51, 0.55); }
.hab-banner-contenido .kicker { text-shadow: 0 1px 8px rgba(30, 18, 51, 0.6); }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; }
.cta-final h2 { color: #fff; margin-bottom: 0.8rem; }
.cta-final p { max-width: 560px; margin: 0 auto 1.8rem; }
.cta-botones { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--morado-900); color: rgba(255,255,255,0.82); padding: 3.5rem 0 0; font-size: 0.92rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,0.82); }
.site-footer a:hover { color: var(--dorado); }
.site-footer li { margin-bottom: 0.55rem; }
.footer-brand .brand-mark { margin-bottom: 0.8rem; }
.footer-logo { width: 210px; max-width: 100%; border-radius: 12px; margin-bottom: 0.8rem; }
.footer-brand p { font-family: 'Natalic Script', cursive; font-size: 1.35rem; color: var(--dorado); margin-top: 0.6rem; }
.footer-contacto li { display: flex; gap: 0.55rem; align-items: flex-start; }
.footer-contacto svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--dorado); }
.footer-legal { border-top: 1px solid rgba(255,255,255,0.14); padding: 1.2rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; }
.libro-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.libro-link svg { width: 20px; height: 20px; color: var(--dorado); }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 300;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.wa-float:hover { transform: translateY(-4px) scale(1.06); color: #fff; box-shadow: 0 14px 32px rgba(37, 211, 102, 0.55); }
.wa-float svg { width: 30px; height: 30px; }
/* Con el menú móvil abierto no debe flotar sobre el panel */
body.menu-abierto .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Reveal (IntersectionObserver) ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--delay, 0s); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Tablas / texto legal ---------- */
.prosa { max-width: 780px; }
.prosa h2 { margin: 2.2rem 0 0.8rem; font-size: 1.5rem; }
.prosa h3 { margin: 1.6rem 0 0.6rem; }
.prosa p, .prosa li { color: var(--gris); margin-bottom: 0.8rem; }
.prosa ul { list-style: disc; padding-left: 1.4rem; }
.prosa strong { color: var(--texto); }

/* ---------- Modal de reserva con calendario ---------- */
.rm-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(43, 20, 34, 0.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; overflow-y: auto;
  opacity: 0; transition: opacity 0.28s var(--ease);
}
.rm-overlay[hidden] { display: none; }
.rm-overlay.visible { opacity: 1; }
.rm-caja {
  background: #fff; border-radius: var(--radio); width: 100%; max-width: 640px;
  padding: 1.6rem 1.5rem 1.4rem; position: relative; margin: auto;
  box-shadow: 0 24px 60px rgba(43, 20, 34, 0.35);
  transform: translateY(18px) scale(0.98); transition: transform 0.32s var(--ease);
}
.rm-overlay.visible .rm-caja { transform: translateY(0) scale(1); }
.rm-cerrar {
  position: absolute; top: 0.85rem; right: 0.85rem; width: 34px; height: 34px;
  border: none; border-radius: 50%; background: var(--lavanda); color: var(--morado-900);
  display: grid; place-items: center; cursor: pointer; transition: background 0.25s var(--ease);
}
.rm-cerrar:hover { background: #E7D8E2; }
.rm-cerrar svg { width: 17px; height: 17px; }
.rm-caja .kicker { margin-bottom: 0.3rem; }
.rm-titulo { font-size: 1.45rem; margin-bottom: 0.25rem; }
/* Las personas ya no se piden: se muestran aquí, tal como irán al mensaje */
.rm-detalle { font-size: 0.88rem; font-weight: 700; color: var(--morado-700); margin-bottom: 0.35rem; }
.rm-detalle[hidden] { display: none; }
.rm-sub { color: var(--gris); font-size: 0.94rem; margin-bottom: 1.1rem; }

/* Las flechas flotan sobre la fila de nombres de mes, sin ocupar alto propio */
.rm-nav { position: relative; height: 0; }
.rm-nav button {
  position: absolute; top: -5px;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid #E4DAD3;
  background: #fff; color: var(--morado-900); display: grid; place-items: center;
  cursor: pointer; transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.rm-nav button:hover:not(:disabled) { background: var(--lavanda); border-color: var(--lavanda); }
.rm-nav button:disabled { opacity: 0.32; cursor: default; }
.rm-nav button svg { width: 16px; height: 16px; }
.rm-prev { left: 0; }
.rm-next { right: 0; }

.rm-meses { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.rm-mes-nombre {
  text-align: center; font-weight: 700; color: var(--morado-700);
  font-size: 0.95rem; margin-bottom: 0.5rem;
}
.rm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rm-dow {
  text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--gris);
  text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 0.3rem;
}
.rm-dia {
  border: none; background: transparent; font: inherit; font-size: 0.88rem;
  aspect-ratio: 1; border-radius: 8px; cursor: pointer; color: var(--texto);
  display: grid; place-items: center; transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.rm-dia:hover:not(:disabled) { background: var(--lavanda); }
.rm-dia:disabled { color: #C9C1BB; cursor: default; }
.rm-dia.rango { background: var(--lavanda); border-radius: 0; }
.rm-dia.extremo { background: var(--morado-700); color: #fff; font-weight: 700; }
.rm-dia.extremo.inicio { border-radius: 8px 0 0 8px; }
.rm-dia.extremo.fin { border-radius: 0 8px 8px 0; }
.rm-dia.extremo.inicio.fin { border-radius: 8px; }
.rm-dia.hoy:not(.extremo) { box-shadow: inset 0 0 0 1px var(--dorado); }

.rm-resumen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem;
  margin: 1.2rem 0 0.9rem;
}
.rm-campo {
  border: 1px solid #E4DAD3; border-radius: 10px; padding: 0.55rem 0.8rem; background: var(--hueso);
}
.rm-campo span { display: block; font-size: 0.72rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: 0.05em; }
.rm-campo strong { font-size: 0.95rem; color: var(--morado-900); font-weight: 700; }
.rm-campo.vacio strong { color: #B9AFA8; font-weight: 400; }

.rm-ir { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem; }
.rm-ir svg { width: 19px; height: 19px; }
.rm-ir[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.rm-nota { text-align: center; font-size: 0.8rem; color: var(--gris); margin-top: 0.7rem; }

@media (max-width: 640px) {
  .hero-contenido { transform: none; }
  .rm-caja { padding: 1.4rem 1.1rem 1.2rem; }
  .rm-meses { grid-template-columns: 1fr; }
  .rm-meses > div:nth-child(2) { display: none; }
  .rm-titulo { font-size: 1.25rem; }
}
@media (max-width: 400px) {
  .rm-resumen { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .hero-bg img { animation: none !important; transform: none !important; }
  .hero-slide-b { animation: none !important; opacity: 0 !important; }
  .hero-anim { opacity: 1; transform: none; animation: none; }
  .reveal { opacity: 1; transform: none; }
  .hero-flecha { animation: none; }
}