:root{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Inter,Arial,sans-serif;color:#142534;background:#f4f6f7;font-synthesis:none;--edge:clamp(22px,6.2vw,105px);--navy:#162737}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0783aa;outline-offset:4px}button{color:inherit}button:disabled{cursor:wait}
.hero{isolation:isolate;position:relative;min-height:535px;height:clamp(535px,65vh,700px);display:flex;flex-direction:column;justify-content:space-between;padding:22px var(--edge) 32px;color:white;background:#344a5c var(--portada,url("/api/alojamientos/fotos/costa.webp")) center 55%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,29,48,.49),rgba(14,34,49,.13) 58%,transparent 88%),linear-gradient(0deg,rgba(14,22,30,.22),transparent 55%)}
.nav,.buscador{border:1px solid #ffffff80;box-shadow:inset 0 1px 1px #ffffff60,0 7px 30px #15233424;-webkit-backdrop-filter:blur(23px) saturate(1.3);backdrop-filter:blur(23px) saturate(1.3)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:0 20px 0 24px;border-radius:40px;background:#23374463}
.marca{font-size:clamp(18px,1.7vw,25px);font-weight:720;letter-spacing:-.033em;line-height:1.03}.marca span{font-weight:450}.nav-link{font-size:14px;font-weight:560;display:flex;align-items:center;gap:11px;min-height:44px}.nav-link span{font-size:18px}
.hero-body{margin:24px 0 20px}.lugar{margin:0 0 13px;font-size:clamp(15px,1.15vw,19px);letter-spacing:.025em;font-weight:560;text-shadow:0 1px 6px #0c213968}
h1,h2,h3,p{margin:0}h1{font-size:clamp(76px,7.6vw,118px);line-height:.94;font-weight:650;letter-spacing:-.048em;text-wrap:balance;text-shadow:0 1px 24px #10253426}h1 span{color:#f9c599}
.buscador{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:0;align-items:center;align-self:center;width:min(100%,950px);padding:10px 11px 10px 17px;border-radius:26px;background:#eff5f5ac;color:#162738;box-shadow:inset 0 1px 1px #ffffffa6,0 8px 32px #09172226}
.buscador label{display:flex;flex-direction:column;gap:1px;padding:3px 17px;font-size:12px;font-weight:650;letter-spacing:.01em;min-width:0}
.buscador label+label{border-left:1px solid #273b4b42}
.buscador input,.buscador select{color:var(--navy);color-scheme:light;background:transparent;border:0;padding:3px 1px;line-height:1.4;width:100%;min-width:0;min-height:28px;border-radius:4px;font-size:16px;font-weight:480}
.accion{border:0;border-radius:18px;background:var(--navy);color:white;min-height:54px;padding:0 23px;display:flex;justify-content:center;align-items:center;gap:25px;font-weight:640;box-shadow:inset 0 1px #ffffff26}.accion span{font-size:20px}.accion:hover{background:#274657}
main{padding:36px var(--edge) 48px;max-width:1700px;margin:auto}.section-head{display:flex;align-items:end;margin:0 0 20px}.byline{color:#52636c;font-size:13px;font-weight:570;margin-bottom:5px}h2{font-size:clamp(32px,3.1vw,48px);letter-spacing:-.041em;line-height:1.08;font-weight:640}
.fichas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.5vw,36px)}
.ficha{padding:8px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;position:relative;text-align:left;min-width:0;background:#fff;border-radius:30px;border:1px solid #fff;box-shadow:0 3px 6px #20394c09,0 13px 38px #36516414;transition:transform .22s,box-shadow .22s}
.ficha:hover{transform:translateY(-3px);box-shadow:0 6px 9px #20394c0a,0 17px 38px #36516423}.ficha>img{display:block;width:100%;height:100%;min-height:192px;object-fit:cover;border-radius:23px}.ficha-texto{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:14px clamp(12px,1.65vw,25px);gap:6px;min-width:0}.nombre{font-weight:650;font-size:clamp(24px,2.1vw,34px);line-height:1.05;letter-spacing:-.038em}.capacidad,.por-noche{font-size:14px;color:#4d5e69}.precio{margin-top:8px;font-size:18px;font-weight:670;letter-spacing:-.025em}.por-noche{font-weight:450}.ver-ficha{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:620}.mas{display:grid;place-items:center;border:1px solid #c6d3da;border-radius:50%;width:23px;height:23px;font-size:16px}.cotizacion{font-size:13px;color:#143f50;font-weight:600}.cotizacion:empty{display:none}
#estado{padding:12px 1px 16px;font-size:15px;line-height:1.5}footer{display:flex;align-items:center;gap:10px;color:#55646d;font-size:13px;flex-wrap:wrap;border-top:1px solid #d8dfe2;margin:0 var(--edge);padding:20px 0 32px}footer img{border-radius:50%}footer span:last-child{margin-left:auto}
dialog{color:var(--navy);background:#fafbfc;width:min(600px,calc(100% - 32px));padding:0;max-height:90dvh;overflow:auto;border:1px solid #fff8;border-radius:28px;box-shadow:0 30px 100px #08142350}dialog::backdrop{background:#132c3c89;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}body:has(dialog[open]){overflow:hidden}.galeria{position:relative;background:#192c38}.galeria img{display:block;width:100%;height:clamp(200px,37vh,350px);object-fit:contain}.galeria::after{content:"";position:absolute;inset:55% 0 0;pointer-events:none;background:linear-gradient(transparent,#071521a8)}.circulo{position:absolute;z-index:1;display:grid;place-items:center;border:1px solid #fff8;background:#1a2b3ead;color:white;border-radius:50%;width:44px;height:44px;font-size:27px;line-height:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cerrar{top:13px;right:13px}.anterior,.siguiente{top:50%;transform:translateY(-50%)}.anterior{left:12px}.siguiente{right:12px}#pie-foto{position:absolute;bottom:13px;left:19px;right:19px;color:white;font-size:13px;font-weight:560;z-index:1}.detalle-body{padding:24px clamp(20px,4vw,35px) 30px}.detalle-body h2{font-size:36px}#datos-detalle{margin-top:8px;font-size:16px}.detalle-body h3{margin:21px 0 8px;font-size:18px;letter-spacing:-.025em}.detalle-body ul{padding-left:20px;margin:0;line-height:1.62;font-size:15px}
@media(max-width:1000px) and (min-width:701px){.ficha{display:flex;flex-direction:column}.ficha>img{height:175px;min-height:0}.ficha-texto{padding:14px 16px}.buscador label{padding-inline:10px}}
@media(max-width:700px){:root{--edge:18px}.hero{min-height:575px;height:75svh;max-height:680px;padding:14px var(--edge) 23px;background-position:56% center}.hero::before{background:linear-gradient(95deg,#112a405e,#0c203419 80%),linear-gradient(0deg,#19283731,transparent)}.nav{min-height:48px;padding-inline:14px}.marca{font-size:17px}.nav-link{font-size:12px;gap:3px}.nav-link span{font-size:15px}.hero-body{margin:8px 3px 20px}.lugar{font-size:14px;margin:0 0 10px}h1{font-size:clamp(51px,12.6vw,78px);line-height:.97;letter-spacing:-.045em}.buscador{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 9px;padding:12px;border-radius:23px}.buscador label{padding:2px 5px}.buscador label+label{border:0}.buscador label:nth-child(2){padding-left:11px;border-left:1px solid #273b4b42}.buscador .personas{align-self:center}.accion{border-radius:15px;min-height:48px;padding:0 12px;gap:10px}.accion span{font-size:18px}main{padding:28px var(--edge) 32px}.section-head{margin-bottom:16px}.fichas{grid-template-columns:1fr;gap:17px}.ficha{border-radius:23px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:6px}.ficha>img{border-radius:18px;min-height:164px}.ficha-texto{padding:10px 12px;gap:5px}.precio{margin-top:6px}.capacidad,.por-noche{font-size:13px}.precio{font-size:17px}.ver-ficha{margin-top:7px}footer span:last-child{width:100%;margin:0}dialog{width:min(520px,calc(100% - 18px));border-radius:24px}.detalle-body{padding:18px 22px 27px}}
@media(max-width:355px){.nav-link span{display:none}.marca{font-size:15px}.nav-link{font-size:11px}.ficha-texto{padding:9px}.por-noche{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-transparency:reduce){.nav{background:#233747}.buscador{background:#f2f5f7}.circulo{background:#203744}dialog::backdrop{backdrop-filter:none}}

/* Las dos fotografías llevan el peso visual de la elección. */
#alojamientos {
  padding: clamp(20px,3vw,42px);
  background: linear-gradient(145deg,#e9f0f2 10%,#dce8e9 60%,#edf0ec);
  border-radius: clamp(25px,3vw,44px);
}
.fichas { gap: clamp(20px,3vw,42px); }
.ficha {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid #a6bdc3;
  border-radius: 30px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #fff, 0 3px 6px #2449571c, 0 13px 26px -9px #24495757;
}
.ficha:is(:hover,:focus-visible) {
  border-color: #427783;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px #24495722, 0 20px 35px -10px #2449575c;
}
.ficha:active { transform: translateY(0); }
.ficha > img { height: auto; min-height: 0; aspect-ratio: 2.15; border-radius: 22px; }
.ficha-texto {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 12px;
  padding: 18px clamp(10px,1.3vw,22px) 13px;
  width: 100%;
}
.ficha .nombre { grid-column: 1; }
.ficha .capacidad { grid-column: 1; }
.ficha .precio { grid-area: 1 / 2 / 3 / 3; align-self: start; margin: 2px 0 0; text-align: right; }
.ficha .precio .por-noche { display: block; margin-top: 3px; }
.ficha .cotizacion, .ficha .ver-ficha { grid-column: 1 / -1; }
.ficha .ver-ficha {
  justify-content: space-between; width: 100%; margin-top: 9px; padding-top: 10px;
  border-top: 1px solid #dae3e5; font-size: 14px; color: #185266;
}
.ver-ficha > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #dcebee; }
.pie-detalle {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px clamp(20px,4vw,35px); border-top: 1px solid #d2dee2;
  background: #f8fafaf0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.pie-detalle > span { font-size: 12px; color: #465e66; }
.pie-detalle strong { display: block; color: var(--navy); font-size: 16px; margin-top: 3px; }
.pie-detalle .accion { min-width: 124px; min-height: 46px; }
#reserva { width: min(492px,calc(100% - 22px)); background: #fff; }
.cabecera-reserva { display: flex; align-items: center; gap: 14px; padding: 22px; background: #eaf1f2; }
.cabecera-reserva img { width: 62px; height: 62px; object-fit: cover; border-radius: 16px; }
.cabecera-reserva h2 { font-size: clamp(23px,4vw,30px); }
.cerrar-reserva { margin-left: auto; min-width: 44px; height: 44px; background: #fff; border: 1px solid #bacbd0; border-radius: 50%; font-size: 25px; }
#form-reserva, #comprobante { padding: 22px clamp(18px,3vw,28px); }
#campos-reserva { margin: 0; border: 0; padding: 0; min-width: 0; }
#campos-reserva legend, #titulo-comprobante { font-size: 21px; font-weight: 650; letter-spacing: -.035em; padding: 0; margin-bottom: 15px; }
.fechas-reserva { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#campos-reserva label { display: grid; gap: 6px; min-width: 0; font-size: 14px; font-weight: 580; margin-bottom: 14px; }
#campos-reserva input, #campos-reserva select { width: 100%; min-width: 0; min-height: 46px; border: 1px solid #8c9ca4; border-radius: 12px; padding: 8px; color: var(--navy); background: #fff; font-size: 16px; }
.desglose { padding: 16px; margin: 2px 0 16px; border-radius: 16px; background: #e9f3ef; }
.desglose p { color: #365750; font-size: 14px; }
.desglose div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.desglose strong { font-size: 24px; letter-spacing: -.04em; }
#aviso-reserva { font-size: 14px; line-height: 1.5; margin-bottom: 11px; } #aviso-reserva:empty { display: none; }
#paso-reserva, #terminar { width: 100%; } .nota-prueba { color: #455e67; font-size: 13px; text-align: center; margin-top: 10px; }
#comprobante dl { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 22px 0; padding: 16px; background: #e9f3ef; border-radius: 15px; }
#comprobante dd { margin: 0; font-weight: 650; }
@media (max-width: 760px) {
  #alojamientos { padding: 18px 12px 22px; }
  .ficha-texto { padding: 11px 10px; }
  .ficha .nombre { font-size: 25px; }
  .ficha > img { aspect-ratio: 2; }
}
@media (max-width: 360px) {
  .fechas-reserva { grid-template-columns: 1fr; gap: 0; }
  .cabecera-reserva { padding: 16px; gap: 8px; }
  .cabecera-reserva img { width: 48px; height: 48px; }
  #comprobante dl { grid-template-columns: 1fr; }
}

/* La galería y el detalle comparten el mismo espacio de lectura. */
@font-face {
  font-family:Geist;
  src:url("tipografia/geist-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
#alojamientos, #detalle, #reserva { font-family:Geist,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; }
.destacado-ficha { grid-column:1 / -1; font-size:14px; line-height:1.4; color:#415b67; margin-top:4px; }
#detalle { background:#fcfdfc; }
#detalle .byline { color:#286174; font-size:13px; letter-spacing:.02em; font-weight:620; }
#detalle .detalle-body h2 { font-size:clamp(35px,4vw,58px); font-weight:640; line-height:1.03; letter-spacing:-.052em; }
#datos-detalle { color:#274c5b; font-size:clamp(17px,1.4vw,21px); font-weight:570; line-height:1.33; margin:9px 0 12px; }
#descripcion-detalle { font-size:16px; line-height:1.58; color:#304652; text-wrap:pretty; }
#detalle #distribucion { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:13px 4px; margin:20px 0; border-block:1px solid #c3d5d8; }
#distribucion li { display:grid; align-content:start; padding-inline:6px; color:#4a636b; font-size:12px; line-height:1.45; text-align:center; overflow-wrap:anywhere; }
#distribucion li+li { border-left:1px solid #d5dfe0; }
#distribucion strong { color:#173c47; font-size:26px; letter-spacing:-.05em; font-weight:600; }
#detalle h3 { font-size:23px; letter-spacing:-.04em; font-weight:650; margin:0 0 14px; }
#comodidades { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
#comodidades dt { font-size:15px; color:#193f4c; font-weight:670; margin:0 0 4px; }
#comodidades dd { font-size:14px; line-height:1.52; margin:0; color:#405660; }
.admite-mascotas { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:5px 10px; margin-top:22px; padding:12px 14px; border-radius:12px; background:#e7f1ef; color:#1e4847; font-size:13px; line-height:1.4; }
#detalle .galeria { display:flex; flex-direction:column; overflow:hidden; }
#detalle .galeria > img { background:#1a303a; }
#detalle .portada-foto { object-fit:cover; }
#detalle .galeria::after { inset:auto 0 61px; height:66px; }
#detalle #pie-foto { bottom:74px; }
#miniaturas { display:flex; justify-content:center; align-items:center; gap:5px; background:#122832; padding:7px 6px; min-height:61px; }
#miniaturas button { border:2px solid transparent; padding:2px; border-radius:9px; background:transparent; height:46px; width:clamp(35px,10vw,48px); }
#miniaturas button[aria-pressed=true] { border-color:#f4cf9b; }
#miniaturas button:focus-visible { outline-color:white; }
#detalle #miniaturas img { width:100%; height:100%; display:block; object-fit:cover; border-radius:4px; }
#detalle .pie-detalle { z-index:2; }
#campos-reserva .opcion-mascota { display:flex; align-items:center; flex-direction:row; gap:10px; padding:12px 14px; background:#eef4f3; border:1px solid #c7d8d5; border-radius:12px; cursor:pointer; }
#campos-reserva .opcion-mascota input { width:19px; height:19px; min-height:0; margin:0; accent-color:#175766; }
.opcion-mascota small { display:block; color:#475e64; font-weight:450; margin-top:3px; font-size:13px; }
#cargo-mascota, #mascota-confirmada { margin-top:6px; }
#campos-reserva .opcion-mascota[hidden] { display:none; }
@media (min-width:850px) {
  #detalle[open] { display:grid; grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr); grid-template-rows:minmax(0,1fr) auto; width:min(1000px,calc(100% - 64px)); height:min(702px,89dvh); overflow:hidden; }
  #detalle .galeria { grid-row:1 / 3; min-height:0; }
  #detalle .galeria > img { height:0; min-height:0; flex:1; width:100%; }
  #detalle .detalle-body { overflow:auto; padding:30px 28px 24px; }
  #detalle .pie-detalle { grid-column:2; padding-inline:28px; }
}
@media(max-width:480px){
  #comodidades { grid-template-columns:1fr; gap:13px; }
  #distribucion li { font-size:11px; padding-inline:3px; }
  #detalle .galeria > img { height:clamp(160px,29dvh,245px); }
}
#contacto-web:not([hidden]){display:grid;gap:.75rem;margin:1rem 0}#contacto-web label{display:grid;gap:.3rem}#contacto-web input{font:inherit;color:inherit;border:1px solid #abb8c1;background:white;border-radius:.7rem;padding:.65rem}

.pasos { display:flex; gap:8px; list-style:none; margin:0; padding:14px 22px 0; }
.pasos li { flex:1; border-top:3px solid #d9e2e3; padding-top:5px; color:#536970; font-size:12px; }
.pasos li[aria-current] { border-color:#256b68; font-weight:700; color:#205552; }

:root { --edge:clamp(16px,5vw,72px); --margen:max(var(--edge),calc((100vw - 1120px)/2)); --oceano:#184d50; }
body { min-height:100vh; font-family:Geist,-apple-system,BlinkMacSystemFont,sans-serif; background:#f8f8f3; }
.hero {
  min-height:0; height:clamp(240px,31vh,320px); max-height:none; padding:16px var(--margen) 25px;
  background-position:center 56%; justify-content:space-between;
}
.hero::before { background:linear-gradient(90deg,#0f262cc9,#1735394d 56%,transparent),linear-gradient(180deg,#182c343d,transparent 55%); }
.nav { background:none; box-shadow:none; border:0; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none; min-height:44px; }
.marca { display:inline-flex; gap:10px; align-items:center; min-height:44px; font-size:18px; letter-spacing:-.025em; }
.marca img { object-fit:cover; border-radius:50%; }
.nav-link { display:inline-flex; align-items:center; min-height:44px; padding:0 15px; border-radius:24px; background:#142e3c8f; border:1px solid #ffffff60; }
.hero-body { margin:0; }
.hero h1 { font-size:clamp(46px,4.7vw,72px); font-weight:580; line-height:.95; letter-spacing:-.052em; }
.hero h1 .linea-mar { display:block; color:#fff; font-weight:400; }
.lugar { margin:0 0 9px; font-size:14px; }
main { max-width:1120px; margin:auto; padding:30px 0 32px; width:calc(100% - 2 * var(--edge)); }
#alojamientos { background:none; padding:0; border:0; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.section-head h2 { font-size:clamp(26px,3vw,38px); font-weight:585; }
#alternar-fechas, #editar-estadia, .detalles-ficha {
  min-height:44px; color:var(--oceano); font-weight:590; background:transparent;
}
#alternar-fechas { display:inline-flex; align-items:center; gap:12px; padding:0 16px; border:1px solid #b6c9c3; border-radius:25px; background:white; }
#alternar-fechas span { font-size:18px; }
#alternar-fechas[aria-expanded=true] span { transform:rotate(180deg); }
.buscador {
  width:100%; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:stretch; gap:10px; padding:14px;
  margin-bottom:18px; border:1px solid #c9d7d2; border-radius:18px; background:#eaf0ed;
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
}
.buscador label, .buscador label+label, .buscador label:nth-child(2) {
  border:1px solid #c5d1cf; border-radius:10px; padding:5px 9px; color:#345352; background:white;
}
.buscador[hidden], .revision-fechas[hidden], #campos-reserva[hidden] { display:none; }
.accion { background:var(--oceano); gap:8px; border-radius:12px; }
.accion:hover { background:#103d42; }
.fichas { gap:20px; }
.ficha { padding:0; border-radius:20px; background:#fff; border:1px solid #d3dcd6; box-shadow:0 4px 14px #293f3710; overflow:hidden; }
.ficha:is(:hover,:focus-within) { transform:none; border-color:#92aaa1; box-shadow:0 5px 19px #263f351b; }
.ficha > img { width:100%; height:clamp(160px,23vh,220px); aspect-ratio:auto; border-radius:0; }
.ficha-texto { padding:14px 20px 10px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; }
.ficha .nombre { font-size:clamp(22px,2vw,31px); font-weight:620; }
.ficha .precio { color:#153b3c; font-size:21px; }
.ficha .precio .por-noche { display:inline; font-size:13px; font-weight:450; }
.acciones-ficha { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:9px; margin-top:5px; border-top:1px solid #dce4df; }
.detalles-ficha, #editar-estadia { padding:0 4px; border:0; text-decoration:underline; text-underline-offset:4px; font-size:14px; }
.detalles-ficha::after { content:""; position:absolute; inset:0; }
.reserva-directa { position:relative; min-height:44px; padding-inline:22px; }
.reserva-directa:disabled { cursor:default; opacity:.65; }
.cotizacion:not(:empty) { padding:7px 10px; background:#eaf3f0; border-radius:9px; }
footer { margin:0 var(--margen); }
.revision-fechas { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 0 12px; font-size:14px; }
#editar-estadia { flex-shrink:0; }
@media(max-width:800px) {
  .ficha-texto { padding:12px; }
  .ficha .precio { font-size:18px; }
  .ficha .precio .por-noche { display:block; }
}
@media(max-width:700px) {
  .hero { height:185px; padding:8px var(--edge) 17px; background-position:center 56%; }
  .hero h1 { font-size:41px; }
  .lugar { font-size:12px; margin-bottom:5px; }
  .marca img { width:27px; height:27px; }
  .marca { font-size:16px; gap:7px; }
  main { padding:18px 0; }
  .section-head { margin-bottom:10px; gap:4px 12px; }
  .section-head h2 { font-size:25px; }
  #alternar-fechas { padding:0 4px; border:0; background:transparent; font-size:13px; gap:5px; text-decoration:underline; text-underline-offset:3px; }
  .buscador { grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; gap:7px; }
  .buscador .accion { font-size:13px; gap:4px; padding:0 6px; }
  .fichas { grid-template-columns:1fr; gap:12px; }
  .ficha { display:grid; grid-template-columns:clamp(92px,29vw,160px) minmax(0,1fr); align-content:start; align-items:center;
    grid-template-areas:"photo title" "photo guests" "photo price" "result result" "actions actions"; gap:0 14px; padding:10px 12px 5px; border-radius:18px; }
  .ficha-texto { display:contents; }
  .ficha > img { grid-area:photo; width:100%; height:90px; min-height:0; border-radius:12px; object-fit:cover; }
  .ficha .nombre { grid-area:title; align-self:end; font-size:22px; }
  .ficha .capacidad { grid-area:guests; font-size:13px; }
  .ficha .precio { grid-area:price; align-self:start; margin:0; text-align:left; }
  .ficha .precio .por-noche { display:inline; }
  .ficha .cotizacion { grid-area:result; margin-top:6px; }
  .acciones-ficha { grid-area:actions; margin-top:8px; padding-top:5px; }
  .reserva-directa { min-width:110px; }
}
@media (max-width:360px) {
  .section-head { align-items:start; flex-direction:column; gap:0; }
  .hero { height:169px; }
}

/* Cobquecura frente al mar */
:root { --oceano:var(--ines-petroleo); --navy:var(--ines-tinta); }
body {font-family:var(--ines-fuente);background:var(--ines-arena);color:var(--ines-tinta)}
.icono-costa {width:1.25em;height:1.25em;flex:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;fill:none}
.cabecera-costa {background:#fff}
.cabecera-costa .nav {position:relative;z-index:3;padding:10px var(--margen);min-height:70px;border-radius:0;color:var(--ines-tinta);background:#fff;gap:20px}
.marca img {border-radius:0;width:55px;height:32px;object-fit:contain;mix-blend-mode:multiply}
.marca strong,.marca small {display:block}.marca strong {font-size:20px;font-weight:650}.marca small {font-size:12px;font-weight:450;line-height:1.5;color:var(--ines-texto);letter-spacing:0}
#enlaces-principales {display:flex;align-items:center;gap:clamp(16px,3vw,46px)}
#enlaces-principales a {display:grid;align-items:center;min-height:44px;font-weight:550;font-size:14px;border-block:2px solid transparent}
#enlaces-principales a:hover,#enlaces-principales a:focus-visible {border-bottom-color:var(--ines-azul)}
#menu-movil {display:none}
.hero {height:clamp(295px,30vw,358px);padding:0 var(--margen);display:grid;align-content:center;justify-content:start;overflow:hidden;background-position:center 57%}
.hero::before {background:linear-gradient(90deg,#0d2435ab,transparent 74%),linear-gradient(0deg,#122c393c,transparent 55%)}
.hero-body {position:relative;z-index:1}
.lugar,.lugar-destino {text-transform:uppercase;letter-spacing:.17em;font-weight:650;font-size:12px;margin:0 0 10px}
.hero h1 {font-size:clamp(50px,5.4vw,76px);font-weight:640;letter-spacing:-.046em}
.hero h1 .linea-mar {font-weight:inherit}
.introduccion {font-size:clamp(15px,1.5vw,20px);line-height:1.35;max-width:34ch;margin:15px 0;color:white}
.conoce,.destino a {width:fit-content;display:inline-flex;gap:15px;align-items:center;min-height:44px;padding:0 21px;border-radius:28px;font-size:14px;font-weight:620}
.conoce {background:#fffffff5;color:var(--ines-tinta)}
main {padding-top:clamp(22px,3vw,42px);padding-bottom:42px}
.section-head h2:before,.lugar-destino:after {content:'';display:block;height:3px;width:44px;background:var(--ines-azul);margin-bottom:8px}
.section-head h2 {font-weight:650}.section-head {margin-bottom:16px}
.ficha {border-color:#e3dfd9;border-radius:var(--ines-radio);box-shadow:var(--ines-sombra)}
.ficha > img {height:clamp(150px,16vw,206px)}
.ficha .precio,.ficha .nombre {color:var(--ines-tinta)}
.ficha-texto {padding:16px 18px 12px}
.tipo-alojamiento {position:absolute;top:12px;left:12px;background:#fffcf8f5;color:var(--ines-tinta);border-radius:18px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650;padding:7px 12px;pointer-events:none}
.detalles-ficha {color:var(--ines-tinta);text-decoration:none}.detalles-ficha:hover {text-decoration:underline}
.detalles-ficha:before {content:'→';float:right;margin-left:12px}
.reserva-directa {border-radius:18px}
.atributos {list-style:none;display:flex;justify-content:space-around;gap:0;margin:30px 0;padding:10px 0}
.atributos li {flex:1;display:flex;align-items:center;justify-content:center;gap:11px;min-height:38px;font-size:14px;font-weight:540;border-inline-start:1px solid var(--ines-borde)}
.atributos li:first-child {border:0}.atributos li[hidden] {display:none}
.atributos .icono-costa {color:var(--ines-petroleo);width:29px;height:29px}
.destino {display:grid;grid-template-columns:.87fr 1.13fr;align-items:stretch;background:#e8eff3;border-radius:26px;overflow:hidden}
.destino>div {align-self:center;padding:clamp(22px,4vw,48px)}
.lugar-destino {color:var(--ines-petroleo)}.lugar-destino:after {margin-top:7px}
.destino h2 {font-size:clamp(30px,3.2vw,46px);line-height:1.04;max-width:18ch}
.destino h2+p {margin:13px 0 19px;line-height:1.45;color:var(--ines-texto);max-width:40ch}
.destino>img {width:100%;height:100%;min-height:245px;object-fit:cover;border-top-left-radius:17%}
footer {background:#f1ede7;margin:0;padding:18px var(--margen);color:var(--ines-texto);border-color:var(--ines-borde)}
@media(max-width:700px){
 .cabecera-costa .nav {min-height:54px;padding:5px var(--edge);gap:6px}
 .marca {margin-right:auto}.marca img {width:33px;height:25px}.marca strong {font-size:15px}.marca small {font-size:10px}
 #menu-movil {display:grid;place-items:center;background:transparent;border:0;width:44px;height:44px}
 #enlaces-principales {display:none;position:absolute;top:100%;right:var(--edge);padding:5px 15px;background:white;border:1px solid var(--ines-borde);border-radius:12px;box-shadow:var(--ines-sombra)}
 #menu-movil[aria-expanded=true]+#enlaces-principales {display:grid;gap:0}
 .hero {height:187px;padding:12px var(--edge);background-position:center 55%}
 .hero h1 {font-size:36px;line-height:.96}
 .lugar {font-size:10px;margin-bottom:6px}
 .introduccion {font-size:13px;margin:6px 0 7px;max-width:none}
 .conoce {font-size:12px;min-height:44px;padding:0 15px}
 main {padding-top:14px;padding-bottom:20px}
 .section-head {margin-bottom:9px}.section-head h2:before {width:31px;height:2px;margin-bottom:4px}
 .ficha>img {height:80px}.tipo-alojamiento {display:none}
 .atributos {display:grid;grid-template-columns:1fr 1fr;gap:9px 6px;margin:17px 0}
 .atributos li {justify-content:flex-start;border:none;font-size:12px;gap:7px}.atributos .icono-costa{width:22px;height:22px}
 .destino {grid-template-columns:1fr;border-radius:18px}.destino>div {padding:22px}
 .destino>img {height:164px;min-height:0;border-radius:0}.destino h2 {font-size:30px}
 footer {padding-inline:var(--edge)}
}
@media(max-width:360px){.hero{height:179px}.marca img{display:none}.introduccion{font-size:12px}.cabecera-costa .nav{gap:3px}}

body[data-guest="true"] { --portada:url("/fotos/costa.webp"); }
#enlaces-principales [aria-current="page"] { border-bottom-color:var(--ines-azul); }
.inicio-visitante { width:100%; max-width:none; padding:0; }
.inicio-visitante .hero { height:auto; min-height:clamp(340px,55svh,550px); padding-block:clamp(40px,6vw,80px); }
.caminos { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.caminos .turismo { color:white; background:#132a39b3; border:1px solid #ffffffa1; }
.bienvenida { max-width:1120px; margin:auto; padding:clamp(32px,6vw,76px) 0; width:calc(100% - 2 * var(--edge)); display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,6vw,84px); align-items:center; }
.bienvenida h2 { max-width:17ch; }
.bienvenida p:not(.lugar-destino), .guia p:not(.lugar-destino) { color:var(--ines-texto); font-size:clamp(16px,1.35vw,19px); line-height:1.6; }
.bienvenida a,.lecturas a { display:inline-flex; align-items:center; min-height:44px; color:var(--ines-petroleo); font-weight:620; text-decoration:underline; text-underline-offset:4px; }
#titulo-alojamientos { font-size:clamp(29px,4vw,48px); line-height:1.1; text-shadow:none; }
.pagina-alojamientos main { padding-block:clamp(20px,4vw,48px); }
.guia { padding-block:clamp(30px,5vw,68px); }
.guia-entrada { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,5vw,66px); align-items:center; }
.guia h1 { font-size:clamp(38px,5vw,66px); line-height:1.04; text-shadow:none; margin-bottom:20px; }
.guia figure { margin:0; }
.guia figure img { display:block; width:100%; height:auto; aspect-ratio:1.6; object-fit:cover; border-radius:20px; }
.guia figcaption { font-size:13px; color:var(--ines-texto); margin-top:8px; }
.lecturas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,42px); margin-block:clamp(36px,5vw,68px); }
.lecturas section { border-top:1px solid var(--ines-borde); padding-top:20px; }
.lecturas .lugar-destino::after { display:none; }
.lecturas h2 { font-size:clamp(25px,2.6vw,36px); margin-bottom:14px; }
.lecturas a { font-size:14px; margin-top:8px; }
.volver-estadia { width:fit-content; }
@media (max-width:700px) {
  .bienvenida,.guia-entrada,.lecturas {grid-template-columns:1fr;}
  .guia h1 {max-width:19ch;}
  :is(.pagina-alojamientos,.pagina-inicio) .ficha > img {height:clamp(95px,27vw,140px);}
  :is(.pagina-alojamientos,.pagina-inicio) .ficha {padding:12px 12px 6px;}
}
@media (min-width:701px) and (max-height:500px) {
  .cabecera-costa .nav {min-height:52px; padding-block:3px;}
  .pagina-alojamientos main {padding-block:12px;}
  :is(.pagina-alojamientos,.pagina-inicio) .section-head {margin-bottom:10px;}
  :is(.pagina-alojamientos,.pagina-inicio) .ficha > img {height:clamp(74px,22vh,110px);min-height:0;}
  :is(.pagina-alojamientos,.pagina-inicio) .ficha-texto {padding:8px 14px;gap:3px 8px;}
  :is(.pagina-alojamientos,.pagina-inicio) .acciones-ficha {margin-top:2px;padding-top:3px;}
}

.guia figure img { aspect-ratio:auto; }
.guia figcaption a { color:var(--ines-petroleo); text-decoration:underline; text-underline-offset:3px; }
.guia-loberia { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(22px,5vw,66px); align-items:center; margin-top:clamp(32px,6vw,80px); padding-top:clamp(26px,4vw,52px); border-top:1px solid var(--ines-borde); }
.guia-loberia figure { grid-row:1; grid-column:1; }
.guia-loberia h2 { margin-bottom:14px; }
.guia .lecturas { grid-template-columns:1fr 1fr; }
.fuente-guia { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; font-weight:600; text-decoration:underline; text-underline-offset:4px; color:var(--ines-petroleo); }
@media (max-width:700px) {
  .guia-loberia,.guia .lecturas {grid-template-columns:1fr;}
  .guia-loberia figure {grid-column:auto;grid-row:auto;}
}

.titulo-con-perfil {
  display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; min-width:0;
}
.perfil-estadia {
  display:inline-block; width:max-content; max-width:100%; padding:4px 10px;
  border:1px solid #bdd9da; border-radius:100px; background:#e8f4f3;
  color:#204c55; font-size:12px; font-weight:600; letter-spacing:0; line-height:1.35;
}
.perfil-estadia[hidden] {display:none;}
@media (min-width:701px) and (max-width:1000px) {
  .ficha .titulo-con-perfil {grid-column:1/-1;}
  .ficha .precio {grid-area:2 / 2; margin:0;}
}
@media (max-width:700px) {
  :is(.pagina-alojamientos,.pagina-inicio) .ficha {
    grid-template-areas:"title title" "photo guests" "photo price" "result result" "actions actions";
  }
  .ficha .titulo-con-perfil {grid-area:title; padding:0 0 8px;}
  :is(.pagina-alojamientos,.pagina-inicio) .ficha > img {height:clamp(78px,23vw,105px);}
  .ficha .capacidad {align-self:end;}
}

main.inicio-reservas {width:100%;max-width:none;padding:0;}
.cabecera-costa .hero {min-height:0;height:auto;padding:38px var(--margen) 64px;background-position:center 55%;}
.cabecera-costa .hero h1 {font-size:clamp(38px,4.8vw,68px);}
.inicio-reservas .introduccion {max-width:49ch;margin-bottom:0;text-wrap:balance;}
.contenido-estadia {width:calc(100% - 2 * var(--edge));max-width:1120px;margin:auto;padding-bottom:36px;}
.consulta-estadia {position:relative;margin:-28px 0 30px;padding:18px 22px;background:#fff;border:1px solid var(--ines-borde);border-radius:20px;box-shadow:var(--ines-sombra);}
.consulta-estadia h2 {margin-bottom:12px;font-size:clamp(20px,2vw,26px);}
.consulta-estadia .buscador {background:transparent;border:0;padding:0;margin:0;}
.inicio-reservas .section-head p {margin-top:5px;color:var(--ines-texto);font-size:15px;line-height:1.45;}
.inicio-reservas #titulo-alojamientos {font-size:clamp(27px,3.4vw,41px);}
.inicio-reservas #alojamientos {scroll-margin-block:12px;}
.guia-local {display:flex;align-items:center;gap:18px;background:#eaf0f1;border-radius:18px;overflow:hidden;}
.guia-local img {width:clamp(76px,15vw,180px);height:96px;object-fit:cover;}
.guia-local strong,.guia-local small {display:block;}
.guia-local strong {font-size:clamp(17px,2vw,24px);}
.guia-local small {margin-top:5px;color:var(--ines-texto);}
.guia-local span:last-child {margin-left:auto;padding-right:18px;}
.credito-guia {display:block;margin-top:5px;color:var(--ines-texto);font-size:11px;}
.credito-guia a {text-decoration:underline;}
@media(max-width:700px) {
 .cabecera-costa .hero {padding:22px var(--edge) 42px;}
 .consulta-estadia {margin:-18px 0 22px;padding:14px;border-radius:15px;}
 .consulta-estadia .buscador {gap:6px;}
 .consulta-estadia .buscador label {padding:3px 8px;}
 .inicio-reservas .ficha {grid-template-areas:"title title" "photo guests" "photo price" "result result" "actions actions";padding:12px 12px 6px;}
 .inicio-reservas .ficha > img {height:clamp(78px,23vw,105px);}
 .guia-local {gap:10px;}
}

.cabecera-costa .marca img {display:block;width:52px;height:52px;object-fit:contain;border-radius:0;mix-blend-mode:normal;}
.cabecera-costa .nav {min-height:60px;padding-block:4px;}
.cabecera-costa .hero {padding-block:24px 42px;}
.cabecera-costa .hero h1 {font-size:clamp(32px,3.9vw,52px);letter-spacing:-.035em;line-height:1.06;}
.inicio-reservas .introduccion {margin-top:8px;}
.consulta-estadia {padding:8px;margin:-20px 0 16px;border-radius:16px;}
.consulta-estadia .buscador {gap:6px;}
.consulta-estadia .buscador label {padding:2px 10px;}
.consulta-estadia .buscador .accion {min-height:44px;}
.inicio-reservas .section-head {margin-bottom:10px;}
.inicio-reservas #titulo-alojamientos {font-size:clamp(23px,2.5vw,34px);}
.ficha .capacidad {display:flex;align-items:center;gap:5px;}
.ficha .capacidad .icono-costa {width:15px;height:15px;flex:none;}
.inicio-reservas .ficha > img {height:clamp(140px,23vh,207px);}
@media (min-width:701px) and (max-height:720px) {
 .cabecera-costa .hero {padding-block:16px 32px;}
 .cabecera-costa .hero h1 .linea-mar {display:inline;}
 .cabecera-costa .hero h1 {font-size:36px;}
 .inicio-reservas .ficha > img {height:clamp(84px,20vh,140px);}
}
@media(max-width:700px) {
 .cabecera-costa .nav {min-height:50px;padding-block:3px;}
 .cabecera-costa .marca img {width:44px;height:44px;}
 .cabecera-costa .hero {padding:14px var(--edge) 28px;}
 .cabecera-costa .hero h1 {font-size:clamp(27px,7.1vw,36px);}
 .cabecera-costa .hero h1 .linea-mar {display:inline;}
 .cabecera-costa .hero .introduccion {font-size:14px;line-height:1.35;margin-top:6px;}
 .consulta-estadia {padding:6px;margin:-14px 0 12px;border-radius:14px;}
 .consulta-estadia .buscador {gap:4px;}
 .consulta-estadia .buscador label {padding:2px 6px;}
 .consulta-estadia .buscador input,.consulta-estadia .buscador select {min-height:25px;padding-block:1px;}
 .inicio-reservas #titulo-alojamientos {font-size:24px;}
 .inicio-reservas .fichas {gap:8px;}
 .inicio-reservas .ficha {padding:8px 10px 4px;border-radius:14px;grid-template-columns:74px minmax(0,1fr);column-gap:10px;}
 .inicio-reservas .ficha .titulo-con-perfil {padding-bottom:4px;}
 .inicio-reservas .ficha > img {height:52px;min-height:0;border-radius:8px;}
 .inicio-reservas .acciones-ficha {margin-top:4px;padding-top:2px;}
 .inicio-reservas .atributos {margin-block:18px;}
}
.cabecera-costa .marca img {padding:2px;border-radius:50%;}
@media(max-width:360px) {
 .cabecera-costa .hero {padding-block:10px 20px;}
 .consulta-estadia {margin-bottom:8px;}
}
@media(max-width:700px) and (min-height:720px) {
 .inicio-reservas .ficha {grid-template-columns:106px minmax(0,1fr);}
 .inicio-reservas .ficha > img {height:76px;}
}
@media(min-width:701px) and (max-height:480px) {
 .inicio-reservas {display:grid;grid-template-columns: minmax(0,2fr) minmax(0,3fr);}
 .inicio-reservas .contenido-estadia {display:contents;}
 .cabecera-costa .hero {grid-area:1/1/2/3;align-content:center;padding:12px 62% 12px var(--edge);}
 .cabecera-costa .hero .lugar {margin-bottom:4px;}
 .cabecera-costa .hero h1 {font-size:28px;}
 .cabecera-costa .hero .introduccion {font-size:12px;margin-top:4px;}
 .consulta-estadia {grid-area:1/2;align-self:center;margin:7px var(--edge) 7px 0;padding:4px;}
 .consulta-estadia .buscador {grid-template-columns:1fr 1fr;gap:3px;}
 .consulta-estadia .buscador input,.consulta-estadia .buscador select {min-height:20px;padding-block:0;}
 .inicio-reservas #alojamientos,.inicio-reservas .atributos,.inicio-reservas .guia-local,.inicio-reservas .credito-guia {grid-column:1/-1;margin-inline:var(--edge);}
 .inicio-reservas .section-head {margin-block:8px;}
 .inicio-reservas #titulo-alojamientos {font-size:21px;}
 .inicio-reservas .ficha {display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-areas:"photo title" "photo guests" "photo price" "result result" "actions actions";padding:7px 10px;column-gap:8px;align-items:center;}
 .inicio-reservas .ficha-texto {display:contents;}
 .inicio-reservas .ficha > img {grid-area:photo;height:74px;border-radius:8px;}
 .inicio-reservas .titulo-con-perfil {grid-area:title;gap:5px;}
 .inicio-reservas .ficha .nombre {font-size:18px;}
 .inicio-reservas .perfil-estadia {font-size:10px;padding:3px 6px;}
 .inicio-reservas .ficha .capacidad {grid-area:guests;}
 .inicio-reservas .ficha .precio {grid-area:price;text-align:left;font-size:18px;}
 .inicio-reservas .cotizacion {grid-area:result;}
 .inicio-reservas .acciones-ficha {grid-area:actions;}
}

/* Una columna para el nombre y otra para el perfil en todas las tarjetas. */
.ficha .titulo-con-perfil {display:grid;grid-template-columns:minmax(0,1fr) 128px;align-items:center;justify-content:start;gap:6px;}
.ficha .perfil-estadia {width:128px;min-width:0;text-align:center;}
@media(min-width:701px) and (min-height:481px) {
 .inicio-reservas .ficha-texto {flex:1;grid-template-rows:auto auto 1fr auto;}
 .inicio-reservas .ficha .titulo-con-perfil {grid-column:1/-1;grid-row:1;}
 .inicio-reservas .ficha .capacidad {grid-column:1;grid-row:2;align-self:center;}
 .inicio-reservas .ficha .precio {grid-area:2 / 2;margin:0;align-self:center;}
 .inicio-reservas .ficha .por-noche {display:inline;}
 .inicio-reservas .cotizacion {grid-row:3;align-self:start;}
 .inicio-reservas .acciones-ficha {grid-row:4;}
}
@media(max-width:700px) {
 .ficha .titulo-con-perfil {grid-template-columns:minmax(0,1fr) 128px;justify-content:stretch;}
 .ficha .titulo-con-perfil .nombre {grid-area:auto;}
}
@media(min-width:701px) and (max-height:480px) {
 .inicio-reservas .ficha .titulo-con-perfil {grid-template-columns:minmax(0,1fr) 103px;}
 .inicio-reservas .ficha .perfil-estadia {width:103px;}
}

.inicio-reservas .ficha .precio {font-variant-numeric:tabular-nums;}
.cabecera-costa .hero {padding-block:clamp(15px,2vw,26px);}
.cabecera-costa .hero h1 .linea-mar {display:inline;font-weight:480;white-space:nowrap;}
.inicio-reservas #alojamientos {margin-top:14px;}
.inicio-reservas .consulta-estadia {margin:16px 0 0;}
.inicio-reservas .consulta-estadia h2 {margin:0 0 7px 3px;font-size:17px;line-height:1.2;}
@media(max-width:700px) {
 .cabecera-costa .hero {padding-block:12px;}
 .inicio-reservas #alojamientos {margin-top:10px;}
 .inicio-reservas .consulta-estadia {margin-top:10px;}
}
@media(min-width:701px) and (max-height:480px) {
 main.inicio-reservas {display:block;}
 .inicio-reservas .contenido-estadia {display:block;}
 .cabecera-costa .hero {padding:8px var(--margen);}
 .cabecera-costa .hero h1 {font-size:23px;}
 .cabecera-costa .hero .lugar {display:none;}
 .inicio-reservas #alojamientos,.inicio-reservas .atributos,.inicio-reservas .guia-local,.inicio-reservas .credito-guia {margin-inline:0;}
 .inicio-reservas .consulta-estadia .buscador {grid-template-columns:repeat(3,minmax(0,1fr)) auto;}
}

/* Selección de noches dentro de la reserva */
.cal-reserva {margin:0 0 1rem; padding:.85rem; background:#f6faf9; border:1px solid #d4e1df; border-radius:16px; color:#163c44}
.cal-titulo,.cal-leyenda,.cal-seleccion {display:flex; align-items:center; gap:.65rem}
.cal-titulo {justify-content:space-between}
.cal-titulo strong {text-transform:capitalize}
.cal-titulo button,.cal-seleccion button,#reintentar-calendario {border:1px solid #b7cacb; border-radius:9px; color:#124656; background:white; padding:6px 10px; cursor:pointer}
.cal-titulo button {font-size:21px; width:38px; line-height:1}
.cal-titulo button:disabled {opacity:.4; cursor:default}
.cal-leyenda {font-size:.78rem; margin:8px 0; gap:1rem}
.cal-semana,.cal-dias {display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; text-align:center}
.cal-semana {font-size:.72rem; color:#475b61; margin:8px 0 4px}
.cal-dias button {border:1px solid #c4d6d3; background:white; border-radius:7px; min-height:34px; padding:0; color:#134759; font:inherit; font-size:.86rem; font-weight:600; cursor:pointer}
.cal-dias button:disabled {opacity:.57; cursor:default}
.cal-dias button.ocupado {background:repeating-linear-gradient(135deg,#f0e9e3,#f0e9e3 4px,#dbd1c7 5px,#f0e9e3 6px); text-decoration:line-through; color:#4c443e}
.cal-dias button.seleccionado {background:#10485c; color:white; opacity:1; text-decoration:none}
.cal-dias button.entre-fechas {background:#d3e9e5}
.cal-reserva button:focus-visible {outline:3px solid #137292; outline-offset:1px}
#ayuda-calendario {font-size:.84rem; margin:9px 0; line-height:1.4}
.cal-seleccion {border-top:1px solid #cfddda; padding-top:8px; flex-wrap:wrap; font-size:.75rem}
.cal-seleccion span {flex:1}
.cal-seleccion strong {display:block; font-size:.84rem}

.guia-entrada h1 {margin-bottom:.5em}
.guia-entrada h2 {font-size:clamp(20px,2.3vw,28px)}
.entorno-gastro,.entorno-mapa {margin-block:clamp(36px,6vw,80px)}
.locales {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:16px;margin-top:22px}
.locales article {display:flex;flex-direction:column;align-items:flex-start;background:#f4f6f3;padding:22px;border-radius:18px;border:1px solid #d6e2dd}
.locales article small,.lista-mapa small {color:#475f60;font-size:.76rem;font-weight:650}
.locales article h3 {margin:8px 0 0}
.guia .locales p {font-size:1rem;line-height:1.45}
.locales article div {margin-top:auto}
.ruta-local,.datos-local {display:inline-flex;align-items:center;min-height:40px;color:#124d60;text-underline-offset:3px;text-decoration:underline;font-weight:620}
.datos-local {font-size:.82rem;margin-left:.5rem}
.mapa-layout {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(235px,1fr);gap:16px;align-items:start}
#mapa-entorno {height:clamp(350px,43vw,485px);border-radius:18px;border:1px solid #b8cbca;background:#e5eeed;isolation:isolate}
.lista-mapa {list-style:none;margin:0;padding:0}
.lista-mapa li {display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #ccdbd6;padding:5px 0}
.lista-mapa button {text-align:left;border:0;background:none;color:#153e4b;padding:6px;cursor:pointer}
.lista-mapa small,.lista-mapa strong {display:block}
.lista-mapa strong {font-size:1rem}
.lista-mapa .ruta-local {font-size:.85rem;white-space:nowrap}
.todos-lugares {cursor:pointer;font:600 13px system-ui;padding:8px 12px;background:white;color:#144555;border:1px solid #aac1bd;border-radius:8px}
.marca-entorno {display:grid;place-items:center;color:white;border-radius:50%;border:2px solid white;box-shadow:0 1px 5px #263c4180;font:bold 20px/1 system-ui}
.marca-entorno.costa {background:#175b70}.marca-entorno.comida {background:#8e4f29}
@media(max-width:760px){.mapa-layout{grid-template-columns:1fr}#mapa-entorno{height:370px}}

/* Portada continua. La navegación y el titular comparten la misma fotografía. */
:is(.pagina-inicio,.pagina-alojamientos) {
  --ancho-inicio: min(1120px, calc(100% - 2 * var(--edge)));
}
:is(.pagina-inicio,.pagina-alojamientos) .cabecera-costa {
  color: white;
  background: linear-gradient(180deg,rgba(8,26,39,.56),transparent 65%),
    linear-gradient(90deg,rgba(8,29,45,.76),rgba(8,29,45,.3) 55%,rgba(8,29,45,.12)),
    #244257 var(--portada,url("/api/alojamientos/fotos/costa.webp")) center 55% / cover no-repeat;
}
:is(.pagina-inicio,.pagina-alojamientos) .cabecera-costa :is(.nav,.hero) {
  width: var(--ancho-inicio);
  margin-inline: auto;
  padding-inline: 0;
  background: transparent;
  color: inherit;
}
.cabecera-costa .hero::before {content:none}
:is(.pagina-inicio,.pagina-alojamientos) .nav .marca small {color:#eff6f8}
:is(.pagina-inicio,.pagina-alojamientos) .nav #enlaces-principales [aria-current="page"] {border-bottom-color:currentColor}
:is(.pagina-inicio,.pagina-alojamientos) .nav :focus-visible {outline:3px solid #fbd08a;outline-offset:1px}
:is(.pagina-inicio,.pagina-alojamientos) .contenido-estadia {width:var(--ancho-inicio)}
.inicio-reservas .ficha .titulo-con-perfil {width:100%}
.inicio-reservas .acciones-ficha {width:100%}
.inicio-reservas .guia-local > span:not(:last-child) {min-width:0}
@media(max-width:700px) {
  :is(.pagina-inicio,.pagina-alojamientos) .nav #enlaces-principales {right:0;color:var(--ines-tinta)}
  .inicio-reservas .atributos {grid-template-columns:repeat(2,minmax(0,1fr))}
  .inicio-reservas .atributos li {min-width:0}
}

@media(max-width:700px){body[data-guest="true"]{--portada:url('/gestion-alojamientos/costa-movil.webp')}}