/* ═══════════════════════════════════════════════════════════════
   i3CONNECT · recorrido
   Paleta tomada del brandbook oficial:
     Saffron Blaze  #E20248 -> #F6A71B
     Purple #5100D1 · Blue #00A8FF · Magenta #E0009B · Orange #FF7300
   Ritmo de scroll amplio, tipografia grande, foto a sangre.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --saf-a:#E20248;
  --saf-b:#F6A71B;
  --saf:linear-gradient(100deg,#E20248 0%,#F6A71B 100%);
  --i3-purple:#5100D1;
  --i3-blue:#00A8FF;
  --i3-magenta:#E0009B;
  --i3-orange:#FF7300;
  --neg:#0b0b0f;
  --neg-2:#131318;
  --claro:#F3F3F3;
  --ease-j:cubic-bezier(.2,.8,.2,1);
}

/* ── tipografia del recorrido ───────────────────────────────── */
.j-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;background:var(--saf);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.j-h1{font-size:clamp(38px,7.4vw,92px);font-weight:700;line-height:1.02;
  letter-spacing:-.035em;text-wrap:balance}
.j-h2{font-size:clamp(30px,5.2vw,64px);font-weight:700;line-height:1.06;
  letter-spacing:-.032em;text-wrap:balance}
.j-h3{font-size:clamp(22px,2.6vw,34px);font-weight:700;line-height:1.14;
  letter-spacing:-.025em}
.j-lead{font-size:clamp(17px,1.8vw,21px);line-height:1.5;opacity:.72;max-width:46ch}
.j-saf{background:var(--saf);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* ── hero a sangre ──────────────────────────────────────────── */
.j-hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:flex-end;
  overflow:hidden;background:#000}
.j-hero-img{position:absolute;inset:0;background-size:cover;background-position:center 38%;
  transform:scale(1.06);will-change:transform}
.j-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,10,.72) 0%,rgba(6,6,10,.18) 34%,
             rgba(6,6,10,.55) 72%,rgba(6,6,10,.94) 100%)}
.j-hero-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;
  padding:0 clamp(20px,5vw,48px) clamp(56px,9vh,110px)}
.j-hero .logo-i3{height:clamp(30px,4vw,44px);margin-bottom:clamp(22px,4vh,40px)}
.j-hero .j-lead{max-width:56ch;opacity:.88}
.j-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.j-scroll i{width:1px;height:34px;background:linear-gradient(180deg,#fff,transparent);
  animation:jbaja 1.9s var(--ease-j) infinite}
@keyframes jbaja{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ── capitulo: titulo pegajoso + contenido que corre ────────── */
.j-cap{background:var(--neg);color:#fff;padding:clamp(46px,7vh,96px) 0}
.j-cap.claro{background:var(--claro);color:var(--neg)}
.j-cap.claro .j-lead{opacity:.66}
.j-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.j-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:900px){.j-split{grid-template-columns:1fr;gap:34px}}
.j-sticky{position:sticky;top:96px}
@media(max-width:900px){.j-sticky{position:static}}

/* ── ficha de producto ──────────────────────────────────────── */
.j-prod + .j-prod{margin-top:clamp(60px,9vh,110px);padding-top:clamp(48px,7vh,90px);
  border-top:1px solid rgba(255,255,255,.12)}
.j-cap.claro .j-prod + .j-prod{border-top-color:rgba(11,11,15,.14)}
.j-medidas{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.j-medidas span{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;
  border:1px solid currentColor;opacity:.55}
.j-specs{list-style:none;padding:0;margin:26px 0 0}
.j-specs li{position:relative;padding:13px 0 13px 26px;font-size:15.5px;line-height:1.5;
  border-bottom:1px solid rgba(255,255,255,.1);opacity:.82;text-wrap:pretty}
.j-cap.claro .j-specs li{border-bottom-color:rgba(11,11,15,.12)}
.j-specs li:last-child{border-bottom:0}
.j-specs li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;
  border-radius:2px;background:var(--saf)}
.j-specs li b{opacity:1;font-weight:700}

/* ── foto de capitulo ───────────────────────────────────────── */
.j-foto{border-radius:22px;overflow:hidden;position:relative;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75)}
.j-foto img{display:block;width:100%;height:100%;object-fit:cover}
.j-foto--alta{aspect-ratio:4/5}
.j-foto--ancha{aspect-ratio:16/10}

/* ── momento a sangre ───────────────────────────────────────── */
.j-momento{position:relative;min-height:min(78svh,700px);display:flex;align-items:center;
  overflow:hidden;background:#000}
.j-momento .j-hero-img{background-position:center 42%}
.j-momento::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,6,10,.86) 0%,rgba(6,6,10,.45) 52%,transparent 100%)}
.j-momento .j-wrap{position:relative;z-index:2;color:#fff}
.j-momento .j-h2{max-width:16ch}
@media(max-width:760px){.j-momento::after{
  background:linear-gradient(180deg,rgba(6,6,10,.5) 0%,rgba(6,6,10,.88) 65%)}}

/* ── grilla de accesorios ───────────────────────────────────── */
.j-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:clamp(16px,2.4vw,26px);margin-top:44px}
.j-tile{border-radius:20px;overflow:hidden;background:var(--neg-2);
  border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;
  transition:transform .4s var(--ease-j),border-color .4s var(--ease-j)}
.j-cap.claro .j-tile{background:#fff;border-color:rgba(11,11,15,.1)}
.j-tile:hover{transform:translateY(-6px);border-color:rgba(226,2,72,.5)}
.j-tile-img{aspect-ratio:4/3;overflow:hidden;background:#fff}
.j-tile-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-j)}
.j-tile:hover .j-tile-img img{transform:scale(1.05)}
.j-tile-txt{padding:20px 20px 22px}
.j-tile-txt h4{font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px}
.j-tile-txt p{font-size:14px;line-height:1.5;opacity:.65;margin:0}

/* ── barra de marca ─────────────────────────────────────────── */
.j-franja{height:5px;background:var(--saf)}

/* ── cierre ─────────────────────────────────────────────────── */
.j-cierre{background:var(--saf);color:#fff;padding:clamp(64px,10vh,120px) 0;text-align:center}
.j-cierre .j-h2{margin:0 auto 18px;max-width:20ch}
.j-cierre .j-lead{margin:0 auto 34px;opacity:.92;max-width:52ch}
.j-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#0b0b0f;
  font-size:16px;font-weight:700;padding:16px 34px;border-radius:999px;
  transition:transform .3s var(--ease-j)}
.j-btn:hover{transform:translateY(-2px);color:#0b0b0f}
.j-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none}

/* ── revelado ───────────────────────────────────────────────── */
[data-j]{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-j),transform .85s var(--ease-j)}
[data-j].vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-j]{opacity:1;transform:none;transition:none}
  .j-hero-img{transform:none !important}
  .j-scroll i{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   AURA · el color del fondo acompaña la sección
   Dos manchas desenfocadas fijas detrás de todo, que cambian de
   color al entrar cada capítulo. Es lo que da la sensación de
   recorrido continuo en vez de páginas pegadas.
   ═══════════════════════════════════════════════════════════════ */
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura i{position:absolute;display:block;border-radius:50%;filter:blur(110px);
  opacity:.5;transition:background 1.3s var(--ease-j),opacity 1.3s var(--ease-j),
  transform 2.4s var(--ease-j)}
.aura i:nth-child(1){width:58vw;height:58vw;top:-14vw;left:-12vw;
  background:var(--a1,#E20248)}
.aura i:nth-child(2){width:52vw;height:52vw;bottom:-16vw;right:-10vw;
  background:var(--a2,#5100D1)}
.j-cap,.j-momento,.j-hero,.j-cierre,footer,nav{position:relative;z-index:1}
.j-cap{background:rgba(11,11,15,.9)}
.j-cap.claro{background:rgba(243,243,243,.94)}

/* ── barra de marcas en el encabezado ───────────────────────── */
.marcas{background:rgba(8,8,12,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:2}
.marcas-in{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px);
  display:flex;align-items:stretch;gap:clamp(4px,1vw,12px);overflow-x:auto;
  scrollbar-width:none}
.marcas-in::-webkit-scrollbar{display:none}
.marca{display:flex;align-items:center;gap:9px;padding:12px 14px;flex:none;
  border-bottom:2px solid transparent;transition:border-color .3s var(--ease-j),
  opacity .3s var(--ease-j);opacity:.5}
.marca:hover{opacity:1}
.marca.on{opacity:1;border-bottom-color:var(--mc)}
.marca img{height:17px;width:auto;display:block;filter:brightness(0) invert(1)}
.marca .wm{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:#fff;
  white-space:nowrap}
.marca .wm em{font-style:normal;color:var(--mc)}
@media(max-width:620px){.marca{padding:10px 10px}.marca img{height:14px}
  .marca .wm{font-size:13px}}

/* ── carrusel del hero ──────────────────────────────────────── */
.j-hero{background:#000}
.j-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease-j);
  z-index:0}
.j-slide.act{opacity:1}
.j-slide .j-hero-img{position:absolute;inset:0}
.j-txt{position:absolute;inset:0;display:flex;align-items:flex-end;z-index:2;
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .6s var(--ease-j),transform .6s var(--ease-j)}
.j-txt.act{opacity:1;transform:none;pointer-events:auto}
.j-puntos{position:absolute;left:clamp(20px,5vw,48px);bottom:clamp(24px,4vh,40px);
  z-index:4;display:flex;gap:10px}
.j-punto{width:36px;height:3px;border-radius:99px;background:rgba(255,255,255,.28);
  border:none;padding:0;cursor:pointer;overflow:hidden;position:relative}
.j-punto span{position:absolute;inset:0;background:var(--saf);
  transform:scaleX(0);transform-origin:left}
.j-punto.act span{animation:jcarga 7s linear forwards}
@keyframes jcarga{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.j-punto.act span{animation:none;transform:scaleX(1)}}

/* ── foto de producto dentro de la ficha ────────────────────── */
.j-prod-foto{border-radius:18px;overflow:hidden;margin-bottom:24px;
  background:#fff;aspect-ratio:16/11;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.7)}
.j-prod-foto img{width:100%;height:100%;object-fit:contain;padding:6%;
  transition:transform .7s var(--ease-j)}
.j-prod:hover .j-prod-foto img{transform:scale(1.04)}
.j-cap.claro .j-prod-foto{box-shadow:0 20px 50px -26px rgba(0,0,0,.4)}

/* ── remates premium ────────────────────────────────────────── */
.j-cap .j-wrap{position:relative;z-index:2}
.j-tile,.j-foto,.j-prod-foto{will-change:transform}
::selection{background:rgba(226,2,72,.4);color:#fff}

/* ═══════════════════════════════════════════════════════════════
   REMATE FINAL
   ═══════════════════════════════════════════════════════════════ */

/* ── los renders vienen sobre fondo negro: la caja los acompaña ── */
.j-prod-foto{position:relative;background:#07070b;
  border:1px solid rgba(255,255,255,.08)}
.j-prod-foto::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 54% at 50% 52%,var(--pg,rgba(226,2,72,.28)),transparent 70%)}
.j-prod-foto img{position:relative;z-index:1;object-fit:contain;padding:5%}
.j-cap.claro .j-prod-foto{border-color:rgba(11,11,15,.1)}
/* los accesorios con render aislado, igual */
.j-tile-img.oscura{background:#07070b;position:relative}
.j-tile-img.oscura::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(226,2,72,.22),transparent 70%)}
.j-tile-img.oscura img{position:relative;z-index:1;object-fit:contain;padding:11%}

/* ── barra de progreso de lectura ───────────────────────────── */
.j-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:transparent;pointer-events:none}
.j-prog i{display:block;height:100%;width:0;background:var(--saf);
  box-shadow:0 0 14px rgba(226,2,72,.6)}

/* ── banda de cifras ────────────────────────────────────────── */
.j-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px);
  padding:clamp(30px,4.5vh,52px) 0}
@media(max-width:760px){.j-cifras{grid-template-columns:repeat(2,1fr);gap:26px}}
.j-cifra{text-align:center}
.j-cifra b{display:block;font-size:clamp(30px,5vw,58px);font-weight:700;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--saf);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.j-cifra span{display:block;margin-top:10px;font-size:13px;opacity:.6;line-height:1.4}
.j-cifra small{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.32}

/* ── las specs entran de a una ──────────────────────────────── */
.j-specs li{opacity:0;transform:translateX(-10px);
  transition:opacity .5s var(--ease-j),transform .5s var(--ease-j)}
.j-specs li.vis{opacity:.82;transform:none}
.j-cap.claro .j-specs li.vis{opacity:.78}
@media(prefers-reduced-motion:reduce){.j-specs li{opacity:.82;transform:none}}

/* ── filete que se dibuja al entrar ─────────────────────────── */
.j-linea{height:1px;background:var(--saf);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease-j)}
.j-linea.vis{transform:scaleX(1)}

/* ── el titulo pegajoso respira al scrollear ────────────────── */
.j-sticky{transition:opacity .5s var(--ease-j)}

/* ── carrusel un poco mas rapido ────────────────────────────── */
.j-punto.act span{animation-duration:5s}

/* ── nada de fondos blancos detrás de una foto ──────────────── */
.j-tile-img{background:#07070b}
.j-foto{background:#07070b;border:1px solid rgba(255,255,255,.07)}
.j-cap.claro .j-foto{border-color:rgba(11,11,15,.09)}
.j-prod-foto--alta{aspect-ratio:4/3.4}
/* el render vertical del i3SIXTY respira sin quedar diminuto */
.j-prod-foto--alta img{padding:3% 16%}
/* que el navegador no reescale con su algoritmo barato */
img{image-rendering:auto}
.j-tile-img img,.j-foto img,.j-prod-foto img{backface-visibility:hidden;
  transform:translateZ(0)}

/* ── renders oficiales: vienen con fondo transparente ───────────
   No hace falta caja ni recorte: el producto flota sobre el halo
   de su serie. Es lo que elimina cualquier borde. */
.j-prod-foto{aspect-ratio:5/4;background:#07070b;border:none;
  border-radius:20px;overflow:hidden}
.j-prod-foto::before{background:radial-gradient(ellipse 58% 62% at 50% 56%,
  var(--pg,rgba(226,2,72,.3)),transparent 72%)}
.j-prod-foto img{object-fit:contain;padding:4% 6% 3%;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
.j-cap.claro .j-prod-foto{background:#0b0b10}
.j-tile-img.oscura img{padding:9%;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))}

/* ═══════════════════════════════════════════════════════════════
   BANNER · título centrado y las cifras del fabricante al pie
   Las cifras dejan de ser una sección aparte: respaldan la promesa
   en el mismo golpe de vista, antes del primer scroll.
   ═══════════════════════════════════════════════════════════════ */
.j-hero{align-items:center;min-height:min(100svh,900px)}
.j-hero::after{background:
  linear-gradient(180deg,rgba(6,6,10,.62) 0%,rgba(6,6,10,.24) 34%,
                  rgba(6,6,10,.68) 76%,rgba(6,6,10,.94) 100%)}
.j-txt{align-items:center;padding-bottom:clamp(86px,13vh,132px)}
.j-txt .j-hero-in{text-align:center}
.j-txt .j-h1{margin-inline:auto}
.j-txt .j-lead{margin-inline:auto;max-width:54ch}

/* los datos, al pie del banner */
.j-hero-datos{position:absolute;left:0;right:0;bottom:clamp(58px,9vh,84px);z-index:3;
  max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,2vw,30px)}
.j-hd{text-align:center;position:relative}
.j-hd + .j-hd::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:38px;background:rgba(255,255,255,.16)}
.j-hd b{display:block;font-size:clamp(24px,4.2vw,50px);font-weight:700;letter-spacing:-.035em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.j-hd span{display:block;margin-top:9px;font-size:clamp(10.5px,1.15vw,13px);line-height:1.35;
  color:rgba(255,255,255,.58)}
.j-hd-fuente{position:absolute;left:0;right:0;bottom:clamp(24px,4vh,36px);z-index:3;
  text-align:center;margin:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.3)}

/* los puntos del carrusel se centran arriba de los datos */
.j-puntos{left:50%;transform:translateX(-50%);bottom:auto;
  top:calc(100% - clamp(58px,9vh,84px) - clamp(96px,15vh,128px))}

@media(max-width:700px){
  .j-hero{min-height:min(100svh,760px)}
  .j-txt{padding-bottom:clamp(120px,19vh,158px)}
  .j-hero-datos{grid-template-columns:repeat(2,1fr);gap:20px 4px;
    bottom:clamp(52px,8vh,70px)}
  .j-hd:nth-child(3)::before,.j-hd:nth-child(odd)::before{display:none}
  .j-hd:nth-child(even)::before{display:block}
}

/* ═══════════════════════════════════════════════════════════════
   OFICINAS · mosaico asimétrico
   Se va la grilla de cuatro rectángulos iguales: ahora hay una
   ancha y una alta por fila, espejadas, con el texto sobre la foto.
   ═══════════════════════════════════════════════════════════════ */
.j-mosaico{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,1.8vw,20px);margin-top:0}
.mos{position:relative;margin:0;overflow:hidden;border-radius:clamp(18px,2.2vw,28px);
  background:#0e0e16;isolation:isolate;
  transition:transform .55s var(--ease-j),box-shadow .55s var(--ease-j)}
.mos--ancha{grid-column:span 7;aspect-ratio:16/10}
.mos--alta {grid-column:span 5;aspect-ratio:4/5}
/* El desnivel va en una variable y no en transform: asi el hover y el
   modo angosto lo cambian sin pelearse por la misma propiedad. */
.mos{--off:0px;--alza:0px;transform:translateY(calc(var(--off) - var(--alza)))}
.mos:nth-child(2),.mos:nth-child(4){--off:clamp(10px,2vw,26px)}
.mos:hover{--alza:6px;box-shadow:0 26px 60px -18px rgba(0,0,0,.6)}
.mos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  transition:transform .9s var(--ease-j)}
.mos:hover img{transform:scale(1.06)}
.mos figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(46px,7vw,72px) clamp(18px,2.4vw,28px) clamp(18px,2.2vw,26px);
  background:linear-gradient(180deg,transparent,rgba(6,6,10,.42) 38%,rgba(6,6,10,.9) 100%)}
.mos figcaption h4{font-size:clamp(16px,1.8vw,20px);font-weight:700;letter-spacing:-.015em;
  color:#fff;margin-bottom:7px;text-wrap:balance}
.mos figcaption p{font-size:clamp(13px,1.35vw,14.5px);line-height:1.5;margin:0;
  color:rgba(255,255,255,.76);text-wrap:pretty}
/* el mosaico vive sobre fondo claro pero se pinta sobre la foto */
.j-cap.claro .mos figcaption h4{color:#fff}
@media(max-width:820px){
  .j-mosaico{grid-template-columns:1fr;gap:14px}
  .mos--ancha,.mos--alta{grid-column:1 / -1;aspect-ratio:16/11}
  .j-mosaico .mos{--off:0px}
}

/* ═══════════════════════════════════════════════════════════════
   ACCESORIOS · la onda
   Los cuatro dejan de estar enjaulados: flotan a distinta altura
   sobre el fondo, cada uno con su resplandor.
   ═══════════════════════════════════════════════════════════════ */
.acc-onda{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.4vw,34px);margin-top:clamp(40px,6vh,64px);
  padding-bottom:clamp(30px,5vh,60px)}
.acc{position:relative;text-align:center}
/* la cresta: cada uno se apoya a otra altura */
.acc[data-acc="0"]{margin-top:0}
.acc[data-acc="1"]{margin-top:clamp(20px,4.4vw,58px)}
.acc[data-acc="2"]{margin-top:clamp(8px,1.6vw,20px)}
.acc[data-acc="3"]{margin-top:clamp(28px,5.6vw,74px)}
.acc-img{position:relative;margin:0 0 clamp(16px,2.2vw,24px);
  display:grid;place-items:center;aspect-ratio:4/3}
.acc-img::before{content:"";position:absolute;left:50%;top:56%;width:74%;height:58%;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;
  background:radial-gradient(ellipse at center,rgba(226,2,72,.5),transparent 70%);
  filter:blur(34px);opacity:0;transition:opacity .7s var(--ease-j)}
.acc.vis .acc-img::before{opacity:.5}
.acc-img img{position:relative;z-index:1;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.6));
  transition:transform .6s var(--ease-j)}
.acc:hover .acc-img img{transform:translateY(-8px) scale(1.04)}
.acc h4{font-size:clamp(14.5px,1.6vw,17px);font-weight:700;letter-spacing:-.015em;
  margin-bottom:8px;text-wrap:balance}
.acc p{font-size:clamp(12.5px,1.3vw,14px);line-height:1.5;opacity:.6;margin:0;
  max-width:30ch;margin-inline:auto;text-wrap:pretty}
@media(max-width:860px){
  .acc-onda{grid-template-columns:repeat(2,1fr);gap:28px 16px}
  .acc[data-acc="1"],.acc[data-acc="3"]{margin-top:clamp(16px,5vw,34px)}
  .acc[data-acc="2"]{margin-top:0}
}
@media(max-width:460px){
  .acc-onda{grid-template-columns:1fr;gap:34px}
  .acc[data-acc]{margin-top:0}
}

/* ── el pie del banner se oscurece para que las cifras lean ─────
   Una capa aparte del degradado general: cae solo sobre la franja
   de los números, así la foto de arriba no se apaga. */
.j-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:clamp(190px,30vh,290px);pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,6,10,0) 0%,rgba(6,6,10,.34) 26%,
    rgba(6,6,10,.74) 60%,rgba(6,6,10,.95) 100%)}
.j-hd b{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.j-hd span{color:rgba(255,255,255,.68)}

/* ── panel de flota dibujado, en vez de un render de stock ─────── */
.mos--panel{background:linear-gradient(150deg,#141420,#0a0a12);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,2.6vw,34px) clamp(18px,2.6vw,34px) clamp(78px,9vw,104px)}
.rdm{width:100%;max-width:520px;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  font-variant-numeric:tabular-nums}
.rdm-top{display:flex;align-items:center;justify-content:space-between;
  padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.09)}
.rdm-log{font-size:12px;font-weight:700;letter-spacing:.14em;color:#F6A71B}
.rdm-vivo{display:flex;align-items:center;gap:7px;font-size:11.5px;
  color:rgba(255,255,255,.62)}
.rdm-vivo i{width:6px;height:6px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 8px #4ade80}
.rdm-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 15px;font-size:12.5px;color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.05)}
.rdm-fila span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rdm-fila b{flex:none;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px}
.rdm-fila b.ok{color:#4ade80;background:rgba(74,222,128,.13)}
.rdm-fila b.pend{color:#F6A71B;background:rgba(246,167,27,.15)}
.rdm-mapa{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;padding:13px 15px}
.rdm-mapa i{height:22px;border-radius:3px;
  background:linear-gradient(180deg,rgba(246,167,27,calc(var(--v) * .9)),
                                    rgba(226,2,72,calc(var(--v) * .55)))}
@media(max-width:820px){.mos--panel{aspect-ratio:16/12}.rdm-mapa i{height:16px}}

/* ── los accesorios se apoyan sobre una onda ───────────────────── */
.acc-onda{position:relative}
.acc-curva{position:absolute;left:0;right:0;top:clamp(58px,9vw,104px);
  width:100%;height:clamp(150px,22vw,260px);z-index:0;pointer-events:none;
  overflow:visible}
.acc-curva path{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s cubic-bezier(.35,0,.15,1)}
.acc-onda.vis .acc-curva path{stroke-dashoffset:0}
.acc{position:relative;z-index:1}
/* misma caja de imagen para todos: el desnivel lo pone la onda, no el render */
.acc-img{height:clamp(120px,15vw,190px);aspect-ratio:auto}
.acc-img img{max-height:100%}
/* los apoyos siguen a la curva del svg */
.acc[data-acc="0"]{margin-top:clamp(10px,1.8vw,22px)}
.acc[data-acc="1"]{margin-top:0}
.acc[data-acc="2"]{margin-top:clamp(24px,4.4vw,58px)}
.acc[data-acc="3"]{margin-top:clamp(6px,1.2vw,14px)}
@media(max-width:860px){
  .acc-curva{display:none}
  .acc[data-acc]{margin-top:0}
  .acc-onda{row-gap:34px}
}

/* ═══════════════════════════════════════════════════════════════
   AJUSTES DE DISEÑO · pedidos de Melany
   ═══════════════════════════════════════════════════════════════ */

/* ── 5 · todos los banners con el texto centrado, como el de arriba ── */
.j-momento .j-wrap{text-align:center}
.j-momento .j-h2,.j-momento .j-lead,.j-momento .j-kicker{margin-inline:auto}
.j-momento .j-lead{max-width:56ch}
.j-momento .j-h2{max-width:22ch}

/* ── 6 · corporativo: arrancan con su forma y terminan en cuadrados ──
   El mosaico entra desparejo, que es lo que le da carácter. Al pasar
   por encima, las cuatro piezas se acomodan en cuadrados alineados. */
.j-mosaico{align-items:start}
.mos{transition:aspect-ratio .55s var(--ease-j),transform .55s var(--ease-j),
      box-shadow .45s var(--ease-j)}
.j-mosaico:hover .mos{--off:0px;aspect-ratio:1/1}
.j-mosaico:hover .mos--ancha,.j-mosaico:hover .mos--alta{grid-column:span 6}
/* el aviso de que se puede tocar */
.j-mosaico{position:relative}
.j-mosaico::after{content:"Pasá el cursor para alinearlas";
  position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(11,11,15,.34);white-space:nowrap;pointer-events:none;
  opacity:1;transition:opacity .4s var(--ease-j)}
.j-mosaico:hover::after{opacity:0}
@media(hover:none){.j-mosaico::after{display:none}}

/* ── 7 · aire entre la bajada y los botones de modelo ──────────── */
.tele-sec .j-wrap:first-child{margin-bottom:clamp(22px,3.4vh,34px) !important}

/* ── 3 y 4 · accesorios: dejan de encimarse en pantallas medianas ──
   La onda solo tiene sentido con las cuatro en fila. Apenas pasan a
   dos columnas, los desniveles y la curva se apagan. */
@media(max-width:1100px){
  .acc-onda{gap:clamp(12px,2vw,24px)}
  .acc[data-acc="1"]{margin-top:clamp(14px,3vw,36px)}
  .acc[data-acc="3"]{margin-top:clamp(18px,3.6vw,46px)}
}
@media(max-width:920px){
  .acc-curva{display:none}
  .acc-onda{grid-template-columns:repeat(2,1fr);gap:32px 18px}
  .acc[data-acc]{margin-top:0}
}
@media(max-width:520px){
  .acc-onda{grid-template-columns:1fr;gap:34px}
}
.acc-img{min-width:0}
.acc-img img{max-width:100%}
.acc h4,.acc p{overflow-wrap:anywhere}