:root{
  --tinta:#0b0b0b;
  --papel:#ffffff;
  --cicer:#00b4b0;
  --cicer-hondo:#00716e;
  --espuma:#e9f7f6;
  --gris:#555555;
  --linea:#0b0b0b;
  --ancho:1280px;
  --lado:clamp(16px,4vw,48px);
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--cicer);outline-offset:3px}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}
.salto{position:absolute;left:-9999px;top:0;background:var(--cicer);color:var(--tinta);padding:12px 16px;z-index:99}
.salto:focus{left:16px;top:16px}

.barra{position:sticky;top:0;z-index:50;background:var(--tinta);color:var(--papel)}
.barra .envoltura{display:flex;align-items:center;gap:24px;min-height:64px}
.marca{display:flex;flex-direction:column;justify-content:center;min-height:48px;text-decoration:none;line-height:1;margin-right:auto}
.marca b{font-weight:900;font-size:22px;letter-spacing:-.03em}
.marca span{font-size:14px;color:#bdbdbd;margin-top:4px;letter-spacing:.01em}
.menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.menu a{display:flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;font-weight:600;font-size:16px;color:#e6e6e6}
.menu a:hover{color:var(--cicer)}
.menu a[aria-current="page"]{color:var(--papel);box-shadow:inset 0 -3px 0 var(--cicer)}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font:700 16px/1 var(--sans);text-decoration:none;border:2px solid var(--tinta);background:var(--cicer);color:var(--tinta);cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.boton:hover{background:var(--tinta);color:var(--papel)}
.boton:active{transform:translateY(1px)}
.boton.hueco{background:transparent}
.boton.hueco:hover{background:var(--tinta);color:var(--papel)}
.barra .boton{min-height:44px;border-color:var(--cicer)}
.barra .boton:hover{background:var(--papel);border-color:var(--papel)}
.abrir-menu{display:none;background:none;border:0;color:var(--papel);min-width:44px;min-height:44px;font:700 16px var(--sans);cursor:pointer}

.eyebrow{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--cicer-hondo)}
.oscuro .eyebrow{color:var(--cicer)}
.titular{font-weight:850;font-size:clamp(2.6rem,7.4vw,6.6rem);line-height:.92;letter-spacing:-.04em}
.titular em{font-style:normal;color:var(--cicer-hondo)}
.h2{font-weight:800;font-size:clamp(2rem,4.6vw,3.8rem);line-height:.98;letter-spacing:-.035em}
.h3{font-weight:800;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.1;letter-spacing:-.02em}
.entradilla{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:#2a2a2a;max-width:36em}
.oscuro .entradilla{color:#d6d6d6}
.bloque{padding:clamp(64px,9vw,128px) 0}
.oscuro{background:var(--tinta);color:var(--papel)}
.espuma{background:var(--espuma)}

.hero{padding:clamp(40px,6vw,88px) 0 0;position:relative}
.hero-rejilla{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start}
.hero-der{display:flex;flex-direction:column;gap:clamp(20px,3vw,36px)}
.hero .titular{margin:18px 0 26px}
.hero .entradilla{margin-bottom:32px}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.dato-google{margin-top:28px;font-size:16px;color:var(--gris)}
.dato-google strong{color:var(--tinta);font-weight:800}
.hero-fotos{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px;align-items:end}
.hero-fotos figure{margin:0}
.hero-fotos .alta img{aspect-ratio:4/5.6;object-fit:cover;width:100%}
.hero-fotos .baja img{aspect-ratio:4/5;object-fit:cover;width:100%}
.pie-foto{font-size:14px;color:var(--gris);margin-top:8px}
.anio{font-weight:900;font-size:clamp(5.5rem,11vw,10.5rem);line-height:.8;letter-spacing:-.06em;color:var(--tinta);text-align:right}
.anio span{display:block;text-align:right;font-size:15px;letter-spacing:.01em;font-weight:700;line-height:1.4;color:var(--gris);margin-bottom:10px}
.ola{display:block;width:100%;height:90px;margin-top:clamp(24px,4vw,48px)}
.ola path{fill:none;stroke:var(--cicer);stroke-width:3}
.ola .ola-2{stroke:var(--tinta);stroke-width:2;opacity:.9}

.bahia-rejilla{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.bahia-texto .h2{margin:14px 0 22px}
.puntos{list-style:none;margin:28px 0 0;padding:0;border-top:2px solid var(--papel)}
.puntos li{border-bottom:1px solid #3a3a3a}
.puntos button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px 1fr;gap:12px;width:100%;padding:14px 0;min-height:52px;cursor:pointer;font-weight:700;font-size:18px}
.puntos button:focus-visible{outline:3px solid var(--cicer);outline-offset:2px}
.puntos button .marcador{width:14px;height:14px;border:2px solid var(--cicer);margin-top:6px;transition:background .2s ease}
.puntos button[aria-pressed="true"] .marcador{background:var(--cicer)}
.puntos button[aria-pressed="true"]{color:var(--cicer)}
.puntos p{font-size:16px;font-weight:400;color:#cfcfcf;grid-column:2;line-height:1.5}
.puntos button[aria-pressed="false"] p{display:none}
.mapa{width:100%;height:auto;display:block}
.mapa .tierra{fill:#1b1b1b}
.mapa .costa{fill:none;stroke:#f2f2f2;stroke-width:2.5}
.mapa .arena{fill:none;stroke:#cfc3a8;stroke-width:9;stroke-linecap:round;opacity:.55}
.mapa .barra-arrecife{fill:none;stroke:#8a8a8a;stroke-width:5;stroke-dasharray:2 9;stroke-linecap:round}
.mapa .mar-ola{fill:none;stroke:var(--cicer);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:14 12;animation:entra 3.2s linear infinite}
.mapa .mar-ola.frenada{stroke:#6f6f6f;animation-duration:5s}
.mapa .rotulo{fill:#e6e6e6;font:600 15px var(--sans)}
.mapa .rotulo.peq{fill:#9a9a9a;font-size:13px;font-weight:500}
.mapa .punto{fill:var(--tinta);stroke:var(--cicer);stroke-width:3;transition:r .2s ease}
.mapa .punto.activo{fill:var(--cicer)}
.mapa .aro{fill:none;stroke:var(--cicer);stroke-width:2;opacity:0}
.mapa .aro.activo{animation:aro 1.8s ease-out infinite}
@keyframes entra{to{stroke-dashoffset:-52}}
@keyframes aro{0%{opacity:.9;r:8}100%{opacity:0;r:30}}

.filas{border-top:2px solid var(--linea)}
.fila{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:clamp(20px,3vw,40px);padding:clamp(24px,3vw,36px) 0;border-bottom:2px solid var(--linea);align-items:start;text-decoration:none}
.fila figure{margin:0;overflow:hidden}
.fila img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fila:hover img{transform:scale(1.04)}
.fila .h3{margin-bottom:10px}
.fila p{color:#333}
.fila .precio{text-align:right}
.fila .precio b{display:block;font-weight:900;font-size:clamp(2.2rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1}
.fila .precio span{font-size:15px;color:var(--gris)}
.fila .ir{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:700;border-bottom:2px solid var(--cicer)}

.resenas-cab{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.nota{font-weight:900;font-size:clamp(4rem,9vw,7.5rem);line-height:.8;letter-spacing:-.05em}
.nota small{display:block;font-size:15px;font-weight:600;letter-spacing:0;color:var(--gris);margin-top:12px}
.citas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.cita{border-top:2px solid var(--linea);padding-top:20px}
.cita blockquote{margin:0 0 16px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,23px);line-height:1.4}
.cita cite{font-style:normal;font-weight:700;font-size:15px}
.cita cite span{display:block;font-weight:400;color:var(--gris)}
.repiten{margin-top:clamp(36px,4vw,56px);font-size:18px;max-width:44em}
.repiten mark{background:var(--cicer);color:var(--tinta);padding:0 4px}

.linea-tiempo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--papel)}
.hito{padding:26px 24px 8px 0;border-right:1px solid #333}
.hito:last-child{border-right:0}
.hito b{display:block;font-weight:900;font-size:clamp(2.4rem,4.6vw,4rem);letter-spacing:-.05em;line-height:1;color:var(--cicer);margin-bottom:12px}
.hito p{color:#d0d0d0;font-size:16px;padding-right:12px}

.cierre{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start}
.cierre .h2{margin-bottom:24px}
.estado{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;margin-bottom:18px}
.estado i{width:12px;height:12px;background:#777;display:inline-block}
.estado.abierto i{background:var(--cicer);animation:late 1.6s ease-in-out infinite}
@keyframes late{50%{opacity:.35}}
.datos{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)}
.datos li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #cfcfcf;font-size:17px}
.datos li span:first-child{color:var(--gris)}
.datos li span:last-child,.datos li a{font-weight:700;text-align:right}
.datos a{text-decoration:none;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.datos a:hover{color:var(--cicer-hondo)}

.cabecera-pag{padding:clamp(48px,7vw,104px) 0 clamp(40px,5vw,72px);border-bottom:2px solid var(--linea)}
.cabecera-pag .titular{margin:16px 0 22px;max-width:14ch}
.cabecera-pag.con-foto .envoltura{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:end}
.cabecera-pag.con-foto img{aspect-ratio:4/3;object-fit:cover;width:100%}

.elige{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:start}
.pregunta{border:0;margin:0 0 26px;padding:0}
.pregunta legend{font-weight:800;font-size:19px;margin-bottom:12px;padding:0}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opciones label{position:relative}
.opciones input{position:absolute;opacity:0;width:1px;height:1px}
.opciones span{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:2px solid var(--tinta);font-weight:600;cursor:pointer;background:var(--papel);transition:background .15s ease}
.opciones input:checked+span{background:var(--tinta);color:var(--papel)}
.opciones input:focus-visible+span{outline:3px solid var(--cicer);outline-offset:2px}
.opciones span:hover{background:var(--espuma)}
.opciones input:checked+span:hover{background:var(--tinta)}
.resultado{background:var(--papel);border:2px solid var(--tinta);padding:clamp(24px,3vw,36px);position:sticky;top:88px;box-shadow:8px 8px 0 var(--cicer)}
.resultado .eyebrow{color:var(--cicer-hondo)}
.resultado .h3{margin:10px 0 12px}
.resultado p{color:#333;margin-bottom:10px}
.resultado .cifra{font-weight:900;font-size:clamp(3rem,6vw,4.6rem);letter-spacing:-.05em;line-height:1;margin:18px 0 22px;color:var(--tinta)}
.resultado .cifra small{font-size:16px;font-weight:600;letter-spacing:0;color:var(--gris);margin-left:6px}
.resultado .boton{width:100%}

.tarifas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(24px,4vw,64px)}
.tarifa h3{margin-bottom:6px}
.tarifa .nota-tarifa{color:var(--gris);font-size:16px;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:17px}
th,td{text-align:left;padding:13px 0;border-bottom:1px solid #cfcfcf;vertical-align:top}
thead th{border-bottom:2px solid var(--linea);font-size:15px;color:var(--gris);font-weight:700}
td:last-child,th:last-child,.cols-3 td:nth-child(2),.cols-3 th:nth-child(2){text-align:right;font-weight:800;white-space:nowrap;padding-left:12px}
tbody tr:last-child td{border-bottom:2px solid var(--linea)}

.clase-dia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.paso{border-top:2px solid var(--linea);padding-top:18px}
.paso b{display:block;font-weight:900;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.04em;margin-bottom:6px}
.paso p{color:#333}

.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.dos img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dos .h2{margin:12px 0 20px}
.dos p+p{margin-top:14px}
.lista{list-style:none;margin:22px 0 0;padding:0;border-top:2px solid currentColor}
.lista li{padding:12px 0;border-bottom:1px solid rgba(128,128,128,.45)}
.lista a{display:inline-flex;align-items:center;min-height:44px}

.equipo-foto img{width:100%;aspect-ratio:16/9;object-fit:cover}

.form{display:grid;gap:18px}
.campo label{display:block;font-weight:700;margin-bottom:8px}
.campo input,.campo select,.campo textarea{width:100%;min-height:52px;padding:12px 14px;border:2px solid var(--tinta);border-radius:0;background:var(--papel);font:16px var(--sans);color:var(--tinta)}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:3px solid var(--cicer);outline-offset:1px}
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.aviso-form{font-size:15px;color:var(--gris)}
.mapa-google{width:100%;aspect-ratio:4/3;border:2px solid var(--tinta);display:block}

.pie{background:var(--tinta);color:#cfcfcf;padding:56px 0 110px;font-size:16px}
.pie-rejilla{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:32px}
.pie .marca b{color:var(--papel)}
.pie h2{font-size:15px;color:var(--papel);font-weight:800;margin-bottom:12px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.pie a:hover{color:var(--cicer)}
.firma{margin-top:40px;padding-top:20px;border-top:1px solid #333;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:15px;color:#9a9a9a}
.firma a{text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.firma{align-items:center}

.barra-movil{display:none}

.js .revela{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .revela.visto{opacity:1;transform:none}

@media (max-width:980px){
  .hero-rejilla,.bahia-rejilla,.cierre,.elige,.cabecera-pag.con-foto .envoltura,.dos{grid-template-columns:minmax(0,1fr)}
  .fila{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fila .precio{grid-column:2;text-align:left}
  .citas,.clase-dia{grid-template-columns:minmax(0,1fr)}
  .linea-tiempo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hito:nth-child(2){border-right:0}
  .tarifas{grid-template-columns:minmax(0,1fr)}
  .pie-rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .resultado{position:static}
}
@media (max-width:820px){
  .menu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--tinta);flex-direction:column;padding:8px var(--lado) 20px;border-bottom:2px solid var(--cicer)}
  .menu.abierto{display:flex}
  .menu a{min-height:52px;font-size:19px;padding:0}
  .abrir-menu{display:inline-flex;align-items:center;justify-content:center}
  .barra .boton{display:none}
  .barra-movil{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--tinta);border-top:2px solid var(--cicer)}
  .barra-movil a{display:flex;align-items:center;justify-content:center;min-height:58px;font-weight:800;font-size:17px;text-decoration:none;color:var(--papel)}
  .barra-movil a:first-child{background:var(--cicer);color:var(--tinta)}
}
@media (max-width:600px){
  body{font-size:16px}
  .fila{grid-template-columns:minmax(0,1fr)}
  .fila .precio{grid-column:auto}
  .hero-fotos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .linea-tiempo{grid-template-columns:minmax(0,1fr)}
  .hito{border-right:0;border-bottom:1px solid #333;padding-right:0}
  .dos-campos,.pie-rejilla{grid-template-columns:minmax(0,1fr)}
  .datos li{flex-direction:column;gap:2px}
  .datos li span:last-child,.datos li a{text-align:left}
  .mapa .rotulo{font-size:27px}
  .mapa .rotulo.peq{font-size:23px}
  .opciones span{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .revela{opacity:1;transform:none}
}
