/* ═══════════════════════════════════════════════════════════════
   i3CONNECT · la tele interactiva
   Una pantalla a tamaño de sección con i3CONNECT Studio adentro.
   El visitante toca las apps y la pizarra se dibuja de verdad.
   ═══════════════════════════════════════════════════════════════ */

.tele-sec{padding:clamp(38px,5.6vh,74px) 0}
.tele-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0 0 clamp(16px,2.4vh,24px)}
.tele-btn{font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:.01em;
  padding:10px 20px;border-radius:999px;cursor:pointer;color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  transition:all .3s var(--ease-j)}
.tele-btn:hover{color:#fff;border-color:rgba(255,255,255,.34)}
.tele-btn.on{color:#fff;border-color:transparent;
  background:linear-gradient(100deg,var(--mc1),var(--mc2))}

/* ── el aparato ─────────────────────────────────────────────────
   Copiado del producto real: bisel finísimo arriba y a los costados,
   mentón más grueso abajo con la marca al centro y rejilla de parlante
   a los lados, esquinas casi rectas y un filo claro en el canto. */
.tele{position:relative;max-width:1080px;margin:0 auto;
  padding:8px 8px 0;border:none;border-radius:9px;
  background:linear-gradient(178deg,#33333b 0%,#1d1d23 2.5%,#191920 55%,#15151b 100%);
  box-shadow:
    /* filo metálico del canto */
    0 0 0 1px rgba(255,255,255,.16),
    /* el cuerpo tiene espesor: se apoya sobre su propia sombra */
    0 3px 0 -1px rgba(0,0,0,.85),
    0 70px 130px -44px rgba(0,0,0,.92)}
@media(max-width:700px){.tele{padding:5px 5px 0;border-radius:6px}}
/* sombra proyectada en el piso */
.tele::after{content:"";position:absolute;left:50%;bottom:-34px;width:62%;height:30px;
  transform:translateX(-50%);pointer-events:none;filter:blur(19px);
  background:radial-gradient(ellipse,rgba(0,0,0,.8),transparent 72%)}

/* el vidrio: hundido un pelo respecto del marco */
.tele-pant{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:3px;
  background:linear-gradient(150deg,#101018,#05050a);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9),
             inset 0 0 0 1px rgba(0,0,0,.6)}
/* reflejo del ambiente sobre el vidrio */
.tele-brillo{position:absolute;inset:0;pointer-events:none;z-index:9;
  background:linear-gradient(118deg,rgba(255,255,255,.075) 0%,
             rgba(255,255,255,.02) 26%,transparent 42%)}

/* ── el mentón ─────────────────────────────────────────────────── */
.tele-chin{position:relative;height:26px;display:flex;align-items:center;
  justify-content:center;gap:clamp(10px,2.4vw,30px);padding:0 14px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#1b1b21,#101015)}
@media(max-width:700px){.tele-chin{height:19px;gap:9px;padding:0 8px}}
.tele-chin span{flex:none;font-size:8.5px;font-weight:700;letter-spacing:.34em;
  color:rgba(255,255,255,.42);text-indent:.34em}
@media(max-width:700px){.tele-chin span{font-size:6.5px;letter-spacing:.24em}}
/* rejilla de parlante: microranuras a los dos lados de la marca */
.tele-rej{flex:1 1 auto;height:7px;min-width:0;border-radius:1px;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.075) 0 1px,transparent 1px 3px)}
/* testigo de encendido, abajo a la derecha */
.tele-led{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 5px rgba(74,222,128,.9)}

/* ── barra superior del sistema ─────────────────────────────── */
.st-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;
  align-items:center;justify-content:space-between;padding:11px 16px;
  font-size:11px;color:rgba(255,255,255,.62)}
.st-top .st-mod{display:flex;align-items:center;gap:8px;font-weight:600}
.st-top .st-mod i{width:6px;height:6px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 8px #4ade80}
.st-top .st-der{display:flex;align-items:center;gap:12px}

/* ── lanzador de apps ───────────────────────────────────────── */
.st-vista{position:absolute;inset:0;padding:44px clamp(14px,3vw,34px) clamp(12px,2.4vw,26px);
  opacity:0;visibility:hidden;transform:scale(.985);
  transition:opacity .34s var(--ease-j),transform .34s var(--ease-j),visibility .34s}
.st-vista.act{opacity:1;visibility:visible;transform:none}

.st-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.6vw,18px);
  height:100%;align-content:center}
@media(max-width:640px){.st-apps{grid-template-columns:repeat(2,1fr)}}
.st-app{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:clamp(10px,2vw,20px) 8px;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:#fff;font-family:inherit;transition:all .3s var(--ease-j)}
.st-app:hover{background:rgba(255,255,255,.12);transform:translateY(-3px);
  border-color:rgba(255,255,255,.24)}
.st-app .st-ic{width:clamp(30px,4vw,44px);height:clamp(30px,4vw,44px);border-radius:12px;
  display:grid;place-items:center;background:linear-gradient(140deg,var(--ic1),var(--ic2))}
.st-app .st-ic svg{width:52%;height:52%;stroke:#fff;stroke-width:2;fill:none}
.st-app span{font-size:clamp(10px,1.2vw,12.5px);font-weight:600;letter-spacing:.01em}

/* ── volver ─────────────────────────────────────────────────── */
.st-volver{position:absolute;top:9px;left:14px;z-index:8;display:none;
  align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:6px 13px;cursor:pointer;font-family:inherit;
  transition:background .25s}
.st-volver:hover{background:rgba(255,255,255,.2)}
.tele.abierta .st-volver{display:flex}
.tele.abierta .st-top{opacity:0}

/* ── pizarra ────────────────────────────────────────────────── */
.st-piz{position:absolute;inset:0;background:#fff}
.st-piz canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;
  touch-action:none}
.st-piz-barra{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:999px;
  background:rgba(16,16,22,.9);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.st-tinta{width:20px;height:20px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;transition:transform .2s}
.st-tinta:hover{transform:scale(1.15)}
.st-tinta.on{border-color:#fff;transform:scale(1.15)}
.st-borrar{font-family:inherit;font-size:11.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.14);border:none;border-radius:999px;padding:6px 13px;
  cursor:pointer;margin-left:4px}
.st-borrar:hover{background:rgba(255,255,255,.26)}
.st-piz-marca{position:absolute;top:12px;left:16px;z-index:3;font-size:11px;
  font-weight:700;letter-spacing:.18em;color:rgba(11,11,15,.28)}
.st-piz-pista{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;font-size:clamp(13px,1.8vw,17px);color:rgba(11,11,15,.26);font-weight:600;
  pointer-events:none;transition:opacity .4s}

/* ── conferencia ────────────────────────────────────────────── */
.st-conf{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;height:100%}
.st-cara{position:relative;border-radius:12px;overflow:hidden;
  background:linear-gradient(150deg,#1b1b26,#0e0e16);display:grid;place-items:center}
.st-cara .st-av{width:clamp(34px,5vw,58px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;font-size:clamp(13px,1.7vw,19px);font-weight:700;color:#fff}
.st-cara b{position:absolute;left:10px;bottom:9px;font-size:11px;font-weight:600;
  color:rgba(255,255,255,.75)}
.st-cara.habla{outline:2px solid #4ade80;outline-offset:-2px}
.st-cara.habla b::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:#4ade80;margin-right:6px;vertical-align:middle}

/* ── presentar ──────────────────────────────────────────────── */
.st-pres{height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(8px,2vw,26px)}
.st-pres h5{font-size:clamp(15px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;
  color:#fff;margin-bottom:6px}
.st-pres p{font-size:clamp(11px,1.3vw,14px);color:rgba(255,255,255,.5);margin-bottom:20px}
.st-barras{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,16px);height:42%}
.st-barras i{flex:1;border-radius:6px 6px 2px 2px;display:block;
  background:linear-gradient(180deg,var(--mc1),var(--mc2));
  transform-origin:bottom;transform:scaleY(0);
  transition:transform .8s var(--ease-j)}
.st-vista.act .st-barras i{transform:scaleY(1)}
.st-barras i:nth-child(1){transition-delay:.05s}
.st-barras i:nth-child(2){transition-delay:.12s}
.st-barras i:nth-child(3){transition-delay:.19s}
.st-barras i:nth-child(4){transition-delay:.26s}
.st-barras i:nth-child(5){transition-delay:.33s}

/* ── energía ────────────────────────────────────────────────── */
.st-ene{height:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  align-content:center}
@media(max-width:640px){.st-ene{grid-template-columns:1fr}}
.st-kpi{border-radius:14px;padding:clamp(12px,2vw,22px);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.st-kpi em{display:block;font-style:normal;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);
  margin-bottom:9px}
.st-kpi b{display:block;font-size:clamp(18px,2.8vw,34px);font-weight:700;
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.st-kpi span{font-size:11.5px;color:rgba(255,255,255,.42)}

/* ── ficha bajo la tele ─────────────────────────────────────── */
.tele-ficha{max-width:1080px;margin:clamp(22px,3.2vh,32px) auto 0;
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,3vw,34px);
  align-items:center;padding-top:19px;border-top:1px solid rgba(255,255,255,.12)}
@media(max-width:760px){.tele-ficha{grid-template-columns:1fr;text-align:center;gap:16px}}
.tele-ficha h4{font-size:clamp(19px,2.4vw,26px);font-weight:700;letter-spacing:-.02em}
.tele-ficha p{font-size:14.5px;opacity:.62;margin:5px 0 0}
.tele-ficha .tf-med{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.tele-ficha .tf-med span{font-size:12.5px;font-weight:600;padding:6px 13px;
  border-radius:999px;border:1px solid rgba(255,255,255,.22);opacity:.7}

/* ── botón de deshacer en la barra de la pizarra ────────────── */
.st-deshacer{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.14);border:none;color:#fff;cursor:pointer;
  transition:background .25s}
.st-deshacer:hover{background:rgba(255,255,255,.28)}
.st-tinta[data-borra="1"]{border:2px solid rgba(255,255,255,.45)}

/* ═══════════════════════════════════════════════════════════════
   LA CARGA · el equipo se apoya y la pantalla se enciende
       0.00 ─── 0.28   los botones de modelo
       0.06 ─── 0.34   el aparato se endereza y baja al lugar
       0.24 ─── 0.62   la pantalla prende
   Sin JS no existe .tele-viva y se ve todo encendido.
   ═══════════════════════════════════════════════════════════════ */
.tele-viva .tele-nav{--t:clamp(0,calc(var(--av,1) * 3.6),1);
  --e:calc(1 - (1 - var(--t)) * (1 - var(--t)));
  opacity:var(--e);transform:translateY(calc((1 - var(--e)) * 14px))}

.tele-viva .tele{--t:clamp(0,calc((var(--av,1) - .06) * 3.6),1);
  --e:calc(1 - (1 - var(--t)) * (1 - var(--t)));
  opacity:var(--e);
  transform:perspective(1800px)
            rotateX(calc((1 - var(--e)) * 6deg))
            scale(calc(.94 + var(--e) * .06))
            translateY(calc((1 - var(--e)) * 32px));
  transform-origin:center 88%;will-change:transform,opacity}

/* el velo que se levanta: la pantalla prendiendo. Va por encima del
   brillo pero sin capturar el puntero, para no romper la pizarra. */
.tele-viva .tele-pant::after{content:"";position:absolute;inset:0;z-index:10;
  pointer-events:none;background:#04040a;
  opacity:calc(1 - clamp(0,calc((var(--av,1) - .24) * 2.7),1))}
/* el fogonazo del encendido, justo cuando arranca */
.tele-viva .tele-pant::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:2px;z-index:11;pointer-events:none;background:rgba(255,255,255,.9);
  opacity:calc((1 - clamp(0,calc((var(--av,1) - .24) * 9),1)) *
               clamp(0,calc((var(--av,1) - .22) * 26),1));
  transform:scaleY(calc(1 + (1 - clamp(0,calc((var(--av,1) - .24) * 3.4),1)) * 3))}

@media(prefers-reduced-motion:reduce){
  .tele-viva .tele-nav,.tele-viva .tele{opacity:1;transform:none}
  .tele-viva .tele-pant::after,.tele-viva .tele-pant::before{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   AL TACTO · iPad y celular
   Los controles estaban dimensionados para un mouse. Con el dedo,
   Apple pide 44px de área mínima: los puntos de tinta medían 20.
   Se agranda el área de toque sin engordar el dibujo.
   ═══════════════════════════════════════════════════════════════ */
@media(pointer:coarse){
  .st-piz-barra{gap:13px;padding:12px 17px;bottom:16px}
  .st-tinta{position:relative;width:28px;height:28px}
  /* el área que responde al dedo es mayor que el círculo visible */
  .st-tinta::after{content:"";position:absolute;inset:-9px;border-radius:50%}
  .st-deshacer{width:44px;height:44px}
  .st-deshacer svg{width:19px;height:19px}
  .st-borrar{padding:12px 18px;font-size:13px;margin-left:2px}
  .st-volver{padding:11px 18px;font-size:13px;top:11px;left:12px}
  .tele-btn{padding:13px 22px;font-size:14.5px}
  .st-app{padding:clamp(14px,2.4vw,22px) 10px}
  /* el dedo tapa la punta del trazo: se afina un poco menos */
  .st-piz canvas{cursor:default}
}

/* la pista de "dibujá acá" se va apenas se toca, no antes */
.st-piz-pista{transition:opacity .3s var(--ease-j)}