@font-face{font-family:"Shoulders";font-weight:700;font-display:swap;src:url(/fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Shoulders";font-weight:900;font-display:swap;src:url(/fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url(/fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-display:swap;src:url(/fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url(/fonts/figtree-latin-700-normal.woff2) format("woff2")}
:root{--noche:#0B2233;--noche2:#10304A;--mar:#13708F;--poniente:#2BA3C6;--poniente2:#8FD6EC;--levante:#E9893A;--levante2:#F6C08A;--arena:#F3E9D8;--arena2:#E9DBC2;--espuma:#FBF8F2;--tinta:#10202B;--gris:#5B6B75;--linea:#DCCFB8;--verde:#2FA66A;--ambar:#E5B33A;--rojo:#D9534A;--display:"Shoulders","Arial Narrow",sans-serif;--sans:"Figtree",system-ui,sans-serif}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--espuma);color:var(--tinta);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;line-height:.95;margin:0;letter-spacing:.005em;text-transform:uppercase}
p{margin:0}
.wrap{width:min(1200px,100% - 48px);margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.et{display:inline-block;font:700 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mar)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:999px;font:700 16px/1 var(--sans);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-lev{background:var(--levante);color:#2A1404}
.btn-pon{background:var(--poniente);color:#04212C}
.btn-tinta{background:var(--tinta);color:#fff}
.btn-linea{border-color:currentColor}
:focus-visible{outline:3px solid var(--levante);outline-offset:3px}
.aviso-valma{background:#061624;color:#9DB4C4;font-size:13.5px;text-align:center;padding:7px 16px}
.demo{background:var(--ambar);color:#2A1E02;font:600 14px/1.4 var(--sans);text-align:center;padding:8px 16px}
.demo[hidden]{display:none}

/* Cabecera */
.cab{position:sticky;top:0;z-index:40;background:rgba(11,34,51,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff}
.cab .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.marca svg{width:40px;height:40px}
.marca span{font:900 25px/0.9 var(--display);text-transform:uppercase;letter-spacing:.01em}
.marca .l{color:var(--levante)}.marca .p{color:var(--poniente)}.marca .o{font-size:16px;color:#fff;opacity:.7;margin:0 2px}
.nav{display:flex;gap:24px;align-items:center}
.nav a{font-weight:600;font-size:15.5px;text-decoration:none;opacity:.85}
.nav a:hover,.nav a[aria-current]{opacity:1;color:var(--levante2)}
.menu-btn{display:none;background:none;border:1.5px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:8px 16px;font:600 15px var(--sans)}
.menu-movil{position:fixed;inset:0;z-index:39;background:var(--noche);color:#fff;padding:100px 24px 24px;display:flex;flex-direction:column}
.menu-movil[hidden]{display:none}
.menu-movil a{font:900 40px/1.3 var(--display);text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1);padding:4px 0}

/* Portada */
.cielo{position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 75% 30%,#174566,var(--noche) 70%);color:#fff;padding:54px 0 0}
.cielo canvas.particulas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cielo .wrap{position:relative}
.respuesta{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.pregunta{font:900 clamp(26px,3vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#9DB4C4}
.pregunta b{font-weight:900}
.pregunta .l{color:var(--levante)}.pregunta .p{color:var(--poniente)}
.veredicto{font:900 clamp(96px,15vw,210px)/.82 var(--display);text-transform:uppercase;margin:10px 0 18px;letter-spacing:-.01em;color:var(--c,#fff);transition:color .5s}
.veredicto .letra{display:inline-block}
.js-anim .veredicto .letra{animation:cae .7s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i) * 60ms + .25s)}
@keyframes cae{from{transform:translateY(-60%) rotateX(80deg);opacity:0}}
.sub-ver{font-size:clamp(18px,1.7vw,22px);color:#D6E3EC;max-width:30em}
.sub-ver b{color:#fff}
.lecturas{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.lecturas li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:9px 14px;font-size:14.5px;color:#C9D8E3}
.lecturas b{display:block;font:900 26px/1 var(--display);color:#fff}
.rosa{position:relative;width:min(400px,100%);aspect-ratio:1;margin:0 auto}
.rosa svg{width:100%;height:100%}
.manga{transform-origin:200px 200px;transition:transform 1.2s cubic-bezier(.3,1.3,.5,1)}
.manga .tela{transform-origin:200px 200px;transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
.js-anim .manga .ondea{animation:ondea 1.1s ease-in-out infinite alternate}
@keyframes ondea{to{transform:skewY(3deg) scaleY(.94)}}

/* Reloj: arrastra el sol */
.reloj{position:relative;margin:34px 0 0;padding:0 0 26px}
.reloj .arco{position:relative;height:110px}
.reloj svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.reloj input[type=range]{position:absolute;left:0;right:0;bottom:0;width:100%;height:40px;margin:0;opacity:0;cursor:grab;z-index:2}
.reloj .sol{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFF3C4,#F7B733 60%,#E9893A);box-shadow:0 0 0 8px rgba(247,183,51,.18),0 0 40px rgba(247,183,51,.7);pointer-events:none;transition:background .4s,box-shadow .4s}
.reloj .sol.luna{background:radial-gradient(circle at 60% 40%,#fff,#C9D8E3 70%);box-shadow:0 0 0 8px rgba(201,216,227,.12),0 0 30px rgba(201,216,227,.5)}
.reloj .dias{display:flex;justify-content:space-between;font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#7F9BAE;margin-top:8px}
.reloj .dias span[aria-current]{color:#fff}
.reloj .hora{position:absolute;left:0;top:-36px;transform:translateX(-50%);font:900 22px/1 var(--display);white-space:nowrap;pointer-events:none}
.reloj-ayuda{font-size:14px;color:#9DB4C4;text-align:center;margin-top:4px}
.ola-pie{display:block;width:100%;height:60px;margin-top:20px;color:var(--espuma)}

/* Pestañas de públicos */
.publicos{padding:70px 0 40px}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 26px}
.tabs button{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;border:2px solid var(--linea);background:#fff;font:700 16px/1 var(--sans);cursor:pointer;color:var(--tinta);transition:background .2s,border-color .2s,color .2s}
.tabs button svg{width:22px;height:22px}
.tabs button[aria-selected=true]{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.top{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;list-style:none;margin:0;padding:0}
.top li{position:relative;background:#fff;border:1px solid var(--linea);border-radius:18px;padding:18px 16px 16px;display:flex;flex-direction:column;gap:6px;min-height:190px}
.top li .n{position:absolute;top:12px;right:14px;font:900 34px/1 var(--display);color:var(--arena2)}
.top li a{text-decoration:none}
.top li h3{font-size:28px;line-height:.95;padding-right:26px}
.top li .muni{font-size:13.5px;color:var(--gris)}
.top li .motivo{font-size:14.5px;margin-top:auto;color:#2E3F49}
.top .vacio{grid-column:1/-1;min-height:0;color:var(--gris)}

/* Banderas */
.bandera{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.bandera svg{width:26px;height:30px;overflow:visible}
.bandera .tela{transform-origin:6px 6px}
.js-anim .bandera .tela{animation:flamea var(--vel,1.4s) ease-in-out infinite alternate}
@keyframes flamea{0%{transform:skewY(-6deg) scaleX(.92)}100%{transform:skewY(6deg) scaleX(1.04)}}
.f-verde{color:var(--verde)}.f-amarilla{color:#B98A12}.f-roja{color:var(--rojo)}.f-gris{color:#98A6AE}

/* Mapa de la costa */
.costa{padding:30px 0 80px}
.mapa-caja{position:relative;background:linear-gradient(180deg,#E3F1F6,#F4EFE6);border-radius:24px;overflow:hidden;border:1px solid var(--linea)}
.mapa-caja svg{width:100%;height:auto}
.mapa-caja .tierra{fill:#EFE4CF;stroke:#D9C9AA;stroke-width:1.5}
.mapa-caja .orilla{fill:none;stroke:#B9A57F;stroke-width:2;stroke-linejoin:round}
.mapa-caja .punto{cursor:pointer}
.mapa-caja .punto circle.p{stroke:#fff;stroke-width:2.5;transition:r .2s}
.mapa-caja .punto:hover circle.p,.mapa-caja .punto:focus circle.p{r:11}
.mapa-caja .punto text{font:700 12px var(--sans);fill:var(--tinta);paint-order:stroke;stroke:#F4EFE6;stroke-width:4px;pointer-events:none}
.mapa-caja .flecha-v{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linecap:round;opacity:.75}
.mapa-ley{position:absolute;left:18px;bottom:16px;display:flex;flex-wrap:wrap;gap:14px;background:rgba(255,255,255,.85);border-radius:12px;padding:8px 14px;font-size:13.5px}
.mapa-ley span{display:flex;align-items:center;gap:6px}
.mapa-ley i{width:12px;height:12px;border-radius:50%;display:inline-block}

/* Zonas y tarjetas de playa */
.zona{padding:60px 0 20px}
.zona-cab{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.zona h2{font-size:clamp(44px,5.5vw,76px)}
.zona-cab p{max-width:36em;color:var(--gris)}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tarjeta{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--linea);border-radius:16px;padding:16px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(11,34,51,.45)}
.tarjeta h3{font-size:30px}
.tarjeta .muni{font-size:13.5px;color:var(--gris)}
.tarjeta .datos-t{display:flex;align-items:center;gap:14px;font-size:14.5px;color:#2E3F49}
.tarjeta .flecha{width:30px;height:30px;flex:none;transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
.tarjeta .banderas{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:auto;padding-top:8px;border-top:1px dashed var(--linea)}
.tarjeta .banderas .bandera{font-size:11.5px;letter-spacing:.04em}
.tarjeta .banderas .bandera svg{width:18px;height:22px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:700 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:var(--arena);color:#6B5530}
.chip.surf{background:#DDF1F7;color:#0E5A72}.chip.kite{background:#FDE7D3;color:#8A4A10}

/* Bloques de texto */
.bloque{padding:80px 0}
.oscuro{background:var(--noche);color:#fff}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.bloque h2{font-size:clamp(46px,5.5vw,80px);margin:10px 0 18px}
.bloque p+p{margin-top:12px}
.oscuro p{color:#C9D8E3}
.oscuro .et{color:var(--poniente2)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs div{border-radius:18px;padding:22px}
.vs .lv{background:linear-gradient(160deg,#F0A35E,#C9661C);color:#2A1404}
.vs .pn{background:linear-gradient(160deg,#59BEDD,#13708F);color:#03202B}
.vs h3{font-size:44px;margin-bottom:8px}
.vs p{color:inherit!important;font-size:15.5px}

/* Patrocinio */
.patro{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border:2px dashed var(--levante);border-radius:18px;padding:22px 24px;background:#FFF6EC}
.patro b{font:900 30px/1 var(--display);text-transform:uppercase}
.patro p{color:#6B4A2A;font-size:15.5px}

/* Página de playa */
.ficha-cab{background:var(--noche);color:#fff;padding:40px 0 0;position:relative;overflow:hidden}
.ficha-cab canvas.particulas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ficha-cab .wrap{position:relative}
.migas{font-size:14px;color:#9DB4C4;margin-bottom:16px}
.migas a{color:#C9D8E3;text-decoration:none}
.ficha-cab h1{font-size:clamp(64px,10vw,140px)}
.ficha-cab .muni{font-size:20px;color:#C9D8E3;margin-top:8px}
.ficha-top{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.estado4{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
.estado4 div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px}
.estado4 .bandera{color:#fff;font-size:12px}
.estado4 p{font-size:14px;color:#C9D8E3;margin-top:6px}
.brujula{width:min(360px,100%);margin:0 auto}
.brujula-txt{text-align:center;color:#C9D8E3;font-size:15px;margin-top:6px}
.paneles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.panel{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:20px}
.panel h3{font-size:30px;margin-bottom:10px}
.panel .grande{font:900 54px/1 var(--display)}
.panel .peq{font-size:14px;color:var(--gris)}
.grafico{width:100%;height:auto;overflow:visible}
.grafico text{font:600 11px var(--sans);fill:var(--gris)}
.grafico .ahora{stroke:var(--levante);stroke-width:2;stroke-dasharray:4 4}
.marea-curva{fill:none;stroke:var(--mar);stroke-width:3}
.marea-relleno{fill:url(#gm)}
.js-anim .marea-curva{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease}
.js-anim .vis .marea-curva{stroke-dashoffset:0}
.aemet-dias{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.aemet-dias li{background:var(--arena);border-radius:14px;padding:14px}
.aemet-dias b{font:900 22px/1 var(--display);text-transform:uppercase;display:block;margin-bottom:6px}
.aemet-dias span{display:block;font-size:14px}
.texto-playa{max-width:44em}
.texto-playa h2{font-size:clamp(40px,4.5vw,60px);margin-bottom:14px}
.texto-playa p{margin-bottom:12px}
.cerca{display:flex;flex-wrap:wrap;gap:10px}
.cerca a{padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--linea);text-decoration:none;font-weight:600}
.fuentes{font-size:13.5px;color:var(--gris)}

/* Pie */
.pie{background:#061624;color:#9DB4C4;padding:50px 0 40px;font-size:15px}
.pie .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}
.pie h4{font-size:24px;color:#fff;margin-bottom:10px}
.pie a{color:#C9D8E3;text-decoration:none}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pie .valma{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:#fff;font-weight:700}
.pie .legal{grid-column:1/-1;border-top:1px solid #16334A;padding-top:18px;font-size:13px}

/* Apariciones */
.js-anim .rev{opacity:0;transform:translateY(26px);transition:opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js-anim .rev.vis{opacity:1;transform:none}

@media (max-width:1080px){
 .nav a:not(.btn){display:none}
 .top{grid-template-columns:repeat(2,1fr)}
 .paneles{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
 .wrap{width:calc(100% - 32px)}
 .nav{display:none}.menu-btn{display:block}
 .cab .wrap{height:62px}
 .marca span{font-size:21px}.marca svg{width:34px;height:34px}
 .cielo{padding-top:30px}
 .respuesta{grid-template-columns:1fr;gap:6px}
 .rosa{width:min(250px,70%);order:-1}
 .veredicto{margin:6px 0 12px}
 .lecturas li{padding:8px 11px}
 .lecturas b{font-size:22px}
 .top{grid-template-columns:1fr}
 .top li{min-height:0}
 .dos,.ficha-top,.vs{grid-template-columns:1fr;gap:28px}
 .paneles,.aemet-dias{grid-template-columns:1fr}
 .estado4{grid-template-columns:1fr 1fr}
 .pie .wrap{grid-template-columns:1fr}
 .mapa-caja{border-radius:16px}
 .mapa-caja .punto text{display:none}
 .tabs button{padding:10px 14px;font-size:15px}
 .bloque{padding:60px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}