/* =====================================================================
   PORTADA NUEVA (02/10/2026). Solo la carga la portada (es y en).
   Estructura B elegida por Antonio: slider promocional, barra de
   categorías, 2 promociones, pantalán, el contenido de siempre, ruta de
   puertos y final con agua viva. Todo con prefijo pn- para no chocar
   con ninguna regla de estilo.css.
   ===================================================================== */
.pn-tiempo{display:none;position:absolute;z-index:5;top:18px;right:max(26px,calc((100% - var(--env)) / 2 + 26px));align-items:center;gap:7px;background:rgba(6,19,24,.78);padding:6px 10px;font-family:var(--mono);font-size:11.5px;color:var(--apagado);white-space:nowrap;letter-spacing:.02em}
.pn-tiempo.ok{display:flex}
.pn-tiempo i{width:6px;height:6px;border-radius:50%;background:var(--turquesa);opacity:.8}
.pn-tiempo b{font-weight:400;color:var(--espuma)}
@media(max-width:599px){.pn-tiempo.ok{display:none}}

/* 1 · slider */
.pn-slider{position:relative;height:min(62vh,620px);min-height:440px;overflow:hidden;background:#071a20;border-bottom:1px solid var(--linea)}
.pn-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.pn-slide.on{opacity:1;pointer-events:auto}
/* las fotos de los anuncios 2 y 3 no se bajan hasta que la página ha terminado de cargar */
.pn-slider:not(.listo) .pn-slide:not(:first-child) picture{display:none}
.pn-slide picture,.pn-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none}
.pn-slide img{transform:scale(1.06);transition:transform 7s ease-out}
.pn-slide.on img{transform:scale(1)}
.pn-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,19,24,.9) 0%,rgba(6,19,24,.6) 40%,rgba(6,19,24,0) 72%)}
.pn-slide .env{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center}
.pn-slide .pn-txt{max-width:680px;opacity:0;transform:translateY(16px);transition:opacity .7s .25s,transform .7s .25s}
.pn-slide.on .pn-txt{opacity:1;transform:none}
.pn-etq{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--apagado)}
.pn-slide h1,.pn-slide .pn-h{font-family:var(--titular);font-weight:800;font-stretch:125%;font-variation-settings:'wdth' 125;
  text-transform:uppercase;font-size:clamp(30px,3.7vw,54px);line-height:1.04;margin:12px 0 16px;color:var(--espuma)}
.pn-slide .pn-h em{font-style:normal;color:var(--turquesa)}
.pn-slide p{font-size:clamp(15px,1.3vw,18px);line-height:1.55;margin:0 0 26px;color:#d5e3e0;max-width:560px}
.pn-acciones{display:flex;gap:12px;flex-wrap:wrap}
.pn-ilus{position:absolute;right:14px;bottom:12px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.72);text-transform:uppercase}
.pn-mandos{position:absolute;z-index:4;left:0;right:0;bottom:24px}
.pn-mandos .env{display:flex;align-items:center;gap:16px}
.pn-puntos{display:flex;gap:10px}
.pn-puntos button{width:34px;height:3px;border:0;padding:0;background:rgba(234,242,240,.3);cursor:pointer;position:relative;overflow:hidden}
.pn-puntos button span{position:absolute;inset:0;background:var(--turquesa);transform:scaleX(0);transform-origin:left}
.pn-puntos button.on span{animation:pn-avance 6s linear forwards}
.pn-slider.pausa .pn-puntos button.on span{animation-play-state:paused}
@keyframes pn-avance{to{transform:scaleX(1)}}
.pn-flechas{display:flex;gap:6px;margin-left:auto}
.pn-flechas button{width:42px;height:42px;border:1px solid var(--linea);background:rgba(6,19,24,.4);color:var(--espuma);cursor:pointer;font-size:16px}
.pn-flechas button:hover{border-color:var(--turquesa);color:var(--turquesa)}

/* 2 · barra de categorías */
.pn-cats{border-bottom:1px solid var(--linea);background:#071a20}
.pn-cats .env{display:grid;grid-template-columns:repeat(6,1fr)}
.pn-cats a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 8px 20px;text-decoration:none;font-size:14px;font-weight:600;line-height:1.3;
  color:var(--espuma);border-right:1px solid var(--linea);transition:background .2s,color .2s;text-align:center}
.pn-cats a:first-child{border-left:1px solid var(--linea)}
.pn-cats a:hover{background:rgba(0,251,211,.06);color:var(--turquesa)}
.pn-cats svg{width:40px;height:40px;stroke:var(--turquesa);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 3 · dos promociones */
.pn-promos{padding:56px 0 20px}
.pn-promos .env{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pn-promo{position:relative;min-height:340px;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none;color:var(--espuma)}
.pn-promo picture,.pn-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none}
.pn-promo img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pn-promo:hover img{transform:scale(1.05)}
.pn-promo::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,19,24,.96) 0%,rgba(6,19,24,.82) 42%,rgba(6,19,24,.2) 78%,rgba(6,19,24,0) 100%)}
.pn-promo .pn-t{position:relative;z-index:2;padding:28px 30px}
.pn-promo .pn-h{font-family:var(--titular);font-weight:800;font-stretch:125%;font-variation-settings:'wdth' 125;text-transform:uppercase;
  font-size:clamp(22px,2.2vw,30px);line-height:1.07;margin:8px 0 10px}
.pn-promo p{margin:0 0 14px;line-height:1.5;color:#d5e3e0;max-width:420px}
.pn-promo .pn-ver{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--turquesa);text-transform:uppercase}
.pn-promo .pn-ilus{top:12px;bottom:auto}

/* 4 · pantalán */
.pn-pantalan{padding:70px 0 70px;border-bottom:1px solid var(--linea)}
.pn-pantalan .pn-arriba{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap;margin-bottom:34px}
.pn-pantalan .pn-arriba p{max-width:470px;line-height:1.55;color:#c9d8d5;margin:0}
.pn-pantalan h2::before{content:'';display:block;width:38px;height:2px;background:var(--turquesa);margin-bottom:16px}
.pn-filtros{display:flex;gap:8px;flex-wrap:wrap}
.pn-filtros button{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:none;color:var(--espuma);
  border:1px solid var(--linea);padding:10px 14px;cursor:pointer;transition:all .2s}
.pn-filtros button[aria-pressed=true]{border-color:var(--turquesa);color:var(--abismo);background:var(--turquesa)}
.pn-filtros button.pn-sello[aria-pressed=false]{border-color:var(--poniente);color:var(--poniente)}
.pn-marco{overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--marea) transparent}
.pn-muelle{position:relative;display:flex;align-items:flex-start;gap:16px;padding:26px 24px 0;min-width:max-content;min-height:300px}
.pn-muelle::before{content:'';position:absolute;left:0;right:0;top:0;height:22px;background:repeating-linear-gradient(90deg,#3b2f22 0 18px,#4a3b2b 18px 20px);border-bottom:2px solid #2a2118}
.pn-amarre{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;transition:opacity .35s,transform .35s}
.pn-amarre::before{content:'';width:1px;height:10px;background:rgba(234,242,240,.4)}
.pn-amarre svg{display:block;overflow:visible}
.pn-amarre .pn-casco{fill:transparent;stroke:var(--turquesa);stroke-width:1.4}
.pn-amarre.pn-libre .pn-casco{fill:var(--turquesa)}
.pn-amarre .pn-det{fill:none;stroke:rgba(0,251,211,.55);stroke-width:1}
.pn-amarre.pn-libre .pn-det{stroke:rgba(6,19,24,.55)}
.pn-amarre .pn-m{font-family:var(--mono);font-size:11px;color:var(--apagado);margin-top:8px;white-space:nowrap}
.pn-amarre.pn-apagado{opacity:.13}
.pn-amarre:hover,.pn-amarre.pn-sel{transform:translateY(4px)}
.pn-amarre.pn-sel .pn-casco{stroke-width:2.4;filter:drop-shadow(0 0 8px rgba(0,251,211,.7))}
.pn-amarre:focus-visible{outline:2px solid var(--turquesa);outline-offset:4px}
.pn-info{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;border-top:1px solid var(--linea);margin-top:26px;padding-top:22px;min-height:70px}
.pn-info .pn-nombre{font-family:var(--titular);font-stretch:125%;font-variation-settings:'wdth' 125;font-weight:800;text-transform:uppercase;font-size:22px}
.pn-info .pn-datos{display:flex;gap:30px;flex-wrap:wrap;font-family:var(--mono);font-size:14px}
.pn-info .pn-datos span{color:var(--apagado);display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.pn-leyenda{display:flex;gap:22px;font-family:var(--mono);font-size:12px;color:var(--apagado);margin-top:18px;flex-wrap:wrap}
.pn-leyenda i{display:inline-block;width:22px;height:9px;border:1px solid var(--turquesa);vertical-align:middle;margin-right:8px;border-radius:0 0 8px 8px}
.pn-leyenda i.l{background:var(--turquesa)}
.pn-escala{display:inline-flex;align-items:center;gap:8px}
.pn-escala b{display:inline-block;height:2px;background:var(--espuma);width:35px}

/* 5 · ruta de puertos (scroll) */
.pn-vuelo{position:relative;height:430vh;border-bottom:1px solid var(--linea)}
.pn-fijo{position:sticky;top:var(--pn-cab,66px);height:calc(100vh - var(--pn-cab,66px));display:grid;grid-template-columns:1.35fr 1fr;overflow:hidden}
.pn-mapa{position:relative;display:flex;flex-direction:column;justify-content:center;padding:30px 0 30px 6vw}
.pn-mapa h2{font-size:clamp(28px,3.4vw,48px)}
.pn-mapa h2::before{content:'';display:block;width:38px;height:2px;background:var(--turquesa);margin-bottom:16px}
.pn-mapa svg{width:100%;height:auto;max-height:58vh;overflow:visible}
.pn-tierra{fill:url(#pnTierra)}
.pn-costa{fill:none;stroke:rgba(0,251,211,.35);stroke-width:1.2}
.pn-ruta-base{fill:none;stroke:rgba(234,242,240,.14);stroke-width:1.5;stroke-dasharray:3 6}
.pn-ruta{fill:none;stroke:var(--turquesa);stroke-width:2.4;stroke-linecap:round}
.pn-puerto circle{fill:var(--abismo);stroke:var(--apagado);stroke-width:1.5;transition:all .4s}
.pn-puerto text{font-family:var(--mono);font-size:12px;letter-spacing:.12em;fill:var(--apagado);text-transform:uppercase;transition:fill .4s}
.pn-puerto.on circle{fill:var(--turquesa);stroke:var(--turquesa)}
.pn-puerto.on text{fill:var(--espuma)}
.pn-puerto.actual circle{r:8}
.pn-contador{font-family:var(--mono);font-size:13px;color:var(--apagado);margin-top:14px}
.pn-contador b{color:var(--turquesa);font-size:22px}
.pn-fichas{position:relative;background:#081c22}
.pn-fichas figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease}
.pn-fichas figure.on{opacity:1;z-index:1}
.pn-fichas picture,.pn-fichas img{width:100%;height:100%;object-fit:cover;max-height:none}
.pn-fichas img{transform:scale(1.08);transition:transform 6s ease-out}
.pn-fichas figure.on img{transform:scale(1)}
.pn-fichas figcaption{position:absolute;left:0;right:0;bottom:0;padding:120px 40px 40px;background:linear-gradient(0deg,rgba(6,19,24,.95) 30%,rgba(6,19,24,0))}
.pn-fichas .pn-num{font-family:var(--mono);font-size:12px;color:var(--turquesa);letter-spacing:.2em}
.pn-fichas h3{font-size:clamp(24px,2.6vw,38px);margin:10px 0 12px}
.pn-fichas p{margin:0 0 14px;line-height:1.55;max-width:440px;color:#d5e3e0}
.pn-fichas a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.pn-fichas .pn-ilus{top:12px;bottom:auto;z-index:3}

/* 6 · final con agua viva */
.pn-final{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;background:#0b3a46}
/* La foto la carga el efecto del agua al acercarse. Puesta como fondo CSS se bajaba
   nada más abrir la página (762 KB medidos) aunque esté abajo del todo. Solo sin WebGL: */
.pn-final.sin-shader{background:#0b3a46 url('../fotos/alquiler-velero-costa-del-sol.webp') center/cover}
.pn-final::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,19,24,.92) 0%,rgba(6,19,24,.8) 45%,rgba(6,19,24,.2) 75%,rgba(6,19,24,0) 100%)}
.pn-final .env{position:relative;z-index:2;width:100%}
.pn-final .pn-h2{font-family:var(--titular);font-weight:800;font-stretch:125%;font-variation-settings:'wdth' 125;text-transform:uppercase;
  font-size:clamp(38px,5.4vw,80px);line-height:1.02;margin:14px 0 18px}
.pn-final .pn-h2 em{font-style:normal;color:var(--turquesa)}
.pn-final p{max-width:520px;line-height:1.55;color:#d5e3e0;margin:0 0 28px;font-size:17px}
.pn-mar{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#a9bfbb;margin-top:26px;letter-spacing:.03em;display:none;max-width:520px}
.pn-mar.ok{display:block}
.pn-mar b{color:var(--espuma);font-weight:400}

@media(max-width:900px){
  .pn-cats .env{grid-template-columns:repeat(6,minmax(96px,1fr));overflow-x:auto;scrollbar-width:none;padding:0}
  .pn-cats .env::-webkit-scrollbar{display:none}
  .pn-cats a{padding:16px 6px;font-size:12.5px}
  .pn-promos .env{grid-template-columns:1fr}
  .pn-promo{min-height:260px}
  .pn-slide::after{background:linear-gradient(0deg,rgba(6,19,24,.92) 10%,rgba(6,19,24,.55) 60%,rgba(6,19,24,.3) 100%)}
  .pn-slide .env{justify-content:flex-end;padding-bottom:80px}
  .pn-flechas{display:none}
  .pn-vuelo{height:360vh}
  .pn-fijo{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .pn-mapa{padding:18px 16px 8px}
  .pn-mapa svg{max-height:30vh}
  .pn-fichas figcaption{padding:70px 20px 80px}
  .pn-info{grid-template-columns:1fr}
  .pn-final::after{background:rgba(6,19,24,.74)}
}
@media(prefers-reduced-motion:reduce){
  .pn-slide .pn-txt{opacity:1;transform:none;transition:none}
  .pn-slide img,.pn-fichas img,.pn-promo img{transition:none;transform:none}
  .pn-puntos button.on span{animation:none;transform:scaleX(1)}
}