/* ==========================================================================
   Bungalows Aguazul — La Pedrera, Rocha
   Hoja de estilos unica. Sitio estatico, sin dependencias.
   Orden: 1 tokens · 2 base · 3 utilidades · 4 header · 5 hero · 6 reserva
          7 secciones · 8 alojamientos · 9 servicios · 10 ubicacion
          11 entorno · 12 contacto · 13 footer · 14 ficha · 15 lightbox
   ========================================================================== */

/* 1 · TOKENS ============================================================== */
:root{
  /* arena: papel calido, del tono de la duna y la pared encalada */
  --arena-50:#FDFAF4;
  --arena-100:#F8F2E7;
  --arena-200:#F0E7D7;
  --arena-300:#E2D4BE;
  --arena-400:#C8B593;

  /* tinta: negro con poso verde, no gris neutro */
  --tinta:#1B2325;
  --tinta-70:#4B5558;
  --tinta-50:#727B7D;

  /* mar: el atlantico de Rocha, verde antes que azul */
  --mar:#12545B;
  --mar-800:#0C3B41;
  --mar-600:#186B72;
  --mar-300:#6BA3A6;
  --mar-100:#D3E4E2;

  /* acentos calidos: teja y sol de la tarde */
  --terracota:#B0563B;
  --terracota-600:#8E4429;
  --sol:#DB9A4D;

  --blanco:#fff;
  --wapp:#25D366;

  --fuente-display:"Fraunces",Georgia,"Times New Roman",serif;
  --fuente-texto:"Karla","Helvetica Neue",Arial,sans-serif;

  --ancho:1180px;
  --ancho-amplio:1440px;
  --gutter:clamp(1.25rem,5vw,2.75rem);
  --seccion:clamp(4.5rem,10vw,8rem);
  --radio:14px;
  --radio-lg:22px;

  --sombra-sm:0 1px 2px rgba(27,35,37,.06),0 4px 12px rgba(27,35,37,.05);
  --sombra:0 2px 6px rgba(27,35,37,.06),0 18px 40px -12px rgba(27,35,37,.18);
  --sombra-lg:0 4px 10px rgba(27,35,37,.07),0 32px 64px -20px rgba(27,35,37,.28);

  --header-h:68px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:900px){ :root{ --header-h:84px; } }

/* 2 · BASE =============================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* el ancla no queda tapada por el header fijo */
  scroll-padding-top:calc(var(--header-h) + 12px);
}
body{
  margin:0;
  background:var(--arena-100);
  color:var(--tinta);
  font-family:var(--fuente-texto);
  font-size:clamp(1rem,.97rem + .15vw,1.075rem);
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;              /* ninguna seccion debe desbordar en celular */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:rgba(18,84,91,.14);
}
/* grano sutil sobre todo el sitio: le saca el plano digital al fondo */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1;
  pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img,svg,video{ display:block; max-width:100%; }
/* picture no participa del layout: la img la posiciona su contenedor real */
picture{ display:contents; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--fuente-display); font-weight:400; line-height:1.06; letter-spacing:-.015em; font-variation-settings:"WONK" 1; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--mar); color:var(--arena-50); }

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

.salto-contenido{
  position:absolute; left:50%; top:0; z-index:200;
  transform:translate(-50%,-140%);
  background:var(--mar); color:var(--arena-50);
  padding:.75rem 1.4rem; border-radius:0 0 10px 10px;
  font-size:.9rem; font-weight:600;
  transition:transform .2s var(--ease);
}
.salto-contenido:focus{ transform:translate(-50%,0); }

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

/* 3 · UTILIDADES ========================================================= */
.solo-lectores{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.contenedor--amplio{ max-width:var(--ancho-amplio); }
.seccion{ padding-block:var(--seccion); position:relative; }
.seccion--arena{ background:var(--arena-200); }
.seccion--clara{ background:var(--arena-50); }
.seccion--mar{ background:var(--mar); color:var(--arena-100); }

.rotulo{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--fuente-texto); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mar-600);
  margin-bottom:1.15rem;
}
.rotulo::before{ content:""; width:34px; height:1.5px; background:currentColor; opacity:.55; flex:none; }
.seccion--mar .rotulo{ color:var(--mar-300); }

.titulo-xl{ font-size:clamp(2.55rem,8.5vw,5rem); }
.titulo-l { font-size:clamp(2.05rem,5.4vw,3.4rem); }
.titulo-m { font-size:clamp(1.5rem,3.4vw,2.05rem); letter-spacing:-.01em; }
.titulo-s { font-size:clamp(1.2rem,2.4vw,1.45rem); letter-spacing:-.005em; }
.destacado{ font-style:italic; font-variation-settings:"WONK" 1; color:var(--mar); }
.seccion--mar .destacado{ color:var(--sol); }
.bajada{ font-size:clamp(1.05rem,1rem + .45vw,1.22rem); color:var(--tinta-70); max-width:56ch; line-height:1.62; }
.seccion--mar .bajada{ color:var(--mar-100); }

/* onda: divisor dibujado, aparece entre bloques */
.onda{ display:block; width:120px; height:12px; color:var(--mar-300); margin:1.75rem 0; opacity:.85; }
.onda svg{ width:100%; height:100%; overflow:visible; }

/* botones */
.btn{
  --btn-bg:var(--mar); --btn-fg:var(--arena-50); --btn-bd:var(--mar);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.9rem 1.7rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd); border-radius:999px;
  font-family:var(--fuente-texto); font-size:.95rem; font-weight:700;
  letter-spacing:.02em; cursor:pointer; text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),color .22s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(12,59,65,.55); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:19px; height:19px; flex:none; }
.btn--fantasma{ --btn-bg:transparent; --btn-fg:var(--mar); --btn-bd:rgba(18,84,91,.35); }
.btn--fantasma:hover{ --btn-bg:var(--mar); --btn-fg:var(--arena-50); --btn-bd:var(--mar); }
.btn--claro{ --btn-bg:var(--arena-50); --btn-fg:var(--mar-800); --btn-bd:var(--arena-50); }
.btn--sobrefoto{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.55); backdrop-filter:blur(6px); }
.btn--sobrefoto:hover{ --btn-bg:#fff; --btn-fg:var(--mar-800); --btn-bd:#fff; }
.btn--wapp{ --btn-bg:var(--wapp); --btn-fg:#06381b; --btn-bd:var(--wapp); }
.btn--bloque{ width:100%; }

.enlace-flecha{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.92rem; letter-spacing:.03em;
  color:var(--mar); padding-block:.35rem;
}
.enlace-flecha svg{ width:17px; height:17px; transition:transform .25s var(--ease); }
.enlace-flecha:hover svg{ transform:translateX(5px); }

/* revelado al hacer scroll (lo activa main.js) */
.revelar{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.revelar.visible{ opacity:1; transform:none; }
.revelar[data-retraso="1"]{ transition-delay:.09s; }
.revelar[data-retraso="2"]{ transition-delay:.18s; }
.revelar[data-retraso="3"]{ transition-delay:.27s; }
.revelar[data-retraso="4"]{ transition-delay:.36s; }
.revelar[data-retraso="5"]{ transition-delay:.45s; }
html.sin-js .revelar{ opacity:1; transform:none; }

/* 4 · HEADER ============================================================= */
.encabezado{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.encabezado__fila{
  width:100%; max-width:var(--ancho-amplio); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:1.25rem;
}
.encabezado.es-solido,
.encabezado.menu-abierto{
  background:rgba(248,242,231,.93);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--arena-300);
  box-shadow:0 8px 24px -18px rgba(27,35,37,.5);
}

/* marca tipografica: reproduce el logo actual (bungalows / aguazul) */
.marca{ display:flex; flex-direction:column; line-height:1; margin-right:auto; flex:none; }
.marca__super{
  font-family:var(--fuente-texto); font-size:.6rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase;
  padding-left:.2em; margin-bottom:.24em;
  color:var(--mar-600); transition:color .35s var(--ease);
}
.marca__nombre{
  font-family:var(--fuente-display); font-style:italic; font-weight:500;
  font-variation-settings:"WONK" 1;
  font-size:clamp(1.6rem,4.6vw,2.05rem); letter-spacing:-.02em;
  color:var(--mar-800); transition:color .35s var(--ease);
}
.encabezado:not(.es-solido):not(.menu-abierto) .marca__super{ color:rgba(255,255,255,.82); }
.encabezado:not(.es-solido):not(.menu-abierto) .marca__nombre{ color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); }

.nav{ display:none; }
.nav__lista{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav__link{
  position:relative; font-size:.83rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; padding-block:.5rem;
  color:var(--tinta-70); transition:color .25s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:.05rem;
  width:100%; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{ color:var(--mar); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.encabezado:not(.es-solido) .nav__link{ color:rgba(255,255,255,.9); text-shadow:0 1px 10px rgba(0,0,0,.35); }
.encabezado:not(.es-solido) .nav__link:hover{ color:#fff; }

.encabezado__acciones{ display:flex; align-items:center; gap:.6rem; flex:none; }

/* selector de idioma */
.idioma{ display:flex; align-items:center; gap:2px; padding:3px; border-radius:999px; border:1.5px solid var(--arena-300); background:rgba(255,255,255,.5); }
.encabezado:not(.es-solido):not(.menu-abierto) .idioma{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12); }
.idioma__btn{
  min-width:38px; min-height:34px; padding:0 .5rem;
  background:none; border:0; border-radius:999px; cursor:pointer;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-50); transition:background .22s var(--ease),color .22s var(--ease);
}
.idioma__btn[aria-pressed="true"]{ background:var(--mar); color:var(--arena-50); }
.encabezado:not(.es-solido):not(.menu-abierto) .idioma__btn{ color:rgba(255,255,255,.85); }
.encabezado:not(.es-solido):not(.menu-abierto) .idioma__btn[aria-pressed="true"]{ background:#fff; color:var(--mar-800); }

.encabezado .btn{ min-height:44px; padding:.6rem 1.25rem; font-size:.85rem; }
.encabezado__cta{ display:none; }

/* hamburguesa */
.hamburguesa{
  width:46px; height:46px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; padding:0; flex:none;
}
.hamburguesa span{
  display:block; width:24px; height:2px; border-radius:2px;
  background:var(--tinta); position:relative;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.hamburguesa span::before,.hamburguesa span::after{
  content:""; position:absolute; left:0; width:24px; height:2px; border-radius:2px;
  background:inherit; transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.hamburguesa span::before{ top:-7px; }
.hamburguesa span::after{ top:7px; }
.encabezado:not(.es-solido):not(.menu-abierto) .hamburguesa span{ background:#fff; }
.menu-abierto .hamburguesa span{ background:transparent; }
.menu-abierto .hamburguesa span::before{ background:var(--tinta); transform:translateY(7px) rotate(45deg); }
.menu-abierto .hamburguesa span::after { background:var(--tinta); transform:translateY(-7px) rotate(-45deg); }

/* menu movil a pantalla completa */
.menu-movil{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:89;
  background:var(--arena-100);
  padding:clamp(1.5rem,7vw,3rem) var(--gutter) 2.5rem;
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.menu-movil.abierto{ opacity:1; visibility:visible; transform:none; }
.menu-movil__lista{ display:flex; flex-direction:column; }
.menu-movil__lista li{ border-bottom:1px solid var(--arena-300); }
.menu-movil__link{
  display:flex; align-items:baseline; gap:1rem;
  padding:1.05rem .25rem;
  font-family:var(--fuente-display); font-size:1.7rem; letter-spacing:-.015em;
  color:var(--tinta);
  opacity:0; transform:translateY(14px);
}
.menu-movil.abierto .menu-movil__link{ animation:entra-menu .5s var(--ease) forwards; }
.menu-movil__lista li:nth-child(1) .menu-movil__link{ animation-delay:.06s; }
.menu-movil__lista li:nth-child(2) .menu-movil__link{ animation-delay:.11s; }
.menu-movil__lista li:nth-child(3) .menu-movil__link{ animation-delay:.16s; }
.menu-movil__lista li:nth-child(4) .menu-movil__link{ animation-delay:.21s; }
.menu-movil__lista li:nth-child(5) .menu-movil__link{ animation-delay:.26s; }
.menu-movil__lista li:nth-child(6) .menu-movil__link{ animation-delay:.31s; }
.menu-movil__num{ font-family:var(--fuente-texto); font-size:.68rem; font-weight:700; letter-spacing:.16em; color:var(--mar-300); }
@keyframes entra-menu{ to{ opacity:1; transform:none; } }
.menu-movil__pie{ margin-top:auto; padding-top:2rem; display:grid; gap:.85rem; }
.menu-movil__dato{ font-size:.9rem; color:var(--tinta-70); display:flex; align-items:center; gap:.6rem; }
.menu-movil__dato svg{ width:17px; height:17px; color:var(--mar-600); flex:none; }
body.sin-scroll{ overflow:hidden; }

@media (min-width:1000px){
  .nav{ display:block; margin-right:1.5rem; }
  .encabezado__cta{ display:inline-flex; }
  .hamburguesa{ display:none; }
  .menu-movil{ display:none; }
}

/* 5 · HERO =============================================================== */
.hero{
  position:relative; isolation:isolate;
  min-height:min(92svh,780px);
  display:flex; align-items:flex-end;
  padding-top:calc(var(--header-h) + 2rem);
  padding-bottom:clamp(3rem,9vw,5.5rem);
  overflow:hidden;
  background:var(--mar-800);
}
.hero__fondo{ position:absolute; inset:0; z-index:-2; }
/* Cada foto del hero ocupa todo el fondo y se cruzan con un fundido.
   La primera viene con la clase .activa desde el HTML, así que sin
   JavaScript se ve esa sola y no pasa nada raro. */
.hero__slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.6s ease-in-out;
}
.hero__slide.activa{ opacity:1; }
.hero__slide img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
}
.hero__slide.activa img{ animation:deriva 11s ease-out both; }
@keyframes deriva{ from{ transform:scale(1.03); } to{ transform:scale(1.12); } }
@media (prefers-reduced-motion:reduce){
  .hero__slide.activa img{ animation:none; transform:none; }
}
/* El velo tiene que dejar legible el titulo sobre cualquier foto:
   en celular el texto ocupa la mitad de abajo, en escritorio la esquina izquierda. */
.hero__velo{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(8,30,34,.62) 0%,
      rgba(8,30,34,.26) 18%,
      rgba(8,30,34,.34) 38%,
      rgba(8,30,34,.74) 66%,
      rgba(8,30,34,.92) 100%);
}
@media (min-width:1000px){
  .hero__velo{
    background:
      linear-gradient(180deg,rgba(8,30,34,.55) 0%,rgba(8,30,34,.10) 24%,rgba(8,30,34,.16) 48%,rgba(8,30,34,.68) 92%,rgba(8,30,34,.8) 100%),
      linear-gradient(95deg,rgba(8,30,34,.78) 0%,rgba(8,30,34,.42) 34%,rgba(8,30,34,0) 62%);
  }
}
.hero__contenido{ position:relative; max-width:35ch; color:#fff; }
.hero__rotulo{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.7rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.9); margin-bottom:1.15rem;
}
.hero__rotulo::before{ content:""; width:30px; height:1.5px; background:var(--sol); }
.hero__titulo{
  font-size:clamp(2.7rem,10vw,5.4rem); line-height:.98; color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.35); margin-bottom:1.1rem;
}
.hero__titulo em{ font-style:italic; font-variation-settings:"WONK" 1; color:var(--sol); }
.hero__bajada{
  font-size:clamp(1.02rem,.98rem + .4vw,1.2rem); line-height:1.6;
  color:rgba(255,255,255,.9); max-width:44ch; margin-bottom:1.9rem;
  text-shadow:0 1px 18px rgba(0,0,0,.4);
}
.hero__botones{ display:flex; flex-wrap:wrap; gap:.75rem; }
.hero__botones .btn{ flex:1 1 200px; }
.hero__cue{
  position:absolute; right:var(--gutter); bottom:clamp(3rem,9vw,5.5rem);
  display:none; align-items:center; gap:.6rem;
  font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7); writing-mode:vertical-rl;
}
.hero__cue::after{ content:""; width:1.5px; height:56px; background:linear-gradient(180deg,rgba(255,255,255,.7),transparent); animation:cae 2.2s ease-in-out infinite; }
@keyframes cae{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4; } 50%{ transform:scaleY(1); transform-origin:top; opacity:1; } }
@media (min-width:1000px){
  .hero__contenido{ max-width:min(48ch,46vw); }
  .hero__botones .btn{ flex:0 0 auto; }
  .hero__cue{ display:flex; }
}

/* 6 · BARRA DE RESERVA =================================================== */
.reserva{ position:relative; z-index:5; }
.reserva__caja{
  background:var(--arena-50);
  border:1px solid var(--arena-300);
  border-radius:var(--radio-lg);
  box-shadow:var(--sombra);
  padding:clamp(1.25rem,4vw,1.75rem);
}
.reserva__titulo{
  font-family:var(--fuente-texto); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mar-600);
  margin-bottom:1.1rem;
}
.reserva__campos{ display:grid; gap:.85rem; }
.campo{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.campo__etiqueta{
  font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-50);
}
.campo__control{
  width:100%; min-height:50px; padding:.7rem .9rem;
  font-family:var(--fuente-texto);
  font-size:16px;                 /* 16px evita el zoom automatico de iOS */
  color:var(--tinta);
  background:var(--blanco);
  border:1.5px solid var(--arena-300); border-radius:10px;
  appearance:none; -webkit-appearance:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.campo__control:focus{ border-color:var(--mar); box-shadow:0 0 0 3px rgba(18,84,91,.14); outline:none; }
.campo__control::placeholder{ color:var(--tinta-50); opacity:.8; }
select.campo__control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23727B7D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
  padding-right:2.6rem;
}
/* los date de iOS necesitan altura y alineacion explicitas */
input[type="date"].campo__control{ min-height:50px; line-height:1.2; }
input[type="date"].campo__control::-webkit-date-and-time-value{ text-align:left; }
input[type="date"].campo__control::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }
textarea.campo__control{ min-height:130px; resize:vertical; line-height:1.6; }

.reserva__acciones{ display:grid; gap:.65rem; margin-top:1.1rem; }
.reserva__nota{ margin-top:.9rem; font-size:.8rem; color:var(--tinta-50); line-height:1.5; text-align:center; }

@media (min-width:760px){
  .reserva__campos{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
  .reserva{ margin-top:calc(-1 * clamp(3rem,5vw,4.5rem)); }
  .reserva__caja{ display:grid; grid-template-columns:1fr auto; gap:1.75rem; align-items:end; padding:1.9rem 2rem; }
  .reserva__campos{ grid-template-columns:repeat(4,1fr); gap:1rem; }
  .reserva__cab{ grid-column:1 / -1; }
  .reserva__acciones{ margin-top:0; grid-auto-flow:column; }
  .reserva__nota{ grid-column:1 / -1; margin-top:.2rem; text-align:left; }
}

/* 7 · INTRO / CIFRAS ===================================================== */
.intro__grid{ display:grid; gap:clamp(2.5rem,6vw,4.5rem); }
.intro__texto p{ color:var(--tinta-70); }
.cifras{ display:grid; gap:1px; background:var(--arena-300); border:1px solid var(--arena-300); border-radius:var(--radio); overflow:hidden; }
.cifra{ background:var(--arena-50); padding:1.4rem 1.5rem; }
.cifra__valor{
  margin:0;      /* anula el margen base de <p> */
  font-family:var(--fuente-display); font-size:clamp(2rem,5vw,2.6rem);
  line-height:1; color:var(--mar); font-variation-settings:"WONK" 1;
}
.cifra__valor small{ font-size:.44em; letter-spacing:.02em; }
.cifra__texto{ margin-top:.4rem; font-size:.86rem; color:var(--tinta-70); line-height:1.45; }
@media (min-width:620px){ .cifras{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){
  .intro__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start; }
  .cifras{ grid-template-columns:repeat(2,1fr); position:sticky; top:calc(var(--header-h) + 2rem); }
}

/* 8 · ALOJAMIENTOS ======================================================= */
.seccion__cabecera{ max-width:60ch; margin-bottom:clamp(2.5rem,6vw,3.75rem); }

/* tarjeta destacada: el dos dormitorios */
.destacada{
  display:grid; gap:0;
  background:var(--arena-50);
  border:1px solid var(--arena-300); border-radius:var(--radio-lg);
  overflow:hidden; box-shadow:var(--sombra-sm);
  margin-bottom:clamp(1.5rem,4vw,2.5rem);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.destacada:hover{ box-shadow:var(--sombra); transform:translateY(-3px); }
.destacada__figura{ position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--arena-300); }
.destacada__figura img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.destacada:hover .destacada__figura img{ transform:scale(1.045); }
.destacada__cuerpo{ padding:clamp(1.6rem,5vw,2.75rem); display:flex; flex-direction:column; justify-content:center; }
.insignia{
  position:absolute; top:1rem; left:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .85rem; border-radius:999px;
  background:var(--sol); color:#3b2409;
  font-size:.65rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.45);
}
@media (min-width:900px){
  .destacada{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); }
  .destacada__figura{ aspect-ratio:auto; min-height:460px; }
}

/* grilla de las otras cuatro */
.grilla-aloj{ display:grid; gap:clamp(1.25rem,3vw,1.75rem); }
@media (min-width:640px){ .grilla-aloj{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .grilla-aloj{ grid-template-columns:repeat(4,1fr); } }

.tarjeta{
  display:flex; flex-direction:column;
  background:var(--arena-50);
  border:1px solid var(--arena-300); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra-sm);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease);
}
.tarjeta:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--arena-400); }
.tarjeta__figura{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--arena-300); }
.tarjeta__figura img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.tarjeta:hover .tarjeta__figura img{ transform:scale(1.05); }
.tarjeta__cuerpo{ padding:1.3rem 1.35rem 1.45rem; display:flex; flex-direction:column; flex:1; }
.tarjeta__titulo{ font-size:1.32rem; margin-bottom:.55rem; }
.tarjeta__texto{ font-size:.92rem; color:var(--tinta-70); line-height:1.6; margin-bottom:1rem; }
.tarjeta__pie{ margin-top:auto; }

.capacidad{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mar-600); margin-bottom:.7rem;
}
.capacidad svg{ width:15px; height:15px; }

.etiquetas{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem; }
.etiqueta{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.32rem .68rem; border-radius:999px;
  background:var(--mar-100); color:var(--mar-800);
  font-size:.72rem; font-weight:600; letter-spacing:.01em;
}
.etiqueta svg{ width:13px; height:13px; opacity:.8; }


/* 9 · SERVICIOS ========================================================== */
.seccion--mar{ overflow:hidden; }
.seccion--mar::after{
  content:""; position:absolute; right:-14%; top:-28%;
  width:min(58vw,620px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(107,163,166,.3),transparent 68%);
  pointer-events:none;
}
.servicios{ display:grid; gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--radio); overflow:hidden; }
.servicio{ background:var(--mar); padding:1.5rem 1.35rem; transition:background .3s var(--ease); }
.servicio:hover{ background:var(--mar-600); }
.servicio svg{ width:26px; height:26px; color:var(--sol); margin-bottom:.85rem; stroke-width:1.5; }
.servicio__titulo{ font-family:var(--fuente-texto); font-size:.95rem; font-weight:700; letter-spacing:.01em; margin-bottom:.3rem; color:#fff; }
.servicio__texto{ font-size:.85rem; line-height:1.5; color:rgba(211,228,226,.85); }
@media (min-width:560px){ .servicios{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .servicios{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1160px){ .servicios{ grid-template-columns:repeat(4,1fr); } }

.horarios{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:center;
  margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.16);
  font-size:.9rem; color:var(--mar-100);
}
.horarios strong{ color:#fff; font-weight:700; }

/* 10 · UBICACION ========================================================= */
.ubicacion__grid{ display:grid; gap:clamp(2rem,5vw,3rem); }
.mapa-foto{
  position:relative; border-radius:var(--radio-lg); overflow:hidden;
  border:1px solid var(--arena-300); box-shadow:var(--sombra-sm);
  background:var(--mar-800);
}
/* La foto es panorámica (3.2:1) y el marco es más cuadrado, así que se recorta
   por los lados. El object-position corre el encuadre a la derecha para que el
   complejo no quede pegado al borde. Los dos valores están calculados para que
   el complejo caiga en el mismo punto del marco (71%) en celular y en
   escritorio: por eso el marcador usa un solo --x. Si se cambia el recorte,
   hay que recalcular ambos. */
.mapa-foto img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; object-position:99% center; }
@media (max-width:640px){ .mapa-foto img{ aspect-ratio:4/3; object-position:94% center; } }

/* marcador sobre la foto aerea: se posiciona con --x / --y en el HTML */
.marcador{
  position:absolute; left:var(--x,66%); top:var(--y,40%);
  transform:translate(-50%,-50%); z-index:3;
  width:22px; height:22px;
}
.marcador__punto{
  position:absolute; inset:0; margin:auto;
  width:13px; height:13px; border-radius:50%;
  background:var(--sol); border:2.5px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.marcador__pulso{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--sol);
  animation:pulso 2.4s ease-out infinite;
}
@keyframes pulso{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(3.4); opacity:0; } }
.marcador__rotulo{
  position:absolute; left:50%; bottom:calc(100% + 14px);
  transform:translateX(-50%);
  white-space:nowrap; padding:.42rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.96); color:var(--mar-800);
  font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.55);
}
.marcador__rotulo::after{
  content:""; position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(255,255,255,.96);
}
.mapa-foto__pie{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.5rem 1.25rem .95rem;
  background:linear-gradient(180deg,transparent,rgba(9,32,36,.85));
  color:rgba(255,255,255,.92); font-size:.8rem; letter-spacing:.02em;
}

.distancias{ display:grid; gap:1px; background:var(--arena-300); border:1px solid var(--arena-300); border-radius:var(--radio); overflow:hidden; margin-top:1.75rem; }
.distancia{ background:var(--arena-50); display:flex; align-items:baseline; gap:1rem; padding:.9rem 1.2rem; }
.distancia__valor{ font-family:var(--fuente-display); font-size:1.12rem; color:var(--mar); flex:none; min-width:5rem; font-variation-settings:"WONK" 1; }
.distancia__nombre{ font-size:.92rem; color:var(--tinta-70); }
@media (min-width:620px){ .distancias{ grid-template-columns:repeat(2,1fr); } }
/* A partir de 1000px la lista pasa a la columna angosta: vuelve a una sola. */
@media (min-width:1000px){ .distancias{ grid-template-columns:1fr; } }

.mapa-embed{ border-radius:var(--radio); overflow:hidden; border:1px solid var(--arena-300); background:var(--arena-200); margin-top:1.75rem; }
.mapa-embed iframe{ display:block; width:100%; height:340px; border:0; }

.direccion{ margin:0 0 1.6rem; font-size:1.02rem; line-height:1.75; color:var(--tinta-70); }
.direccion strong{ color:var(--tinta); font-weight:700; }
@media (min-width:1000px){
  .ubicacion__grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:start; }
}

/* 11 · ENTORNO / PASEOS ================================================== */
.paseos{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem; margin-inline:calc(-1 * var(--gutter));
  padding-inline:var(--gutter);
  scrollbar-width:thin;
}
.paseo{
  scroll-snap-align:start;
  background:var(--arena-50); border:1px solid var(--arena-300);
  border-radius:var(--radio); padding:1.4rem 1.4rem 1.5rem;
  display:flex; flex-direction:column;
}
.paseo__km{ font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--terracota); margin-bottom:.6rem; }
.paseo__titulo{ font-size:1.22rem; margin-bottom:.5rem; color:var(--tinta); }
.paseo__texto{ font-size:.9rem; line-height:1.6; color:var(--tinta-70); }
@media (min-width:700px){
  .paseos{
    grid-auto-flow:row; grid-template-columns:repeat(2,1fr);
    overflow:visible; margin-inline:0; padding-inline:0; padding-bottom:0;
  }
}
@media (min-width:1060px){ .paseos{ grid-template-columns:repeat(3,1fr); } }

.entorno__grid{ display:grid; gap:clamp(2rem,5vw,3.25rem); align-items:center; margin-bottom:clamp(2.5rem,6vw,4rem); }
.entorno__figura{ border-radius:var(--radio-lg); overflow:hidden; border:1px solid var(--arena-300); box-shadow:var(--sombra-sm); }
.entorno__figura img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:900px){ .entorno__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }

/* 12 · CONTACTO ========================================================== */
.contacto__grid{ display:grid; gap:clamp(2.25rem,6vw,4rem); }
.datos{ display:grid; gap:1.4rem; }
.dato{ display:flex; gap:.95rem; align-items:flex-start; }
.dato__icono{
  width:42px; height:42px; flex:none; border-radius:12px;
  display:grid; place-items:center;
  background:var(--mar-100); color:var(--mar);
}
.dato__icono svg{ width:19px; height:19px; }
.dato__rotulo{ font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-50); margin-bottom:.15rem; }
.dato__valor{ font-size:1.02rem; color:var(--tinta); line-height:1.5; }
.dato__valor a{ border-bottom:1.5px solid var(--mar-300); transition:border-color .2s var(--ease); }
.dato__valor a:hover{ border-bottom-color:var(--mar); }

.formulario{ display:grid; gap:1rem; }
.formulario__fila{ display:grid; gap:1rem; }
@media (min-width:560px){ .formulario__fila{ grid-template-columns:repeat(2,1fr); } }
.form-estado{
  padding:.85rem 1rem; border-radius:10px; font-size:.9rem; line-height:1.5;
  display:none;
}
.form-estado.ok{ display:block; background:rgba(18,84,91,.1); border:1px solid var(--mar-300); color:var(--mar-800); }
.form-estado.error{ display:block; background:rgba(176,86,59,.1); border:1px solid var(--terracota); color:var(--terracota-600); }
@media (min-width:1000px){
  .contacto__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
}

/* 13 · FOOTER ============================================================ */
.pie{ background:var(--mar-800); color:var(--mar-100); padding-block:clamp(3rem,7vw,4.5rem) 2rem; }
.pie__grid{ display:grid; gap:2.25rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.13); }
.pie .marca__nombre{ color:#fff; }
.pie .marca__super{ color:var(--mar-300); }
.pie__texto{ margin-top:1rem; font-size:.92rem; line-height:1.65; color:rgba(211,228,226,.8); max-width:38ch; }
.pie__titulo{ font-family:var(--fuente-texto); font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--mar-300); margin-bottom:1rem; }
.pie__lista{ display:grid; gap:.6rem; font-size:.94rem; }
.pie__lista a{ color:rgba(211,228,226,.9); transition:color .2s var(--ease); }
.pie__lista a:hover{ color:#fff; }
.pie__abajo{
  padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between; font-size:.8rem; color:rgba(211,228,226,.6);
}
@media (min-width:760px){ .pie__grid{ grid-template-columns:1.4fr 1fr 1fr; } }

/* boton flotante de whatsapp */
.wapp-flotante{
  position:fixed; right:16px; bottom:16px; z-index:80;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--wapp); color:#fff;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.6),0 2px 8px rgba(0,0,0,.2);
  transition:transform .25s var(--ease);
}
.wapp-flotante:hover{ transform:scale(1.07); }
.wapp-flotante svg{ width:30px; height:30px; }
@media (min-width:900px){ .wapp-flotante{ right:26px; bottom:26px; width:60px; height:60px; } }

/* 14 · FICHA DE ALOJAMIENTO ============================================== */
.ficha-hero{
  position:relative; isolation:isolate;
  min-height:min(72svh,640px);
  display:flex; align-items:flex-end;
  padding-top:calc(var(--header-h) + 2.5rem);
  padding-bottom:clamp(2.5rem,7vw,4rem);
  background:var(--mar-800); overflow:hidden;
}
.ficha-hero__fondo{ position:absolute; inset:0; z-index:-2; }
.ficha-hero__fondo img{ width:100%; height:100%; object-fit:cover; }
.ficha-hero__velo{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(8,30,34,.58) 0%,rgba(8,30,34,.22) 32%,rgba(8,30,34,.62) 68%,rgba(8,30,34,.9) 100%);
}
.ficha-hero__contenido{ position:relative; color:#fff; max-width:min(52ch,60vw); }
.ficha-hero__titulo{ font-size:clamp(2.2rem,7vw,3.9rem); color:#fff; margin-bottom:.85rem; text-shadow:0 2px 34px rgba(0,0,0,.4); }

.miga{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:.06em; color:rgba(255,255,255,.75); margin-bottom:1rem; }
.miga a:hover{ color:#fff; text-decoration:underline; }
.miga svg{ width:13px; height:13px; opacity:.6; }

.ficha__grid{ display:grid; gap:clamp(2.5rem,6vw,4rem); }
@media (min-width:1000px){ .ficha__grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); align-items:start; } }

.caracteristicas{ display:grid; gap:.7rem 1.5rem; margin-top:1.5rem; }
@media (min-width:560px){ .caracteristicas{ grid-template-columns:repeat(2,1fr); } }
.caracteristica{ display:flex; align-items:flex-start; gap:.65rem; font-size:.95rem; color:var(--tinta-70); line-height:1.5; }
.caracteristica svg{ width:17px; height:17px; color:var(--mar); flex:none; margin-top:.22rem; }

.panel-reserva{
  background:var(--arena-50); border:1px solid var(--arena-300);
  border-radius:var(--radio-lg); padding:1.6rem; box-shadow:var(--sombra-sm);
}
@media (min-width:1000px){ .panel-reserva{ position:sticky; top:calc(var(--header-h) + 1.5rem); } }
.panel-reserva__cap{
  display:flex; align-items:center; gap:.6rem;
  padding-bottom:1.1rem; margin-bottom:1.1rem;
  border-bottom:1px solid var(--arena-300);
  font-size:.95rem; font-weight:600; color:var(--mar-800);
}
.panel-reserva__cap svg{ width:19px; height:19px; color:var(--mar); }

/* galeria de la ficha */
.galeria{ display:grid; gap:.75rem; grid-template-columns:repeat(2,1fr); grid-auto-flow:dense; }
@media (min-width:760px){ .galeria{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
.galeria__item{
  position:relative; overflow:hidden; border-radius:var(--radio);
  background:var(--arena-300); aspect-ratio:4/3;
  border:1px solid var(--arena-300); cursor:zoom-in; padding:0;
  display:block; width:100%;
}
.galeria__item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.galeria__item:hover img{ transform:scale(1.06); }
.galeria__item--ancho{ grid-column:span 2; aspect-ratio:16/9; }
@media (max-width:759px){ .galeria__item--ancho{ aspect-ratio:3/2; } }

.otros{ display:grid; gap:1.25rem; }
@media (min-width:640px){ .otros{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .otros{ grid-template-columns:repeat(4,1fr); } }

/* 15 · LIGHTBOX ========================================================== */
.lightbox{
  position:fixed; inset:0; z-index:120;
  background:rgba(11,30,33,.96);
  display:none; align-items:center; justify-content:center;
  padding:clamp(.75rem,4vw,3rem);
}
.lightbox.abierto{ display:flex; }
.lightbox__img{
  max-width:100%; max-height:calc(100svh - 8rem);
  width:auto; height:auto; object-fit:contain;
  border-radius:8px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  animation:aparece .35s var(--ease);
}
@keyframes aparece{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
.lightbox__btn{
  position:absolute; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:#fff; backdrop-filter:blur(8px);
  transition:background .2s var(--ease);
}
.lightbox__btn:hover{ background:rgba(255,255,255,.26); }
.lightbox__btn svg{ width:22px; height:22px; }
.lightbox__cerrar{ top:max(1rem,env(safe-area-inset-top)); right:1rem; }
.lightbox__ant{ left:.75rem; top:50%; transform:translateY(-50%); }
.lightbox__sig{ right:.75rem; top:50%; transform:translateY(-50%); }
.lightbox__pie{
  position:absolute; left:50%; bottom:max(1.25rem,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  color:rgba(255,255,255,.8); font-size:.85rem; letter-spacing:.04em;
  background:rgba(0,0,0,.4); padding:.4rem 1rem; border-radius:999px;
  max-width:calc(100vw - 2rem); text-align:center;
}
/* En celular las flechas molestan encima de la foto: van abajo, con el pie en el medio. */
@media (max-width:699px){
  .lightbox__img{ max-height:calc(100svh - 10.5rem); }
  .lightbox__ant,.lightbox__sig{
    top:auto; transform:none;
    bottom:max(1rem,env(safe-area-inset-bottom));
    width:48px; height:48px;
  }
  .lightbox__ant{ left:1rem; }
  .lightbox__sig{ right:1rem; }
  .lightbox__pie{
    bottom:calc(max(1rem,env(safe-area-inset-bottom)) + 6px);
    max-width:calc(100vw - 9rem);
    font-size:.78rem; padding:.4rem .85rem;
  }
}
@media (min-width:900px){ .lightbox__ant{ left:1.75rem; } .lightbox__sig{ right:1.75rem; } }

/* 17 · PANTALLA DE CARGA ================================================== */
/* Sólo aparece si el JS corre (lo enciende el script del <head> con la clase
   .cargando en <html>). Sin JavaScript nunca se ve, así que no puede tapar
   el sitio si algo falla. */
.cargador{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; place-content:center;
  gap:1.5rem; grid-auto-flow:row;
  background:var(--mar-800);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s var(--ease),visibility .6s;
}
.cargador::before{                      /* grano: rompe el bandeado del degradado */
  content:""; position:absolute; inset:0; z-index:1;
  pointer-events:none; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.cargador__marca,.cargador__olas{ z-index:2; }
.cargador::after{                       /* halo tibio, como el sol bajo */
  content:""; position:absolute; inset:0;
  background:radial-gradient(58% 42% at 50% 46%,rgba(219,154,78,.13),transparent 72%);
  pointer-events:none;
}
/* No bloqueamos el scroll del documento a propósito: si el JS se cortara justo
   entre encender el cargador y apagarlo, la página quedaría trabada para
   siempre. El overlay es position:fixed, así que tapa todo igual. */
html.cargando .cargador{
  opacity:1; visibility:visible; pointer-events:auto;
  /* red de seguridad: si el JS se cuelga, a los 3,5 s se va igual */
  animation:cargador-red 0s linear 3.5s forwards;
}
html.cargado .cargador{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes cargador-red{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

.cargador__marca{
  position:relative; display:flex; flex-direction:column; align-items:center;
  line-height:1; text-align:center;
}
html.cargando .cargador__marca{ animation:marca-entra .9s var(--ease) both; }
@keyframes marca-entra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.cargador .marca__super{
  color:var(--mar-300); font-size:.62rem; letter-spacing:.42em;
  padding-left:.42em; margin-bottom:.65em;
}
.cargador .marca__nombre{
  color:var(--arena-50); font-size:clamp(2.7rem,12vw,4.4rem);
  text-shadow:0 6px 40px rgba(0,0,0,.45);
}
.cargador__olas{
  position:relative; width:clamp(140px,38vw,190px); height:16px;
  color:var(--mar-300); overflow:hidden; opacity:.95;
}
html.cargando .cargador__olas{ animation:marca-entra .9s var(--ease) .12s both; }
.cargador__olas g{ animation:olas 2.6s linear infinite; }
@keyframes olas{ to{ transform:translateX(-30px); } }
@media (prefers-reduced-motion:reduce){
  .cargador__olas g{ animation:none; }
  html.cargando .cargador__marca,
  html.cargando .cargador__olas{ animation:none; opacity:1; transform:none; }
}

/* 18 · PAGINA 404 ========================================================= */
.error{
  position:relative; isolation:isolate;
  min-height:min(88svh,760px);
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + 3rem);
  padding-bottom:clamp(3rem,8vw,5rem);
  background:var(--mar-800); overflow:hidden;
}
.error__fondo{ position:absolute; inset:0; z-index:-2; }
.error__fondo img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.error__velo{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(8,30,34,.72) 0%,rgba(8,30,34,.5) 45%,rgba(8,30,34,.88) 100%);
}
.error__contenido{ position:relative; color:#fff; max-width:min(46ch,90vw); }
.error__numero{
  font-family:var(--fuente-display); font-style:italic;
  font-variation-settings:"WONK" 1;
  font-size:clamp(4rem,16vw,7rem); line-height:.9;
  color:var(--sol); margin-bottom:.35rem;
}
.error__titulo{ font-size:clamp(2.1rem,7vw,3.6rem); color:#fff; margin-bottom:1rem; }
.error__texto{
  font-size:clamp(1.02rem,.98rem + .4vw,1.18rem); line-height:1.62;
  color:rgba(255,255,255,.9); margin-bottom:1.9rem;
}
.error__botones{ display:flex; flex-wrap:wrap; gap:.75rem; }
.error__botones .btn{ flex:1 1 210px; }
@media (min-width:1000px){ .error__botones .btn{ flex:0 0 auto; } }

.atajos{ display:grid; gap:1px; background:var(--arena-300); border:1px solid var(--arena-300); border-radius:var(--radio); overflow:hidden; }
.atajo{
  background:var(--arena-50); display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.05rem 1.3rem;
  transition:background .22s var(--ease);
}
.atajo:hover{ background:var(--arena-100); }
.atajo__nombre{ font-family:var(--fuente-display); font-size:1.15rem; }
.atajo__cap{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-50); }
.atajo svg{ width:17px; height:17px; color:var(--mar); flex:none; }
@media (min-width:760px){
  .atajos{ grid-template-columns:repeat(2,1fr); }
  /* son cinco: el ultimo ocupa el ancho entero y no queda un hueco */
  .atajo:last-child{ grid-column:1 / -1; }
}

/* 19 · SECCIONES CON FOTO DE FONDO ======================================== */
/* La foto va detrás del contenido, como en el hero, y no como una imagen
   suelta entre secciones. El velo la oscurece lo suficiente para que el texto
   blanco se lea sobre cualquier parte de la foto. */
.seccion--foto{ position:relative; isolation:isolate; overflow:hidden; }
.seccion__fondo{ position:absolute; inset:0; z-index:-2; }
.seccion__fondo img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.seccion__fondo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(8,30,34,.5) 0%,rgba(8,30,34,.22) 42%,rgba(8,30,34,.55) 100%),
    linear-gradient(0deg,rgba(18,84,91,.6),rgba(18,84,91,.6));
}
/* Sobre una foto las tarjetas van translúcidas: si quedan opacas tapan
   justo lo que queremos mostrar. */
.seccion--foto .servicios{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.24); }
.seccion--foto .servicio{ background:rgba(11,55,60,.62); backdrop-filter:blur(8px); }
.seccion--foto .servicio:hover{ background:rgba(24,107,114,.72); }
/* el halo del bloque verde molesta encima de una foto */
.seccion--mar.seccion--foto::after{ display:none; }

/* La Pedrera: mismo tratamiento, con la foto un poco más presente */
#la-pedrera .seccion__fondo::after{
  background:
    linear-gradient(180deg,rgba(8,30,34,.55) 0%,rgba(8,30,34,.26) 45%,rgba(8,30,34,.6) 100%),
    linear-gradient(0deg,rgba(12,59,65,.48),rgba(12,59,65,.48));
}
#la-pedrera .entorno__grid{ grid-template-columns:1fr; max-width:64ch; }
#la-pedrera .paseo{ background:rgba(253,250,244,.95); border-color:rgba(253,250,244,.3); }
#la-pedrera .paseos{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.16); }

/* 16 · IMPRESION ========================================================= */
@media print{
  .encabezado,.menu-movil,.wapp-flotante,.hero__cue,.reserva,.lightbox,.cargador{ display:none!important; }
  body{ background:#fff; }
  body::before{ display:none; }
}