/* =========================================================================
   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.
   ========================================================================= */
@import url("fuentes.css");

:root{
  --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.25rem, 4.2vw, 3.75rem);
  --ancho: 75rem;
  --pad-y: clamp(3.5rem, 7vw, 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)} }

/* ---------- navegacion ---------- */
.nav{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:flex-end;align-items:center;
  gap:clamp(1rem,2.4vw,2.2rem);padding:clamp(1.1rem,2.6vw,2.4rem) var(--margen);color:var(--blanco)}
.nav__enlaces{display:flex;gap:clamp(1rem,2.2vw,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,2.6vw,2.4rem);
  width:clamp(14rem,25vw,23.5rem)}
.hero__logo img{width:100%}

.hero__frase{position:absolute;left:58%;top:clamp(8rem,19vh,11.5rem);color:var(--blanco);
  font:700 var(--t-hero)/.92 var(--letra);letter-spacing:-.021em;text-wrap:balance}

/* 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,2.6vw,2.2rem);border-bottom:1px solid var(--canto);margin-bottom:clamp(1.2rem,2.4vw,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}

/* ---------- 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__frase{position:relative;left:auto;top:auto;margin-top:1.4rem}
  .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)}
}

/* ---------- 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) ----------
   5 barcos x 4 s = ciclo de 20 s. 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.00%{opacity:0.000;transform:translate3d(-26.00vw,3.50vh,0) rotate(-3.50deg)}
  0.50%{opacity:0.028;transform:translate3d(-23.64vw,3.18vh,0) rotate(-3.18deg)}
  1.00%{opacity:0.104;transform:translate3d(-21.30vw,2.87vh,0) rotate(-2.87deg)}
  1.50%{opacity:0.216;transform:translate3d(-19.02vw,2.56vh,0) rotate(-2.56deg)}
  2.00%{opacity:0.352;transform:translate3d(-16.81vw,2.26vh,0) rotate(-2.26deg)}
  2.50%{opacity:0.500;transform:translate3d(-14.70vw,1.98vh,0) rotate(-1.98deg)}
  3.00%{opacity:0.648;transform:translate3d(-12.71vw,1.71vh,0) rotate(-1.71deg)}
  3.50%{opacity:0.784;transform:translate3d(-10.85vw,1.46vh,0) rotate(-1.46deg)}
  4.00%{opacity:0.896;transform:translate3d(-9.15vw,1.23vh,0) rotate(-1.23deg)}
  4.50%{opacity:0.972;transform:translate3d(-7.60vw,1.02vh,0) rotate(-1.02deg)}
  5.00%{opacity:1.000;transform:translate3d(-6.21vw,0.84vh,0) rotate(-0.84deg)}
  5.50%{opacity:1.000;transform:translate3d(-5.00vw,0.67vh,0) rotate(-0.67deg)}
  6.00%{opacity:1.000;transform:translate3d(-3.95vw,0.53vh,0) rotate(-0.53deg)}
  6.50%{opacity:1.000;transform:translate3d(-3.05vw,0.41vh,0) rotate(-0.41deg)}
  7.00%{opacity:1.000;transform:translate3d(-2.31vw,0.31vh,0) rotate(-0.31deg)}
  7.50%{opacity:1.000;transform:translate3d(-1.70vw,0.23vh,0) rotate(-0.23deg)}
  8.00%{opacity:1.000;transform:translate3d(-1.21vw,0.16vh,0) rotate(-0.16deg)}
  8.50%{opacity:1.000;transform:translate3d(-0.82vw,0.11vh,0) rotate(-0.11deg)}
  9.00%{opacity:1.000;transform:translate3d(-0.50vw,0.07vh,0) rotate(-0.07deg)}
  9.50%{opacity:1.000;transform:translate3d(-0.24vw,0.03vh,0) rotate(-0.03deg)}
  10.00%{opacity:1.000;transform:translate3d(0.00vw,-0.00vh,0) rotate(0.00deg)}
  10.50%{opacity:1.000;transform:translate3d(0.24vw,-0.02vh,0) rotate(0.01deg)}
  11.00%{opacity:1.000;transform:translate3d(0.50vw,-0.04vh,0) rotate(0.03deg)}
  11.50%{opacity:1.000;transform:translate3d(0.82vw,-0.06vh,0) rotate(0.05deg)}
  12.00%{opacity:1.000;transform:translate3d(1.21vw,-0.09vh,0) rotate(0.07deg)}
  12.50%{opacity:1.000;transform:translate3d(1.70vw,-0.13vh,0) rotate(0.10deg)}
  13.00%{opacity:1.000;transform:translate3d(2.31vw,-0.18vh,0) rotate(0.13deg)}
  13.50%{opacity:1.000;transform:translate3d(3.05vw,-0.23vh,0) rotate(0.18deg)}
  14.00%{opacity:1.000;transform:translate3d(3.95vw,-0.30vh,0) rotate(0.23deg)}
  14.50%{opacity:1.000;transform:translate3d(5.00vw,-0.38vh,0) rotate(0.29deg)}
  15.00%{opacity:1.000;transform:translate3d(6.21vw,-0.48vh,0) rotate(0.36deg)}
  15.50%{opacity:0.972;transform:translate3d(7.60vw,-0.58vh,0) rotate(0.44deg)}
  16.00%{opacity:0.896;transform:translate3d(9.15vw,-0.70vh,0) rotate(0.53deg)}
  16.50%{opacity:0.784;transform:translate3d(10.85vw,-0.83vh,0) rotate(0.63deg)}
  17.00%{opacity:0.648;transform:translate3d(12.71vw,-0.98vh,0) rotate(0.73deg)}
  17.50%{opacity:0.500;transform:translate3d(14.70vw,-1.13vh,0) rotate(0.85deg)}
  18.00%{opacity:0.352;transform:translate3d(16.81vw,-1.29vh,0) rotate(0.97deg)}
  18.50%{opacity:0.216;transform:translate3d(19.02vw,-1.46vh,0) rotate(1.10deg)}
  19.00%{opacity:0.104;transform:translate3d(21.30vw,-1.64vh,0) rotate(1.23deg)}
  19.50%{opacity:0.028;transform:translate3d(23.64vw,-1.82vh,0) rotate(1.36deg)}
  20.00%{opacity:0.000;transform:translate3d(26.00vw,-2.00vh,0) rotate(1.50deg)}
  100%{opacity:0;transform:translate3d(26.00vw,-2.00vh,0) rotate(1.50deg)}
}
.js .pasarela--lista .pasarela__item{animation:pasarela 20s 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.00%{opacity:0.000;transform:translate3d(-40.00vw,2.00vh,0) rotate(-3.00deg)}
  0.50%{opacity:0.028;transform:translate3d(-36.37vw,1.82vh,0) rotate(-2.73deg)}
  1.00%{opacity:0.104;transform:translate3d(-32.77vw,1.64vh,0) rotate(-2.46deg)}
  1.50%{opacity:0.216;transform:translate3d(-29.26vw,1.46vh,0) rotate(-2.19deg)}
  2.00%{opacity:0.352;transform:translate3d(-25.86vw,1.29vh,0) rotate(-1.94deg)}
  2.50%{opacity:0.500;transform:translate3d(-22.62vw,1.13vh,0) rotate(-1.70deg)}
  3.00%{opacity:0.648;transform:translate3d(-19.55vw,0.98vh,0) rotate(-1.47deg)}
  3.50%{opacity:0.784;transform:translate3d(-16.70vw,0.83vh,0) rotate(-1.25deg)}
  4.00%{opacity:0.896;transform:translate3d(-14.07vw,0.70vh,0) rotate(-1.06deg)}
  4.50%{opacity:0.972;transform:translate3d(-11.69vw,0.58vh,0) rotate(-0.88deg)}
  5.00%{opacity:1.000;transform:translate3d(-9.56vw,0.48vh,0) rotate(-0.72deg)}
  5.50%{opacity:1.000;transform:translate3d(-7.69vw,0.38vh,0) rotate(-0.58deg)}
  6.00%{opacity:1.000;transform:translate3d(-6.07vw,0.30vh,0) rotate(-0.46deg)}
  6.50%{opacity:1.000;transform:translate3d(-4.70vw,0.23vh,0) rotate(-0.35deg)}
  7.00%{opacity:1.000;transform:translate3d(-3.55vw,0.18vh,0) rotate(-0.27deg)}
  7.50%{opacity:1.000;transform:translate3d(-2.62vw,0.13vh,0) rotate(-0.20deg)}
  8.00%{opacity:1.000;transform:translate3d(-1.86vw,0.09vh,0) rotate(-0.14deg)}
  8.50%{opacity:1.000;transform:translate3d(-1.26vw,0.06vh,0) rotate(-0.09deg)}
  9.00%{opacity:1.000;transform:translate3d(-0.77vw,0.04vh,0) rotate(-0.06deg)}
  9.50%{opacity:1.000;transform:translate3d(-0.37vw,0.02vh,0) rotate(-0.03deg)}
  10.00%{opacity:1.000;transform:translate3d(0.00vw,-0.00vh,0) rotate(0.00deg)}
  10.50%{opacity:1.000;transform:translate3d(0.37vw,-0.01vh,0) rotate(0.01deg)}
  11.00%{opacity:1.000;transform:translate3d(0.77vw,-0.02vh,0) rotate(0.03deg)}
  11.50%{opacity:1.000;transform:translate3d(1.26vw,-0.03vh,0) rotate(0.05deg)}
  12.00%{opacity:1.000;transform:translate3d(1.86vw,-0.05vh,0) rotate(0.07deg)}
  12.50%{opacity:1.000;transform:translate3d(2.62vw,-0.07vh,0) rotate(0.10deg)}
  13.00%{opacity:1.000;transform:translate3d(3.55vw,-0.09vh,0) rotate(0.13deg)}
  13.50%{opacity:1.000;transform:translate3d(4.70vw,-0.12vh,0) rotate(0.18deg)}
  14.00%{opacity:1.000;transform:translate3d(6.07vw,-0.15vh,0) rotate(0.23deg)}
  14.50%{opacity:1.000;transform:translate3d(7.69vw,-0.19vh,0) rotate(0.29deg)}
  15.00%{opacity:1.000;transform:translate3d(9.56vw,-0.24vh,0) rotate(0.36deg)}
  15.50%{opacity:0.972;transform:translate3d(11.69vw,-0.29vh,0) rotate(0.44deg)}
  16.00%{opacity:0.896;transform:translate3d(14.07vw,-0.35vh,0) rotate(0.53deg)}
  16.50%{opacity:0.784;transform:translate3d(16.70vw,-0.42vh,0) rotate(0.63deg)}
  17.00%{opacity:0.648;transform:translate3d(19.55vw,-0.49vh,0) rotate(0.73deg)}
  17.50%{opacity:0.500;transform:translate3d(22.62vw,-0.57vh,0) rotate(0.85deg)}
  18.00%{opacity:0.352;transform:translate3d(25.86vw,-0.65vh,0) rotate(0.97deg)}
  18.50%{opacity:0.216;transform:translate3d(29.26vw,-0.73vh,0) rotate(1.10deg)}
  19.00%{opacity:0.104;transform:translate3d(32.77vw,-0.82vh,0) rotate(1.23deg)}
  19.50%{opacity:0.028;transform:translate3d(36.37vw,-0.91vh,0) rotate(1.36deg)}
  20.00%{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,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,6vw,5.5rem);border-top:1px solid var(--canto)}
.razon{padding:clamp(1.5rem,3vw,2.4rem) clamp(1rem,3vw,2.4rem) clamp(1.8rem,3.4vw,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,3vw,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,3vw,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}
.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(.75rem,1.4vw,1.25rem)}
.tarjeta{display:flex;flex-direction:column;min-height:clamp(22rem,34vw,29rem);padding:clamp(1.5rem,2.6vw,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,16vw,15rem);gap:clamp(.5rem,1vw,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,2vw,1.75rem);margin-top:clamp(3rem,6vw,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(2rem,6vw,6rem);align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem clamp(1rem,2.4vw,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,10vw,8rem);display:flex;flex-direction:column;align-items:flex-start;gap:2rem}

/* pie */
.pie{background:var(--tinta);color:var(--blanco);padding-block:clamp(3rem,6vw,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)} }
.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,3vw,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(2rem,6vw,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,4vw,3.4rem);overflow:hidden;border-top:1px solid var(--canto);padding-top:clamp(1.8rem,4vw,3rem)}
.cinta::before,.cinta::after{content:"";position:absolute;top:0;bottom:0;width:clamp(1.5rem,7vw,6rem);z-index:2;pointer-events:none}
.cinta::before{left:0;background:linear-gradient(90deg,var(--blanco),rgba(255,255,255,0))}
.cinta::after{right:0;background:linear-gradient(270deg,var(--blanco),rgba(255,255,255,0))}
.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{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{border-color:var(--tinta)}
.cinta__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,18vw,13.5rem);margin-right:clamp(1.4rem,4vw,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,2.5vw,1.7rem);font-size:var(--t-cuerpo);color:var(--ceniza)}
.equipo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);margin-top:clamp(2.4rem,5vw,3.6rem)}
.equipo__item{border-left:2px solid var(--oro);padding-left:1.1rem}
.equipo__foto{width:100%;height:clamp(10.5rem,21vw,15.5rem);object-fit:contain;object-position:left bottom;display:block;margin-bottom:clamp(.9rem,2vw,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 cubic-bezier(.16,1,.3,1)}
.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.5rem,4vw,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(.6rem,1.2vw,1rem);
  height:clamp(26rem,42vw,36rem);overflow:hidden;border-radius:1rem}
.prep__marco::before,.prep__marco::after{content:"";position:absolute;left:0;right:0;height:3.5rem;z-index:2;pointer-events:none}
.prep__marco::before{top:0;background:linear-gradient(180deg,var(--blanco),rgba(255,255,255,0))}
.prep__marco::after{bottom:0;background:linear-gradient(0deg,var(--blanco),rgba(255,255,255,0))}
.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(.6rem,1.2vw,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}
}