/* ====== EXPERIENCIA DE DESCENSO (reserva de actividades) ======
   La imagen ocupa TODO el ancho de la ventana (sin franjas laterales).
   Los puntos se anclan en % sobre la imagen, así quedan sobre cada persona.
   El scroll es normal: nada se pega. */
.reef{font-size:17px;line-height:1.5;position:relative;width:100%;background:#012a40;overflow:hidden}
.reef-stage{position:relative;width:100%;margin:0 auto}
/* Barra de chips: fija al centro vertical de la pantalla, acompaña el scroll
   mientras estás en la escena. Vertical y discreta a la izquierda. */
.reef-chips{position:fixed;top:50%;left:1.2em;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:.5em;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.reef-chips.visible{opacity:1;visibility:visible}
.reef-chip{display:inline-flex;align-items:center;gap:.4em;cursor:pointer;border:1px solid rgba(255,255,255,.28);
  background:rgba(0,42,64,.86);color:#fff;border-radius:50px;padding:.55em 1em;box-shadow:0 8px 22px -10px rgba(0,20,35,.9);
  font-size:.56em;letter-spacing:.12em;text-transform:uppercase;font-weight:700;transition:background .3s,border-color .3s,transform .3s;white-space:nowrap}
.reef-chip:hover,.reef-chip.active{background:var(--turquoise);border-color:var(--turquoise);transform:translateX(4px)}
.reef-chip i[data-ic]{font-size:.95em}
@media(max-width:880px){.reef-chips{left:.5em;gap:.4em}.reef-chip{font-size:.5em;padding:.45em .7em}.reef-chip span.chip-tx{display:none}.reef-chip i[data-ic]{font-size:1.15em}}
/* Resaltado de la persona/zona cuando llegas desde un chip */
.spot.highlight .spot-pulse{transform:scale(1.5);background:var(--turquoise);box-shadow:0 0 0 12px rgba(122,208,234,.35),0 0 40px rgba(122,208,234,.9)}
.spot.highlight{animation:spotPing 1.2s ease-out 2}
@keyframes spotPing{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* La imagen del arrecife a ancho completo: su altura define la escena */
.reef-img{display:block;width:100%;height:auto}
/* Capa de oleaje en la franja de agua: distorsión suave y barata (GPU) */
.reef-water{position:absolute;left:0;right:0;top:27%;bottom:0;z-index:2;pointer-events:none;overflow:hidden}
.reef-water::before{content:'';position:absolute;inset:-20% 0;
  /* Ondulación suave, sin bordes duros: antes era otra trama recta. */
  background:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.13),rgba(255,255,255,0) 70%);
  /* sin mix-blend-mode: mezclar una capa de este tamaño obliga al navegador
     a releer todo lo que hay debajo en cada cuadro. Con opacidad basta. */
  opacity:.4;animation:waterMove 7s linear infinite;will-change:transform}
@keyframes waterMove{0%{transform:translate3d(-30px,0,0)}100%{transform:translate3d(30px,0,0)}}
/* Un segundo brillo, más grande y más lento, cruzando al revés. Dos capas
   que no van sincronizadas es lo que hace que el agua parezca agua y no
   una tela con un reflejo encima. */
.reef-water::after{content:'';position:absolute;inset:-25% -10%;
  background:radial-gradient(90% 45% at 30% 8%,rgba(210,245,255,.16),rgba(210,245,255,0) 72%),
             radial-gradient(70% 38% at 78% 20%,rgba(255,255,255,.11),rgba(255,255,255,0) 70%);
  opacity:.7;animation:waterMove2 23s ease-in-out infinite;will-change:transform}
@keyframes waterMove2{0%,100%{transform:translate3d(26px,0,0) scaleX(1)}50%{transform:translate3d(-26px,6px,0) scaleX(1.08)}}
@media(prefers-reduced-motion:reduce){.reef-water::after{animation:none}}
/* Rayos de sol (god rays) que atraviesan el agua con vida propia: dos capas
   de haces que se balancean y laten en opacidad, dando luz "viva". */






/* ====== EL CIELO: nubes que cruzan de verdad ======
   La foto tiene su cielo y sus nubes pintadas, pero quietas. Encima van
   cuatro velos blancos muy anchos y muy suaves que cruzan despacio de
   este a oeste —que es como corre el viento en Los Roques— con distinta
   altura, distinto tamaño y distinta velocidad. Muy tenues a propósito:
   la idea es que el cielo respire, no que aparezcan manchas. */
.reef-sky{position:absolute;left:0;right:0;top:0;height:27%;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%)}
.reef-sky i{position:absolute;display:block;border-radius:50%;will-change:transform;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,.16) 58%,rgba(255,255,255,0) 100%)}
.reef-sky i:nth-child(1){top:6%;  width:52%; height:26%; opacity:.5;  animation:nube 96s linear infinite}
.reef-sky i:nth-child(2){top:26%; width:38%; height:17%; opacity:.38; animation:nube 138s linear infinite -40s}
.reef-sky i:nth-child(3){top:44%; width:64%; height:20%; opacity:.3;  animation:nube 168s linear infinite -95s}
.reef-sky i:nth-child(4){top:15%; width:28%; height:12%; opacity:.42; animation:nube 74s linear infinite -22s}
@keyframes nube{from{transform:translate3d(115vw,0,0)}to{transform:translate3d(-70vw,0,0)}}
@media(prefers-reduced-motion:reduce){.reef-sky{display:none}}

/* Línea de superficie que ondula (donde el aire toca el agua).
   Además del latido vertical, ahora se mece de lado: una superficie que
   solo sube y baja se ve como una persiana; el mar va y viene. */
.reef-surface{position:absolute;left:-6%;right:-6%;top:26.5%;height:5%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);opacity:.5;
  animation:surfaceWobble 5s ease-in-out infinite,superficieVaiven 17s ease-in-out infinite;
  will-change:transform}
@keyframes surfaceWobble{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-4px) scaleY(1.15)}}
@keyframes superficieVaiven{0%,100%{margin-left:-14px}50%{margin-left:14px}}
/* Velo de profundidad creciente hacia el fondo */
.reef-depthveil{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent 30%,rgba(0,42,64,.18) 60%,rgba(0,26,40,.55) 100%);
  /* --hondo lo escribe el JS mientras bajas: 0 en la superficie, 1 en el fondo */
  opacity:calc(.6 + var(--hondo,0)*.4)}

/* ====== CARDÚMENES (peces nadando por toda la escena) ====== */
.school{position:absolute;left:0;right:0;top:27%;bottom:0;z-index:4;pointer-events:none;overflow:hidden;will-change:transform}
/* Un pez se mueve como tres cosas a la vez, y por eso son tres capas:
     .fish  avanza en línea recta          (transform: solo translateX)
     .fb    cabecea arriba y abajo         (transform propio, a su ritmo)
     img    aletea el cuerpo               (transform propio, más rápido)
   Cada capa anima únicamente transform, que es lo que la tarjeta gráfica
   mueve sin repintar. Antes todo iba en una sola animación y encima el pez
   llevaba drop-shadow: dieciocho sombras recalculadas en cada cuadro.
   El tono submarino ya viene horneado en las imágenes -mar.webp. */
.fish{position:absolute;left:0;will-change:transform;animation:swim linear infinite}
.fish .fb{will-change:transform;animation:cabeceo ease-in-out infinite alternate}
.fish img{display:block;width:100%;height:auto;animation:aleteo 1.5s ease-in-out infinite;transform-origin:62% 50%}
@keyframes swim{  from{transform:translate3d(-22vw,0,0)} to{transform:translate3d(122vw,0,0)} }
@keyframes swimL{ from{transform:translate3d(122vw,0,0)} to{transform:translate3d(-22vw,0,0)} }
@keyframes cabeceo{ from{transform:translate3d(0,-13px,0) rotate(-2.5deg)} to{transform:translate3d(0,13px,0) rotate(2.5deg)} }
@keyframes aleteo{  0%,100%{transform:scaleY(1) scaleX(1)} 50%{transform:scaleY(.93) scaleX(1.02)} }
/* los que nadan hacia la izquierda van espejados */
.fish.rtl{animation-name:swimL}
.fish.rtl img{animation-name:aleteoL}
@keyframes aleteoL{ 0%,100%{transform:scaleX(-1) scaleY(1)} 50%{transform:scaleX(-1.02) scaleY(.93)} }

/* ====== BURBUJAS (muchas, ascendiendo por toda la escena) ====== */
.bubbles{position:absolute;left:0;right:0;top:27%;bottom:0;z-index:4;pointer-events:none;overflow:hidden;will-change:transform}
.bubble{position:absolute;bottom:-30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85),rgba(255,255,255,.1));
  opacity:.5;animation:rise linear infinite;will-change:transform}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.6}100%{transform:translateY(-90vh) translateX(14px);opacity:0}}
/* Emisores fijos: chorros de burbujas que brotan de los corales/fondo */
.coral-vent{position:absolute;width:40px;height:60%;bottom:0;pointer-events:none}
.coral-vent i{position:absolute;bottom:0;left:50%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,.12));
  opacity:0;animation:vent linear infinite}
@keyframes vent{0%{transform:translate(-50%,0) scale(.6);opacity:0}12%{opacity:.75}80%{opacity:.5}100%{transform:translate(-50%,-60vh) scale(1.1);opacity:0}}

/* Intro encima del cielo de la imagen */
.reef-intro{position:absolute;top:0;left:0;right:0;z-index:7;text-align:center;color:#fff;padding:8.5em 1em 0;pointer-events:none}
/* La cometa del kitesurfista pasa justo por detrás del título: este velo
   apaga un poco el cielo solo ahí, para que el texto siempre se lea. */
.reef-intro::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(900px,96%);height:22em;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 58% at 50% 42%,rgba(0,36,58,.5),rgba(0,36,58,0) 72%)}
.reef-intro .tag{color:#bfeaf7}
.reef-intro h1{font-family:var(--display);font-weight:400;font-size:clamp(2em,5.2vw,4em);line-height:1;text-shadow:0 4px 30px rgba(0,30,52,.55);margin:.4em 0 .5em}
.reef-intro p{font-size:.74em;max-width:440px;margin:0 auto;opacity:.95;line-height:1.6;text-shadow:0 2px 12px rgba(0,30,52,.5)}

/* ====== PUNTOS SOBRE CADA PERSONA ====== */
/* El punto se centra con margen negativo y NO con transform. Un elemento
   con transform se convierte en el marco de referencia de todo lo que lleva
   dentro: la tarjeta del teléfono, que es position:fixed, se medía contra el
   punto (46 px) en vez de contra la pantalla, y salía como una columna
   estrujada en una esquina. Con margen negativo el punto queda igual de
   centrado y la tarjeta vuelve a ocupar el ancho del teléfono. */
.spot{position:absolute;z-index:10;cursor:pointer;outline:none;width:46px;height:46px;margin:-23px 0 0 -23px}
.spot-pulse{position:relative;width:46px;height:46px;border-radius:50%;background:rgba(0,172,205,.3);border:2px solid rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1em;
  transition:transform .3s,background .3s}
/* El halo que late es un aro aparte que solo crece y se apaga. Antes se
   animaba el box-shadow del propio punto, y una sombra que cambia obliga a
   repintar: seis puntos repintándose sin parar durante todo el scroll. */
.spot-pulse::after{content:'';position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(122,208,234,.55);pointer-events:none;
  animation:spotPulse 2.6s ease-out infinite;will-change:transform,opacity}
@keyframes spotPulse{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.95);opacity:0}100%{transform:scale(1.95);opacity:0}}
.spot:hover .spot-pulse,.spot.open .spot-pulse{transform:scale(1.15);background:var(--turquoise)}
/* Al abrirse, el punto entero sube de capa. Si no, la etiqueta de OTRO punto
   —que va en su propia capa— se dibujaba encima de la tarjeta abierta. */
.spot:hover,.spot.open,.spot.highlight{z-index:1400}
/* Si la tarjeta de un punto tapa el pin de otro, ese pin sube de capa para que el clic le llegue */
.spot.lift{z-index:1500}
/* Puntos muy pegados al borde: la etiqueta se ancla al punto y no se corta */
.spot.lbl-der .spot-label,.spot.lbl-der .spot-hint{left:0;transform:none}
/* La etiqueta va dentro de una pastilla del azul profundo de la casa.
   Antes era texto blanco con sombra encima de agua turquesa a pleno sol:
   se leía a ratos y a ratos no. Una pastilla sólida se lee siempre. */
.spot-label{position:absolute;left:50%;top:52px;transform:translateX(-50%);white-space:nowrap;
  color:#fff;font-size:.5em;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  background:rgba(0,42,64,.88);border:1px solid rgba(255,255,255,.22);
  padding:.32em .62em;border-radius:50px;
  box-shadow:0 6px 18px -6px rgba(0,20,35,.8);pointer-events:none}
.spot .spot-hint{top:82px;color:#bfeaf7;text-shadow:0 2px 10px rgba(0,20,35,.95)}
.spot:hover .spot-label,.spot.open .spot-label{background:var(--turquoise);border-color:transparent}
@media(max-width:880px){.spot-label{font-size:.44em;padding:.28em .5em;top:46px}.spot .spot-hint{top:73px}}
/* burbujas que salen del propio punto (persona en el agua) */
.spot-bubbles{position:absolute;left:50%;top:0;width:40px;height:40px;transform:translateX(-50%);pointer-events:none}
.spot-bubbles i{position:absolute;bottom:0;left:50%;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.85),rgba(255,255,255,.15));opacity:0;
  animation:spotBub 3.2s ease-in infinite}
.spot-bubbles i:nth-child(1){left:42%;animation-delay:0s}
.spot-bubbles i:nth-child(2){left:55%;width:4px;height:4px;animation-delay:.9s}
.spot-bubbles i:nth-child(3){left:48%;width:5px;height:5px;animation-delay:1.8s}
.spot-bubbles i:nth-child(4){left:60%;width:4px;height:4px;animation-delay:2.5s}
@keyframes spotBub{0%{opacity:0;transform:translateY(0) translateX(0)}15%{opacity:.7}100%{opacity:0;transform:translateY(-80px) translateX(8px)}}

/* tarjeta de la actividad */
.spot-tip{position:absolute;left:58px;top:50%;transform:translateY(-50%) translateX(-8px);width:250px;
  background:#fff;border-radius:14px;padding:1.1em 1.2em;box-shadow:0 24px 60px -18px rgba(0,30,52,.6);
  opacity:0;visibility:hidden;transition:opacity .35s,transform .35s,visibility .35s;z-index:20}
.spot:hover .spot-tip,.spot.open .spot-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.spot.tip-left .spot-tip{left:auto;right:58px;transform:translateY(-50%) translateX(8px)}
.spot.tip-left:hover .spot-tip,.spot.tip-left.open .spot-tip{transform:translateY(-50%) translateX(0)}
.spot-tip h4{font-family:var(--display);font-weight:400;font-size:1.4em;color:var(--ocean);line-height:1;margin-bottom:.2em}
.spot-tip .st-loc{font-size:.52em;letter-spacing:.14em;text-transform:uppercase;color:var(--turquoise);font-weight:700;margin-bottom:.6em}
.spot-tip .st-row{display:flex;align-items:center;gap:.5em;font-size:.66em;color:var(--navy);margin-bottom:.35em}
.spot-tip .st-row i[data-ic]{color:var(--turquoise);font-size:.85em}
.spot-tip .st-price{font-family:var(--display);font-size:1.7em;color:var(--turquoise);line-height:1;margin:.5em 0 .1em}
.spot-tip .st-price small{font-family:var(--font);font-size:.5em;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,243,236,0.72);display:block}
.spot-tip .btn{width:100%;justify-content:center;margin-top:.7em;padding:.7em 1em;font-size:.55em}

/* ====== LÍNEA DE PROFUNDIDAD CENTRADA ====== */
/* Riel vertical anclado a la imagen: arranca en la línea del agua (~28%)
   y baja hasta el fondo. La perla y la lectura siguen el scroll. */
.depth-rail{position:absolute;left:50%;top:28%;bottom:0;transform:translateX(-50%);z-index:6;width:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.4),rgba(255,255,255,.15));opacity:0;transition:opacity .5s;
  box-shadow:0 0 12px rgba(122,208,234,.5)}
.depth-rail.show{opacity:1}
.depth-rail .dr-fill{position:absolute;top:0;left:0;right:0;height:0;border-radius:3px;background:linear-gradient(180deg,rgba(122,208,234,1),var(--turquoise));box-shadow:0 0 18px rgba(122,208,234,1),0 0 40px rgba(0,172,205,.8),0 0 70px rgba(0,172,205,.4);transition:height .15s linear}
.depth-rail .dr-bead{position:absolute;left:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--turquoise);transform:translate(-50%,-50%);top:0;box-shadow:0 0 22px rgba(122,208,234,1),0 0 44px rgba(0,172,205,.8);transition:top .15s linear;z-index:2}
/* Halo pulsante alrededor de la perla */
.depth-rail .dr-bead::before{content:'';position:absolute;top:50%;left:50%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(122,208,234,.55);z-index:-1;animation:beadHalo 2s ease-out infinite;will-change:transform,opacity}
@keyframes beadHalo{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}100%{transform:translate(-50%,-50%) scale(3.33);opacity:0}}
.depth-rail .dr-read{position:absolute;left:22px;white-space:nowrap;font-family:var(--display);color:#fff;font-size:1.4em;text-shadow:0 2px 12px rgba(0,30,52,.9),0 0 20px rgba(122,208,234,.7);transform:translateY(-50%);top:0;transition:top .15s linear}
.depth-rail .dr-read small{display:block;font-family:var(--font);font-size:.46em;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.depth-rail .dr-ticks{position:absolute;inset:0}
.depth-rail .dr-tick{position:absolute;left:50%;transform:translateX(-50%);width:10px;height:1px;background:rgba(255,255,255,.55);box-shadow:0 0 6px rgba(122,208,234,.6)}
.depth-rail .dr-tick span{position:absolute;right:15px;top:-.55em;font-size:.42em;letter-spacing:.1em;color:rgba(255,255,255,.7);white-space:nowrap}
@media(max-width:880px){.depth-rail .dr-read{font-size:1.1em;left:16px}}
@media(prefers-reduced-motion:reduce){.depth-rail .dr-bead::before{animation:none}}

@media(max-width:880px){
  .spot-tip{position:fixed;left:1em!important;right:1em!important;bottom:1em;top:auto!important;width:auto!important;transform:translateY(20px)!important;z-index:1400}
  .spot:hover .spot-tip,.spot.open .spot-tip{transform:translateY(0)!important}
  .spot{width:40px;height:40px;margin:-20px 0 0 -20px}
  .spot-pulse{width:40px;height:40px;font-size:1em}
  .spot-label{font-size:.46em;top:46px}
  /* En el teléfono la columna de chips se plantaba encima del kitesurfista y
     le robaba el clic. Aquí sobra: los puntos ya se ven todos, y justo debajo
     está la lista completa de actividades con su botón de cotizar. */
  .reef-chips{display:none}
  /* En el teléfono la foto entera cabía en media pantalla: seis personas y
     seis puntos amontonados en 580 px. Se acerca la escena un 55 % y se
     recorta por los lados —donde solo hay coral, nadie— así que todos los
     aventureros siguen dentro y cada punto tiene su espacio. */
  .reef-stage{width:155%;margin-left:-15%}
  /* al acercar, el centro de la foto se corre: el título se recoloca para
     seguir centrado en la pantalla del teléfono */
  .reef-intro{transform:translateX(-8.06%);padding-top:6.5em}
  .reef-intro p{font-size:.68em;max-width:300px}
}
@media(prefers-reduced-motion:reduce){
  .reef-water::before,.reef-surface,.spot-pulse,.spot-bubbles i,.fish,.fish .fb,.fish img,.bubble{animation:none}
  .fish{opacity:.85}
}

/* ====== SELECTOR DE ACTIVIDADES (iconos minimalistas) ====== */
.acts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1em;max-width:1000px;margin:0 auto}
.act-card{background:#fff;border:1.5px solid rgba(0,172,205,.14);border-radius:14px;padding:1.8em 1.4em;text-align:center;cursor:pointer;transition:transform .35s,box-shadow .35s,border-color .35s;position:relative;overflow:hidden}
.act-card:hover{transform:translateY(-5px);border-color:var(--turquoise);box-shadow:0 18px 40px -16px rgba(0,172,205,.4)}
.act-ico{width:54px;height:54px;margin:0 auto 1em;border-radius:50%;background:rgba(0,172,205,.1);display:flex;align-items:center;justify-content:center;color:var(--turquoise);font-size:1.5em;transition:background .35s,color .35s}
.act-card:hover .act-ico{background:var(--turquoise);color:#fff}
.act-n{font-size:.92em;color:var(--ocean);font-weight:700;letter-spacing:.02em;margin-bottom:.3em}
.act-d{font-size:.66em;color:rgba(247,243,236,0.72);line-height:1.5}
.act-sel{position:absolute;top:.7em;right:.7em;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(0,172,205,.3);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .3s,border-color .3s}
.act-card.sel{border-color:var(--turquoise);background:linear-gradient(180deg,#fff,rgba(0,172,205,.05))}
.act-card.sel .act-sel{background:var(--turquoise);border-color:var(--turquoise)}
.act-card .act-sel i[data-ic]{opacity:0;transition:opacity .3s;font-size:.7em}
.act-card.sel .act-sel i[data-ic]{opacity:1}
.acts-cta{text-align:center;margin-top:2.5em}
.acts-count{font-size:.7em;color:rgba(247,243,236,0.72);margin-bottom:1em;letter-spacing:.04em}

/* ====== BOTÓN FLOTANTE: abre el selector de actividades ====== */
.acts-fab{position:fixed;right:1.4em;bottom:1.4em;z-index:1200;display:flex;align-items:center;gap:.6em;
  background:var(--turquoise);color:#fff;border:none;border-radius:50px;padding:.9em 1.3em;cursor:pointer;
  font-family:var(--font);font-size:.58em;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  box-shadow:0 14px 36px -10px rgba(0,172,205,.7);transition:transform .3s,box-shadow .3s;opacity:0;visibility:hidden;transform:translateY(20px)}
.acts-fab.show{opacity:1;visibility:visible;transform:translateY(0)}
.acts-fab:hover{transform:translateY(-3px);box-shadow:0 20px 46px -10px rgba(0,172,205,.85)}
.acts-fab i[data-ic]{font-size:1.1em}
.acts-fab .fab-badge{background:#fff;color:var(--turquoise);border-radius:50px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:.6em;padding:0 .35em}
@media(max-width:880px){.acts-fab{right:1em;bottom:1em;padding:.8em 1.1em}}

/* ====== FICHA COMPLETA DE ACTIVIDAD (panel grande) ====== */
.act-sheet{position:fixed;inset:0;z-index:1600;background:rgba(0,30,52,.7);backdrop-filter:blur(8px);
  display:none;align-items:flex-start;justify-content:center;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.act-sheet.show{display:block}
.act-sheet-box{background:var(--paper);min-height:100vh;width:100%;max-width:980px;margin:0 auto;position:relative;animation:sheetUp .5s cubic-bezier(.2,.7,.2,1)}
@keyframes sheetUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.act-sheet-close{position:fixed;top:1.2em;right:1.2em;z-index:1650;width:44px;height:44px;border-radius:50%;
  background:rgba(0,30,52,.55);color:#fff;border:none;cursor:pointer;font-size:1.3em;display:flex;align-items:center;justify-content:center;transition:background .3s}
.act-sheet-close:hover{background:rgba(0,30,52,.85)}
/* Cabecera con video/imagen */
.as-media{position:relative;width:100%;aspect-ratio:16/9;background:#012a40;overflow:hidden}
.as-media video,.as-media img,.as-media iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.as-media-ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,30,52,.55));pointer-events:none}
.as-media-title{position:absolute;left:0;right:0;bottom:0;padding:2em;color:#fff;z-index:2}
.as-media-title .as-k{font-size:.58em;letter-spacing:.3em;text-transform:uppercase;color:#bfeaf7}
.as-media-title h2{font-family:var(--display);font-weight:400;font-size:clamp(2em,5vw,3.4em);line-height:1;margin-top:.3em;text-shadow:0 4px 20px rgba(0,30,52,.6)}
/* Cuerpo de la ficha */
.as-body{padding:2.5em clamp(1.4em,4vw,3em) 3em;display:grid;grid-template-columns:1.4fr 1fr;gap:2.5em;align-items:start}
@media(max-width:760px){.as-body{grid-template-columns:1fr;gap:2em}}
.as-lead{font-size:.92em;line-height:1.7;color:var(--navy);margin-bottom:1.6em}
.as-facts{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-bottom:1.8em}
.as-fact{display:flex;gap:.7em;align-items:flex-start}
.as-fact i[data-ic]{color:var(--turquoise);font-size:1.1em;margin-top:.1em;flex-shrink:0}
.as-fact .af-l{font-size:.52em;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,243,236,0.72);display:block;margin-bottom:.15em}
.as-fact .af-v{font-size:.78em;color:var(--navy);font-weight:500;line-height:1.3}
.as-section h3{font-family:var(--display);font-weight:400;font-size:1.5em;color:var(--ocean);margin:1.6em 0 .8em}
.as-list{list-style:none;padding:0;margin:0}
.as-list li{display:flex;gap:.6em;align-items:flex-start;font-size:.76em;color:var(--navy);line-height:1.5;margin-bottom:.6em}
.as-list li i[data-ic]{color:var(--turquoise);font-size:.85em;margin-top:.15em;flex-shrink:0}
.as-cond{font-size:.68em;color:rgba(247,243,236,0.72);line-height:1.6;background:rgba(0,172,205,.06);border-radius:14px;padding:1.1em 1.3em;margin-top:1em}
.as-aviso{display:flex;gap:.7em;align-items:flex-start;font-size:.72em;color:#7a4a00;line-height:1.65;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.35);border-radius:14px;padding:1em 1.2em;margin-top:1.2em}
.as-aviso i[data-ic]{flex:none;color:#e8920a;margin-top:.1em}
.as-aviso strong{color:#5e3900}
/* Tarjeta de precio + formulario propio de actividades */
.as-aside{position:sticky;top:1.5em;background:#fff;border:1.5px solid rgba(0,172,205,.16);border-radius:20px;padding:1.8em;box-shadow:0 20px 50px -22px rgba(0,30,52,.35)}
.as-info-only{margin-top:1em}
.as-info-only p{font-size:.78em;line-height:1.7;color:rgba(247,243,236,0.72);margin-bottom:1.1em}
.as-info-only .btn{width:100%;justify-content:center;text-align:center}
.as-price{font-family:var(--display);font-size:2.6em;color:var(--turquoise);line-height:1}
.as-price small{font-family:var(--font);font-size:.55em;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,243,236,0.72);display:block;margin-top:.2em}
.as-form{margin-top:1.4em;display:flex;flex-direction:column;gap:.8em}
.as-form label{font-size:.5em;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,243,236,0.72);display:block;margin-bottom:.3em}
.as-form input,.as-form select,.as-form textarea{width:100%;border:1px solid rgba(0,40,70,.18);border-radius:10px;padding:.7em .8em;font-family:inherit;font-size:.78em;color:var(--navy);background:#fff;transition:border-color .3s}
.as-form input:focus,.as-form select:focus,.as-form textarea:focus{outline:none;border-color:var(--turquoise)}
.as-form .as-row{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.as-form .btn{width:100%;justify-content:center;margin-top:.5em}
.as-form-ok{display:none;text-align:center;padding:1.5em 1em;color:var(--ocean)}
.as-form-ok.show{display:block}
.as-form-ok i[data-ic]{font-size:2.2em;color:var(--turquoise)}
.as-cotizar{width:100%;justify-content:center;margin-top:1.2em}
.as-mismo{font-size:.62em;color:rgba(247,243,236,0.72);text-align:center;margin-top:.5em;line-height:1.5}

/* ── RAYOS DE LUZ · rehecho el 23/08/2026 ──────────────────────────
   Antes eran dos tramas rectas (repeating-linear-gradient) a 96° y 84°
   superpuestas. Dos rejillas rectas cruzadas no dan rayos de sol: dan
   un enrejado de rombos, que es exactamente lo que se veía —y encima
   tapaba la foto sin aportar nada.

   Un rayo de sol bajo el agua es ancho arriba, se estrecha al bajar,
   tiene los bordes difusos y no está a la misma distancia del de al
   lado. Eso es lo que hay ahora: cinco haces con anchos, inclinaciones
   y ritmos distintos, muy difuminados, que se abren y cierran despacio.
   Cinco elementos con blur en vez de dos tramas a pantalla completa:
   además de verse bien, cuesta menos que lo anterior. */
.reef-rays{position:absolute;left:0;right:0;top:26%;bottom:0;z-index:3;pointer-events:none;
  overflow:hidden;mix-blend-mode:screen;will-change:transform;
  /* la luz del sol se pierde con la profundidad */
  opacity:calc(.78 - var(--hondo,0)*.42)}
/* Cada haz es un degradado con los bordes ya difuminados. Antes llevaba
   filter:blur(11px) y clip-path: eso obliga al navegador a volver a pintar
   y volver a desenfocar el haz entero en CADA cuadro, y era una de las
   causas de que la página se pegara. Ahora solo se mueve (transform) y
   se enciende (opacity), que es lo único que la tarjeta gráfica hace gratis. */
.reef-rays i{
  position:absolute;top:-10%;height:132%;display:block;
  transform-origin:top center;
  will-change:transform,opacity;
  background:linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(232,250,255,.30) 26%,
    rgba(255,255,255,.55) 50%,
    rgba(232,250,255,.30) 74%,
    rgba(255,255,255,0) 100%);
  /* se apaga hacia el fondo, como la luz de verdad al perder profundidad */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,.18) 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,.18) 72%,transparent 100%);
}
.reef-rays i:nth-child(1){left:4%;  width:13%; --g:-9deg;  animation:haz 11s ease-in-out infinite}
.reef-rays i:nth-child(2){left:23%; width:8%;  --g:-4deg;  animation:haz 15s ease-in-out infinite -3s; opacity:.7}
.reef-rays i:nth-child(3){left:44%; width:16%; --g:2deg;   animation:haz 13s ease-in-out infinite -6s}
.reef-rays i:nth-child(4){left:67%; width:9%;  --g:7deg;   animation:haz 17s ease-in-out infinite -2s; opacity:.65}
.reef-rays i:nth-child(5){left:83%; width:14%; --g:11deg;  animation:haz 12s ease-in-out infinite -8s}
@keyframes haz{
  0%,100%{ transform:rotate(var(--g,0deg)) scaleX(.8)  translateX(-2%); opacity:.35 }
  50%    { transform:rotate(var(--g,0deg)) scaleX(1.22) translateX(2%); opacity:.9 }
}
@media(prefers-reduced-motion:reduce){ .reef-rays i{animation:none} }

/* integración cayos */
.reef [data-ic] svg{width:1em;height:1em;display:inline-block;vertical-align:-0.15em}
.reef .spot-tip .btn{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:var(--turquoise);color:#fff;border:0;border-radius:999px;padding:10px 16px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.reef .spot-tip .btn.wa{background:var(--whatsapp,#25D366);color:#062A16}
.reef .spot-tip .st-price{font-family:var(--display);font-size:1.5em;margin-top:6px}
.reef .spot-tip .st-price small{font-family:var(--font);font-size:.7em;text-transform:uppercase;letter-spacing:.1em;opacity:.8}
.reef .reef-intro h1{font-family:var(--display);font-weight:400}
.reef .spot-hint{display:none}
.reef .spot-tip .st-price small{color:rgba(11,24,38,0.65)}
.reef .depth-rail{left:auto;right:6%;transform:none}
@media(max-width:880px){.reef .depth-rail{right:4%}}