:root{
  --night:#070d1a; --deep:#0c1630; --ink:#f3efe7; --soft:rgba(243,239,231,.62); --faint:rgba(243,239,231,.14);
  --gold:#f2c48d; --coral:#ff8a6b; --sea:#16264a; --land:#0f1a33; --live:#ff5a4f;
  --serif:"Fraunces","Lora",Georgia,serif; --sans:"Manrope","Poppins",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--night);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* header */
header{position:absolute;inset:0 0 auto 0;z-index:10}
.nav{display:flex;justify-content:space-between;align-items:center;height:84px}
.logo{font-family:var(--serif);font-size:22px;font-weight:300;letter-spacing:.02em}
.logo b{font-weight:400;color:var(--gold)}
.menu{display:flex;gap:34px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.menu a:hover{color:var(--ink)}
@media(max-width:820px){.menu{display:none}}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 60px;
  background:
    radial-gradient(1200px 520px at 78% 8%, rgba(255,138,107,.22), transparent 60%),
    radial-gradient(900px 600px at 15% 0%, rgba(242,196,141,.12), transparent 60%),
    linear-gradient(180deg,#0a1328 0%, #070d1a 70%)}
.hero>.wrap{width:100%}
.kicker{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.02em;margin:18px 0 18px}
h1 em{font-style:italic;color:var(--gold)}
.intro{max-width:520px;color:var(--soft);font-size:17px;line-height:1.7}
.livecount{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(255,90,79,.7);animation:p 2.2s infinite}
@keyframes p{70%{box-shadow:0 0 0 12px rgba(255,90,79,0)}100%{box-shadow:0 0 0 0 rgba(255,90,79,0)}}

/* map */
.mapbox{position:relative;margin-top:40px}
.map{width:100%;height:auto;display:block;overflow:visible}
.land{fill:url(#landG)}
.sea{fill:url(#seaG)}
.sand{fill:none;stroke:#e6c49a;stroke-width:40;opacity:.30}
.sand2{fill:none;stroke:#e6c49a;stroke-width:10;opacity:.22}
.shore{fill:none;stroke:#f0d3ab;stroke-width:1.4;stroke-linecap:round;opacity:.9}
.town circle{fill:rgba(243,239,231,.55)}
.town text{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;fill:rgba(243,239,231,.5)}
.town.big text{font-size:14px;fill:rgba(243,239,231,.78)}
.airport text{font-size:11px;letter-spacing:.12em;fill:rgba(243,239,231,.32)}
.region{font-family:var(--serif);font-style:italic;font-size:26px;fill:rgba(243,239,231,.10);letter-spacing:.3em}
.flag{width:340px;height:7px;margin:4px 0 26px;background:linear-gradient(180deg,#c60b1e 0 25%,#ffc400 25% 75%,#c60b1e 75%);-webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.6) 35%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.6) 35%,transparent 100%);opacity:.75;border-radius:1px}
h1 .w{display:inline-block;opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){h1 .w{animation:none;opacity:1;transform:none}.cam .halo,.pulse{animation:none}}
.sunset{margin-top:110px;display:grid;grid-template-columns:1fr 1.3fr;gap:44px;align-items:center}
@media(max-width:900px){.sunset{grid-template-columns:1fr}}
.tl{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--faint)}
.tl img{width:100%;height:100%;object-fit:cover;filter:saturate(1.2) sepia(.25) hue-rotate(-10deg)}
.tl .play{position:absolute;left:20px;bottom:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;background:rgba(7,13,26,.6);backdrop-filter:blur(8px);padding:8px 14px;border-radius:999px}

.fade{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.contour{fill:none;stroke:rgba(243,239,231,.06);stroke-width:1}
.seaLabel{font-family:var(--serif);font-style:italic;font-size:22px;fill:rgba(243,239,231,.22);letter-spacing:.06em}
.cam{cursor:pointer}
.cam .halo{fill:rgba(255,90,79,.18);transform-box:fill-box;transform-origin:center;animation:h 2.4s ease-out infinite}
@keyframes h{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.2);opacity:0}}
.cam .core{fill:var(--live);stroke:#fff;stroke-width:2}
.cam.soon .core{fill:var(--night);stroke:rgba(242,196,141,.6);stroke-width:1.5}
.cam.soon{cursor:default}
.cam .lbl{font-size:14px;font-weight:500;fill:var(--ink);letter-spacing:.04em}
.cam.soon .lbl{fill:rgba(243,239,231,.45);font-weight:400}
.cam:hover .core{transform-box:fill-box;transform-origin:center;transform:scale(1.25)}

/* hover card */
.peek{position:absolute;z-index:5;width:260px;border-radius:16px;overflow:hidden;background:rgba(12,22,48,.72);backdrop-filter:blur(14px);border:1px solid var(--faint);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transform:translate(-50%,calc(-100% - 26px));pointer-events:none;opacity:0;transition:opacity .25s}
.peek.on{opacity:1}
.peek img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.peek .b{padding:12px 14px}
.peek .t{font-family:var(--serif);font-size:19px}
.peek .m{font-size:12px;color:var(--soft);margin-top:2px;display:flex;gap:12px}
.peek .tag{position:absolute;top:10px;left:10px;font-size:10px;font-weight:600;letter-spacing:.14em;background:var(--live);padding:4px 8px;border-radius:4px}

/* cameras list */
section{padding:110px 0 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px;flex-wrap:wrap}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.01em}
h2 em{font-style:italic;color:var(--gold)}
.head p{color:var(--soft);max-width:400px;line-height:1.7}
.cams{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:18px}
@media(max-width:900px){.cams{grid-template-columns:1fr}}
.cc{position:relative;border-radius:22px;overflow:hidden;min-height:340px;background:var(--deep);border:1px solid var(--faint);display:flex;align-items:flex-end;transition:transform .35s}
.cc:hover{transform:translateY(-4px)}
.cc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.cc:hover img{transform:scale(1.04)}
.cc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(7,13,26,.92))}
.cc .in{position:relative;z-index:1;padding:26px;width:100%}
.cc .tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:rgba(255,90,79,.9);padding:5px 10px;border-radius:999px}
.cc h3{font-family:var(--serif);font-weight:300;font-size:32px;margin:14px 0 6px}
.cc .meta{display:flex;gap:18px;font-size:13px;color:var(--soft)}
.cc .meta b{color:var(--ink);font-weight:500}
.cc.soon{background:linear-gradient(160deg,#0f1b38,#0a1226)}
.cc.soon .tag{background:transparent;border:1px solid rgba(242,196,141,.45);color:var(--gold)}
.cc.soon h3{color:rgba(243,239,231,.75)}

/* stay strip */
.stay{margin-top:110px;border-radius:28px;padding:56px;background:
  radial-gradient(600px 300px at 90% 0%, rgba(255,138,107,.25), transparent 70%),
  linear-gradient(135deg,#13224a,#0b1530);border:1px solid var(--faint);display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
@media(max-width:900px){.stay{grid-template-columns:1fr;padding:32px}}
.stay p{color:var(--soft);line-height:1.7;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:16px 26px;border-radius:999px;background:var(--gold);color:#1b130a;transition:background .2s}
.btn:hover{background:#f7d6ae}
.btn.line{background:transparent;color:var(--ink);border:1px solid var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:14px;padding:12px 18px;border-radius:999px;border:1px solid var(--faint);color:var(--soft);transition:all .2s}
.chip:hover{color:var(--ink);border-color:rgba(242,196,141,.6)}

footer{margin-top:120px;padding:40px 0 50px;border-top:1px solid var(--faint);font-size:13px;color:var(--soft)}
.ft{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
.ft nav{display:flex;gap:22px;flex-wrap:wrap}
/* Spanish-flag ambient glow (variant A) for the live camera card */
.cams{position:relative;z-index:0}
.cc.glow{overflow:visible}
.cc.glow img{border-radius:22px}
.cc.glow::after{border-radius:22px}
.cc.glow::before{content:"";position:absolute;inset:14% -2% -5% -2%;z-index:-1;border-radius:40px;filter:blur(55px);opacity:.55;background:linear-gradient(180deg,#c60b1e 0 25%,#ffc400 25% 75%,#c60b1e 75%)}

/* v5: language switch with flags */
.navr{display:flex;align-items:center;gap:30px}
.lang{display:flex;gap:2px;padding:3px;border:1px solid var(--faint);border-radius:99px;background:rgba(7,13,26,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lang a{display:flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border-radius:99px;font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--soft);transition:background .2s,color .2s}
.lang a:hover{color:var(--ink)}
.lang a.on{background:rgba(243,239,231,.12);color:var(--ink)}
.lang svg{width:20px;height:20px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
/* v6: minimal map – dark land, blue sea, wide beach */
.sea{fill:url(#seaG)}
.sand{fill:none;stroke:#e6c49a;stroke-width:84;opacity:.30}
.sand2{fill:none;stroke:#e6c49a;stroke-width:18;opacity:.20}
.town.inland circle{fill:#0a0d15;stroke:rgba(243,239,231,.75);stroke-width:1.4}
.ptr text{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;fill:rgba(243,239,231,.6)}
.ptr path{fill:none;stroke:rgba(242,196,141,.75);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.mapbox .fade{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
/* v6: Spanish flag as a hairline accent before the kicker (red-gold-red 1:2:1) */
.kicker{display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:30px;height:10px;border-radius:2px;flex:none;background:linear-gradient(180deg,#c60b1e 0 25%,#ffc400 25% 75%,#c60b1e 75% 100%);opacity:.85}