/* =========================================================================
   AGUA DEL HERO · 13/11/2026 · Kevin eligio la prueba B («este», «mete ya este efecto»)
   Mar de video real (Pexels 12949442, Julio Agreda, licencia Pexels) rehecho a 60 fps de verdad
   y en bucle sin costura; encima, un barco cada 6,5 s cortado por su linea de flotacion, con reflejo
   que ondula, sombra, espuma y estela. Sustituye a .hero__objeto (linea dorada + pasarela de 7 barcos).
   Clases propias (.escena, .agua, .nave): .barco ya es de las tarjetas de Work.
   Solo transform y opacity por fotograma.
   ========================================================================= */
.hero{--horizonte:36%}
.escena{position:absolute;left:0;right:0;bottom:0;height:64%;z-index:1;pointer-events:none}
.agua{position:absolute;left:0;right:0;top:var(--horizonte);bottom:0;overflow:hidden;
  background:#0c1a30 url("poster-1920.webp") 50% 0/cover no-repeat;
  /* el mar no acaba en un corte: su parte de arriba se funde con el cielo (Kevin, 13/11: «entrecorta la imagen») */
  -webkit-mask-image:linear-gradient(transparent, rgb(0 0 0/.18) 4%, rgb(0 0 0/.55) 10%, rgb(0 0 0/.88) 17%, #000 24%);
          mask-image:linear-gradient(transparent, rgb(0 0 0/.18) 4%, rgb(0 0 0/.55) 10%, rgb(0 0 0/.88) 17%, #000 24%)}
.agua__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* el video es de un lago al anochecer: se acerca un punto al azul de la web */
.agua__tinte{position:absolute;inset:0;z-index:1;background:linear-gradient(rgb(40 60 100/.28), rgb(6 16 29/.1));mix-blend-mode:soft-light}
.agua::before{content:"";position:absolute;inset:0 0 auto;height:30%;z-index:2;
  background:linear-gradient(rgb(110 135 170/.22), rgb(110 135 170/.08) 45%, rgb(110 135 170/0))}      /* bruma del horizonte */
.agua::after{content:"";position:absolute;inset:auto 0 0;height:42%;z-index:2;
  background:linear-gradient(rgb(12 24 40/0), rgb(12 24 40/.62) 70%, rgb(12 24 40/.9))}  /* el pie se lee y empalma con la seccion de abajo (#0c1828) */

/* el pie va encima del agua: en blanco tambien en escritorio */
.hero__pie{z-index:4;border-bottom-color:rgb(255 255 255/.18)}
.hero__lema{color:var(--blanco);text-shadow:0 1px 1.2rem rgb(0 0 0/.35)}
.hero__acciones .pildora--tinta{background:var(--blanco);color:var(--tinta)}
.hero__acciones .pildora--hueca{color:var(--blanco)}
.hero__acciones .hero__pausa{color:var(--blanco);border-color:rgb(255 255 255/.5)}
@media (hover:hover) and (pointer:fine){ .hero__acciones .hero__pausa:hover{border-color:var(--blanco)} }

/* el barco: capas */
.nave{position:absolute;left:0;top:0;z-index:1;opacity:0;will-change:transform,opacity;
  filter:brightness(.7) sepia(.22) hue-rotate(180deg) saturate(.9)}   /* luz de anochecer, como el mar: sin esto el casco salia mas claro que el cielo */
.nave__abajo,.nave__arriba,.nave__estela{position:absolute;inset:0}
.nave__arriba,.nave__abajo{will-change:transform}
.nave__casco,.nave__contacto,.nave__estela img{position:absolute;left:0;top:0;max-width:none}
.nave__contacto--2{animation:espuma 2.6s ease-in-out infinite alternate}
@keyframes espuma{from{opacity:0}to{opacity:1}}
.nave__reflejo{position:absolute;left:0;right:0;top:0;opacity:.42;
  /* dos mascaras: se apaga hacia abajo y se rompe en facetas de ola */
  -webkit-mask-image:linear-gradient(#000, #000 14%, rgb(0 0 0/.3) 50%, transparent 88%), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), repeating-linear-gradient(#000 0 3px, rgb(0 0 0/.84) 3px 5px, #000 5px 9px, rgb(0 0 0/.92) 9px 10px);
  -webkit-mask-composite:source-in, source-in;
          mask-image:linear-gradient(#000, #000 14%, rgb(0 0 0/.3) 50%, transparent 88%), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), repeating-linear-gradient(#000 0 3px, rgb(0 0 0/.84) 3px 5px, #000 5px 9px, rgb(0 0 0/.92) 9px 10px);
          mask-composite:intersect, intersect}
.nave__tira{position:absolute;left:0;right:0;top:0;transform:translate3d(0,var(--y,0),0);background-repeat:no-repeat;will-change:transform;
  animation:ondula calc(1.5s + var(--k) * .11s) ease-in-out calc(var(--k) * -.29s) infinite alternate}
@keyframes ondula{
  from{transform:translate3d(calc(-1.5px - var(--k) * .7px),var(--y,0),0)}
  to{transform:translate3d(calc(1.5px + var(--k) * .7px),var(--y,0),0)}}
.agua-quieta .nave__tira,.agua-quieta .nave__contacto--2{animation-play-state:paused}

@media (max-width: 52rem){
  .hero{--horizonte:30vw;padding-bottom:0}
  .agua{background-image:url("poster-640.webp")}
  /* el cielo del movil es oscuro: el agua entra desde ese tono, sin corte */
  .agua::before{height:30%;background:linear-gradient(rgb(16 28 46/.7), rgb(16 28 46/.3) 45%, rgb(16 28 46/0))}
  .agua{-webkit-mask-image:linear-gradient(transparent, rgb(0 0 0/.2) 4%, rgb(0 0 0/.6) 10%, #000 19%);
                mask-image:linear-gradient(transparent, rgb(0 0 0/.2) 4%, rgb(0 0 0/.6) 10%, #000 19%)}
  /* en flujo, donde estaba el barco; el pie se pone encima de su parte de abajo */
  .escena{position:relative;left:auto;right:auto;bottom:auto;flex:none;height:calc(100vw + 17rem);
    margin:-6vw calc(-1 * var(--margen)) 0}
  .hero__pie{position:absolute;left:var(--margen);right:var(--margen);bottom:0;margin-top:0}
  .hero__lema{color:var(--blanco)}
}
@media (prefers-reduced-motion: reduce){
  .nave__tira,.nave__contacto--2{animation:none}
}