/* ═══════════════════════════════════════════════════════════════
   i3CONNECT · presentación de producto
   El render y el dato conviven a la misma altura, uno al lado del
   otro, alternando el lado. Los specs caen de a uno con el scroll.
   ═══════════════════════════════════════════════════════════════ */

.pz{position:relative;overflow:hidden;padding:clamp(38px,5.6vh,74px) 0;
  background:var(--pz-bg,#08080c)}
.pz + .pz{border-top:1px solid rgba(255,255,255,.06)}

/* halo de la serie · nunca se transforma: el blur se rasteriza una
   sola vez y el scroll solo mueve la opacidad */
.pz-halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1180px,124%);aspect-ratio:1.5/1;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,var(--pc,#E20248) 0%,transparent 66%);
  opacity:.2;filter:blur(60px);will-change:opacity;
  transition:opacity .45s linear}

/* ── el reparto: contenido de un lado, render del otro ───────── */
.pz-in{--gut:clamp(20px,5vw,48px);--cont:calc(100% - var(--gut) * 2);
  position:relative;z-index:1;max-width:1220px;margin:0 auto;
  padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,3.6vw,56px);align-items:center}
.pz-cab,.pz-med,.pz-clave,.pz-mas,.pz-pie{grid-column:1;min-width:0}
.pz-img{grid-column:2;grid-row:1 / -1;align-self:center}
/* las pares espejan: el ojo no repite el mismo barrido cuatro veces */
.pz--der .pz-in{grid-template-columns:auto minmax(0,1fr)}
.pz--der .pz-cab,.pz--der .pz-med,.pz--der .pz-clave,
.pz--der .pz-mas,.pz--der .pz-pie{grid-column:2}
.pz--der .pz-img{grid-column:1}

/* ── cabecera ───────────────────────────────────────────────── */
.pz-cab{max-width:20ch}
.pz-serie{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--pc,#E20248);margin-bottom:10px}
.pz-nom{font-size:clamp(34px,5.4vw,68px);font-weight:700;line-height:.98;
  letter-spacing:-.04em;color:#fff;text-wrap:balance}
.pz-nom em{font-style:normal;
  background:linear-gradient(100deg,var(--pc,#E20248),var(--pc2,#F6A71B));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pz-frase{font-size:clamp(15.5px,1.65vw,19px);line-height:1.4;
  color:rgba(255,255,255,.62);margin:11px 0 0;max-width:26ch;text-wrap:pretty}

/* ── el render ──────────────────────────────────────────────── */
.pz-img{position:relative;margin:0;max-width:none}
.pz-img img{display:block;margin-inline:auto;
  height:clamp(290px,50vh,450px);width:auto;max-width:100%;
  filter:drop-shadow(0 30px 38px rgba(0,0,0,.62));
  transform:translate3d(0,var(--fy,0px),0)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-j);will-change:transform}
.pz-img.inclina img{transition:transform .16s ease-out}
/* resplandor de pantalla encendida detrás del panel */
.pz-img::before{content:"";position:absolute;left:50%;top:44%;width:74%;height:52%;
  transform:translate(-50%,-50%);border-radius:50%;z-index:-1;
  background:var(--pc,#E20248);filter:blur(70px);opacity:0;
  transition:opacity .66s var(--ease-j) .18s}

/* ── medidas ────────────────────────────────────────────────── */
.pz-med{display:flex;flex-wrap:wrap;gap:7px;margin:clamp(13px,1.8vh,18px) 0 0}
.pz-med span{font-size:13px;font-weight:600;padding:7px 15px;border-radius:999px;
  color:rgba(255,255,255,.8);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);font-variant-numeric:tabular-nums}

/* ── specs: caen de a uno con el scroll ─────────────────────────
   --av lo escribe el JS con el avance de la sección por la pantalla;
   cada fila calcula su propio umbral con --i, así el dato llega
   cuando el scroll llega y no todo junto al cruzar un límite. */
.pz-clave{display:grid;grid-template-columns:1fr;gap:0;
  margin:clamp(15px,2.2vh,22px) 0 0;
  border-top:1px solid rgba(255,255,255,.09)}
.pz-kpi{display:grid;grid-template-columns:16px minmax(0,1fr) auto;
  align-items:baseline;gap:0 clamp(10px,1.4vw,16px);
  padding:clamp(7px,1vh,11px) 0;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:none;text-align:left}
.pz-kpi i{width:16px;height:2px;border-radius:2px;align-self:center;
  background:linear-gradient(90deg,var(--pc,#E20248),var(--pc2,#F6A71B));
  transform-origin:left}
.pz-kpi b{font-size:clamp(16px,1.9vw,22px);font-weight:700;letter-spacing:-.025em;
  color:#fff;line-height:1.15;text-wrap:balance}
.pz-kpi span{font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.55);text-align:right;
  white-space:nowrap}

/* ── detalle plegable ───────────────────────────────────────── */
.pz-mas{margin:clamp(13px,1.8vh,18px) 0 0}
.pz-mas summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:9px;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);
  transition:color .3s var(--ease-j)}
.pz-mas summary::-webkit-details-marker{display:none}
.pz-mas summary:hover{color:#fff}
.pz-mas summary svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none;
  transition:transform .3s var(--ease-j)}
.pz-mas[open] summary svg{transform:rotate(180deg)}
.pz-mas ul{list-style:none;padding:12px 0 0;margin:0;display:grid;gap:0}
.pz-mas li{position:relative;padding:7px 0 7px 20px;font-size:13.5px;line-height:1.5;
  color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.07);
  text-wrap:pretty}
.pz-mas li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;
  border-radius:2px;background:var(--pc,#E20248);opacity:.8}
.pz-mas li b{color:#fff;font-weight:600}

/* ── pie ────────────────────────────────────────────────────── */
.pz-pie{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(15px,2.2vh,22px)}
.pz-cta{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  padding:13px 26px;border-radius:999px;color:#fff;
  background:linear-gradient(100deg,var(--pc,#E20248),var(--pc2,#F6A71B));
  transition:transform .3s var(--ease-j),box-shadow .3s var(--ease-j)}
.pz-cta:hover{color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 28px -10px var(--pc,#E20248)}
.pz-cta svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.3;fill:none}

/* ── índice de series, debajo del tope ──────────────────────── */
.pz-indice{position:sticky;top:var(--tope-h,66px);z-index:20;
  background:rgba(8,8,12,.9);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.pz-indice-in{max-width:1220px;margin:0 auto;padding:0 clamp(14px,4vw,32px);
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;justify-content:center}
.pz-indice-in::-webkit-scrollbar{display:none}
.pz-indice a{flex:none;padding:13px 18px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.46);border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .3s var(--ease-j),border-color .3s var(--ease-j)}
.pz-indice a:hover{color:#fff}
.pz-indice a.on{color:#fff;border-bottom-color:var(--ac)}
@media(max-width:620px){.pz-indice a{padding:11px 13px;font-size:12.5px}}

/* ── angosto: el render arriba, el dato debajo ──────────────── */
@media(max-width:880px){
  .pz-in,.pz--der .pz-in{grid-template-columns:1fr;gap:clamp(20px,4vh,32px)}
  .pz-cab,.pz-med,.pz-clave,.pz-mas,.pz-pie,
  .pz--der .pz-cab,.pz--der .pz-med,.pz--der .pz-clave,
  .pz--der .pz-mas,.pz--der .pz-pie{grid-column:1}
  .pz-in,.pz--der .pz-in{grid-template-columns:1fr}
  .pz-img,.pz--der .pz-img{grid-column:1;grid-row:1;position:static;
    transform:none;width:min(440px,86vw);margin:0 auto}
  .pz-img img{width:100%;height:auto}
  .pz-cab{max-width:none}
  .pz-frase{max-width:34ch}
  .pz-indice{top:0}
}

@media(prefers-reduced-motion:reduce){
  .pz-img{opacity:1;transform:none}
  .pz-img::before{opacity:.4}
  .pz-img img{transform:none !important}
  .pz-med span{opacity:1;transform:none}
  .pz-kpi{--t:1 !important}
}

/* ═══════════════════════════════════════════════════════════════
   LA SECUENCIA
   Todo cuelga de --av, el avance de la sección por la pantalla que
   escribe el JS. Cada pieza tiene su tramo dentro de ese avance, así
   el recorrido se siente como una sola cosa: entra el equipo, llegan
   las medidas, caen los specs de a uno y recién al final el botón.
   Sin JS no hay .pz-vivo y se ve todo entero: la página vende igual.

       0.00 ─── 0.22   el equipo aparece y la pantalla se enciende
       0.16 ─── 0.40   las medidas
       0.30 ─── 0.78   los specs, uno detrás del otro
       0.72 ─── 0.92   la ficha completa y el botón
   ═══════════════════════════════════════════════════════════════ */

/* la curva: arranca rápido y frena al llegar, no lineal */
.pz-vivo .pz-img,
.pz-vivo .pz-med span,
.pz-vivo .pz-kpi,
.pz-vivo .pz-mas,
.pz-vivo .pz-pie{--e:calc(1 - (1 - var(--t)) * (1 - var(--t)))}

/* ── 1 · el equipo entra ───────────────────────────────────────── */
.pz-vivo .pz-img{--t:clamp(0,calc(var(--av,1) * 4.5),1);
  opacity:var(--e);
  transform:scale(calc(.945 + var(--e) * .055))
            translateY(calc((1 - var(--e)) * 22px));
  transition:none}
.pz-vivo .pz-img::before{opacity:calc(var(--e) * .42);transition:none}

/* ── 2 · las medidas ───────────────────────────────────────────── */
.pz-vivo .pz-med span{--t:clamp(0,calc((var(--av,1) - .16) * 6),1);
  opacity:var(--e);
  transform:translateY(calc((1 - var(--e)) * 12px));
  transition:none}
.pz-vivo .pz-med span:nth-child(2){--t:clamp(0,calc((var(--av,1) - .21) * 6),1)}
.pz-vivo .pz-med span:nth-child(3){--t:clamp(0,calc((var(--av,1) - .26) * 6),1)}

/* ── 3 · los specs caen de a uno ───────────────────────────────── */
.pz-vivo .pz-kpi{--t:clamp(0,calc((var(--av,1) - .30 - var(--i,0) * .095) * 7),1);
  opacity:var(--e);
  transform:translateY(calc((1 - var(--e)) * -9px));position:relative;z-index:1}
.pz-vivo .pz-kpi i{transform:scaleX(var(--e))}
/* el filete de arriba se traza con el primero */
.pz-vivo .pz-clave{border-top-color:transparent;position:relative}
.pz-vivo .pz-clave::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(255,255,255,.09);
  transform:scaleX(clamp(0,calc((var(--av,1) - .28) * 5),1));transform-origin:left}

/* ── 4 · el cierre ─────────────────────────────────────────────── */
.pz-vivo .pz-mas,
.pz-vivo .pz-pie{--t:clamp(0,calc((var(--av,1) - .72) * 6),1);
  opacity:var(--e);
  transform:translateY(calc((1 - var(--e)) * 14px));
  transition:none}

/* ── sin JS, o con el movimiento apagado, todo queda a la vista ── */
.pz-img{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pz-vivo .pz-img,.pz-vivo .pz-med span,.pz-vivo .pz-kpi,
  .pz-vivo .pz-mas,.pz-vivo .pz-pie{--t:1 !important;opacity:1;transform:none}
  .pz-vivo .pz-img::before{opacity:.4}
  .pz-vivo .pz-clave::before{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   EL ESCENARIO
   Los renders son 3:4 verticales. Metidos en una grilla al lado del
   texto no hay tamaño que funcione: chicos se ven pobres, grandes
   dejan un hueco de 300px al costado del texto.

   Entonces el render sale del flujo. La sección pasa a ser un
   escenario de alto propio y el equipo se apoya ahí, enorme, saliendo
   por el borde. El texto ya no compite con él por el alto: convive.
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:881px){
  .pz{min-height:0;display:flex;align-items:center;
    padding:clamp(46px,7vh,88px) 0}
  .pz-in{width:100%;display:block;position:relative}

  /* la columna de texto ocupa menos de la mitad y respira */
  .pz-cab,.pz-med,.pz-clave,.pz-mas,.pz-pie,
  .pz--der .pz-cab,.pz--der .pz-med,.pz--der .pz-clave,
  .pz--der .pz-mas,.pz--der .pz-pie{
    position:relative;z-index:2;width:min(calc(var(--cont) * .43),480px);max-width:none}
  .pz--der .pz-cab,.pz--der .pz-med,.pz--der .pz-clave,
  .pz--der .pz-mas,.pz--der .pz-pie{margin-left:auto}

  /* el equipo se apoya en el margen de la pagina, no lo cruza, y su
     ancho es una fraccion de la grilla: crece y baja con ella */
  .pz-img{position:absolute;top:50%;right:var(--gut);left:auto;
    transform:translateY(-50%);z-index:1;margin:0;
    width:clamp(260px,calc(var(--cont) * .50),620px)}
  .pz--der .pz-img{right:auto;left:var(--gut)}
  .pz-img img{width:100%;height:auto;max-width:100%;
    filter:drop-shadow(0 48px 78px rgba(0,0,0,.72))}

  /* el nombre de la serie detrás de todo, enorme y apenas visible */
  /* el equipo lo tapaba entero y solo asomaba una astilla al costado.
     Ahora nace arriba y el panel le come la mitad de abajo: se lee
     como un fondo y no como un recorte. */
  .pz-eco{position:absolute;z-index:0;pointer-events:none;user-select:none;
    top:-4%;right:1%;transform:none;
    font-size:min(17vw,215px);font-weight:700;letter-spacing:-.05em;line-height:.86;
    color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);
    white-space:nowrap;max-width:100%;overflow:hidden;
    opacity:clamp(0,calc((var(--av,1) - .05) * 3),1)}
  .pz--der .pz-eco{right:auto;left:1%}

  /* la secuencia sigue mandando, solo cambia de dónde entra */
  .pz-vivo .pz-img{
    transform:translateY(-50%) scale(calc(.955 + var(--e) * .045))}
  .pz--der.pz-vivo .pz-img{
    transform:translateY(-50%) scale(calc(.955 + var(--e) * .045))}
}

/* pantallas anchas: la grilla da mas lugar y el equipo lo aprovecha */
@media(min-width:1500px){
  .pz-img{width:clamp(460px,calc(var(--cont) * .52),700px)}
}
/* el i3SIXTY es el unico alto y no apaisado: va mas angosto para que
   su altura acompane a la de las otras tres */
@media(min-width:881px){
  #s-sixty .pz-img{width:clamp(220px,calc(var(--cont) * .31),400px)}
}

/* angosto: vuelve al apilado, con el render grande arriba */
@media(max-width:880px){
  .pz-eco{display:none}
  .pz-img{width:min(440px,86vw);margin-inline:auto}
  .pz-img img{height:auto}
}