/* =========================================================================
   JB YACHT & AIRCRAFT REFINISH · v2 · 16/09/2026
   REFERENCIA: Hyer Aviation (flyhyer.com), medida con destilador + ficha Refero.
   Lo que se toma de Hyer: lienzo blanco, UNA grotesca a 700 con tracking muy
   negativo, frases cortas con punto final, UN objeto recortado flotando sobre
   cielo, botones pildora, rejillas con filete fino, bandas casi negras y UNA
   sola tarjeta de color por pagina.
   Lo que es de JB: el logo dorado (grande, arriba a la izquierda, decision de
   Kevin), el dorado del logo como unico acento, el cielo de crepusculo (para que
   el dorado no se lave) y la linea de flotacion, que ahora cruza la pantalla a
   la altura de la franja dorada del casco.
   Letra: Helvetica Now Display (de pago) -> Schibsted Grotesk.
   ========================================================================= */
/* fuentes.css va con su propio <link> en el HTML (13/11/2026, LCP) */

:root{--muelle:linear(0, 0.0556 2.5%, 0.1813 5%, 0.3326 7.5%, 0.4827 10%, 0.6168 12.5%, 0.7288 15%, 0.8173 17.5%, 0.8841 20%, 0.9323 22.5%, 0.9654 25%, 0.987 27.5%, 1.0001 30%, 1.0073 32.5%, 1.0104 35%, 1.0111 37.5%, 1.0104 40%, 1.0089 42.5%, 1.0072 45%, 1.0056 47.5%, 1.0041 50%, 1.0029 52.5%, 1.0019 55%, 1.0012 57.5%, 1.0007 60%, 1.0003 62.5%, 1.0001 65%, 1 67.5%, 0.9999 70%, 0.9999 72.5%, 0.9999 75%, 0.9999 77.5%, 0.9999 80%, 0.9999 82.5%, 0.9999 85%, 1 87.5%, 1 90%, 1 92.5%, 1 95%, 1 97.5%, 1);
  --tinta:   #0a0d12;   /* Hyer Deep Ink #000d10, neutralizado */
  --blanco:  #ffffff;
  --ceniza:  #6b6b73;   /* Hyer Cool Ash #8e8e95 no llega a AA sobre blanco */
  --canto:   #d5d3d4;   /* Hyer Pebble: filetes */
  --noche:   #0e1018;   /* bandas oscuras (Hyer Midnight Hull, sin el azul) */
  --cubierta:#151823;
  --oro:     #c9a24d;   /* el dorado del logo: acento UNICO, una vez por pagina */
  --crepusculo:#06101d;
  --oro-texto:#7f6120;  /* el dorado como TEXTO sobre blanco: #c9a24d da 2,4:1 */

  --letra: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --t-cuerpo: clamp(1.0625rem, 1rem + .2vw, 1.125rem);   /* 17-18 px, 1.61 */
  --t-sub:    clamp(1.25rem, 1.1rem + .5vw, 1.4375rem);   /* 23 */
  --t-h3:     clamp(1.5rem, 1.2rem + 1vw, 2.3125rem);     /* 37 */
  --t-h2:     clamp(2.1rem, 1.3rem + 2.6vw, 3.9375rem);   /* 63 */
  --t-hero:   clamp(2.6rem, 1.2rem + 3.8vw, 4.25rem);     /* 60-68 */
  --t-gigante:clamp(3.4rem, 1rem + 8.2vw, 8.1875rem);     /* 131 */

  --margen: clamp(1.5rem, 1.12rem + 2.92vw, 3.75rem);
  --ancho: 75rem;
  --pad-y: clamp(3.5rem, 1.89rem + 4.9vw, 6.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanco);color:var(--tinta);
  font:400 var(--t-cuerpo)/1.61 var(--letra);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
a{color:inherit}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--oro);outline-offset:3px}
a,button,input,select,textarea,label{touch-action:manipulation}

.saltar{position:absolute;left:var(--margen);top:0;z-index:99;transform:translateY(-140%);
  background:var(--blanco);color:var(--tinta);padding:.7rem 1.1rem;font-weight:700;border-radius:999px;
  text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.saltar:focus{transform:translateY(.75rem)}
main:focus{outline:none}

/* ---------- pildoras (Hyer: 1000px, 15/22/16, 17px 700) ---------- */
.pildora{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;
  padding:.9375rem 1.375rem 1rem;border-radius:999px;font:700 1.0625rem/1 var(--letra);
  letter-spacing:-.005em;text-decoration:none;white-space:nowrap;border:1px solid transparent;
  transition:transform .3s cubic-bezier(.4,0,.2,1), background-color .3s, color .3s}
.pildora--tinta{background:var(--tinta);color:var(--blanco)}
.pildora--blanca{background:var(--blanco);color:var(--tinta)}
.pildora--hueca{background:transparent;color:currentColor;border-color:currentColor}
@media (hover:hover) and (pointer:fine){ .pildora:hover{transform:translateY(-2px)} }
/* enviando (06/10): el botón del formulario queda bloqueado hasta que termina la copia al CRM */
.pildora:disabled,.pildora[aria-busy=true]{opacity:.6;cursor:progress;transform:none}

/* ---------- navegacion ---------- */
.nav{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:flex-end;align-items:center;
  gap:clamp(1rem, 0.65rem + 1.68vw, 2.2rem);padding:clamp(1.1rem, 0.7rem + 1.82vw, 2.4rem) var(--margen);color:var(--blanco)}
.nav__enlaces{display:flex;gap:clamp(1rem, 0.59rem + 1.54vw, 2rem)}
.nav__enlaces a{font-size:1.25rem;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){ .nav__enlaces a:hover{text-decoration:underline;text-underline-offset:.3em} }
.nav .idioma{min-width:48px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:max(100svh, 46rem);overflow:hidden;background:var(--crepusculo);isolation:isolate}
.hero__cielo{position:absolute;inset:0;z-index:-1}
.hero__cielo img{width:100%;height:100%;object-fit:cover}

.hero__logo{position:absolute;left:var(--margen);top:clamp(1rem, 0.7rem + 1.82vw, 2.4rem);
  width:clamp(14rem, 6.75rem + 17.5vw, 23.5rem)}
.hero__logo img{width:100%}


/* el objeto flota; la linea de flotacion pasa POR DETRAS, a la altura de su franja dorada */
.hero__objeto{position:absolute;left:50%;bottom:clamp(6.5rem,15vh,9rem);z-index:1;
  width:min(64vw,60rem);transform:translateX(-41%)}
.hero__objeto img{display:block}
.linea{position:absolute;left:-100vw;right:-100vw;height:1px;background:var(--oro);z-index:0}
.hero__objeto .linea{top:var(--franja, 70.5%)}
.linea__rotulo{position:absolute;right:calc(100vw - var(--margen) - 28rem);top:.6rem;
  font:700 .6875rem/1 var(--letra);letter-spacing:.24em;text-transform:uppercase;color:var(--tinta)}  /* sobre el cielo claro: en blanco daba 2,4:1 */

.hero__pie{position:absolute;left:var(--margen);right:var(--margen);bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  padding-bottom:clamp(1.2rem, 0.66rem + 1.71vw, 2.2rem);border-bottom:1px solid var(--canto);margin-bottom:clamp(1.2rem, 0.65rem + 1.68vw, 2.2rem)}
.hero__lema{max-width:28ch;font-size:1.0625rem;line-height:1.35;font-weight:700;color:var(--tinta)}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.625rem}
/* pausa del hero (05/10, WCAG 2.2.2): fotos del titular y pasarela de barcos; discreta, despues de los dos botones */
.hero__acciones .hero__pausa{margin-left:0;min-width:44px;justify-content:center;border-color:rgb(10 13 18/.35)}
.pasarela--quieta .pasarela__item,.pasarela--quieta .objeto__flota{animation-play-state:paused !important}

/* ---------- movil: en flujo, sobre el cielo vertical ---------- */
@media (max-width: 52rem){
  .nav{position:absolute;padding:1rem var(--margen)}
  .nav__enlaces{display:none}
  .hero{min-height:auto;display:flex;flex-direction:column;padding:5rem var(--margen) 0}
  .hero__logo{position:relative;left:auto;top:auto;width:min(64vw,19rem);margin:0 auto}
  .hero__objeto{position:relative;left:auto;bottom:auto;transform:none;width:124%;margin:1.2rem -12% 0}
  .linea__rotulo{display:none}
  .hero__pie{position:relative;left:auto;right:auto;flex-direction:column;align-items:flex-start;
    border-bottom-color:rgb(255 255 255/.28);margin:1.3rem 0 0;padding-bottom:2rem}
  .hero__lema{color:rgb(255 255 255/.86);font-weight:400}
  .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)}
}

/* ---------- entrada (recreada de Hyer, medida en video) ----------
   Hyer: la frase aparece por fundido, luego el nombre y la escena, luego los botones,
   y el jet nunca se queda quieto (deriva y balanceo lento). Aqui el objeto ENTRA
   deslizandose desde la izquierda y despues flota. Solo transform y opacity, en CSS.
   Se activa con la clase .js: sin JavaScript todo se ve quieto desde el primer momento. */
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes desliza{
  from{opacity:0;transform:translate3d(-26vw, 3.5vh, 0) rotate(-3.5deg)}
  35%{opacity:1}
  to{opacity:1;transform:none}
}
@keyframes flota{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(-.55%, -1.1%, 0) rotate(-.45deg)}
}
@keyframes dibuja{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.js .entra{animation:aparece .9s cubic-bezier(.4,0,.2,1) var(--espera,0s) both}
.js .objeto__desliza{animation:desliza 1.9s cubic-bezier(.16,1,.3,1) .25s both; will-change:transform}
.js .objeto__flota{animation:flota 7s ease-in-out 2.15s infinite; transform-origin:60% 60%}
.js .linea--dibuja{transform-origin:50% 50%; animation:dibuja 1.6s cubic-bezier(.16,1,.3,1) .55s both}

@media (max-width: 52rem){
  @keyframes desliza{
    from{opacity:0;transform:translate3d(-40vw, 2vh, 0) rotate(-3deg)}
    35%{opacity:1}
    to{opacity:1;transform:none}
  }
}
@media (prefers-reduced-motion: reduce){
  .entra,.objeto__desliza,.objeto__flota,.linea--dibuja{animation:none}
}


/* ---------- pasarela del hero (16/09, v2: fluida) ----------
   7 barcos x 4 s = ciclo de 28 s (04/10; antes 5 x 4 = 20 s: los % de los keyframes se reescalaron x20/28). NUNCA hay dos barcos a la vez (Kevin, 16/09): cada uno ocupa su
   ventana de 4 s: 1 s de fundido de entrada, 2 s visible, 1 s de fundido de salida. Relevo de 2 s seguido.
   Movimiento CONTINUO: x(u) = u + K*sin(2*pi*u)/(2*pi). Entra rapido, cruza despacio SIN pararse y
   acelera al salir: la velocidad nunca salta (la version anterior frenaba a 0 y arrancaba, y eso se
   veia como tiron). Keyframes densos con timing lineal, generados por herramientas: no editarlos a mano.
   No arranca hasta que las 5 imagenes estan descodificadas (clase .pasarela--lista, JS al final):
   en frio habia un fotograma de 216 ms justo cuando entraba el primer barco.
   Solo transform y opacity. Sin JS o con movimiento reducido: el yate quieto. */
.hero__objeto{container-type:inline-size;aspect-ratio:1515/989}
.pasarela{position:absolute;inset:0;z-index:1}
.pasarela__item{position:absolute;width:calc(var(--ancho) * 100%);left:calc(50% - var(--ancho) * 50%);
  top:calc(var(--franja, 78%) - var(--fr) * var(--r) * var(--ancho) * 100cqw)}
.pasarela__item img{width:100%}
.pasarela__item:not(:first-child){opacity:0}
.js .pasarela__item{opacity:0}
@keyframes pasarela{
  0.000%{opacity:0.000;transform:translate3d(-26.00vw,3.50vh,0) rotate(-3.50deg)}
  0.357%{opacity:0.024;transform:translate3d(-23.64vw,3.18vh,0) rotate(-3.18deg)}
  0.714%{opacity:0.095;transform:translate3d(-21.31vw,2.87vh,0) rotate(-2.87deg)}
  1.071%{opacity:0.206;transform:translate3d(-19.03vw,2.56vh,0) rotate(-2.56deg)}
  1.429%{opacity:0.345;transform:translate3d(-16.82vw,2.26vh,0) rotate(-2.26deg)}
  1.786%{opacity:0.500;transform:translate3d(-14.71vw,1.98vh,0) rotate(-1.98deg)}
  2.143%{opacity:0.655;transform:translate3d(-12.73vw,1.71vh,0) rotate(-1.71deg)}
  2.500%{opacity:0.794;transform:translate3d(-10.87vw,1.46vh,0) rotate(-1.46deg)}
  2.857%{opacity:0.905;transform:translate3d(-9.16vw,1.23vh,0) rotate(-1.23deg)}
  3.214%{opacity:0.976;transform:translate3d(-7.62vw,1.03vh,0) rotate(-1.03deg)}
  3.571%{opacity:1.000;transform:translate3d(-6.23vw,0.84vh,0) rotate(-0.84deg)}
  3.929%{opacity:1.000;transform:translate3d(-4.99vw,0.68vh,0) rotate(-0.68deg)}
  4.286%{opacity:1.000;transform:translate3d(-3.87vw,0.53vh,0) rotate(-0.53deg)}
  4.643%{opacity:1.000;transform:translate3d(-2.91vw,0.41vh,0) rotate(-0.41deg)}
  5.000%{opacity:1.000;transform:translate3d(-2.12vw,0.31vh,0) rotate(-0.31deg)}
  5.357%{opacity:1.000;transform:translate3d(-1.49vw,0.23vh,0) rotate(-0.23deg)}
  5.714%{opacity:1.000;transform:translate3d(-1.00vw,0.16vh,0) rotate(-0.16deg)}
  6.071%{opacity:1.000;transform:translate3d(-0.63vw,0.11vh,0) rotate(-0.11deg)}
  6.429%{opacity:1.000;transform:translate3d(-0.36vw,0.07vh,0) rotate(-0.07deg)}
  6.786%{opacity:1.000;transform:translate3d(-0.15vw,0.03vh,0) rotate(-0.03deg)}
  7.143%{opacity:1.000;transform:translate3d(0.00vw,-0.00vh,0) rotate(0.00deg)}
  7.500%{opacity:1.000;transform:translate3d(0.12vw,0.01vh,0) rotate(0.01deg)}
  7.857%{opacity:1.000;transform:translate3d(0.23vw,0.02vh,0) rotate(0.03deg)}
  8.214%{opacity:1.000;transform:translate3d(0.32vw,0.03vh,0) rotate(0.05deg)}
  8.571%{opacity:1.000;transform:translate3d(0.41vw,0.05vh,0) rotate(0.07deg)}
  8.929%{opacity:1.000;transform:translate3d(0.49vw,0.07vh,0) rotate(0.10deg)}
  9.286%{opacity:1.000;transform:translate3d(0.56vw,0.09vh,0) rotate(0.13deg)}
  9.643%{opacity:1.000;transform:translate3d(0.63vw,0.12vh,0) rotate(0.18deg)}
  10.000%{opacity:1.000;transform:translate3d(0.70vw,0.15vh,0) rotate(0.23deg)}
  10.357%{opacity:1.000;transform:translate3d(0.80vw,0.19vh,0) rotate(0.29deg)}
  10.714%{opacity:1.000;transform:translate3d(0.96vw,0.24vh,0) rotate(0.36deg)}
  11.071%{opacity:0.976;transform:translate3d(1.17vw,0.29vh,0) rotate(0.44deg)}
  11.429%{opacity:0.905;transform:translate3d(1.41vw,0.35vh,0) rotate(0.53deg)}
  11.786%{opacity:0.794;transform:translate3d(1.67vw,0.42vh,0) rotate(0.63deg)}
  12.143%{opacity:0.655;transform:translate3d(1.96vw,0.49vh,0) rotate(0.73deg)}
  12.500%{opacity:0.500;transform:translate3d(2.26vw,0.57vh,0) rotate(0.85deg)}
  12.857%{opacity:0.345;transform:translate3d(2.59vw,0.65vh,0) rotate(0.97deg)}
  13.214%{opacity:0.206;transform:translate3d(2.93vw,0.73vh,0) rotate(1.10deg)}
  13.571%{opacity:0.095;transform:translate3d(3.28vw,0.82vh,0) rotate(1.23deg)}
  13.929%{opacity:0.024;transform:translate3d(3.64vw,0.91vh,0) rotate(1.36deg)}
  14.286%{opacity:0.000;transform:translate3d(4.00vw,1.00vh,0) rotate(1.50deg)}
    100%{opacity:0.000;transform:translate3d(4.00vw,1.00vh,0) rotate(1.50deg)}
}
.js .pasarela--lista .pasarela__item{animation:pasarela 28s linear calc(var(--i) * 4s) infinite both;will-change:transform,opacity}
.js .pasarela__item .objeto__flota{animation:flota 7s ease-in-out calc(var(--i) * -1.4s) infinite;transform-origin:60% 60%}
@media (max-width: 52rem){
  @keyframes pasarela{
  0.000%{opacity:0.000;transform:translate3d(-40.00vw,2.00vh,0) rotate(-3.00deg)}
  0.357%{opacity:0.028;transform:translate3d(-36.37vw,1.82vh,0) rotate(-2.73deg)}
  0.714%{opacity:0.104;transform:translate3d(-32.77vw,1.64vh,0) rotate(-2.46deg)}
  1.071%{opacity:0.216;transform:translate3d(-29.26vw,1.46vh,0) rotate(-2.19deg)}
  1.429%{opacity:0.352;transform:translate3d(-25.86vw,1.29vh,0) rotate(-1.94deg)}
  1.786%{opacity:0.500;transform:translate3d(-22.62vw,1.13vh,0) rotate(-1.70deg)}
  2.143%{opacity:0.648;transform:translate3d(-19.55vw,0.98vh,0) rotate(-1.47deg)}
  2.500%{opacity:0.784;transform:translate3d(-16.70vw,0.83vh,0) rotate(-1.25deg)}
  2.857%{opacity:0.896;transform:translate3d(-14.07vw,0.70vh,0) rotate(-1.06deg)}
  3.214%{opacity:0.972;transform:translate3d(-11.69vw,0.58vh,0) rotate(-0.88deg)}
  3.571%{opacity:1.000;transform:translate3d(-9.56vw,0.48vh,0) rotate(-0.72deg)}
  3.929%{opacity:1.000;transform:translate3d(-7.69vw,0.38vh,0) rotate(-0.58deg)}
  4.286%{opacity:1.000;transform:translate3d(-6.07vw,0.30vh,0) rotate(-0.46deg)}
  4.643%{opacity:1.000;transform:translate3d(-4.70vw,0.23vh,0) rotate(-0.35deg)}
  5.000%{opacity:1.000;transform:translate3d(-3.55vw,0.18vh,0) rotate(-0.27deg)}
  5.357%{opacity:1.000;transform:translate3d(-2.62vw,0.13vh,0) rotate(-0.20deg)}
  5.714%{opacity:1.000;transform:translate3d(-1.86vw,0.09vh,0) rotate(-0.14deg)}
  6.071%{opacity:1.000;transform:translate3d(-1.26vw,0.06vh,0) rotate(-0.09deg)}
  6.429%{opacity:1.000;transform:translate3d(-0.77vw,0.04vh,0) rotate(-0.06deg)}
  6.786%{opacity:1.000;transform:translate3d(-0.37vw,0.02vh,0) rotate(-0.03deg)}
  7.143%{opacity:1.000;transform:translate3d(0.00vw,-0.00vh,0) rotate(0.00deg)}
  7.500%{opacity:1.000;transform:translate3d(0.37vw,-0.01vh,0) rotate(0.01deg)}
  7.857%{opacity:1.000;transform:translate3d(0.77vw,-0.02vh,0) rotate(0.03deg)}
  8.214%{opacity:1.000;transform:translate3d(1.26vw,-0.03vh,0) rotate(0.05deg)}
  8.571%{opacity:1.000;transform:translate3d(1.86vw,-0.05vh,0) rotate(0.07deg)}
  8.929%{opacity:1.000;transform:translate3d(2.62vw,-0.07vh,0) rotate(0.10deg)}
  9.286%{opacity:1.000;transform:translate3d(3.55vw,-0.09vh,0) rotate(0.13deg)}
  9.643%{opacity:1.000;transform:translate3d(4.70vw,-0.12vh,0) rotate(0.18deg)}
  10.000%{opacity:1.000;transform:translate3d(6.07vw,-0.15vh,0) rotate(0.23deg)}
  10.357%{opacity:1.000;transform:translate3d(7.69vw,-0.19vh,0) rotate(0.29deg)}
  10.714%{opacity:1.000;transform:translate3d(9.56vw,-0.24vh,0) rotate(0.36deg)}
  11.071%{opacity:0.972;transform:translate3d(11.69vw,-0.29vh,0) rotate(0.44deg)}
  11.429%{opacity:0.896;transform:translate3d(14.07vw,-0.35vh,0) rotate(0.53deg)}
  11.786%{opacity:0.784;transform:translate3d(16.70vw,-0.42vh,0) rotate(0.63deg)}
  12.143%{opacity:0.648;transform:translate3d(19.55vw,-0.49vh,0) rotate(0.73deg)}
  12.500%{opacity:0.500;transform:translate3d(22.62vw,-0.57vh,0) rotate(0.85deg)}
  12.857%{opacity:0.352;transform:translate3d(25.86vw,-0.65vh,0) rotate(0.97deg)}
  13.214%{opacity:0.216;transform:translate3d(29.26vw,-0.73vh,0) rotate(1.10deg)}
  13.571%{opacity:0.104;transform:translate3d(32.77vw,-0.82vh,0) rotate(1.23deg)}
  13.929%{opacity:0.028;transform:translate3d(36.37vw,-0.91vh,0) rotate(1.36deg)}
  14.286%{opacity:0.000;transform:translate3d(40.00vw,-1.00vh,0) rotate(1.50deg)}
    100%{opacity:0;transform:translate3d(40.00vw,-1.00vh,0) rotate(1.50deg)}
  }
}
@media (prefers-reduced-motion: reduce){
  .js .pasarela__item:first-child{opacity:1}
  .js .pasarela--lista .pasarela__item,.js .pasarela__item .objeto__flota{animation:none}
}

/* =========================================================================
   RESTO DE LA PAGINA (16/09) · Hyer: frase grande + rejilla 2x2, triptico con UNA
   tarjeta de color, banda oscura con fotos, titular gigante, cierre sobre cielo.
   ========================================================================= */
.envoltorio{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--margen)}
.bloque{padding-block:var(--pad-y)}
:where(ul,ol)[role=list]{list-style:none;margin:0;padding:0}

.antetitulo{display:flex;align-items:center;gap:.6em;font-size:1rem;font-weight:700;color:var(--ceniza);margin-bottom:1.1rem}
.antetitulo::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--oro)}
.titular{font:700 var(--t-h2)/1.02 var(--letra);letter-spacing:-.028em;text-wrap:balance;max-width:20ch}
.cabeza{margin-bottom:clamp(2.5rem, 1.35rem + 3.5vw, 4.5rem)}
.cabeza__texto{max-width:44ch;margin-top:1.3rem;color:var(--ceniza);font-size:var(--t-sub);line-height:1.45}
.cabeza--clara .antetitulo,.cabeza--clara .cabeza__texto{color:rgb(255 255 255/.66)}

/* 1 · declaracion */
.declaracion__frase{font:700 var(--t-h2)/1.05 var(--letra);letter-spacing:-.028em;max-width:22ch;text-wrap:balance}
.razones{display:grid;grid-template-columns:repeat(2,1fr);margin-top:clamp(3rem, 1.62rem + 4.2vw, 5.5rem);border-top:1px solid var(--canto)}
.razon{padding:clamp(1.5rem, 0.72rem + 1.87vw, 2.4rem) clamp(1rem, 0.72rem + 1.87vw, 2.4rem) clamp(1.8rem, 0.84rem + 2.18vw, 2.8rem) 0;border-bottom:1px solid var(--canto)}
.razon:nth-child(odd){border-right:1px solid var(--canto)}
.razon:nth-child(even){padding-left:clamp(1rem, 0.72rem + 1.87vw, 2.4rem)}
.razon__t{font:700 var(--t-h3)/1.1 var(--letra);letter-spacing:-.02em;margin-bottom:.8rem}
.razon p{color:var(--ceniza);max-width:40ch}

/* 2 · la flota */
.flota{overflow:clip;padding-bottom:calc(var(--pad-y) * .6)}
.barco{view-timeline-name:--barco;display:grid;grid-template-columns:repeat(12,1fr);align-items:center;
  gap:var(--margen);max-width:calc(var(--ancho) + 12rem);margin-inline:auto;padding:clamp(1rem, 0.75rem + 1.94vw, 2.5rem) var(--margen)}
.barco__escena{grid-column:1 / span 6;position:relative}
.barco__texto{grid-column:8 / span 4;border-top:1px solid var(--canto);padding-top:1.2rem}
.barco--der .barco__escena{grid-column:7 / span 6;order:2}
.barco--der .barco__texto{grid-column:2 / span 4;order:1}
.barco__escena img{position:relative;z-index:1;width:100%}
.barco--alto .barco__escena picture{display:block;width:58%;margin-inline:auto}
/* el superyate es el mas grande de la flota (Kevin, 01/10): su escena ocupa 8 columnas en vez de 6 */
@media (min-width: 52.01rem){
  .barco--grande .barco__escena{grid-column:1 / span 8}
  .barco--grande .barco__texto{grid-column:9 / span 4}
  .barco--grande.barco--der .barco__escena{grid-column:5 / span 8}
  .barco--grande.barco--der .barco__texto{grid-column:1 / span 4}
  /* arriba, para que la linea dorada (a la altura de la franja del casco) no cruce el texto */
  .barco--grande .barco__texto{align-self:start;margin-top:clamp(1rem, 4vw, 4rem)}
}
.barco__linea{top:var(--franja,74%)}
.barco__num{font-weight:700;color:var(--oro-texto);margin-bottom:.4rem}
.barco__t{font:700 var(--t-h3)/1.05 var(--letra);letter-spacing:-.022em;margin-bottom:.7rem}
.barco__texto p:last-child{color:var(--ceniza)}

/* 3 · servicios */
.triptico{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(0.75rem, 0.38rem + 0.97vw, 1.25rem)}
.tarjeta{display:flex;flex-direction:column;min-height:clamp(22rem, 8.7rem + 22.56vw, 29rem);padding:clamp(1.5rem, 0.67rem + 1.76vw, 2.25rem);
  border:1px solid var(--canto);border-radius:1.25rem;background:var(--blanco)}
.tarjeta__num{font-weight:700;margin-bottom:auto;padding-bottom:3rem}
.tarjeta__t{font:700 var(--t-h3)/1.05 var(--letra);letter-spacing:-.022em;margin-bottom:.7rem}
.tarjeta > p:not(.tarjeta__num){color:var(--ceniza);max-width:30ch}
.tarjeta__lista{margin-top:1.6rem}
.tarjeta__lista li{padding:.7rem 0;border-top:1px solid var(--canto);font-weight:700;font-size:1rem}
.tarjeta--oro{background:var(--oro);border-color:var(--oro)}
.tarjeta--oro > p:not(.tarjeta__num){color:rgb(10 13 18/.78)}
.tarjeta--oro .tarjeta__lista li{border-top-color:rgb(10 13 18/.25)}
.tarjeta--noche{background:var(--noche);border-color:var(--noche);color:var(--blanco)}
.tarjeta--noche > p:not(.tarjeta__num){color:rgb(255 255 255/.66)}
.tarjeta--noche .tarjeta__lista li{border-top-color:rgb(255 255 255/.18)}

/* 4 · banda oscura */
.banda{background:var(--noche);color:var(--blanco)}
.galeria{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(10rem, 4.32rem + 11.2vw, 15rem);gap:clamp(0.5rem, 0.27rem + 0.7vw, 1rem)}
.galeria__foto{margin:0;grid-column:span 6;grid-row:span 2;border-radius:1rem;overflow:hidden;background:var(--cubierta)}
.galeria__foto--alta{grid-column:span 3}
.galeria__foto picture,.galeria__foto img{width:100%;height:100%}
.galeria__foto img{object-fit:cover}

/* 5 · proceso */
.gigante{font:700 var(--t-gigante)/.92 var(--letra);letter-spacing:-.04em;text-wrap:balance}
.gigante__gris{color:var(--ceniza)}
.etapas{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem, 0.53rem + 1.36vw, 1.75rem);margin-top:clamp(3rem, 1.62rem + 4.2vw, 5.5rem)}
.etapa{border-top:1px solid var(--tinta);padding-top:1.1rem}
.etapa__num{display:block;font-weight:700;color:var(--oro-texto);margin-bottom:2.2rem}
.etapa__t{font:700 var(--t-sub)/1.15 var(--letra);letter-spacing:-.015em;margin-bottom:.6rem}
.etapa p{color:var(--ceniza);font-size:1rem;line-height:1.5}

/* 6 · presupuesto */
.presupuesto{background:var(--tinta);color:var(--blanco)}
.presupuesto__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2.4rem, 1.62rem + 4.2vw, 6rem);align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem clamp(1rem, 0.6rem + 1.56vw, 2rem)}
.campo{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.campo--ancho{grid-column:1 / -1}
.campo label{font-size:.9375rem;font-weight:700;color:rgb(255 255 255/.72)}
.campo input,.campo select,.campo textarea{width:100%;min-height:48px;padding:.6rem 0;font:400 1.0625rem/1.4 var(--letra);color:var(--blanco);
  background:transparent;border:0;border-bottom:1px solid rgb(255 255 255/.3);border-radius:0;transition:border-color .3s}
.campo select{appearance:none;background:linear-gradient(45deg,transparent 50%,#fff 50%) right 6px center/6px 6px no-repeat,
  linear-gradient(-45deg,transparent 50%,#fff 50%) right 0 center/6px 6px no-repeat;padding-right:1.5rem}
.campo select option{color:var(--tinta)}
.campo textarea{resize:vertical;min-height:7rem}
.campo input::placeholder,.campo textarea::placeholder{color:rgb(255 255 255/.4)}
.campo :is(input,select,textarea):focus-visible{outline:none;border-bottom-color:var(--oro)}
.campo [aria-invalid=true]{border-bottom-color:#f0a08a}
.campo__error{color:#f0a08a;font-size:.9375rem}
.campo__error:empty{display:none}
.form__pie{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:.6rem}
.form__pie button{cursor:pointer}
.campo__ayuda{font-size:.9375rem;color:rgb(255 255 255/.6);max-width:34ch}

/* 7 · cierre */
.cierre{position:relative;isolation:isolate;min-height:clamp(26rem,62vh,42rem);background:var(--crepusculo);color:var(--blanco);overflow:hidden}
.cierre__cielo{position:absolute;inset:0;z-index:-1}
.cierre__cielo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.cierre__dentro{padding-block:clamp(4rem, 2.4rem + 6.22vw, 8rem);display:flex;flex-direction:column;align-items:flex-start;gap:2rem}

/* pie */
.pie{background:var(--tinta);color:var(--blanco);padding-block:clamp(3rem, 1.5rem + 3.89vw, 5rem) 2rem}
.pie__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem var(--margen)}
.pie__marca picture{display:block;width:13rem;margin-bottom:1.2rem}
.pie__marca p{color:rgb(255 255 255/.6);max-width:34ch;font-size:1rem}
.pie__col{display:flex;flex-direction:column;align-items:flex-start}
.pie__h{font-size:1rem;color:rgb(255 255 255/.5);margin-bottom:.6rem}
.pie__col a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;font-weight:700}
@media (hover:hover) and (pointer:fine){ .pie__col a:hover{color:var(--oro)} }
@media (hover:hover) and (pointer:fine){ .pie__legal a:hover{color:var(--oro)} }   /* enlace de privacidad, 28/09 */
.pie__legal,.pie__firma{border-top:1px solid rgb(255 255 255/.14);padding-top:1.4rem;font-size:.9375rem;color:rgb(255 255 255/.55)}
.pie__legal{grid-column:1 / 3}
.pie__firma{text-align:right}
.pie__firma a{color:var(--blanco);display:inline-block;padding-block:.7rem}


/* 3b · segundo servicio: aviones (reutiliza las filas de la flota) */
.cabeza--doble{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem var(--margen);align-items:end;max-width:none}
.cabeza--doble .cabeza__texto{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.chips li{padding:.55rem 1rem;border:1px solid var(--canto);border-radius:999px;font-weight:700;font-size:.9375rem}
.flota--aire{border-top:1px solid var(--canto)}
.flota--aire .barco__escena picture{display:block;width:var(--escala,100%);margin-inline:auto}
.flota--aire .barco__linea{right:0}
.flota--aire .barco--der .barco__linea{left:0;right:-100vw}
.aire__pie{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:clamp(1.5rem, 0.75rem + 1.94vw, 2.5rem)}
@media (max-width: 52rem){ .cabeza--doble{grid-template-columns:1fr} }


/* 5b · preguntas frecuentes (details nativo: se abre sin JS y el texto esta en el HTML) */
.faq{border-top:1px solid var(--canto)}
.faq__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2.4rem, 1.62rem + 4.2vw, 6rem);align-items:start}
.faq__lista{border-top:1px solid var(--tinta)}
.pregunta{border-bottom:1px solid var(--canto)}
.pregunta summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;min-height:48px;padding:1.3rem 0;
  cursor:pointer;list-style:none;font:700 var(--t-sub)/1.25 var(--letra);letter-spacing:-.015em}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:"";flex:none;width:.75rem;height:.75rem;border-right:2px solid var(--oro-texto);border-bottom:2px solid var(--oro-texto);
  transform:translateY(-25%) rotate(45deg);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.pregunta[open] summary::after{transform:translateY(25%) rotate(-135deg)}
.pregunta p{color:var(--ceniza);max-width:58ch;padding-bottom:1.5rem}
@media (hover:hover) and (pointer:fine){ .pregunta summary:hover{color:var(--oro-texto)} }
@media (max-width: 52rem){ .faq__grid{grid-template-columns:1fr} }


/* 3a · pinturas y equipo: nombres en nuestra letra (sin logos de terceros) */
.pinturas{border-top:1px solid var(--canto)}
/* cinta de productos: bucle exacto porque cada pieza lleva su margen (con gap
   sobraria medio hueco) y la pista se mueve justo la mitad de su ancho. */
.cinta{position:relative;margin-top:clamp(2rem, 1.02rem + 2.64vw, 3.4rem);overflow:hidden;border-top:1px solid var(--canto);padding-top:clamp(1.8rem, 0.9rem + 2.33vw, 3rem)}
/* sin fundidos en los extremos (Kevin, 01/10): corte limpio en el borde del contenido */
.cinta__pista{display:flex;align-items:flex-end;width:max-content;margin:0;padding:0;
  animation:desfile 38s linear infinite}
@keyframes desfile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.cinta:hover .cinta__pista,.cinta:focus-within .cinta__pista{animation-play-state:paused}
.cinta__pausa,.hero__pausa{margin-left:.75rem;padding:.3rem 1.05rem;min-height:2.75rem;border:1px solid var(--canto);
  border-radius:999px;background:none;color:var(--tinta);font:600 .875rem/1.3 var(--letra);cursor:pointer;
  display:inline-flex;align-items:center;vertical-align:middle}
.cinta__pausa:hover,.hero__pausa:hover{border-color:var(--tinta)}
.cinta__pausa:focus-visible,.hero__pausa:focus-visible{outline:2px solid var(--oro-texto);outline-offset:2px}
.cinta--quieta .cinta__pista{animation-play-state:paused}
.producto{flex:0 0 auto;width:clamp(9rem, 4.05rem + 10.5vw, 13.5rem);margin-right:clamp(1.4rem, 1.02rem + 2.64vw, 3.4rem);text-align:center}
.producto img{width:100%;height:auto;display:block}
.producto__n{margin:.9rem 0 0;font:700 var(--t-sub)/1.15 var(--letra);letter-spacing:-.02em}
.producto__d{margin:.25rem 0 0;font-size:.875rem;line-height:1.4;color:var(--ceniza)}
.cinta__mas{margin-top:clamp(1.2rem, 0.51rem + 1.32vw, 1.7rem);font-size:var(--t-cuerpo);color:var(--ceniza)}
.equipo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem, 1.05rem + 2.72vw, 3.5rem);margin-top:clamp(2.4rem, 1.08rem + 2.8vw, 3.6rem)}
.equipo__item{border-left:2px solid var(--oro);padding-left:1.1rem}
.equipo__foto{width:100%;height:clamp(10.5rem, 4.65rem + 12.06vw, 15.5rem);object-fit:contain;object-position:left bottom;display:block;margin-bottom:clamp(0.9rem, 0.42rem + 1.09vw, 1.4rem)}
.equipo__t{font:700 var(--t-sub)/1.2 var(--letra);letter-spacing:-.015em;margin-bottom:.4rem}
.equipo__item p{color:var(--ceniza)}
.marcas__nota{margin-top:1.6rem;font-size:.875rem;color:var(--ceniza)}
@media (max-width: 52rem){
  .equipo{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .cinta{overflow-x:auto;overscroll-behavior-x:contain}
  .cinta__pista{animation:none}
  .producto[aria-hidden]{display:none}
  .cinta__pausa{display:none}
}

/* ---------- movil ---------- */
@media (max-width: 52rem){
  .razones{grid-template-columns:1fr}
  .razon,.razon:nth-child(odd),.razon:nth-child(even){padding:1.5rem 0 1.7rem;border-right:0}
  .barco{grid-template-columns:1fr;gap:1.2rem;padding-block:1.5rem 2.5rem}
  .barco__escena,.barco--der .barco__escena{grid-column:1;order:1;margin-inline:-4%}
  .barco__texto,.barco--der .barco__texto{grid-column:1;order:2}
  .triptico{grid-template-columns:1fr}
  .tarjeta{min-height:0}
  .tarjeta__num{padding-bottom:1.6rem}
  .galeria{grid-template-columns:1fr 1fr;grid-auto-rows:9.5rem}
  .galeria__foto{grid-column:span 2}
  .galeria__foto--alta{grid-column:span 1}
  .etapas{grid-template-columns:1fr;gap:0}
  .etapa{display:grid;grid-template-columns:3rem 1fr;padding:1.1rem 0 1.4rem}
  .etapa__num{margin:0;grid-row:span 2}
  .presupuesto__grid,.form{grid-template-columns:1fr}
  .pie__grid{grid-template-columns:1fr 1fr}
  .pie__marca,.pie__legal,.pie__firma{grid-column:1 / -1}
  .pie__firma{text-align:left;border-top:0;padding-top:0}
}

/* ---------- movimiento del resto ----------
   Textos: aparecen al entrar en pantalla (IntersectionObserver, sin escuchar scroll).
   Barcos: ATADOS AL SCROLL. Con scroll-driven animations (Chrome, Edge, Safari 26)
   el barco avanza desde la izquierda a medida que se baja y retrocede si se sube.
   Donde no existe (Firefox), entran una vez con transicion al aparecer. Luego flotan. */
.js .revela{opacity:0;transform:translate3d(0,1.6rem,0);transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1.1s var(--muelle)}
.js .revela.visto{opacity:1;transform:none}
.js :is(.razones,.triptico,.etapas,.galeria) .revela:nth-child(2){transition-delay:.08s}
.js :is(.razones,.triptico,.etapas,.galeria) .revela:nth-child(3){transition-delay:.16s}
.js :is(.razones,.etapas,.galeria) .revela:nth-child(4){transition-delay:.24s}
.js :is(.etapas,.galeria) .revela:nth-child(5){transition-delay:.32s}

.barco{--desde:-48vw;--giro:-4deg}
.barco--der{--desde:-30vw}
@keyframes barco-entra{
  from{opacity:0;transform:translate3d(var(--desde),6vh,0) rotate(var(--giro))}
  30%{opacity:1}
  to{opacity:1;transform:none}
}
@keyframes texto-entra{from{opacity:0;transform:translate3d(0,2rem,0)}to{opacity:1;transform:none}}
.js .barco__flota{animation:flota 8s ease-in-out infinite;transform-origin:55% 60%}
.js .barco:nth-child(2) .barco__flota{animation-delay:-2s}
.js .barco:nth-child(3) .barco__flota{animation-delay:-4s;animation-duration:9s}
.js .barco:nth-child(4) .barco__flota{animation-delay:-6s}

@supports (animation-timeline: view()){
  .js .barco__desliza{animation:barco-entra linear both;animation-timeline:--barco;animation-range:entry 0% cover 48%}
  .js .barco__texto{animation:texto-entra linear both;animation-timeline:--barco;animation-range:entry 30% cover 45%}
  .js .barco__linea{transform-origin:0 50%;animation:dibuja linear both;animation-timeline:--barco;animation-range:entry 10% cover 50%}
}
@supports not (animation-timeline: view()){
  .js .barco__desliza,.js .barco__texto{transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1.8s cubic-bezier(.16,1,.3,1)}
  .js .barco:not(.visto) .barco__desliza{opacity:0;transform:translate3d(var(--desde),6vh,0) rotate(var(--giro))}
  .js .barco:not(.visto) .barco__texto{opacity:0;transform:translate3d(0,2rem,0)}
}
@media (max-width: 52rem){ .barco,.barco--der{--desde:-70vw;--giro:-3deg} }

@media (prefers-reduced-motion: reduce){
  .js .revela{opacity:1;transform:none;transition:none}
  .js .barco__desliza,.js .barco__texto,.js .barco__linea,.js .barco__flota{animation:none !important;opacity:1 !important;transform:none !important;transition:none}
}

/* cabecera de Pinturas con la foto de obra al lado (fotos del 18/09) */
.cabeza--foto{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem, 1.08rem + 2.8vw, 4rem);align-items:center;max-width:none}
.cabeza__foto{margin:0}
.cabeza__foto img{width:100%;height:auto;display:block;border-radius:1rem;aspect-ratio:850/1080;object-fit:cover}
.cabeza__foto figcaption{margin-top:.7rem;font-size:.875rem;color:var(--ceniza)}
@media (max-width: 52rem){
  .cabeza--foto{grid-template-columns:1fr}
  .cabeza__foto img{aspect-ratio:4/3;object-position:50% 45%}
}

/* carrusel de preparación (18/09): dos columnas verticales en bucle, sentidos contrarios.
   Margen por pieza (no gap) para que la pista a -50 % cierre el bucle exacto. */
.prep{margin:0;min-width:0}
.prep__marco{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(0.6rem, 0.3rem + 0.78vw, 1rem);
  height:clamp(26rem, 10.8rem + 28vw, 36rem);overflow:hidden;border-radius:1rem}
/* sin fundidos arriba y abajo (Kevin, 01/10): el marco redondeado ya recorta las fotos limpio */
.prep__col{list-style:none;margin:0;padding:0;will-change:transform}
.prep__col--sube{animation:prep-sube 46s linear infinite}
.prep__col--baja{animation:prep-baja 52s linear infinite}
@keyframes prep-sube{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes prep-baja{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
.prep__foto{margin:0 0 clamp(0.6rem, 0.3rem + 0.78vw, 1rem)}
.prep__foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:.75rem;background:var(--canto)}
.prep:hover .prep__col,.prep:focus-within .prep__col,.prep--quieta .prep__col{animation-play-state:paused}
.prep__pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.7rem}
.prep__pie figcaption{font-size:.875rem;color:var(--ceniza)}
.prep__pausa{margin-left:0;flex:none}
@media (max-width: 52rem){
  .prep__marco{height:28rem}
}
@media (prefers-reduced-motion: reduce){
  .prep__col{animation:none}
  .prep__foto[aria-hidden]{display:none}
  .prep__marco{overflow-y:auto}
  .prep__pausa{display:none}
}
/* teléfono del cliente junto al formulario (18/09) */
.presupuesto__tel{margin-top:1.4rem;color:rgb(255 255 255/.66);font-size:var(--t-cuerpo)}
.presupuesto__tel a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--oro);text-underline-offset:.25em}
@media (hover:hover) and (pointer:fine){ .presupuesto__tel a:hover{color:var(--oro)} }
/* campo trampa del formulario: fuera de la vista y del lector de pantalla */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* carrusel de preparación en UNA columna (19/09): fotos 1:1 para ver una y media a la vez */
.prep__marco--una{grid-template-columns:1fr}
.prep__marco--una .prep__col--sube{animation-duration:62s}
.prep__marco--una .prep__foto img{aspect-ratio:1/1}
/* en móvil el carrusel no se anima: una sola columna a pantalla completa crea una capa enorme y,
   con la cinta de envases y los barcos flotando, el teléfono se queda sin memoria gráfica (QA 20/09).
   Se convierte en una tira que se desliza con el dedo. */
@media (max-width: 52rem){
  .prep__marco--una{height:auto;overflow:visible;border-radius:0}
  .prep__marco--una::before,.prep__marco--una::after{display:none}
  .prep__marco--una .prep__col{animation:none;will-change:auto;display:flex;gap:.6rem;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:.5rem}
  .prep__marco--una .prep__foto{flex:0 0 72%;margin:0;scroll-snap-align:start}
  .prep__marco--una .prep__foto[aria-hidden]{display:none}
  .prep__pausa{display:none}
}
/* capas animadas en móvil (QA 20/09, regla nueva de qa_web.py): a 390 px @3 cada barco flotando es
   una capa de 3-4 MB en la GPU. Con 6 a la vez el teléfono se queda sin memoria y los fondos
   parpadean. En el móvil se quedan quietos: la entrada y la cinta de envases siguen moviéndose. */
@media (max-width: 52rem){
  .js .objeto__flota,
  .js .pasarela__item .objeto__flota,
  .js .barco__flota{animation:none;will-change:auto}
  /* la pasarela del hero se queda quieta en el móvil y enseña UN barco (Kevin, 20/09): cinco piezas
     desfilando son cinco capas de 3-4 MB y el teléfono parpadea. En escritorio sigue igual. */
  .js .pasarela--lista .pasarela__item{animation:none;will-change:auto;opacity:0}
  .js .pasarela__item:first-child{opacity:1;transform:none}
  /* las tarjetas de Trabajos entran al hacer scroll: en el móvil son 3 capas de 3 MB a la vez.
     Aquí aparecen ya puestas; en escritorio siguen deslizándose. */
  .js .barco__desliza,.js .barco__texto,.js .barco__linea{animation:none !important;opacity:1 !important;transform:none !important}
  .js .barco:not(.visto) .barco__desliza,.js .barco:not(.visto) .barco__texto{opacity:1;transform:none}
}

/* =========================================================================
   HERO v3 · 29/09/2026 · direccion.md "La frase que se abre" (M23 + M14)
   Corriente: tipografia-producto. Sin color nuevo: los tokens de arriba.
   EL GESTO: la foto de su obra se abre entre las dos lineas del titular.
   ========================================================================= */
:root{
  --t-titular: clamp(3rem, 1.2rem + 6.4vw, 7.5rem);    /* 48 -> 111 (1440) -> 120 */
  --titular-il: .9;
  --titular-tracking: -.03em;
  --hueco-alto: clamp(8rem, 1rem + 13vw, 16rem);       /* v3b: 203 px a 1440, a todo el ancho del titular */
  --proporcion: 1.78;
  --separa: clamp(.75rem, .45rem + .9vw, 1.25rem);
  --radio-foto: 1rem;
  --sello: clamp(12rem, 4.5rem + 14.5vw, 19rem);
  --pasarela-ancho: min(38vw, 40rem);
}
.hero__logo{width:var(--sello)}
.hero__titular{position:absolute;right:var(--margen);top:max(12vh, 7rem);z-index:2;margin:0;
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;color:var(--blanco);
  font:700 var(--t-titular)/var(--titular-il) var(--letra);letter-spacing:var(--titular-tracking)}
.titular__linea{display:block;white-space:nowrap}
.titular__hueco{display:block;height:var(--hueco-alto);align-self:stretch;
  margin:var(--separa) 0;border-radius:var(--radio-foto);overflow:hidden;background:var(--cubierta)}
.titular__rollo{display:block;position:relative;width:100%;height:135%;transform-origin:50% 0}
/* carrusel (03/10): las fotos apiladas, solo cambia la opacidad */
.titular__foto{position:absolute;inset:0;opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.titular__foto.es-activa{opacity:1}
.titular__foto img{width:100%;height:100%;object-fit:cover;object-position:35% 50%;display:block}
/* con JS: las lineas arrancan juntas tapando el hueco y la foto cerrada (el JS sigue desde aqui) */
.js .titular__linea:first-child{transform:translate3d(0,calc(var(--hueco-alto) / 2 + var(--separa)),0)}
.js .titular__linea:last-child{transform:translate3d(0,calc(var(--hueco-alto) / -2 - var(--separa)),0)}
.js .titular__hueco{clip-path:inset(50% 50% round var(--radio-foto))}
.js .titular__rollo{transform:scale(1.15)}
.titular--mueve .titular__linea,.titular--mueve .titular__rollo{will-change:transform}
.titular--mueve .titular__hueco{will-change:clip-path}

.hero__objeto{left:var(--margen);width:var(--pasarela-ancho);transform:none}
.hero__lema{font-size:var(--t-sub);line-height:1.25;max-width:34ch;letter-spacing:-.01em}

@media (max-width: 52rem){
  :root{--hueco-alto:44vw;--sello:min(46vw,13rem)}
  .hero__logo{width:var(--sello)}
  .hero__titular{position:relative;right:auto;top:auto;margin-top:1.6rem;align-items:flex-start;text-align:left}
  .hero__objeto{left:auto;width:100%;margin:1.4rem 0 0}
  .hero__lema{font-size:1.1875rem;max-width:none}
}
/* movimiento reducido: se quita el movimiento, no el contenido. Con .js delante, porque
   ".js .entra" ganaba por especificidad y el sello y la linea dorada seguian animandose. */
@media (prefers-reduced-motion: reduce){
  .js .entra,.js .objeto__desliza,.js .objeto__flota,.js .linea--dibuja{animation:none}
  .js .titular__linea,.js .titular__linea:first-child,.js .titular__linea:last-child,.js .titular__rollo{transform:none}
  .js .titular__hueco{clip-path:none}
  .titular__foto{transition:none}
}

/* HERO v3b · 30/09/2026 · critico-visual: hueco a todo el ancho del titular (hero-obra, 2,5:1, gradada),
   reducido con la especificidad de las reglas que anula, pasarela que sale corta y hacia abajo. */
:root{--pasarela-ancho:min(38vw, 40rem, 58vh)}  /* en portatiles bajos el barco, ya por encima del h1, llegaba al sello */
.hero__objeto{bottom:max(clamp(6.5rem,15vh,9rem), 10.5rem)}  /* el casco del yate (sobresale 15-19 px) pisaba el h1 a 1280-1366 al cargar, cuando el h1 pasa a 2 lineas */
.hero__titular{text-shadow:0 0 2.5rem rgb(11 22 44 / .45)}      /* "in every coat." sobre el cielo claro en pantallas bajas: 2,2:1 en su 5 % mas claro */
@media (max-width: 52rem){ .hero__objeto{bottom:auto} }
@media (min-width: 52.01rem){ :root{--sello:min(clamp(12rem, 4.5rem + 14.5vw, 19rem), 32vh)} }  /* a 1280x720 y 1366x768 el mastil del velero, con el vaiven, tocaba el aro (critico-visual, 14-15 px a opacidad 1) */
@media (min-width: 52.01rem) and (max-width: 70rem){
  :root{--pasarela-ancho:min(35vw, 58vh)}   /* a 1024 el yate rozaba "en cada capa." (16 px a opacidad 0,79, medir_cruce.py) */
}