/* Serenity — tema. Solo tokens y markup propio: el motor no se toca. */
:root{
--sc-canvas:#04080B; --sc-surface:#0B141A;
--sc-ink:#F4F0E8; --sc-ink-soft:#93A4AE;
--sc-accent:#7FC4DC; --sc-accent-ink:#04080B;
--sc-font-display:"Instrument Serif", Georgia, "Times New Roman", serif;
--sc-font-text:"Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;
--paso:clamp(.9rem,2.4vw,1.4rem);
}
body{background:var(--sc-canvas);color:var(--sc-ink);font-family:var(--sc-font-text);
font-weight:300;-webkit-font-smoothing:antialiased}
/* ── el mapa: la nav de un mundo continuo ─────────────────────────── */
.rail{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;
gap:1.2rem;padding:.9rem clamp(1rem,4vw,2.4rem);
background:linear-gradient(180deg,rgba(4,8,11,.72),rgba(4,8,11,0))}
.rail__mark{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:block}
.rail__mark img{display:block;border-radius:50%;width:46px;height:46px}
.rail__list{display:flex;gap:.1rem;list-style:none;margin:0;padding:0;flex:1;
overflow-x:auto;scrollbar-width:none}
.rail__list::-webkit-scrollbar{display:none}
.rail__list button{appearance:none;background:none;border:0;cursor:pointer;
font:inherit;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--sc-ink-soft);padding:.5rem .7rem;white-space:nowrap;
transition:color .25s ease;position:relative}
.rail__list button:hover{color:var(--sc-ink)}
.rail__list li[aria-current="true"] button{color:var(--sc-ink)}
.rail__list li[aria-current="true"] button::after{content:"";position:absolute;
left:.7rem;right:.7rem;bottom:.26rem;height:1px;background:var(--sc-accent)}
.rail__cta{appearance:none;font-family:inherit;cursor:pointer;background:none;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--sc-accent);text-decoration:none;border:1px solid rgba(127,196,220,.42);
padding:.62rem 1.25rem;border-radius:999px;white-space:nowrap;transition:.25s ease}
.rail__cta:hover{background:var(--sc-accent);color:var(--sc-accent-ink)}
/* ── tipografía ───────────────────────────────────────────────────── */
.sc-copy{max-width:min(38rem,88vw)}
.kicker{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
color:var(--sc-accent);margin:0 0 .7rem}
h1{font-family:var(--sc-font-display);font-weight:400;
font-size:clamp(3.6rem,15vw,8.5rem);line-height:.88;letter-spacing:-.02em;margin:0}
h2{font-family:var(--sc-font-display);font-weight:400;
font-size:clamp(2rem,6.6vw,3.4rem);line-height:1.02;letter-spacing:-.015em;
margin:0 0 var(--paso)}
.sc-copy p.lede{font-size:clamp(.94rem,2.9vw,1.08rem);line-height:1.55;
color:var(--sc-ink-soft);margin:2.4rem 0 0;max-width:42ch}
.lede strong{color:var(--sc-ink);font-weight:400;display:block;margin-top:.5rem}
.sc-copy p{font-size:clamp(.95rem,2.9vw,1.06rem);line-height:1.62;
color:var(--sc-ink-soft);margin:0 0 .8rem;max-width:44ch}
.ficha{font-size:.82rem;letter-spacing:.02em;color:#7C8B95;border-top:1px solid rgba(244,240,232,.14);
padding-top:.8rem;margin-top:1.1rem}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.lista li{font-size:clamp(.95rem,3vw,1.06rem);color:var(--sc-ink);
padding-left:1.1rem;position:relative;line-height:1.4}
.lista li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
border-radius:50%;background:var(--sc-accent)}
.lista span{color:var(--sc-ink-soft);font-size:.9em}
.specs{margin:0;display:grid;gap:.1rem}
.specs > div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;
padding:.72rem 0;border-bottom:1px solid rgba(244,240,232,.11)}
.specs dt{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#7C8B95;margin:0}
.specs dd{margin:0;font-size:clamp(.95rem,3vw,1.06rem);color:var(--sc-ink)}
.specs mark{background:rgba(255,176,0,.16);color:#FFD180;padding:0 .3em;border-radius:3px}
/* ── la derrota: la jugada propia ─────────────────────────────────── */
.carta{width:100%;height:auto;margin:.4rem 0 1.1rem;overflow:visible}
.carta__costa{fill:none;stroke:rgba(244,240,232,.16);stroke-width:1;stroke-dasharray:3 5}
.carta__rumbo{fill:none;stroke:var(--sc-accent);stroke-width:2;stroke-linecap:round;
stroke-linejoin:round;filter:none;
stroke-dasharray:var(--largo,600);stroke-dashoffset:var(--corte,0);
transition:stroke-dashoffset .75s cubic-bezier(.22,1,.36,1)}
.hito{fill:var(--sc-canvas);stroke:rgba(244,240,232,.3);stroke-width:1.4;
transition:stroke .3s ease,fill .3s ease}
.hito.on{fill:var(--sc-accent);stroke:var(--sc-accent)}
.hito-t{font-size:7.4px;fill:#7C8B95;letter-spacing:.04em;transition:fill .3s ease}
.hito-t.on{fill:var(--sc-ink)}
.rutas{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.42rem}
.rutas button{appearance:none;cursor:pointer;font:inherit;font-size:.8rem;
background:rgba(244,240,232,.05);border:1px solid rgba(244,240,232,.16);
color:var(--sc-ink-soft);padding:.5rem .8rem;border-radius:999px;
transition:.25s ease;text-align:left;line-height:1.25}
.rutas button:hover{border-color:rgba(127,196,220,.5);color:var(--sc-ink)}
.rutas li.on button{background:var(--sc-accent);border-color:var(--sc-accent);
color:var(--sc-accent-ink);font-weight:500}
.precio{font-family:var(--sc-font-display);font-size:clamp(2.1rem,7vw,3rem);
color:var(--sc-ink)!important;margin:0;line-height:1;letter-spacing:-.01em}
.precio__nota{display:block;font-family:var(--sc-font-text);font-size:.78rem;
letter-spacing:.14em;text-transform:uppercase;color:#7C8B95;margin-top:.55rem}
/* ── el cierre ────────────────────────────────────────────────────── */
.wa{display:inline-flex;align-items:center;gap:.6rem;margin:.5rem 0 0;
background:var(--sc-accent);color:var(--sc-accent-ink);text-decoration:none;
font-size:clamp(.95rem,3.2vw,1.06rem);font-weight:500;letter-spacing:.01em;
padding:1.05rem 1.9rem;border-radius:999px;min-height:48px;
transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;
box-shadow:0 10px 30px -12px rgba(127,196,220,.55)}
.wa:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(127,196,220,.7)}
.wa::before{content:"";width:19px;height:19px;background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){
.carta__rumbo,.wa{transition:none}
}
@media (max-width:520px){
.specs > div{grid-template-columns:1fr;gap:.15rem}
.rail{gap:.7rem;padding:.7rem 1rem}
}
/* ── el velo ───────────────────────────────────────────────────────
🔴 NO es un velo de pantalla completa: el centro queda limpio para que
el yate se vea. Oscurece arriba y abajo, que es donde vive la copia.
La metraje es cielo cubierto y casco blanco — brillante casi siempre —
y sin esto cuatro bloques fallaban el contraste, uno a 1:1. */
.sc-world__scrim{
background:
radial-gradient(130% 78% at 2% 6%,
rgba(4,8,11,.92) 0%, rgba(4,8,11,.72) 26%,
rgba(4,8,11,.34) 48%, rgba(4,8,11,0) 72%),
linear-gradient(180deg,
rgba(4,8,11,.62) 0%,
rgba(4,8,11,.26) 16%,
rgba(4,8,11,.04) 40%,
rgba(4,8,11,.04) 60%,
rgba(4,8,11,.30) 84%,
rgba(4,8,11,.66) 100%) !important;
}
/* la carta de navegación necesita su propio suelo: va sobre cubierta blanca */
.derrota .carta,.derrota .rutas,.derrota .precio{position:relative;z-index:1}
/* 🔴 Panel sólido, no translúcido. La cubierta blanca del yate es lo más
brillante del metraje y un velo degradado no alcanzaba: tres bloques
fallaban el contraste. El panel es la superficie, no un filtro. */
.panel{background:rgba(6,11,15,.93);padding:1.4rem 1.5rem 1.6rem;
border-radius:14px;border:1px solid rgba(244,240,232,.13);
box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.panel .ficha{border-top-color:rgba(244,240,232,.16)}
/* 🔴 La portada no lleva panel: una caja detrás del título mataría la apertura.
Se protege con sombra CON desplazamiento y difuminado — no un halo de
desplazamiento cero, que las reglas de gusto prohíben. */
[data-sc-window="hero"] h1,
[data-sc-window="hero"] .lede,
[data-sc-window="hero"] .kicker{
text-shadow:0 2px 30px rgba(4,8,11,.9), 0 1px 4px rgba(4,8,11,.75);
}
[data-sc-window="hero"] .lede{color:#D8E2E8}
/* La portada lleva su propio fondo, no una caja: una viñeta que se disuelve
hacia fuera. Es lo único que mueve la medición, porque el medidor lee la
luminancia compuesta justo bajo cada letra. */
[data-sc-window="hero"]{
background:radial-gradient(100% 52% at 30% 50%,
rgba(4,8,11,.96) 0%, rgba(4,8,11,.9) 22%,
rgba(4,8,11,.6) 40%, rgba(4,8,11,.18) 55%, rgba(4,8,11,0) 68%);
padding:6rem 6rem 6.5rem 2rem;
margin:-4.5rem 0 -4rem -2rem;
}
/* El «Santa Marta» era azul claro sobre cielo claro: 1,8:1. Como etiqueta
sólida deja de depender de lo que haya detrás. */
[data-sc-window="hero"] .kicker{
display:inline-block;background:rgba(4,8,11,.92);
color:#BFE4F0;padding:.42rem .8rem;border-radius:999px;
border:1px solid rgba(127,196,220,.34);text-shadow:none;margin-bottom:1rem}