/* ==========================================================================
   EL TALLER — las tres escenas 3D INTERACTIVAS de «El programa prepara»
   (WEB v3, 07/10/2026, segunda vuelta)
   ==========================================================================
   Él: primero «una pluma escribiendo una carta, animaciones 3D»; al verla:
   «que sean interactivas, y más profesionales: no una pluma, otra cosa».
   (La versión de la pluma está guardada en _copias\taller con pluma.)

     01 · Un correo con contexto ...... SE MIRA (él: «que no sea
          interactivo»): de dónde salen los datos — base de clientes,
          ficha de su empresa, plantilla del sector y lo que usted pide —
          y cómo cada uno llega a su línea del borrador
     02 · Una revisión antes de enviar  el cuadro de revisión DEL PROGRAMA
          (él: «donde se revisa antes de enviar dentro del programa»):
          aviso de una cifra, texto editable, Saltar · Rehacer · Crear
     03 · Un seguimiento que se retoma  una barra de tiempo: al arrastrarla
          (o con ▶) el cliente avanza por una pista en 3D y la ficha cambia
          de estado, de próxima acción y avisa el día que toca

   Toda la escena se inclina siguiendo al ratón (taller.js pone --rx/--ry).

   ⚠️ LO QUE SE APRENDIÓ CON LA PLUMA Y AQUÍ SE RESPETA:
     · Nada con «opacity» en un elemento que tiene hijos en 3D (aplana el
       3D): las entradas animan sólo PANELES planos; la pista (que sí es 3D)
       entra con transform, sin opacidad.
     · Los controles NO van dentro de un lienzo encogido: aquí la maqueta
       es fluida (rejilla), para que en el móvil se puedan tocar.
     · Sin JavaScript no hay taller; con «reducir movimiento» no hay
       inclinación ni entradas y los cambios son instantáneos.
   ========================================================================== */

/* ── Los tres pasos se pueden pulsar ─────────────────────────────────────── */
.promesa__ver{ display:none; }
.js .promesa__ver{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:0;
  background:none; border:0; color:var(--azul-cl); cursor:pointer;
  font:700 .92rem/1.2 var(--fuente-t); letter-spacing:.01em;
}
.js .promesa__ver::after{ content:""; position:absolute; inset:0; z-index:1; }   /* la tarjeta entera responde */
.promesa__ver .ui-icon{ width:17px; height:17px; transition:transform .25s ease; }
.promesa__ver:focus-visible{ outline:2px solid var(--azul-cl); outline-offset:5px; border-radius:4px; }
.js .promesa__p{
  cursor:pointer; padding:22px 18px 20px; margin:0 -18px;
  border-radius:0 0 14px 14px; transition:background-color .35s ease;
}
@media (hover:hover){ .js .promesa__p:hover .promesa__ver .ui-icon{ transform:translateX(5px); } }
.promesa__p.activa{ background:linear-gradient(180deg, rgba(111,176,255,.10), rgba(111,176,255,.02) 75%); }
.promesa__p.activa::after{ transform:scaleX(1); }
.promesa__p.activa b{ color:#fff; }
.promesa__p.activa .promesa__ver .ui-icon{ transform:rotate(90deg); }

/* ── El taller: se abre debajo de los pasos (grid 0fr → 1fr) ─────────── */
.taller{ display:none; }
.js .taller{
  display:grid; grid-template-rows:0fr; margin-top:0;
  transition:grid-template-rows .7s cubic-bezier(.2,.7,.2,1), margin-top .7s cubic-bezier(.2,.7,.2,1);
}
.js .taller.abierto{ grid-template-rows:1fr; margin-top:30px; }
.taller__dentro{
  min-height:0; overflow:hidden; border-radius:22px;
  background:
    radial-gradient(90% 70% at 70% 0%, rgba(46,111,216,.30), transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(31,123,255,.12), transparent 60%),
    linear-gradient(180deg, #0c1e3b, #060f1f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 80px rgba(0,0,0,.45);
}
.taller__cabeza{ display:flex; align-items:center; gap:16px; padding:20px 24px 2px; }
.taller__n{ font:800 1.5rem/1 var(--fuente-t); color:var(--azul-cl); font-variant-numeric:tabular-nums; }
.taller__titulo{ margin:0; flex:1; color:#fff; font:700 1.12rem/1.35 var(--fuente-t); }
.taller__boton{
  flex:none; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#dfe9f8; border-radius:8px; padding:7px 12px; cursor:pointer;
  font:600 .82rem var(--fuente); transition:background-color .2s ease;
}
.taller__boton:hover{ background:rgba(255,255,255,.14); }
.taller__boton:focus-visible{ outline:2px solid var(--azul-cl); outline-offset:2px; }
.taller__cerrar{ width:34px; padding:7px 0; text-align:center; }
.taller__pie{ margin:0; padding:6px 24px 0; color:rgba(233,240,250,.78); font-size:.97rem; line-height:1.6; max-width:780px; }
.taller__aviso{ margin:0; padding:0 24px 18px; color:rgba(233,240,250,.45); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; }

/* El escenario: perspectiva y la escena activa */
.taller__lienzo{ position:relative; padding:28px 30px 30px; }
.escena3d{ display:none; perspective:1600px; perspective-origin:50% 40%; }
.taller[data-paso="1"] [data-escena3d="1"],
.taller[data-paso="2"] [data-escena3d="2"],
.taller[data-paso="3"] [data-escena3d="3"]{ display:block; }

/* La escena entera, en 3D, inclinada un poco y siguiendo al ratón */
.e3d{
  transform-style:preserve-3d;
  transform:rotateX(calc(4deg + var(--rx, 0deg))) rotateY(calc(-6deg + var(--ry, 0deg)));
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.e3d.inclinando{ transition:transform .12s linear; }

/* Paneles: cristal oscuro (los datos, la guía) o ventana clara (el correo) */
.panel{
  position:relative; border-radius:16px; padding:18px;
  background:linear-gradient(160deg, rgba(22,46,86,.92), rgba(10,24,48,.92));
  border:1px solid rgba(140,185,255,.20);
  box-shadow:0 30px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  color:#fff;
}
.panel__rot{ margin:0 0 6px; font:700 .66rem var(--fuente); letter-spacing:.16em; text-transform:uppercase; color:#8fb6ee; }
.panel__nota{ margin:12px 0 0; font-size:.78rem; color:rgba(233,240,250,.55); }

/* ══ ESCENA 1 · DE DÓNDE SALEN LOS DATOS (se mira, no se toca) ════════
   Las cuatro fuentes REALES del correo (agente_prospectos_v2.generar_email,
   8.7): la base de clientes, la ficha de su empresa, la plantilla de su
   sector y lo que usted le pide. Cada dato viaja de su tarjeta al programa
   y de ahí a la línea del borrador que lo usa (los viajes los pinta
   taller.js con la API de animaciones, midiendo dónde está cada cosa: así
   vale para cualquier ancho). ⚠️ Esta escena NO se inclina con el ratón
   (él: «que no sea interactivo») y su contenedor no gira: si girara, las
   medidas de pantalla y la capa de los viajes no coincidirían. */
.e3d--fuentes{
  position:relative; transform:none !important;
  display:grid; grid-template-columns:minmax(220px,.95fr) 150px minmax(270px,1.15fr); gap:22px 26px; align-items:center;
}
.fuente--base, .bo-linea--base, .leyenda--base, .vuelo--base{ --c:#22b573; }
.fuente--ficha, .bo-linea--ficha, .leyenda--ficha, .vuelo--ficha{ --c:#3d8bff; }
.fuente--plantilla, .bo-linea--plantilla, .leyenda--plantilla, .vuelo--plantilla{ --c:#9b7cf4; }
.fuente--motivo, .bo-linea--motivo, .leyenda--motivo, .vuelo--motivo{ --c:#f0b43c; }
.fuentes{ display:grid; gap:10px; transform-style:preserve-3d; transform:rotateY(14deg); transform-origin:100% 50%; }
.fuente{
  position:relative; padding:10px 13px 11px 16px; border-radius:12px;
  background:linear-gradient(160deg, rgba(22,46,86,.96), rgba(10,24,48,.96));
  border:1px solid rgba(140,185,255,.18); box-shadow:0 18px 36px rgba(0,0,0,.35);
  translate:0; transition:border-color .3s, box-shadow .3s, translate .35s cubic-bezier(.3,.7,.2,1);
}
.fuente::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 2px 2px 0; background:var(--c); }
.fuente.activa{ border-color:var(--c); translate:10px 0; box-shadow:0 0 0 1px var(--c), 0 18px 40px rgba(0,0,0,.4), 0 0 28px var(--c); }
.fuente__cab{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.fuente__ico{ flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:var(--c); }
.fuente__ico .ui-icon{ width:15px; height:15px; }
.fuente__cab b{ font:700 .86rem var(--fuente-t); color:#fff; }
.fu-hoja{ display:grid; gap:3px; font:500 .71rem/1.35 "Segoe UI", var(--fuente); }
.fu-hoja__cab{ color:#7fd6a8; font-weight:700; }
.fu-hoja__fila{ padding:2px 6px; border-radius:4px; background:rgba(255,255,255,.05); color:rgba(233,240,250,.8);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background-color .3s, color .3s; }
.fuente.activa .fu-hoja__fila{ background:rgba(34,181,115,.22); color:#fff; }
.fu-ficha{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0; font-size:.72rem; }
.fu-ficha dt{ color:#8fb2e0; }
.fu-ficha dd{ margin:0; color:rgba(233,240,250,.88); }
.fu-plantilla{ margin:0; font-size:.73rem; line-height:1.4; color:rgba(233,240,250,.8); }
.fu-plantilla b{ display:block; color:#d2c4ff; font-size:.76rem; margin-bottom:2px; }
.fu-motivo{ margin:0; font-size:.78rem; line-height:1.4; font-style:italic; color:#fbe3ae; }

/* el programa: un núcleo con tres anillos que giran en 3D */
.nucleo{ position:relative; width:150px; height:150px; justify-self:center; display:grid; place-items:center; transform-style:preserve-3d; }
.nucleo__anillo{ position:absolute; inset:10px; border-radius:50%; border:2px solid rgba(111,176,255,.5); }
.nucleo__anillo--1{ animation:t-gira1 7s linear infinite; }
.nucleo__anillo--2{ inset:22px; border-color:rgba(155,124,244,.55); animation:t-gira2 9s linear infinite; }
.nucleo__anillo--3{ inset:0; border:1px dashed rgba(34,181,115,.45); animation:t-gira3 16s linear infinite; }
@keyframes t-gira1{ from{ transform:rotateX(68deg) rotateZ(0deg); } to{ transform:rotateX(68deg) rotateZ(360deg); } }
@keyframes t-gira2{ from{ transform:rotateY(64deg) rotateZ(0deg); } to{ transform:rotateY(64deg) rotateZ(-360deg); } }
@keyframes t-gira3{ to{ transform:rotateZ(360deg); } }
.nucleo__centro{
  width:66px; height:66px; border-radius:18px; display:grid; place-items:center; transform:translateZ(30px);
  background:linear-gradient(160deg, #16386a, #0b1f3d); border:1px solid rgba(140,185,255,.45);
  box-shadow:0 0 30px rgba(31,123,255,.45);
}
.nucleo__centro img{ width:50px; height:auto; display:block; }   /* SU símbolo (marca-oscura.webp) */
.nucleo.late .nucleo__centro{ animation:t-late .55s ease-out; }
@keyframes t-late{ 40%{ scale:1.16; box-shadow:0 0 54px rgba(111,176,255,.85); } }
.nucleo__rot{ position:absolute; bottom:-20px; white-space:nowrap; font:700 .6rem var(--fuente); letter-spacing:.14em; text-transform:uppercase; color:#8fb6ee; }
.quieto .nucleo__anillo{ animation-play-state:paused; }

/* el borrador que se va llenando */
.borrador3d{
  background:#fbfcfe; color:#1d2c46; border-radius:14px; overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.45); transform:rotateY(-12deg); transform-origin:0 50%;
}
.bo-cab{ display:flex; align-items:center; gap:9px; padding:9px 14px; background:#0d609f; color:#fff; font:500 .8rem "Segoe UI", var(--fuente); }
.bo-cuerpo{ padding:12px 14px 4px; }
.bo-linea{ margin:0 0 7px; padding-left:10px; border-left:3px solid var(--c); font-size:.84rem; line-height:1.5; }
.bo-linea--campo{ font-size:.8rem; color:#5a6b7c; }
.bo-linea--campo b{ color:#1d2c46; }
.bo-campo{ display:inline-block; min-width:50px; color:#8a96a8; }
.bo-listo{ display:flex; align-items:center; gap:8px; margin:0; padding:9px 14px 12px; border-top:1px solid #eef2f7; font:600 .78rem var(--fuente); color:#0e7c45; }
.bo-listo .ui-icon{ flex:none; width:16px; height:16px; stroke-width:2.4; }
/* mientras se prepara: las líneas esperan su dato. Base (sin JS, o con
   «reducir movimiento»): todas puestas, que es lo que importa ver. */
.e3d--fuentes.preparando .bo-linea{ clip-path:inset(0 100% 0 0); }
.e3d--fuentes.preparando .bo-linea.llega{ clip-path:inset(0 0 0 0); transition:clip-path .7s cubic-bezier(.3,.7,.2,1); }
.e3d--fuentes.preparando .bo-listo{ visibility:hidden; }

/* los datos que viajan (los crea taller.js). ⚠️ La capa va FUERA del 3D
   (hermana de .e3d, no hija): dentro, las tarjetas inclinadas, que vienen
   hacia quien mira, tapaban los datos en pleno vuelo. */
[data-escena3d="1"]{ position:relative; }
.vuelos{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.vuelo{
  position:absolute; left:0; top:0; padding:5px 11px; border-radius:999px; white-space:nowrap;
  background:var(--c); color:#fff; font:700 .72rem var(--fuente-t);
  box-shadow:0 8px 20px rgba(0,0,0,.4), 0 0 18px var(--c);
}
.vuelo--base, .vuelo--motivo{ color:#06122a; }
.leyenda{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin:8px 0 0; padding:0;
  list-style:none; font:600 .76rem var(--fuente); color:rgba(233,240,250,.75); }
.leyenda li{ display:flex; align-items:center; gap:7px; }
.leyenda li::before{ content:""; width:10px; height:10px; border-radius:3px; background:var(--c); }

/* ══ ESCENA 2 · LA REVISIÓN, DENTRO DEL PROGRAMA ═══════════════════════
   Es el cuadro de verdad de la 8.x (comercial.js «revisar» +
   revision_correo.py): Para / Desde, en qué punto está, avisos, asunto,
   texto editable, «Datos con los que se ha escrito» y Saltar · Rehacer ·
   Crear borrador. El aviso de la cifra es uno de los que da el programa. */
.e3d--revision{ display:grid; grid-template-columns:1.4fr minmax(230px,.8fr); gap:36px; align-items:start; }
.panel--rev{ grid-column:1; grid-row:1; padding:0; overflow:hidden; background:#f6f8fb; color:#1d2c46; border-color:rgba(255,255,255,.6); transform:translateZ(10px); }
.rv-titulo{ display:flex; align-items:center; gap:12px; padding:11px 16px; background:linear-gradient(180deg, #16305a, #0e1f3b); color:#fff; }
.rv-icono{ font-size:1.25rem; line-height:1; }
.rv-titulo b{ display:block; font:700 .96rem var(--fuente-t); }
.rv-titulo small{ font-size:.75rem; color:#a9c1e2; }
.rv-programa{ margin-left:auto; padding:3px 9px; border-radius:999px; background:rgba(111,176,255,.18); color:#bcd8ff;
  font:700 .62rem var(--fuente); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.rv-cab{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 16px 0; }
.rv-cab > div{ display:flex; flex-direction:column; gap:1px; padding:8px 11px; border-radius:10px; background:#fff; border:1px solid #e1e8f1; font-size:.76rem; color:#5a6b7c; }
.rv-cab small{ font:800 .58rem var(--fuente); letter-spacing:.15em; color:#8a96a8; }
.rv-cab b{ font:700 .86rem var(--fuente-t); color:#1d2c46; }
.rv-punto{ margin:9px 16px 0; padding:7px 11px; border-radius:8px; background:#eaf1ff; color:#30425b; font-size:.79rem; line-height:1.45; }
.rv-punto b{ color:#1a4fa0; }
.rv-avisos{ margin:8px 16px 0; display:grid; gap:6px; }
.rv-aviso, .rv-ok{ padding:7px 11px; border-radius:8px; font-size:.79rem; line-height:1.45; animation:t-aviso-entra .4s cubic-bezier(.2,.8,.2,1); }
.rv-aviso{ background:#fff5dc; border:1px solid #f0cd83; color:#674700; }
.rv-ok{ background:#e5f6ec; border:1px solid #a6dbbd; color:#0e6a3a; }
@keyframes t-aviso-entra{ from{ translate:0 -6px; } }
.rv-asunto{ margin:10px 16px 6px; font-size:.83rem; color:#5a6b7c; }
.rv-asunto b{ color:#1d2c46; }
.rv-texto{
  margin:0 16px; padding:10px 12px; min-height:118px; border-radius:8px; background:#fff; border:1px solid #d5deea;
  font-size:.9rem; line-height:1.55; color:#283444; outline:none; cursor:text; caret-color:#1a6be6;
  transition:box-shadow .2s, border-color .2s;
}
.rv-texto:focus{ border-color:#1a6be6; box-shadow:0 0 0 3px rgba(31,123,255,.18); }
.rv-texto p{ margin:0 0 8px; }
.rv-cifra{ background:rgba(255,196,0,.32); color:inherit; border-radius:4px; padding:1px 3px; box-shadow:0 0 0 2px rgba(240,180,60,.35); }
.rv-quitar{ margin-left:6px; padding:1px 7px; border:0; border-radius:4px; background:#c98e0c; color:#fff; font:700 .66rem var(--fuente); cursor:pointer; vertical-align:1px; }
.rv-quitar:focus-visible{ outline:2px solid #1a6be6; outline-offset:2px; }
.rv-texto.rehaciendo{ animation:t-rehace .9s ease; }
@keyframes t-rehace{ 40%{ filter:blur(3px); opacity:.35; } }
.rv-nota{ margin:6px 16px 0; font-size:.73rem; color:#7b8490; }
.rv-datos{ margin:8px 16px 0; font-size:.78rem; color:#30425b; }
.rv-datos summary{ cursor:pointer; font-weight:700; color:#1a4fa0; }
.rv-datos dl{ display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:8px 0 0; }
.rv-datos dt{ color:#7b8490; }
.rv-datos dd{ margin:0; }
.rv-botones{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:10px; padding:11px 16px 13px; border-top:1px solid #e1e8f1; background:#fff; }
.rv-b{ border:0; border-radius:8px; padding:9px 14px; font:700 .84rem var(--fuente-t); cursor:pointer; scale:1; transition:filter .2s, scale .15s; }
.rv-b:hover{ filter:brightness(1.05); }
.rv-b:active{ scale:.96; }
.rv-b:focus-visible{ outline:2px solid #1a6be6; outline-offset:2px; }
.rv-b--g{ background:#e8edf4; color:#3b4a63; }
.rv-b--m{ background:#ece6ff; color:#5639c2; }
.rv-b--v{ background:#0e7c45; color:#fff; box-shadow:0 8px 18px rgba(14,124,69,.3); }
/* al crear el borrador (o saltarlo): el cuadro se pliega y sale el resultado */
.panel--hecho{
  grid-column:1; grid-row:1; align-self:center; padding:22px;
  transform:translateZ(30px) scale(.86); opacity:0; visibility:hidden;
  transition:opacity .45s ease .55s, transform .6s cubic-bezier(.3,1.3,.5,1) .55s, visibility 0s .55s;
}
.e3d--revision.hecho .panel--rev{ animation:t-a-outlook .8s cubic-bezier(.5,0,.3,1) forwards; pointer-events:none; }
@keyframes t-a-outlook{ to{ transform:translate3d(0,-4%,120px) rotateX(24deg) scale(.3); opacity:0; } }
.e3d--revision.hecho .panel--hecho{ opacity:1; visibility:visible; transform:translateZ(30px) scale(1); }
.e3d--revision.saltado .env__grande span{ background:#5b6b82; box-shadow:0 0 0 6px rgba(91,107,130,.25); }
.env__grande{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.env__grande span{ flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#0e7c45; color:#fff; box-shadow:0 0 0 6px rgba(14,124,69,.25); }
.env__grande .ui-icon{ width:24px; height:24px; stroke-width:2.6; }
.env__grande b{ display:block; font:800 1.15rem var(--fuente-t); }
.env__grande small{ font-size:.84rem; line-height:1.4; color:rgba(233,240,250,.72); }
.env__cab{ display:flex; align-items:center; gap:8px; font:700 .88rem var(--fuente-t); color:#cfe2ff; }
.env__cab .ui-icon{ width:17px; height:17px; }
.env__fila{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; margin-top:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.06); border-left:3px solid #1f7bff; }
.env__fila b{ font:700 .88rem var(--fuente-t); }
.env__fila span{ grid-column:1; font-size:.8rem; color:rgba(233,240,250,.7); }
.env__fila time{ grid-row:1; grid-column:2; font-size:.74rem; color:#8fb6ee; }
.env__otra{ margin-top:14px; background:none; border:1px solid rgba(255,255,255,.22); color:#dfe9f8; border-radius:8px; padding:7px 12px; cursor:pointer; font:600 .8rem var(--fuente); }
.env__otra:hover{ background:rgba(255,255,255,.08); }
.panel--guia{ grid-column:2; grid-row:1; transform:translateZ(70px); }
.mira{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:9px; }
.mira li{ display:flex; gap:9px; font-size:.84rem; line-height:1.4; color:rgba(233,240,250,.85); transition:color .3s; }
.mira .ui-icon{ flex:none; width:17px; height:17px; margin-top:1px; color:#6ee0a0; stroke-width:2.4; transition:color .3s; }
.mira li.salta{ color:#fff; }
.mira li.salta .ui-icon{ color:#f0b43c; }

/* ══ ESCENA 3 · EL SEGUIMIENTO ═════════════════════════════════════════ */
.e3d--seguimiento{ display:grid; grid-template-columns:1.3fr minmax(240px,.85fr); gap:30px 40px; align-items:center; }
.pista{ position:relative; height:290px; transform-style:preserve-3d; }
.pista__suelo{
  position:absolute; left:0; right:0; top:50%; height:240px; margin-top:-120px; border-radius:22px;
  transform-style:preserve-3d; transform:rotateX(50deg);
  background:
    linear-gradient(rgba(140,185,255,.08) 1px, transparent 1px) 0 0 / 100% 30px,
    linear-gradient(90deg, rgba(140,185,255,.08) 1px, transparent 1px) 0 0 / 30px 100%,
    radial-gradient(80% 90% at 50% 50%, rgba(46,111,216,.35), rgba(10,24,48,.4));
  border:1px solid rgba(140,185,255,.25); box-shadow:0 40px 60px rgba(0,0,0,.45);
}
.pista__linea{ position:absolute; left:8%; right:8%; top:50%; height:5px; margin-top:-2px; border-radius:3px; background:rgba(255,255,255,.14); }
.pista__linea i{ position:absolute; inset:0; border-radius:3px; transform-origin:0 50%; transform:scaleX(var(--avance, 0));
  background:linear-gradient(90deg, #1f7bff, #6fb0ff); box-shadow:0 0 14px rgba(31,123,255,.7); transition:transform .6s cubic-bezier(.3,.7,.2,1); }
.estacion{ position:absolute; top:50%; width:0; height:0; transform-style:preserve-3d; }
.estacion--0{ left:8%; } .estacion--1{ left:29%; } .estacion--2{ left:50%; } .estacion--3{ left:71%; } .estacion--4{ left:92%; }
.estacion i{ position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%;
  background:#22355a; border:2px solid rgba(140,185,255,.45); transition:background-color .3s, border-color .3s, box-shadow .3s; }
.estacion.pasada i{ background:#1f7bff; border-color:#6fb0ff; }
.estacion.actual i{ box-shadow:0 0 0 7px rgba(31,123,255,.3); }
.estacion.aviso i{ background:#f0b43c; border-color:#ffd88a; box-shadow:0 0 0 7px rgba(240,180,60,.3); }
/* las etiquetas se ponen de pie para que se lean */
.estacion em{ position:absolute; left:0; top:18px; translate:-50% 0; white-space:nowrap; transform-origin:50% 0;
  transform:rotateX(-50deg); font:700 .78rem var(--fuente-t); font-style:normal; color:rgba(233,240,250,.75); }
.estacion.actual em{ color:#fff; }
/* la ficha del cliente, de pie, que avanza por la pista */
.pista__ficha{
  position:absolute; top:50%; left:8%; width:46px; height:46px; margin:-46px 0 0 -23px; border-radius:50%;
  display:grid; place-items:center; transform-origin:50% 100%; transform:rotateX(-50deg) translateY(-14px);
  background:linear-gradient(160deg, #ffffff, #d7e6ff); color:#0b2545; font:800 .9rem var(--fuente-t);
  box-shadow:0 10px 20px rgba(0,0,0,.45), 0 0 0 4px rgba(31,123,255,.45);
  transition:left .65s cubic-bezier(.3,.7,.2,1);
}
.panel--estado{ transform:translateZ(70px); }
.estado__fecha{ display:flex; align-items:center; gap:9px; color:#a9cdff; }
.estado__fecha .ui-icon{ width:19px; height:19px; }
.estado__fecha b{ font:800 1.15rem var(--fuente-t); color:#fff; }
.estado__alerta{ margin-left:auto; padding:3px 10px; border-radius:999px; background:#f0b43c; color:#3a2a04; font:800 .7rem var(--fuente); letter-spacing:.04em; }
.estado__alerta.late{ animation:t-aviso 1.4s ease-out 2; }   /* taller.js la reinicia cada vez que sale */
@keyframes t-aviso{ 0%{ box-shadow:0 0 0 0 rgba(240,180,60,.6); } 100%{ box-shadow:0 0 0 12px rgba(240,180,60,0); } }
.estado__evento{ margin:10px 0 12px; font:600 .95rem/1.45 var(--fuente-t); color:#fff; min-height:2.9em; }
.estado__fila{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid rgba(255,255,255,.1); }
.estado__fila small{ font:700 .62rem var(--fuente); letter-spacing:.13em; text-transform:uppercase; color:#8fb2e0; flex:none; }
.estado__fila b{ font:600 .88rem var(--fuente-t); text-align:right; }
.estado__pastilla{ padding:3px 10px; border-radius:999px; font:800 .7rem "Segoe UI", var(--fuente); letter-spacing:.04em; background:#e2ecfb; color:#1d57a6; }
.estado__pastilla.interes{ background:#d6f2df; color:#0f6a3a; }
.estado__pastilla.cliente{ background:#0f6a3a; color:#fff; }
.tiempo{ grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:center; transform:translateZ(40px); }
.tiempo__play{
  grid-row:span 2; width:46px; height:46px; border-radius:50%; border:0; display:grid; place-items:center;
  background:#1f7bff; color:#fff; cursor:pointer; box-shadow:0 10px 24px rgba(31,123,255,.4);
}
.tiempo__play svg{ width:20px; height:20px; fill:currentColor; }   /* ▶ / ❚❚ lo cambia taller.js */
.tiempo__play:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.tiempo__barra{ display:flex; flex-direction:column; gap:4px; }
.tiempo__rot{ font:700 .66rem var(--fuente); letter-spacing:.14em; text-transform:uppercase; color:#8fb6ee; }
.tiempo input[type="range"]{ width:100%; accent-color:#1f7bff; height:26px; cursor:pointer; margin:0; }
.tiempo__marcas{ grid-column:2; display:flex; justify-content:space-between; font:600 .74rem var(--fuente); color:rgba(233,240,250,.6); }

/* ── Entrada al abrir o reiniciar (sólo paneles PLANOS, y lo que lleva 3D
      dentro, sin opacidad: ver arriba) ──────────────────────────────── */
@keyframes t-panel{ from{ translate:0 26px; opacity:0; } }
@keyframes t-pista{ from{ transform:rotateX(25deg) translateZ(-140px); } }
@keyframes t-crece{ from{ scale:.4; } }
.en-marcha .panel{ animation:t-panel .75s cubic-bezier(.2,.8,.2,1) backwards; }
.en-marcha .panel--guia, .en-marcha .panel--estado{ animation-delay:.12s; }
.en-marcha .pista{ animation:t-pista .9s cubic-bezier(.2,.8,.2,1) backwards; }
.en-marcha .tiempo{ animation:t-panel .75s cubic-bezier(.2,.8,.2,1) .2s backwards; }
.en-marcha .fuente{ animation:t-panel .6s cubic-bezier(.2,.8,.2,1) backwards; }
.en-marcha .fuente:nth-child(2){ animation-delay:.08s; }
.en-marcha .fuente:nth-child(3){ animation-delay:.16s; }
.en-marcha .fuente:nth-child(4){ animation-delay:.24s; }
.en-marcha .nucleo{ animation:t-crece .7s cubic-bezier(.3,1.4,.5,1) .2s backwards; }
.en-marcha .borrador3d{ animation:t-panel .7s cubic-bezier(.2,.8,.2,1) .3s backwards; }

/* ── Columnas a una sola en pantallas estrechas ─────────────────────── */
@media (max-width:900px){
  .promesa__tres > .taller.abierto{ margin-top:-8px; }
  .e3d--fuentes, .e3d--revision, .e3d--seguimiento{ grid-template-columns:1fr; gap:18px; }
  .fuentes, .borrador3d{ transform:none; }
  .nucleo{ width:130px; height:130px; margin-bottom:16px; }   /* el rótulo cuelga 20 px por debajo */
  .panel--guia{ grid-column:1; grid-row:2; }
  .panel--rev, .panel--hecho{ grid-column:1; grid-row:1; }
  .e3d{ transform:rotateX(2deg); }
  .panel--estado, .panel--guia, .tiempo{ transform:translateZ(20px); }
  .pista{ height:230px; }
}
@media (max-width:600px){
  .taller__cabeza{ flex-wrap:wrap; padding:14px 14px 0; gap:8px 10px; }
  .taller__n{ margin-right:auto; }
  .taller__titulo{ order:3; flex-basis:100%; font-size:1rem; }
  .taller__pie{ padding:4px 14px 0; font-size:.9rem; }
  .taller__lienzo{ padding:18px 12px 20px; }
  .taller__aviso{ padding:0 14px 16px; }
  .js .promesa__p{ margin:0; padding:22px 14px 18px; }
  .rv-cab{ grid-template-columns:1fr; }
  .rv-texto{ font-size:16px; }            /* 16 px: el iPhone no hace zum al escribir */
  .rv-programa{ display:none; }
  .estacion em{ font-size:.66rem; }
  .tiempo__marcas{ font-size:.64rem; }
}