/* ═══════════════════════════════════════════════════════════════════════════
   HOTEL PLAYA TERREROS — sistema visual (rediseño de septiembre de 2026)

   Punto de partida: las fotografías reales del sitio. El agua de Los Cocedores
   es turquesa sobre roca dorada, las paredes del hotel son blancas y la luz de
   la costa de Almería es dura y limpia. De ahí sale todo:

   · Superficies blancas y hueso frío, no crema. El blanco es lo que hace que
     una foto de mar parezca cara: el papel no compite con el agua.
   · Un solo acento, laguna (#1F8A97), sacado del agua de las fotos. La
     terracota anterior se retira: era un acento de plantilla, no del lugar.
   · Capítulos oscuros en mar profundo para lo que hay que leer despacio: la
     tarifa directa y las condiciones.
   · Display en Bodoni Moda, una didona con óptica variable: a 90 px es
     editorial de lujo y a 30 px sigue siendo un titular. El cuerpo va en Stabil
     Grotesk, la tipografía de marca del hotel, que nadie más tiene.
   · Sin tarjetas con borde ni sombra: la información se separa con aire y
     filetes finos, como en la papelería de un hotel. Las fotos van a sangre.

   Dos firmas y nada más: la portada cinematográfica de la home y la regla de
   distancias, que dibuja un dato verdadero (la playa está a 200 m) en vez de
   decorar. Todo lo demás está callado a propósito.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Bodoni;src:url(/fonts/BodoniModa-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Bodoni;src:url(/fonts/BodoniModa-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Bodoni;src:url(/fonts/BodoniModa-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:Bodoni;src:url(/fonts/BodoniModa-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Stabil;src:url(/fonts/StabilGrotesk-Regular.woff2) format("woff2"),url(/fonts/StabilGrotesk-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Stabil;src:url(/fonts/StabilGrotesk-Bold.woff2) format("woff2"),url(/fonts/StabilGrotesk-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --blanco:#ffffff;
  --hueso:#f4f2ee;          /* superficie alterna, fría, sin amarillo */
  --hueso-hondo:#e9e5de;    /* filetes sobre hueso, bloques de apoyo */
  --tinta:#0f1e27;          /* texto y fondos hondos */
  --mar:#143f4e;            /* capítulos oscuros */
  --laguna:#1f8a97;         /* el acento: el agua de las fotos */
  --laguna-honda:#176d78;   /* hover del acento */
  --laguna-tinte:#e3f1f3;   /* fondo de un aviso, una etiqueta */
  --roca:#b79a6b;           /* la roca dorada: solo en las marcas de la regla */
  --gris:#66717a;
  --linea:#0f1e271f;
  --ancho:1320px;
  --margen:clamp(18px,4vw,56px);
  --serif:Bodoni,"Bodoni Moda","Didot","Times New Roman",serif;
  --sans:Stabil,-apple-system,"Segoe UI",Arial,sans-serif;
  /* Compatibilidad con estilos en línea del contenido anterior */
  --terracota:var(--laguna);
  --cal:var(--blanco);
  --arena:var(--hueso);
  --arena-honda:var(--hueso-hondo);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--tinta);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
.saltar{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;padding:13px 20px;z-index:300}
.saltar:focus{left:8px;top:8px}
:focus-visible{outline:2.5px solid var(--laguna);outline-offset:3px}
::selection{background:var(--laguna-tinte)}

/* ── Tipografía ──────────────────────────────────────────────────────────── */
/* Peso 600 y óptica 14 en toda la Bodoni: a pesos ligeros y óptica alta los
   filetes se perdían sobre blanco. Se probó en una hoja con seis variantes. */
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:600;line-height:1;letter-spacing:-.008em;text-wrap:balance;font-variation-settings:"opsz" 14}
h1{font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.02em}
h2{font-size:clamp(34px,4.8vw,64px);line-height:1.02}
h3{font-size:clamp(24px,2.6vw,34px);line-height:1.1}
h4{font-size:clamp(19px,1.9vw,22px);line-height:1.2}
em,i{font-style:italic}
.rotulo{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--laguna-honda);margin:0 0 16px}
.rotulo-claro{color:#9fd0d6}
.entrada{margin-top:22px;font-size:clamp(17px,1.65vw,21px);line-height:1.55;color:#0f1e27d9;max-width:58ch;text-wrap:pretty}
.entrada+.entrada{margin-top:14px}
.texto{margin-top:16px;font-size:16.5px;line-height:1.65;color:#0f1e27cc;max-width:62ch;text-wrap:pretty}
.texto b,.entrada b{color:var(--tinta);font-weight:700}
.dato-mini{font-family:var(--sans);font-size:12.5px;color:var(--gris);line-height:1.5}
.enlace{font-weight:700;color:var(--laguna-honda);text-decoration:none;border-bottom:1px solid #1f8a9766;transition:border-color .2s,color .2s}
.enlace:hover{color:var(--laguna-honda);border-bottom-color:var(--laguna-honda)}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;padding:18px 34px;min-height:54px;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn-principal{background:var(--tinta);color:#fff}
.btn-principal:hover{background:var(--laguna)}
.btn-linea{background:0 0;color:var(--tinta);border:1px solid #0f1e2759}
.btn-linea:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.btn-claro{background:#fff;color:var(--tinta)}
.btn-claro:hover{background:var(--laguna);color:#fff}
.btn-linea-claro{background:0 0;color:#fff;border:1px solid #ffffff73}
.btn-linea-claro:hover{background:#fff;color:var(--tinta)}
.btn-sm{padding:12px 20px;min-height:44px;font-size:11px;white-space:nowrap}

/* ── Cabecera ────────────────────────────────────────────────────────────
   Sobre una foto es transparente con la marca en blanco; en cuanto la foto
   sale de pantalla se vuelve blanca. Lo decide reserva.js con un observador
   sobre el hero (clase `sobre-foto` en <html>). Sin JavaScript queda blanca. */
/* Fija, no sticky: el hero pasa por debajo. Con sticky la cabecera ocupaba su
   propia franja y, al hacerse transparente sobre el video, ensenaba el fondo
   blanco de la pagina y una banda con borde. */
.cabecera{
  position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;gap:20px;
  padding:16px var(--margen);background:#fffffff2;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linea);
  transition:background .4s ease,border-color .4s ease;
}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:26px;width:auto;transition:filter .4s}
/* En un móvil de 390 px caben marca, botón y menú solo si los tres ceden un poco:
   con la marca a 26 px el menú se salía por la derecha. */
@media(max-width:700px){
  .cabecera{gap:10px;padding:13px 16px}
  .logo img{height:21px}
  .cabecera .btn-sm{padding:11px 12px;font-size:10.5px;letter-spacing:.08em;min-height:40px}
  .hamburguesa{padding:9px 6px;min-width:36px}
}
.menu{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);margin-left:auto}
.menu a{
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:8px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;white-space:nowrap;
}
.menu a:hover,.menu a[aria-current="page"]{border-bottom-color:currentColor}
.idiomas{display:flex;gap:7px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.08em}
.idiomas a{text-decoration:none;color:var(--gris);padding:4px}
.idiomas a[aria-current="true"]{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.tel-cab{font-size:12.5px;font-weight:700;text-decoration:none;color:var(--tinta);white-space:nowrap}
@media(max-width:1080px){.menu a:not(.solo-movil){display:none}}

/* Sobre la foto la cabecera no lleva fondo: el velo superior del propio hero
   (cine-velo / hero-foto::after) es el que da contraste, sin bandas ni bordes. */
.sobre-foto .cabecera{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.sobre-foto .cabecera .menu a,.sobre-foto .cabecera .tel-cab,.sobre-foto .cabecera .idiomas a{text-shadow:0 1px 10px #0f1e27b3}
.sobre-foto .cabecera .logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 8px #0f1e27b3)}
.sobre-foto .cabecera .logo img{filter:brightness(0) invert(1)}
.sobre-foto .cabecera .menu a,.sobre-foto .cabecera .idiomas a,.sobre-foto .cabecera .tel-cab{color:#fff}
.sobre-foto .cabecera .idiomas a{color:#ffffffb3}
.sobre-foto .cabecera .idiomas a[aria-current="true"]{color:#fff}
.sobre-foto .hamburguesa span,.sobre-foto .hamburguesa span::before,.sobre-foto .hamburguesa span::after{background:#fff}
.sobre-foto .cabecera .btn-principal{background:#fff;color:var(--tinta)}
.sobre-foto .cabecera .btn-principal:hover{background:var(--laguna);color:#fff}

/* ── Navegación móvil ────────────────────────────────────────────────────── */
.hamburguesa{display:none;background:0 0;border:0;cursor:pointer;padding:11px 10px;min-height:44px;min-width:44px;align-items:center;justify-content:center}
.hamburguesa span{display:block;width:23px;height:1.5px;background:var(--tinta);position:relative;transition:background .18s}
.hamburguesa span::before,.hamburguesa span::after{content:"";position:absolute;left:0;width:23px;height:1.5px;background:var(--tinta);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.hamburguesa span::before{top:-6.5px}
.hamburguesa span::after{top:6.5px}

.panel-menu[hidden]{display:none}
.panel-menu{
  position:fixed;inset:0;z-index:200;color:#fff;
  background:var(--tinta) radial-gradient(70vw 70vw at 110% 0%,#1f8a9766 0,#1f8a9700 70%) no-repeat;
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:0 clamp(20px,5.4vw,44px);
}
.panel-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:3;background:var(--tinta);margin:0 calc(-1 * clamp(20px,5.4vw,44px));padding:13px clamp(20px,5.4vw,44px) clamp(18px,3.6vw,28px)}
.panel-cab .logo img{display:block;height:40px;filter:brightness(0) invert(1)}
.panel-cerrar{background:0 0;border:1px solid #ffffff33;border-radius:50%;cursor:pointer;width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;padding:0;transition:border-color .2s,background .2s}
.panel-cerrar:hover{border-color:#fff;background:#ffffff12}
.panel-cerrar span{display:block;width:16px;height:1.5px;position:relative;background:0 0}
.panel-cerrar span::before,.panel-cerrar span::after{content:"";position:absolute;left:0;top:0;width:16px;height:1.5px;background:#fff}
.panel-cerrar span::before{transform:rotate(45deg)}
.panel-cerrar span::after{transform:rotate(-45deg)}
.panel-cuerpo{display:grid;gap:clamp(28px,5vw,44px);align-content:start;padding-bottom:26px}
.panel-nav{display:grid}
.pn-fila{border-top:1px solid #ffffff24}
.pn-fila:last-child{border-bottom:1px solid #ffffff24}
.pn-enlace{display:flex;align-items:center;justify-content:space-between;gap:14px;font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 14;font-size:clamp(32px,8vw,44px);line-height:1.05;color:#fff;text-decoration:none;padding:15px 0;min-height:56px;transition:color .2s}
.pn-enlace svg{opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s;flex:0 0 auto}
.pn-enlace:hover,.pn-enlace:focus-visible,.pn-enlace[aria-current="page"]{color:#9fd0d6}
.pn-enlace:hover svg,.pn-enlace:focus-visible svg,.pn-enlace[aria-current="page"] svg{opacity:.75;transform:translateX(0)}
.panel-lado{display:grid;gap:20px;align-content:start}
.pn-et{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ffffff85;margin-bottom:7px}
.pn-tel,.pn-sitio{display:block;text-decoration:none;color:#fff;border:1px solid #ffffff24;padding:16px 18px;transition:border-color .2s,background .2s}
.pn-tel:hover,.pn-sitio:hover,.pn-tel:focus-visible,.pn-sitio:focus-visible{border-color:#ffffff61;background:#ffffff0d}
.pn-tel strong{display:block;font-family:var(--serif);font-size:30px;font-weight:600;font-variation-settings:"opsz" 14;line-height:1.1}
.pn-nota{display:block;font-size:12.5px;color:#ffffff96;margin-top:5px}
.pn-sitio span:not(.pn-et){font-size:15px;line-height:1.5;color:#ffffffd6}
.panel-pie{position:sticky;bottom:0;z-index:3;background:var(--tinta);margin:auto calc(-1 * clamp(20px,5.4vw,44px)) 0;padding:16px clamp(20px,5.4vw,44px) calc(16px + env(safe-area-inset-bottom));border-top:1px solid #ffffff24}
.pn-reservar{width:100%;background:#fff;color:var(--tinta)}
.pn-reservar:hover{background:var(--laguna);color:#fff}
.pn-oferta{margin:9px 0 0;font-size:12.5px;line-height:1.45;color:#ffffff96;text-align:center}
.pn-foto{display:none;margin:4px 0 0}
.pn-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;outline:1px solid #ffffff24;outline-offset:-1px}
.pn-idiomas{display:flex;gap:8px;padding-top:4px}
.pn-idiomas a{flex:1;text-align:center;font-size:12px;font-weight:700;letter-spacing:.06em;text-decoration:none;color:#ffffff8f;border:1px solid #ffffff24;padding:12px 8px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s,background .2s}
.pn-idiomas a:hover{color:#fff;border-color:#ffffff61}
.pn-idiomas a[aria-current="true"]{color:var(--tinta);background:#fff;border-color:#fff}
@keyframes pn-entrar{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel-menu:not([hidden]) .pn-fila{animation:pn-entrar .42s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(40ms + var(--i) * 45ms)}
.panel-menu:not([hidden]) .panel-lado,.panel-menu:not([hidden]) .panel-pie{animation:pn-entrar .42s cubic-bezier(.22,.61,.36,1) both;animation-delay:.33s}
.panel-menu:not([hidden]){animation:pn-fundir .22s ease both}
@keyframes pn-fundir{from{opacity:0}to{opacity:1}}
@media(min-width:680px){
  .panel-cuerpo{grid-template-columns:1fr minmax(280px,340px);gap:clamp(34px,5vw,64px);align-items:start}
  .panel-pie{display:flex;align-items:center;gap:22px}
  .pn-foto{display:block}
  .pn-reservar{width:auto;flex:0 0 auto}
  .pn-oferta{margin:0;text-align:left}
}
@media(max-width:1080px){.hamburguesa{display:flex}.idiomas{display:none}}

/* ── Hero de las páginas interiores ─────────────────────────────────────────
   La foto a sangre y, montado sobre su borde inferior, un plinto blanco con el
   título. La foto no lleva degradado encima: se ve entera, como en una revista,
   y el texto tiene su propio papel. */
.hero{position:relative;padding-bottom:0;background:var(--blanco)}
.hero-foto{position:relative;height:min(74svh,760px);min-height:420px;overflow:hidden;background:var(--mar)}
.hero-corta .hero-foto{height:min(58svh,560px);min-height:360px}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0f1e2799 0,#0f1e2700 36%)}
.hero-plinto{
  position:relative;z-index:2;max-width:var(--ancho);margin:0 auto;padding:0 var(--margen);
}
.hero-caja{
  background:var(--blanco);margin-top:clamp(-72px,-8vw,-120px);padding:clamp(26px,3.8vw,52px) clamp(22px,3.6vw,52px) 0;
  max-width:min(880px,100%);
}
.hero-caja h1{margin-top:0}
.hero-sub{margin-top:18px;font-size:clamp(17px,1.7vw,20px);line-height:1.55;max-width:56ch;color:#0f1e27d9}
.hero-btns{margin-top:clamp(22px,2.4vw,30px);display:flex;gap:11px;flex-wrap:wrap}
@media(max-width:760px){
  .hero-caja{margin-top:-40px;padding:22px 20px 0}
  .hero-foto{height:min(62svh,520px)}
}

/* ── Secciones ───────────────────────────────────────────────────────────── */
.seccion{padding:clamp(64px,9vw,140px) var(--margen)}
.seccion+.seccion.blanca-seguida{padding-top:0}
.dentro{max-width:var(--ancho);margin:0 auto}
.arena{background:var(--hueso)}
.mar{background:var(--mar);color:#fff}
.mar h2,.mar h3,.mar h4{color:#fff}
.mar .entrada,.mar .texto{color:#ffffffd1}
.mar .rotulo{color:#9fd0d6}
.cabecera-seccion{max-width:60ch;margin-bottom:clamp(34px,4.2vw,64px)}

/* Cifras: dato grande en serifa, etiqueta pequeña, separadas por filete */
.cifras{display:grid;gap:clamp(20px,2.6vw,38px);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:clamp(30px,3.4vw,48px)}
.cifra{border-top:1px solid var(--linea);padding-top:16px}
.mar .cifra{border-color:#ffffff33}
.cifra dt{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:10px}
.mar .cifra dt{color:#9fd0d6}
.cifra dd{margin:0;font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 14;font-size:clamp(30px,3.2vw,44px);line-height:1}
.cifra dd span{display:block;margin-top:10px;font-family:var(--sans);font-size:14px;font-weight:400;line-height:1.5;color:var(--gris)}
.mar .cifra dd span{color:#c8d5d8}

/* ── La regla de distancias (firma) ──────────────────────────────────────────
   Una línea horizontal con marcas: cada marca es un lugar real y su distancia
   desde la puerta del hotel. La separación no es a escala (15 km no caben al
   lado de 200 m) sino ordinal, y se dice. Lo que importa es leer de un vistazo
   que la playa está a la mano y que todo lo demás está a un cuarto de hora. */
.regla{margin-top:clamp(40px,5vw,72px);padding-top:8px}
.regla-linea{position:relative;height:1px;background:var(--tinta);margin:34px 0 0}
.regla-marcas{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.regla-marca{position:relative;padding-top:22px;min-width:0}
.regla-marca::before{content:"";position:absolute;top:-1px;left:0;width:1px;height:14px;background:var(--tinta)}
.regla-marca:first-child::before{height:22px;width:2px}
.regla-marca:nth-child(2)::before{background:var(--laguna);width:2px;height:22px}
.regla-marca dt{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);line-height:1.4}
.regla-marca dd{margin:6px 0 0;font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 14;font-size:clamp(22px,2.6vw,36px);line-height:1}
.regla-marca:nth-child(2) dd{color:var(--laguna)}
.regla-marca dd small{display:block;margin-top:6px;font-family:var(--sans);font-size:13px;color:var(--gris)}
.regla-nota{margin-top:18px;font-size:12.5px;color:var(--gris)}
@media(max-width:700px){
  .regla-marcas{grid-template-columns:1fr 1fr;row-gap:22px}
  .regla-marca:first-child{display:none}
}

/* ── Habitaciones: filas editoriales ──────────────────────────────────────── */
.hab-lista{display:grid;gap:0;margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--linea)}
.hab{display:grid;gap:clamp(24px,4vw,72px);grid-template-columns:1.2fr .8fr;align-items:center;padding:clamp(34px,4.5vw,64px) 0;border-bottom:1px solid var(--linea)}
.hab:nth-child(even) .hab-foto{order:2}
@media(max-width:900px){.hab{grid-template-columns:1fr;gap:22px}.hab:nth-child(even) .hab-foto{order:0}}
.hab-foto{margin:0;overflow:hidden;position:relative}
.hab-foto img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.hab:hover .hab-foto img{transform:scale(1.03)}
.hab h3{font-size:clamp(28px,3.2vw,44px)}
.hab-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;margin:22px 0 0;padding:0}
.hab-datos div{padding:12px 0;border-top:1px solid var(--linea)}
.hab-datos dt{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:5px}
.hab-datos dd{margin:0;font-size:15px;font-weight:700}
.hab-cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:520px){.hab-datos{grid-template-columns:1fr 1fr}}

/* ── Galería ─────────────────────────────────────────────────────────────── */
.galeria{display:grid;gap:10px;grid-template-columns:repeat(12,1fr);margin-top:clamp(30px,3.4vw,48px)}
.galeria figure{margin:0;overflow:hidden;grid-column:span 4}
.galeria figure.ancha{grid-column:span 8}
.galeria figure.entera{grid-column:span 12}
.galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.galeria figure.entera img{aspect-ratio:21/9}
.galeria figure:hover img{transform:scale(1.03)}
@media(max-width:820px){
  .galeria{grid-template-columns:repeat(2,1fr);gap:8px}
  .galeria figure,.galeria figure.ancha{grid-column:span 1}
  .galeria figure.entera{grid-column:span 2}
  .galeria figure.entera img{aspect-ratio:3/2}
}
figcaption{margin-top:10px;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--gris);max-width:54ch}
figcaption b{color:var(--tinta);font-weight:700}
.mar figcaption{color:#ffffffa8}.mar figcaption b{color:#fff}

.foto-grande{margin-top:clamp(40px,5vw,72px);overflow:hidden}
.foto-grande img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:center 38%}
@media(max-width:760px){
  .foto-grande{margin-left:calc(var(--margen) * -1);margin-right:calc(var(--margen) * -1)}
  .foto-grande img{aspect-ratio:4/3}
  .foto-grande figcaption{padding:0 var(--margen)}
}

/* ── Listas de servicios y preguntas ─────────────────────────────────────── */
.servicios{display:grid;gap:0;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;list-style:none;max-width:70ch}
.servicios li{border-top:1px solid var(--linea);padding:20px 0;display:grid;gap:6px;grid-template-columns:minmax(0,1fr)}
.servicios li:last-child{border-bottom:1px solid var(--linea)}
.servicios strong{font-family:var(--serif);font-size:clamp(20px,1.9vw,24px);font-weight:600;font-variation-settings:"opsz" 14;line-height:1.15}
.servicios span{font-size:15.5px;color:var(--gris);line-height:1.6}
.mar .servicios li{border-color:#ffffff2e}
.mar .servicios span{color:#ffffffb0}
@media(min-width:900px){
  .servicios.dos{grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,64px);max-width:none}
  .servicios.dos li:nth-last-child(2){border-bottom:1px solid var(--linea)}
}

.duo-texto{display:grid;gap:clamp(28px,4vw,72px);grid-template-columns:1fr 1fr;margin-top:clamp(28px,3.4vw,44px);align-items:start}
@media(max-width:820px){.duo-texto{grid-template-columns:1fr}}

/* ── Barra de reserva ─────────────────────────────────────────────────────
   Fechas y huéspedes que abren el motor de Mews ya relleno. Es lo que un
   visitante espera de un hotel: no tener que volver a escribir las fechas. */
.rb{display:grid;grid-template-columns:1fr 1fr auto auto;gap:0;background:#fff;color:var(--tinta);border:1px solid var(--linea);max-width:860px}
.rb label{display:grid;gap:4px;padding:14px 18px;border-right:1px solid var(--linea);font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.rb input,.rb select{border:0;background:0 0;font:400 16px/1.2 var(--sans);color:var(--tinta);padding:0;min-height:26px;width:100%}
.rb input:focus-visible,.rb select:focus-visible{outline:2px solid var(--laguna);outline-offset:2px}
.rb .btn{border-radius:0;min-height:100%;padding:18px 26px;cursor:pointer}
.rb-dto{grid-column:1 / -1;margin:0;padding:9px 18px;border-top:1px solid var(--linea);font-size:12.5px;color:var(--laguna-honda);font-weight:700;letter-spacing:.02em}
.reservar .rb-dto,.mar .rb-dto{color:var(--laguna-honda)}
.rb-aviso{margin-top:10px;font-size:12.5px;color:var(--gris)}
.mar .rb,.reservar .rb{border-color:#ffffff33}
.mar .rb-aviso,.reservar .rb-aviso{color:#ffffffa8}
@media(max-width:700px){
  .rb{grid-template-columns:1fr 1fr}
  .rb label:nth-child(2){border-right:0}
  .rb label:nth-child(3){grid-column:1 / -1;border-right:0;border-top:1px solid var(--linea)}
  .rb .btn{grid-column:1 / -1;min-height:54px}
}

/* ── Franja de reserva ───────────────────────────────────────────────────── */
.reservar{background:var(--mar);color:#fff;padding:clamp(64px,8vw,128px) var(--margen)}
.reservar-in{max-width:var(--ancho);margin:0 auto;display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:900px){.reservar-in{grid-template-columns:1fr}}
.reservar h2{color:#fff}
.reservar p{margin:18px 0 0;font-size:clamp(16.5px,1.6vw,19px);line-height:1.6;color:#ffffffc9;max-width:52ch}
.reservar-btns{margin-top:clamp(22px,2.6vw,30px);display:flex;gap:11px;flex-wrap:wrap}
.reservar-tel{margin-top:16px;font-size:13.5px;color:#ffffff9e}
.reservar-tel a{color:#fff}
.reservar .rb .btn{background:var(--tinta);color:#fff}
.reservar .rb .btn:hover{background:var(--laguna)}

/* ── Tarifa directa (capítulo oscuro con foto) ───────────────────────────── */
.oferta-franja{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}
.oferta-caja{background:var(--tinta);color:#fff;display:grid;grid-template-columns:1fr;align-items:stretch}
.oferta-txt{padding:clamp(40px,6vw,96px) var(--margen);min-width:0}
.oferta-txt .rotulo{color:#9fd0d6}
.oferta-txt h2{color:#fff;margin:0}
.oferta-intro{margin:clamp(20px,2.4vw,28px) 0 0;font-size:17px;color:#ffffffcf}
.oferta-lista{list-style:none;margin:16px 0 clamp(26px,3.4vw,36px);padding:0;display:grid;gap:12px;max-width:52ch}
.oferta-lista li{position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:#ffffffe0}
.oferta-lista li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:6px;border-left:1.5px solid #9fd0d6;border-bottom:1.5px solid #9fd0d6;transform:rotate(-45deg)}
.oferta-franja .btn-linea{display:none;border-color:#ffffff59;color:#fff}
@media(min-width:700px){.oferta-franja .btn-linea{display:inline-flex}}
.oferta-franja .btn-linea:hover{border-color:#fff;background:#ffffff12}
.oferta-franja .btn-principal{background:#fff;color:var(--tinta)}
.oferta-franja .btn-principal:hover{background:var(--laguna);color:#fff}
.oferta-pie{margin:18px 0 0;font-size:12.5px;color:#ffffff8f}
.oferta-foto{margin:0;position:relative;min-height:320px}
.oferta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  .oferta-caja{grid-template-columns:52% 48%}
  .oferta-txt{padding-left:clamp(28px,4.5vw,64px)}
}
@media(max-width:899px){.oferta-foto{order:-1;height:56vw;min-height:260px}}

/* ── Modal de la tarifa web ──────────────────────────────────────────────── */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:18px}
.modal-fondo{position:absolute;inset:0;background:#0f1e27c4;border:0;cursor:pointer;animation:fundido .3s ease-out}
.modal-caja{position:relative;z-index:2;background:#fff;max-width:440px;width:100%;max-height:92svh;overflow-y:auto;box-shadow:0 30px 80px #0f1e275c;animation:emerge .45s cubic-bezier(.16,1,.3,1)}
@keyframes fundido{from{opacity:0}to{opacity:1}}
@keyframes emerge{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.modal-caja>img{width:100%;aspect-ratio:16/9;object-fit:cover}
.modal-txt{padding:clamp(24px,3.4vw,34px)}
.modal-txt h2{font-size:clamp(32px,5.6vw,44px)}
.modal-lista{list-style:none;margin:20px 0 0;padding:0}
.modal-lista li{border-top:1px solid var(--linea);padding:12px 0;font-size:15.5px}
.modal-lista li:last-child{border-bottom:1px solid var(--linea)}
.modal-caja .btn{width:100%;margin-top:22px}
.modal-pie{margin-top:12px;font-size:12.5px;color:var(--gris);text-align:center}
.modal-cerrar{position:absolute;top:10px;right:10px;z-index:3;width:44px;height:44px;border:0;cursor:pointer;background:#ffffffeb;color:var(--tinta);font-size:22px;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center}
.modal-cerrar:hover{background:#fff}

/* ── Aparición al hacer scroll ───────────────────────────────────────────── */
.rev{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rev.ok{opacity:1;transform:none}
.rev-1{transition-delay:.1s}.rev-2{transition-delay:.2s}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:#ffffffb8;padding:clamp(56px,7vw,100px) var(--margen) 30px}
.pie-marca{max-width:var(--ancho);margin:0 auto clamp(36px,4.5vw,64px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:1px solid #ffffff24;padding-bottom:clamp(26px,3vw,40px)}
.pie-marca h2{font-family:var(--serif);font-size:clamp(34px,5vw,64px);color:#fff;line-height:1}
.pie-marca img{height:clamp(96px,11vw,132px);width:auto;display:block}
.pie-marca p{font-size:14px;color:#ffffff8a;max-width:34ch}
.pie-grid{max-width:var(--ancho);margin:0 auto;display:grid;gap:clamp(26px,3.4vw,48px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pie h3{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:700;font-variation-settings:normal}
.pie a{color:#fff;text-decoration:none;text-underline-offset:3px}
.pie a:hover{text-decoration:underline}
.pie address{font-style:normal;line-height:1.7;font-size:15px}
.pie p{font-size:15px;line-height:1.7;margin-bottom:4px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.pie-logo{filter:brightness(0) invert(1);margin-bottom:16px}
.pie-nota{font-size:14px;color:#ffffff8a;margin-top:12px;line-height:1.6}
.pie-legal{max-width:var(--ancho);margin:clamp(30px,3.6vw,50px) auto 0;padding-top:22px;border-top:1px solid #ffffff24;font-size:12.5px;color:#ffffff8a;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── Barra de reserva en móvil ───────────────────────────────────────────── */
.barra-fija{display:none}
@media(max-width:820px){
  .barra-fija{display:grid;grid-template-columns:1fr 1fr;gap:9px;position:fixed;left:0;right:0;bottom:0;z-index:110;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:#fffffff5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--linea)}
  .barra-fija .btn{width:100%;padding:14px 10px;min-height:48px;font-size:11px}
  .pie{padding-bottom:100px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTADA CINEMATOGRÁFICA (solo la home)

   El vídeo se queda clavado detrás y la página baja por encima, en tres
   tiempos a lo largo de 2,6 pantallas: establecer (título e invitación), el
   dato (200 metros, con una regla que se mide sola) y la salida (velo a tinta
   y llega la web). Todo depende de una sola variable --p que escribe
   portada.js; aquí no hay animaciones por tiempo. Sin JavaScript mide una
   pantalla y enseña el primer tiempo.

   El vídeo NO se escala: escalar es lo que lo emborronaba. Se mueve apenas
   (un desplazamiento vertical del 4 %) y el resto lo hace el velo.
   ═══════════════════════════════════════════════════════════════════════════ */
.cine{position:relative;--p:0;background:var(--tinta);color:#fff}
.cine-js .cine{height:260svh}
.cine-fijo{position:relative;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end}
.cine-js .cine-fijo{position:sticky;top:0}
.cine-poster,.cine-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateY(calc(var(--p) * -4%)) scale(1.04);transform-origin:50% 50%;will-change:transform}
.cine-poster{object-position:center 45%}
.cine-video{opacity:0;transition:opacity 1.6s ease}
.cine-con-video .cine-video{opacity:1}
.cine-velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0f1e278c 0,#0f1e2700 30%,#0f1e2700 50%,#0f1e27b3 82%,#0f1e27f0 100%)}
.cine-velo::after{content:"";position:absolute;inset:0;background:var(--tinta);opacity:calc(max(0, var(--p) - .74) * 3.6)}
.cine-txt{position:relative;z-index:2;padding:clamp(26px,4.6vw,72px) var(--margen);width:100%;max-width:min(1000px,100%);opacity:calc(1 - max(0, var(--p) - .22) * 5.5);transform:translateY(calc(max(0, var(--p) - .22) * -160px))}
.cine-txt h1{color:#fff;font-size:clamp(44px,7.2vw,104px);text-shadow:0 2px 28px #0b141666}
.cine-txt .rotulo{color:#fff;opacity:.88}
.cine-txt .portada-sub{margin-top:18px;font-size:clamp(16.5px,1.8vw,21px);line-height:1.55;max-width:52ch;color:#ffffffe0}
.portada-btns{margin-top:clamp(24px,2.6vw,34px);display:flex;gap:11px;flex-wrap:wrap}
.cine-dato{position:absolute;z-index:2;left:var(--margen);right:var(--margen);top:50%;transform:translateY(calc(-50% + (1 - min(1, max(0, (var(--p) - .34) * 5))) * 40px));opacity:calc(min(1, max(0, (var(--p) - .34) * 5)) * (1 - min(1, max(0, var(--p) - .7) * 7)));pointer-events:none}
.cine-dato .rotulo{color:#fff;opacity:.9;margin-bottom:10px}
.cine-cifra{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 14;font-size:clamp(96px,18vw,240px);line-height:.9;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 30px #0b141680}
.cine-cifra i{font-style:italic;font-weight:500;font-size:.4em;letter-spacing:0;margin-left:.08em;color:#ffffffd9}
.cine-regla{height:1px;background:#fff;margin-top:20px;transform-origin:0 50%;transform:scaleX(calc(min(1, max(0, (var(--p) - .4) * 3.2))));opacity:.85}
.cine-dato p{margin-top:16px;font-size:clamp(16px,1.6vw,19px);color:#ffffffd9;max-width:44ch}
.cine-hint{position:absolute;z-index:2;right:var(--margen);bottom:clamp(22px,4vw,56px);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ffffffb8;opacity:calc(1 - var(--p) * 3)}
/* Tercer tiempo: con el fundido a tinta (p ≥ .84) entra el cierre, arriba del
   todo, y se queda mientras la barra de reserva sube por debajo. */
.cine-cierre{position:absolute;z-index:2;left:var(--margen);right:var(--margen);bottom:20%;max-width:min(760px,100%);pointer-events:none;
  opacity:calc(min(1, max(0, (var(--p) - .86) * 8)));transform:translateY(calc((1 - min(1, max(0, (var(--p) - .86) * 8))) * 36px))}
.cine-cierre .rotulo{color:#6fc3cc;margin-bottom:14px}
.cine-cierre-t{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 14;font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.01em;color:#fff;margin:0}
.cine-cierre-p{margin-top:18px;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:#ffffffd9;max-width:50ch}
@media(max-width:700px){.cine-cierre{bottom:12%}}
.cine-hint::after{content:"";width:1px;height:calc(54px * (1 - var(--p) * 2));background:#ffffffb8}
@media(max-width:700px){.cine-hint{display:none}.cine-txt{padding-bottom:92px}}
.cine + .seccion{position:relative;z-index:3}

/* La barra de reserva de la home flota sobre el borde entre el vídeo y la
   primera sección, como el plinto de las interiores. */
/* La tarjeta de reserva monta sobre el final del vídeo: se centra en la
   costura para que no parezca una tira cortada entre las dos franjas. */
.rb-home{position:relative;z-index:4;max-width:var(--ancho);margin:calc(-1 * clamp(38px,4.4vw,54px)) auto 0;padding:0 var(--margen)}
@media(max-width:700px){.rb-home{margin-top:calc(-1 * clamp(60px,17vw,96px))}}
.rb-home .rb{box-shadow:0 30px 60px -30px #0f1e2766}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
  .cine-js .cine{height:auto}
  .cine-js .cine-fijo{position:relative}
  .cine-poster,.cine-video{transform:none}
  .cine-video{display:none}
  .cine-dato,.cine-hint,.cine-cierre{display:none}
  .cine-txt{opacity:1;transform:none}
}

/* ── Calendario propio de la barra de reserva (calendario.js) ─────────────
   Un solo calendario para las dos fechas: se pulsa la llegada y luego la
   salida. Los campos nativos siguen en el formulario, ocultos, como respaldo. */
.rb{position:relative}
.rb-js input[type=date]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rb-btn{display:block;width:100%;text-align:left;background:0 0;border:0;padding:0;font:400 16px/1.2 var(--sans);color:var(--tinta);cursor:pointer;min-height:26px;text-transform:none;letter-spacing:0}
.rb-btn-vacio .rb-btn-v{color:var(--gris)}
.rb-btn:focus-visible{outline:2px solid var(--laguna);outline-offset:2px}
.rb-abierto .rb-btn:not(.rb-btn-vacio){color:var(--laguna)}
.cal[hidden]{display:none}
.cal{position:absolute;left:0;top:calc(100% + 8px);z-index:50;background:#fff;color:var(--tinta);border:1px solid var(--linea);box-shadow:0 30px 70px -30px #0f1e2766,0 4px 14px -6px #0f1e2733;padding:16px 18px 14px;width:min(100%,640px);text-transform:none;letter-spacing:0;font-weight:400}
.cal-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.cal-pista{margin:0;font-size:12.5px;color:var(--gris);text-align:center;flex:1}
.cal-nav{background:0 0;border:1px solid var(--linea);width:38px;height:38px;cursor:pointer;font-size:16px;color:var(--tinta);display:grid;place-items:center}
.cal-nav:hover{border-color:var(--tinta)}
.cal-meses{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.cal-meses{grid-template-columns:1fr 1fr;gap:26px}}
.cal-titulo{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 14;font-size:20px;text-transform:capitalize;margin:4px 0 10px;text-align:center}
.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dn{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--gris);text-align:center;padding:4px 0 6px;text-transform:uppercase}
.cal-d{aspect-ratio:1;min-height:40px;border:0;background:0 0;font:400 15px var(--sans);color:var(--tinta);cursor:pointer;display:grid;place-items:center;border-radius:0}
.cal-d:hover:not(:disabled){background:var(--hueso)}
.cal-pasado{color:#0f1e2740;cursor:default}
.cal-hoy{text-decoration:underline;text-underline-offset:3px}
.cal-en{background:var(--laguna-tinte)}
.cal-ini,.cal-fin{background:var(--tinta)!important;color:#fff}
.cal-previo{background:var(--laguna)!important}
.cal-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linea)}
.cal-resumen{font-size:13.5px;color:var(--tinta)}
.cal-cerrar{background:var(--tinta);color:#fff;border:0;padding:10px 16px;font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.cal-cerrar:hover{background:var(--laguna)}
.reservar .cal,.mar .cal{color:var(--tinta)}
@media(max-width:700px){.cal{left:0;right:0;width:auto;padding:14px 12px 12px}.cal-d{min-height:42px}}

/* ── Calendario en móvil: hoja modal desde abajo, no un desplegable ─────── */
.cal-fondo[hidden]{display:none}
.cal-fondo{position:fixed;inset:0;z-index:290;background:#0f1e2799;border:0;padding:0;cursor:pointer;display:none}
.cal-abierto{overflow:hidden}
@media(max-width:700px){
  .cal-fondo{display:block}
  .cal{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:300;width:auto;max-height:88svh;overflow-y:auto;overscroll-behavior:contain;
    border-radius:18px 18px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -30px 60px -20px #0f1e2766;
    animation:cal-subir .28s cubic-bezier(.22,.61,.36,1) both}
  .cal::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#0f1e2733;margin:0 auto 12px}
  .cal-cab{position:sticky;top:0;background:#fff;padding:4px 0 8px;z-index:2}
  .cal-pista{font-size:13px}
  .cal-d{min-height:46px;font-size:16px}
  .cal-titulo{font-size:22px}
  .cal-pie{position:sticky;bottom:0;background:#fff;padding-bottom:4px}
  .cal-cerrar{padding:14px 22px;font-size:12px}
}
@keyframes cal-subir{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:701px){.cal-fondo{display:none!important}}

/* ── Pie: dónde más está el hotel ──────────────────────────────────────── */
.pie-perfiles{max-width:var(--ancho);margin:clamp(22px,3vw,34px) auto 0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:12.5px;color:#ffffff8a}
.pie-perfiles span{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;color:#ffffffa6;margin-right:6px}
.pie-perfiles a{color:#ffffffc4;text-decoration:none;border-bottom:1px solid #ffffff2e;padding-bottom:1px}
.pie-perfiles a:hover{color:#fff;border-bottom-color:#fff}

/* ── Consentimiento de cookies ───────────────────────────────────────────
   Abajo, ancho completo y por encima de todo, pero sin tapar la página: no es
   un muro. Aceptar y rechazar tienen el mismo peso visual a propósito. */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:400;background:#fff;border-top:1px solid var(--linea);
  box-shadow:0 -20px 50px -30px #0f1e2766;padding:clamp(16px,2.4vw,24px) var(--margen);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,32px);animation:ck-subir .3s ease both}
@keyframes ck-subir{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.ck-txt{flex:1 1 380px;min-width:0}
.ck-t{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 14;font-size:20px;margin:0 0 4px}
.ck-txt p{margin:0;font-size:13.5px;line-height:1.55;color:var(--gris)}
.ck-txt a{color:var(--laguna-honda);text-decoration:underline;text-underline-offset:2px}
.ck-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;flex:0 0 auto}
.ck-btns .btn{padding:12px 20px;font-size:11px;min-height:44px}
.ck-mas{background:0 0;border:0;cursor:pointer;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gris);text-decoration:underline;
  text-underline-offset:3px;padding:12px 6px;min-height:44px}
.ck-mas:hover{color:var(--tinta)}
.ck-lista{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;max-height:42vh;overflow-y:auto}
.ck-lista li{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  border-top:1px solid var(--linea);padding-top:10px}
.ck-lista b{display:block;font-size:13.5px}
.ck-lista span{display:block;font-size:12.5px;color:var(--gris);line-height:1.5;max-width:60ch}
.ck-lista em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);white-space:nowrap;padding-top:2px}
.ck-sw{position:relative;flex:0 0 auto;width:46px;height:26px;cursor:pointer}
.ck-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ck-sw span{position:absolute;inset:0;background:var(--hueso-hondo);transition:background .2s;border-radius:13px}
.ck-sw span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}
.ck-sw input:checked + span{background:var(--laguna-honda)}
.ck-sw input:checked + span::after{transform:translateX(20px)}
.ck-sw input:focus-visible + span{outline:2px solid var(--tinta);outline-offset:2px}
@media(max-width:700px){.ck{padding-bottom:calc(16px + env(safe-area-inset-bottom))}.ck-btns{width:100%}.ck-btns .btn{flex:1 1 140px}}

/* Enlaces legales del pie */
.pie-enlaces{max-width:var(--ancho);margin:clamp(18px,2.4vw,28px) auto 0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px}
.pie-enlaces a{color:#ffffffc4;text-decoration:none;border-bottom:1px solid #ffffff2e;padding-bottom:1px;cursor:pointer}
.pie-enlaces a:hover{color:#fff;border-bottom-color:#fff}

/* ── Páginas legales ─────────────────────────────────────────────────────── */
.legal{max-width:74ch;margin:0 auto;padding:clamp(40px,6vw,80px) var(--margen)}
.legal h2{font-size:clamp(22px,2.6vw,30px);margin:clamp(32px,4vw,48px) 0 12px}
.legal h3{font-size:17px;margin:24px 0 6px}
.legal p,.legal li{font-size:16px;line-height:1.65;color:#2b3a41}
.legal ul{padding-left:20px;margin:10px 0}
.legal li{margin-bottom:6px}
.legal .dato{border-left:3px solid var(--laguna);padding:4px 0 4px 16px;margin:16px 0}
.legal .dato p{margin:2px 0}
.legal-fecha{font-size:13px;color:var(--gris);margin-top:40px;border-top:1px solid var(--linea);padding-top:14px}
.legal table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
.legal th,.legal td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--linea);vertical-align:top}
.legal th{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}