/* ═══════════════════════════════════════════════════════════════════
   ZENITH — Recorrido de la portada (index.php)

   Tres capítulos que se reproducen con el scroll, al estilo de las
   páginas de producto de Apple: cada sección es alta (varias
   pantallas) y dentro lleva una «escena» fija (position: sticky). El
   scroll no mueve la página: hace avanzar la escena. Al subir, todo
   se reproduce al revés.

     1. Portafolio — la laptop se abre y salen los 8 trabajos más
        recientes; luego regresan y se cierra.
     2. Equipo — «Zenith Team»; se destaca a cada uno y detrás
        aparecen gráficos de su especialidad.
     3. Servicios — las cuatro disciplinas, una por tramo de scroll.

   La lógica está en recorrido.js. Aquí sólo hay estados: el JS pone
   variables CSS y atributos, y las transiciones hacen el resto.

   Estética: «digital, tipo videojuego», sin buscar realismo. Neón
   periwinkle, retícula de píxeles y la fuente Silkscreen (estilo de
   las etiquetas de nombre de Minecraft).
   ═══════════════════════════════════════════════════════════════════ */

.rec{
  --rec-fondo:#080a13;
  --rec-tinta:#f4efe4;
  --rec-tinta-2:rgba(244,239,228,.62);
  --rec-tinta-3:rgba(244,239,228,.36);
  --rec-peri:#a8b8f3;
  --rec-peri-f:#7790ed;
  --rec-borde:rgba(168,184,243,.22);
  --rec-vidrio:rgba(14,17,33,.62);
  --rec-palabra-2:rgba(245,237,226,.26);   /* palabras vecinas de la ruleta */
  --rec-verde:#7fe0b0;
  --pixel:"Silkscreen", ui-monospace, "SFMono-Regular", Menlo, monospace;
  position:relative;z-index:1;
  color:var(--rec-tinta);
  background:var(--rec-fondo);
}
/* En oscuro se deja ver la nebulosa del fondo de la web. */
[data-theme="dark"] .rec{background:rgba(8,10,19,.55)}
/* Transición desde la portada (crema en claro) hasta el escenario oscuro */
/* Color literal: --rec-fondo vive dentro de .rec y éstos son hermanos. */
.rec-entrada{height:16vh;background:linear-gradient(to bottom, rgba(8,10,19,0) 0%, #080a13 100%);
  position:relative;z-index:1;pointer-events:none}
[data-theme="dark"] .rec-entrada{background:linear-gradient(to bottom, rgba(8,10,19,0), rgba(8,10,19,.55))}
.rec-salida{height:16vh;background:linear-gradient(to bottom, #080a13 0%, rgba(8,10,19,0) 100%);
  position:relative;z-index:1;pointer-events:none}
[data-theme="dark"] .rec-salida{background:linear-gradient(to bottom, rgba(8,10,19,.55), rgba(8,10,19,0))}

.rec-sec{position:relative;padding:0}   /* index.php da 140px de padding a todo <section> */
/* Alto = pantallas de scroll que dura cada capítulo. Ajustados para
   que se sienta ágil: ~0,9 pantallas por persona y por disciplina. */
.rec-pf{height:360vh}
.rec-tm{height:470vh}
.rec-sv{height:380vh}
.rec-escena{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  /* Estrellas fijas propias: en claro no hay nebulosa detrás. */
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(244,239,228,.55), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgba(244,239,228,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 64%, rgba(168,184,243,.6), transparent 60%),
    radial-gradient(1px 1px at 34% 82%, rgba(244,239,228,.35), transparent 60%),
    radial-gradient(1px 1px at 56% 44%, rgba(168,184,243,.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 6% 70%, rgba(244,239,228,.4), transparent 60%);
}
.rec-pixel{font-family:var(--pixel);text-transform:uppercase;letter-spacing:.08em}

/* ═══ 1 · PORTAFOLIO ════════════════════════════════════════════ */

/* Suelo de retícula, horizonte de videojuego retro */
.pf-suelo{
  position:absolute;left:-20%;right:-20%;bottom:-8%;height:52%;
  transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;
  background-image:
    linear-gradient(rgba(119,144,237,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119,144,237,.28) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 85%);
          mask-image:linear-gradient(to top, #000 10%, transparent 85%);
  opacity:var(--pf-suelo, 0);
}
.pf-halo{
  position:absolute;left:50%;top:58%;width:90vmin;height:60vmin;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(119,144,237,.28), rgba(119,144,237,0));
  opacity:var(--pf-halo, 0);pointer-events:none;
}
.pf-palabra{
  position:absolute;left:0;right:0;top:9%;margin:0;text-align:center;
  font-family:var(--serif);font-weight:500;letter-spacing:-.035em;line-height:.9;
  font-size:clamp(64px, 15.5vw, 250px);
  font-variation-settings:"opsz" 144,"SOFT" 70;
  color:var(--rec-tinta);
  opacity:var(--pf-palabra-o, 0);
  transform:translateY(var(--pf-palabra-y, 60px)) scale(var(--pf-palabra-s, .96));
  pointer-events:none;white-space:nowrap;
}
.pf-palabra em{font-style:italic;color:var(--rec-peri)}

/* HUD de esquina: aire de videojuego sin quitar protagonismo */
.pf-hud{position:absolute;top:92px;font-size:11px;color:var(--rec-tinta-3);opacity:var(--pf-hud, 0);
  display:flex;flex-direction:column;gap:6px}
.pf-hud-izq{left:clamp(18px,3vw,40px)}
.pf-hud-der{right:clamp(18px,3vw,40px);text-align:right;align-items:flex-end}
.pf-hud b{color:var(--rec-peri);font-weight:400}
.pf-barra{width:120px;height:6px;border:1px solid var(--rec-borde);padding:1px}
.pf-barra i{display:block;height:100%;width:var(--pf-carga, 0%);background:var(--rec-peri-f)}

/* ── La laptop (CSS 3D) ────────────────────────────────────────── */
.pf-lap-caja{
  position:absolute;left:50%;top:50%;
  /* La base en perspectiva ocupa casi otra laptop hacia abajo: el
     ancho lo limita también el alto de la pantalla. */
  width:min(44vw, 620px, 74vh);
  transform:translate(-50%,-50%) translateY(var(--pf-lap-y, 30vh)) scale(var(--pf-lap-s, .9));
  opacity:var(--pf-lap-o, 0);
  perspective:1700px;perspective-origin:50% 20%;
}
.pf-lap{
  position:relative;width:100%;aspect-ratio:16 / 10;
  transform-style:preserve-3d;
  transform:rotateX(-16deg) rotateY(var(--pf-giro, 0deg));
}
.pf-tapa{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform-origin:50% 100%;
  transform:rotateX(var(--pf-tapa, -86deg));
}
.pf-tapa-frente,.pf-tapa-dorso{
  position:absolute;inset:0;border-radius:16px 16px 5px 5px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.pf-tapa-frente{
  background:#0b0e1c;padding:3.2% 3.2% 4.2%;
  border:2px solid rgba(168,184,243,.6);
  box-shadow:0 0 0 1px rgba(8,10,19,.9) inset, 0 0 34px rgba(119,144,237,calc(.12 + var(--pf-brillo, 0) * .4));
}
.pf-tapa-dorso{
  transform:rotateY(180deg);
  background:
    linear-gradient(135deg, rgba(168,184,243,.10), rgba(168,184,243,0) 60%),
    repeating-linear-gradient(0deg, rgba(168,184,243,.05) 0 2px, transparent 2px 6px),
    #121630;
  border:2px solid rgba(168,184,243,.5);
  display:grid;place-items:center;
}
.pf-tapa-dorso svg{width:16%;fill:var(--rec-peri);filter:drop-shadow(0 0 10px rgba(119,144,237,.8))}
.pf-pantalla{
  /* La pantalla es oscura en los dos temas: sus textos no heredan la tinta. */
  --rec-tinta-3:rgba(244,239,228,.4);--rec-peri:#a8b8f3;--rec-borde:rgba(168,184,243,.22);
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:6px;
  background:#04050b;
  box-shadow:inset 0 0 40px rgba(119,144,237,calc(var(--pf-brillo, 0) * .35));
}
/* Líneas de barrido de monitor */
.pf-pantalla::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
.pf-boot,.pf-mini{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity .35s}
.pf-boot{align-items:center;justify-content:center;gap:12px;opacity:var(--pf-boot, 0)}
.pf-boot-logo{font-size:clamp(12px,1.6vw,20px);color:var(--rec-peri)}
.pf-boot-txt{font-size:clamp(7px,.8vw,10px);color:var(--rec-tinta-3)}
.pf-boot .pf-barra{width:42%}
.pf-mini{padding:5%;gap:5%;opacity:var(--pf-mini, 0)}
.pf-mini-cab{display:flex;justify-content:space-between;font-size:clamp(7px,.85vw,11px);color:var(--rec-peri)}
.pf-mini-rej{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:4%}
.pf-mini-rej span{border-radius:3px;background:#12162b center / cover no-repeat;border:1px solid rgba(168,184,243,.18);
  opacity:var(--pf-mini-o, 1)}

.pf-base{
  position:absolute;left:-3%;width:106%;top:100%;height:104%;
  transform-origin:50% 0;transform:rotateX(90deg);
  border-radius:4px 4px 18px 18px;
  background:linear-gradient(to bottom, #151a33, #0d1022);
  border:2px solid rgba(168,184,243,.55);
  box-shadow:0 0 30px rgba(119,144,237,.18);
  padding:6% 8% 0;
}
/* Teclado de píxeles: cada tecla es un cuadradito */
.pf-teclado{
  height:48%;border-radius:4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(8,10,19,1) 2px 4px) 0 0 / 100% 100%,
    repeating-linear-gradient(0deg, rgba(168,184,243,.30) 0 calc(100% / 6 - 3px), rgba(8,10,19,1) 0 calc(100% / 6));
  -webkit-mask:repeating-linear-gradient(90deg, #000 0 calc(100% / 14 - 3px), transparent 0 calc(100% / 14));
          mask:repeating-linear-gradient(90deg, #000 0 calc(100% / 14 - 3px), transparent 0 calc(100% / 14));
}
.pf-trackpad{width:34%;height:30%;margin:7% auto 0;border-radius:6px;border:1.5px solid rgba(168,184,243,.35);
  background:rgba(168,184,243,.05)}
.pf-sombra{position:absolute;left:4%;right:4%;bottom:-78%;height:26%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0));transform:translateZ(-1px)}

/* ── Las tarjetas de los trabajos ──────────────────────────────── */
.pf-tarjetas{position:absolute;inset:0;pointer-events:none;perspective:1400px}
.pf-card{
  position:absolute;left:0;top:0;width:var(--pf-card-w, 210px);
  border-radius:14px;overflow:hidden;
  background:var(--rec-vidrio);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(168,184,243,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(8,10,19,.6) inset;
  color:var(--rec-tinta);
  opacity:0;will-change:transform,opacity;
  transition:border-color .3s, box-shadow .3s;
}
.pf-card.activa{pointer-events:auto;animation:pf-flota 6s ease-in-out infinite}
/* Flotan cuando ya están fuera. `translate` se suma al `transform`
   que pone el JS, así el CSS mueve sin que el JS pinte en bucle. */
.pf-card:nth-child(2n).activa{animation-delay:-2s}
.pf-card:nth-child(3n).activa{animation-delay:-4s}
@keyframes pf-flota{0%,100%{translate:0 0}50%{translate:0 -7px}}
.pf-card:hover,.pf-card:focus-visible{border-color:var(--rec-peri);
  box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 26px rgba(119,144,237,.45)}
.pf-card:focus-visible{outline:2px solid var(--rec-peri);outline-offset:3px}
.pf-card-img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;background:#12162b}
.pf-card-sin{display:grid;place-items:center;width:100%;aspect-ratio:4 / 3;background:
  repeating-linear-gradient(135deg, rgba(168,184,243,.07) 0 8px, transparent 8px 16px), #10142a}
.pf-card-txt{display:block;padding:10px 12px 12px}
.pf-card-cat{display:inline-block;font-size:9px;padding:3px 6px;margin-bottom:6px;
  background:rgba(8,10,19,.7);border:1px solid rgba(168,184,243,.3);color:var(--rec-peri)}
.pf-card-nom{display:block;font-family:var(--serif);font-size:15px;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pf-cta{
  position:absolute;left:50%;bottom:6%;transform:translate(-50%, var(--pf-cta-y, 20px));
  opacity:var(--pf-cta-o, 0);pointer-events:none;
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;
  font-size:14px;letter-spacing:.03em;color:#0a0c14;background:var(--rec-tinta);
  transition:background .3s, transform .3s;
}
.pf-cta.activa{pointer-events:auto}
.pf-cta:hover{background:var(--rec-peri)}
.pf-vacio{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:var(--rec-tinta-3)}

/* ═══ 2 · EQUIPO ════════════════════════════════════════════════ */

.tm-orbitas{position:absolute;inset:0;pointer-events:none;opacity:var(--tm-intro, 0)}
.tm-orbitas svg{position:absolute;left:50%;top:56%;width:130vmax;transform:translate(-50%,-50%)}
.tm-orbitas ellipse{fill:none;stroke:rgba(168,184,243,.14);stroke-width:1}

.tm-hud-lista{position:absolute;left:clamp(18px,3vw,44px);top:clamp(96px,15vh,140px);
  display:flex;flex-direction:column;gap:12px;font-size:11px;color:var(--rec-tinta-3);opacity:var(--tm-intro, 0)}
.tm-hud-lista svg{width:34px;height:18px;stroke:var(--rec-tinta-2);fill:none;stroke-width:1.6;margin-bottom:4px}
.tm-hud-lista li{list-style:none;display:flex;align-items:center;gap:10px;transition:color .5s}
.tm-hud-lista li::before{content:"";width:10px;height:1px;background:currentColor;opacity:.6}
.tm-hud-lista ul{margin:0;padding:0;display:flex;flex-direction:column;gap:12px;border-left:1px solid rgba(244,239,228,.18);padding-left:0}
.tm-hud-lista li.activo{color:var(--rec-peri)}
.tm-hud-frase{position:absolute;right:clamp(18px,3vw,44px);top:clamp(96px,15vh,140px);margin:0;
  font-size:11px;line-height:1.7;color:var(--rec-tinta-2);text-align:left;opacity:var(--tm-intro, 0)}
.tm-hud-frase::before{content:"";display:inline-block;width:46px;height:1px;background:currentColor;
  vertical-align:middle;margin-right:14px;opacity:.6}

/* Composición: las mismas medidas que la portada de Nosotros */
.tm-comp{
  position:absolute;left:50%;bottom:0;margin:0;
  /* Por ancho y no por alto: en una pantalla angosta y alta (tablet en
     vertical) el alto mandaba y la foto se salía por los lados. */
  width:min(calc((100vh - 70px) * .885), 832px, 100vw);aspect-ratio:1504 / 1700;
  transform:translateX(-50%) translateY(var(--tm-comp-y, 12%));
  opacity:var(--tm-comp-o, 0);
}
.tm-marca{
  position:absolute;left:9.11%;top:5.59%;width:84.44%;aspect-ratio:1270 / 565;
  background:var(--rec-tinta);
  -webkit-mask:url('/assets/nosotros/team-marca.webp') center / 100% 100% no-repeat;
          mask:url('/assets/nosotros/team-marca.webp') center / 100% 100% no-repeat;
  transform:translateY(var(--tm-marca-y, 0));
  transition:opacity .8s;
}
.tm-escena[data-activo]:not([data-activo=""]) .tm-marca{opacity:.82}
.tm-foto{position:absolute;left:16.62%;top:17.41%;width:67.09%;aspect-ratio:1009 / 1378}
.tm-capa{
  position:absolute;height:auto;display:block;user-select:none;-webkit-user-drag:none;
  transform-origin:50% 100%;
  transition:filter .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.tm-base  {left:0;top:0;width:100%}
.tm-capa[data-p="abraham"]{left:22.398%;top:4.209%;width:29.732%}
.tm-capa[data-p="jorge"]  {left:50.545%;top:7.547%;width:29.336%}
.tm-cubos {left:22.894%;top:65.747%;width:60.159%}
.tm-capa[data-p="emilio"] {left:0.396%;top:18.505%;width:52.131%}
.tm-capa[data-p="andres"] {left:52.131%;top:24.456%;width:47.671%}

/* Con alguien destacado, el resto baja la luz */
.tm-escena[data-activo]:not([data-activo=""]) .tm-capa{filter:brightness(.38) saturate(.55)}
.tm-escena[data-activo="jorge"]   .tm-capa[data-p="jorge"],
.tm-escena[data-activo="abraham"] .tm-capa[data-p="abraham"],
.tm-escena[data-activo="emilio"]  .tm-capa[data-p="emilio"],
.tm-escena[data-activo="andres"]  .tm-capa[data-p="andres"]{
  /* Crecimiento sutil (2,5 %): la foto no puede salirse de su sitio
     porque los recortes no están completos por abajo. */
  transform:scale(1.025);
  filter:brightness(1.06) drop-shadow(0 0 1px rgba(236,228,212,.5)) drop-shadow(0 0 26px rgba(119,144,237,.5));
}

/* Etiquetas de nombre en pixel, estilo nametag de Minecraft */
.tm-tag{
  position:absolute;transform:translate(-50%, 0);white-space:nowrap;
  font-family:var(--pixel);font-size:clamp(9px,1.25vw,17px);line-height:1;letter-spacing:.06em;
  padding:.38em .55em .32em;color:#fff;background:rgba(0,0,0,.42);
  transition:background .5s, color .5s, opacity .5s, box-shadow .5s;
}
.tm-escena[data-activo]:not([data-activo=""]) .tm-tag{opacity:.35}
.tm-escena[data-activo="jorge"]   .tm-tag[data-p="jorge"],
.tm-escena[data-activo="abraham"] .tm-tag[data-p="abraham"],
.tm-escena[data-activo="emilio"]  .tm-tag[data-p="emilio"],
.tm-escena[data-activo="andres"]  .tm-tag[data-p="andres"]{
  opacity:1;background:var(--rec-peri);color:#0a0c14;box-shadow:0 0 18px rgba(119,144,237,.7);
}

/* El destello: la estrella de la marca que se enciende sobre la persona */
.tm-destello{position:absolute;width:9%;aspect-ratio:1;transform:translate(-50%,-50%) scale(0) rotate(-45deg);
  opacity:0;pointer-events:none}
.tm-destello svg{width:100%;height:100%;fill:#fff;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px var(--rec-peri-f))}
.tm-escena[data-activo="jorge"]   .tm-destello[data-p="jorge"],
.tm-escena[data-activo="abraham"] .tm-destello[data-p="abraham"],
.tm-escena[data-activo="emilio"]  .tm-destello[data-p="emilio"],
.tm-escena[data-activo="andres"]  .tm-destello[data-p="andres"]{animation:tm-destello 1.4s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes tm-destello{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-45deg)}
  35% {opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(0deg)}
  100%{opacity:.85;transform:translate(-50%,-50%) scale(.55) rotate(20deg)}
}

/* Paneles de fondo: apoyo visual, nunca protagonistas */
/* visibility además de opacity: un grupo oculto no se pinta, y sus
   paneles de vidrio (backdrop-filter, costoso) dejan de calcularse. */
.tm-grupo{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), visibility 0s linear .7s}
.tm-escena[data-activo=""]        .tm-grupo[data-p="intro"],
.tm-escena[data-activo="jorge"]   .tm-grupo[data-p="jorge"],
.tm-escena[data-activo="abraham"] .tm-grupo[data-p="abraham"],
.tm-escena[data-activo="emilio"]  .tm-grupo[data-p="emilio"],
.tm-escena[data-activo="andres"]  .tm-grupo[data-p="andres"]{opacity:1;visibility:visible;transition-delay:0s}
.tm-panel{
  position:absolute;border-radius:12px;overflow:hidden;
  background:var(--rec-vidrio);border:1px solid var(--rec-borde);
  box-shadow:0 20px 50px rgba(0,0,0,.35), 0 0 30px rgba(119,144,237,.08);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:11px;color:var(--rec-tinta-2);
  opacity:.78;
  transform:translateY(24px) scale(.97);
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.tm-grupo .tm-panel:nth-child(2){transition-delay:.08s}
.tm-grupo .tm-panel:nth-child(3){transition-delay:.16s}
.tm-grupo .tm-panel:nth-child(4){transition-delay:.24s}
.tm-escena[data-activo=""]        .tm-grupo[data-p="intro"]   .tm-panel,
.tm-escena[data-activo="jorge"]   .tm-grupo[data-p="jorge"]   .tm-panel,
.tm-escena[data-activo="abraham"] .tm-grupo[data-p="abraham"] .tm-panel,
.tm-escena[data-activo="emilio"]  .tm-grupo[data-p="emilio"]  .tm-panel,
.tm-escena[data-activo="andres"]  .tm-grupo[data-p="andres"]  .tm-panel{transform:none;animation:tm-flota 7s ease-in-out infinite}
.tm-grupo .tm-panel:nth-child(2n){animation-delay:-3s !important}
@keyframes tm-flota{0%,100%{translate:0 0}50%{translate:0 -8px}}
/* Columna izquierda: lista (arriba) · panel grande · ficha (abajo).
   El panel pequeño va arriba, junto a la lista, para no tapar la ficha.
   Derecha: bajo la frase de la esquina. */
.tm-pos-1{left:3.5%;top:34%;width:21%}
.tm-pos-2{left:17.5%;top:11%;width:10.5%}
.tm-pos-3{right:3.5%;top:25%;width:21%}
.tm-pos-4{right:6%;top:62%;width:16%}
.tm-panel-cab{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid rgba(168,184,243,.12);
  font-size:9px;color:var(--rec-tinta-3)}
.tm-panel-cab i{width:6px;height:6px;border-radius:50%;background:rgba(168,184,243,.35)}
.tm-panel-cab b{margin-left:auto;font-weight:400;color:var(--rec-peri)}
.tm-panel-cuerpo{padding:10px 12px 12px}
.tm-panel svg{display:block;width:100%;height:auto}
.tm-kpi{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);font-size:26px;color:var(--rec-tinta)}
.tm-kpi small{font-family:var(--pixel);font-size:9px;color:var(--rec-verde)}
.tm-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tm-chips span{font-size:9px;padding:3px 7px;border:1px solid var(--rec-borde);border-radius:4px;color:var(--rec-tinta-2)}
.tm-apps{display:flex;gap:7px;padding:10px}
.tm-apps span{flex:1;aspect-ratio:1;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:13px;
  background:rgba(8,10,19,.8);border:1px solid var(--rec-borde);color:var(--rec-peri)}
.tm-codigo{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;line-height:1.7;padding:10px 12px;
  white-space:pre;color:rgba(244,239,228,.55);overflow:hidden}
.tm-codigo .k{color:#b39cf5}.tm-codigo .f{color:var(--rec-peri)}.tm-codigo .s{color:#7fe0b0}
/* Hueco para una imagen o video de trabajo real */
.tm-slot{position:relative;aspect-ratio:4 / 3;background:
  radial-gradient(circle at 30% 30%, rgba(119,144,237,.25), transparent 60%),
  repeating-linear-gradient(135deg, rgba(168,184,243,.06) 0 8px, transparent 8px 16px), #0d1124}
.tm-slot img,.tm-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tm-slot-icono{position:absolute;inset:0;display:grid;place-items:center}
.tm-slot-icono svg{width:26%;stroke:rgba(168,184,243,.5);fill:none;stroke-width:1.4}
.tm-slot.alto{aspect-ratio:3 / 4}
.tm-slot.ancho{aspect-ratio:16 / 9}
.tm-paleta{display:flex;height:56px}
.tm-paleta span{flex:1;display:flex;align-items:flex-end;padding:4px;font-size:8px;color:rgba(8,10,19,.7)}
.tm-tipo{font-family:var(--serif);font-size:54px;line-height:1;color:var(--rec-tinta);padding:6px 12px 2px}
.tm-pistas{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.tm-pistas div{height:12px;border-radius:3px;background:rgba(168,184,243,.12);position:relative}
.tm-pistas div span{position:absolute;top:0;bottom:0;border-radius:3px}
.tm-rec{display:flex;align-items:center;gap:6px;font-size:9px;color:#ff7a7a}
.tm-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a5a;animation:tm-parpadeo 1.2s steps(2) infinite}
@keyframes tm-parpadeo{50%{opacity:0}}
.tm-visor{position:relative}
.tm-visor::after{content:"";position:absolute;inset:8%;pointer-events:none;
  background:
    linear-gradient(#fff,#fff) 0 0 / 14px 1.5px no-repeat, linear-gradient(#fff,#fff) 0 0 / 1.5px 14px no-repeat,
    linear-gradient(#fff,#fff) 100% 0 / 14px 1.5px no-repeat, linear-gradient(#fff,#fff) 100% 0 / 1.5px 14px no-repeat,
    linear-gradient(#fff,#fff) 0 100% / 14px 1.5px no-repeat, linear-gradient(#fff,#fff) 0 100% / 1.5px 14px no-repeat,
    linear-gradient(#fff,#fff) 100% 100% / 14px 1.5px no-repeat, linear-gradient(#fff,#fff) 100% 100% / 1.5px 14px no-repeat;
  opacity:.7}
.tm-nodos{display:flex;align-items:center;justify-content:space-between;padding:14px 12px}
.tm-nodos span{width:30px;height:30px;border-radius:8px;border:1px solid var(--rec-borde);background:rgba(8,10,19,.8);
  display:grid;place-items:center;color:var(--rec-peri);font-size:12px}
.tm-nodos i{flex:1;height:1px;background:linear-gradient(90deg, rgba(168,184,243,.5), rgba(168,184,243,.15));margin:0 4px}

/* Ficha de texto de cada uno, abajo a la izquierda */
.tm-fichas{position:absolute;left:clamp(18px,3vw,44px);bottom:clamp(28px,7vh,72px);width:min(30vw, 380px)}
.tm-ficha{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(18px);
  transition:opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.tm-escena[data-activo=""]        .tm-ficha[data-p=""],
.tm-escena[data-activo="jorge"]   .tm-ficha[data-p="jorge"],
.tm-escena[data-activo="abraham"] .tm-ficha[data-p="abraham"],
.tm-escena[data-activo="emilio"]  .tm-ficha[data-p="emilio"],
.tm-escena[data-activo="andres"]  .tm-ficha[data-p="andres"]{opacity:1;transform:none;pointer-events:auto;transition-delay:.2s}
.tm-ficha-num{font-size:11px;color:var(--rec-peri)}
.tm-ficha-nom{margin:10px 0 2px;font-family:var(--serif);font-weight:500;font-size:clamp(38px,4.4vw,64px);
  line-height:.95;letter-spacing:-.03em;font-variation-settings:"opsz" 144,"SOFT" 70}
.tm-ficha-rol{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,28px);color:var(--rec-peri)}
.tm-ficha p{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--rec-tinta-2);max-width:34ch}
.tm-ficha a{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rec-tinta);border-bottom:1px solid currentColor;padding-bottom:2px}
.tm-ficha a:hover{color:var(--rec-peri)}
.tm-progreso{position:absolute;right:clamp(18px,3vw,44px);bottom:clamp(28px,7vh,72px);display:flex;gap:6px;
  opacity:var(--tm-intro, 0)}
.tm-progreso span{width:26px;height:4px;background:rgba(244,239,228,.16);transition:background .5s}
.tm-progreso span.hecho{background:var(--rec-peri)}

/* ═══ 3 · SERVICIOS (ruleta de servicios.html, gobernada por scroll) ═══ */
.sv-escena{display:flex;flex-direction:column;
  background-image:radial-gradient(rgba(119,144,237,.08) 1px, transparent 1px);background-size:36px 36px}
.sv-cab{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;
  padding:clamp(84px,11vh,120px) clamp(20px,4.5vw,64px) 0}
.sv-tag{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rec-tinta-3);margin-bottom:16px}
.sv-tag::before{content:"";width:8px;height:8px;background:var(--rec-peri-f);border-radius:50%}
.sv-titulo{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(32px,min(3.8vw,6.4vh),58px);line-height:.95;letter-spacing:-.03em;
  font-variation-settings:"opsz" 144,"SOFT" 60}
.sv-titulo em{font-style:italic;color:var(--rec-peri)}
.sv-desc{margin:0;justify-self:end;max-width:420px;font-size:15px;line-height:1.65;color:var(--rec-tinta-2)}
.sv-escenario{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr)}
.sv-izq,.sv-der{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0;overflow:hidden}
/* El JS ajusta la ruleta al hueco real: primero recorta el asomo de las
   vecinas y sólo encoge (poco, ≥ 0,8) si ni la del frente cabe. Antes se
   encogía todo hasta el 58 % y el texto de las tarjetas quedaba en 8 px. */
.rec .sv-izq .dvp-cards{height:var(--sv-alto, 600px);margin:var(--sv-margen, 0px) 0;flex-shrink:0;
  transform:scale(var(--sv-escala, 1));transform-origin:50% 50%}
.sv-izq{padding:0 clamp(16px,2vw,32px) 0 clamp(20px,4.5vw,64px)}   /* alineada con el titular */
.sv-der{padding-right:clamp(20px,4.5vw,64px)}
.sv-progreso{height:2px;background:rgba(119,144,237,.1);margin:0 clamp(20px,4.5vw,64px) 22px}
.sv-progreso i{display:block;height:100%;width:var(--sv-p, 0%);background:linear-gradient(90deg,var(--rec-peri-f),var(--rec-peri))}

/* Copia de la ruleta de servicios.html (mismos nombres de clase) */
.rec .dvp-cards{perspective:1200px;perspective-origin:50% 50%;width:100%;max-width:500px;height:600px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;isolation:isolate;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 89%,transparent 100%)}
.rec .drum-cards-3d{position:relative;width:min(460px,100%);height:410px;perspective:1200px}
.rec .dcard{position:absolute;left:0;top:50%;width:100%;height:410px;margin-top:-205px;border-radius:22px;
  display:flex;flex-direction:column;overflow:hidden;opacity:0;transform-origin:center;
  transition:transform .95s cubic-bezier(.77,0,.23,1), opacity .95s cubic-bezier(.77,0,.23,1);
  transform:translateY(700px) rotateX(-55deg) translateZ(-400px) scale(.65)}
.rec .dc-img{flex-shrink:0;height:140px;width:100%;overflow:hidden;position:relative}
.rec .dc-img svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rec .dc-content{flex:1;padding:20px 28px 24px;display:flex;flex-direction:column;justify-content:space-between}
.rec .dc-mkt{background:linear-gradient(175deg,#1b2538 0%,#0e1520 100%);border:1px solid rgba(119,144,237,.22)}
.rec .dc-dis{background:#7790ed}
.rec .dc-ia {background:#f0e9dc}
.rec .dc-sw {background:linear-gradient(175deg,#1a1530 0%,#0d0c1e 100%);border:1px solid rgba(168,184,243,.15)}
.rec .dc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rec .dc-num{font-family:var(--serif);font-style:italic;font-size:13px;opacity:.6}
.rec .dc-idx{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;padding:4px 10px;border:1px solid currentColor;border-radius:999px}
.rec .dc-accent{width:32px;height:2.5px;border-radius:2px;margin-bottom:12px;background:#7790ed}
.rec .dc-dis .dc-accent{background:rgba(14,18,32,.55)}
.rec .dc-ia .dc-accent{background:#202e42}
.rec .dc-title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.8vw,36px);line-height:1.05;letter-spacing:-.02em;margin-bottom:10px}
.rec .dc-mkt,.rec .dc-sw{color:#f5ede2}
.rec .dc-dis,.rec .dc-ia{color:#0e1219}
.rec .dc-desc{font-size:14px;line-height:1.55;margin-bottom:16px;flex:1;opacity:.78}
.rec .dc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.rec .dc-tags span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid currentColor;opacity:.72}
.rec .drum-dots{display:flex;gap:9px;justify-content:center}
.rec .drum-dot{width:6px;height:6px;border-radius:50%;background:rgba(245,237,226,.16);transition:background .4s, transform .4s}
.rec .drum-dot.is-active{background:#7790ed;transform:scale(1.5)}
.rec .dvp-words{perspective:950px;width:100%;height:min(560px, 56vh);overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 89%,transparent 100%)}
.rec .drum-words-3d{position:relative;width:100%;height:110px;perspective:950px}
.rec .dword{position:absolute;left:0;top:50%;width:100%;height:110px;margin-top:-55px;line-height:110px;
  font-family:var(--serif);font-weight:500;font-size:clamp(46px,5.6vw,88px);letter-spacing:-.035em;text-align:right;padding-right:8px;
  white-space:nowrap;opacity:0;color:rgba(245,237,226,.12);
  transition:transform .95s cubic-bezier(.77,0,.23,1), opacity .95s cubic-bezier(.77,0,.23,1), color .5s;
  transform:translateY(-600px) rotateX(55deg) translateZ(-300px)}
.rec .dword.is-front{color:var(--rec-tinta)}
.rec .dword.is-front::after{content:" \2190";color:var(--rec-peri);font-style:italic;font-size:.52em;vertical-align:middle}
.rec .drum-stat{color:var(--rec-tinta-2);font-size:14px;letter-spacing:.06em;text-align:right;width:100%;height:24px;
  padding-right:8px;transition:opacity .4s}

/* ═══ Control del recorrido automático ══════════════════════════ */
.rec-auto{
  position:fixed;left:50%;bottom:22px;z-index:60;transform:translate(-50%, 20px);
  display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;
  background:rgba(8,10,19,.72);border:1px solid rgba(168,184,243,.3);color:#f4efe4;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 12px 36px rgba(0,0,0,.35);
  font-size:11px;opacity:0;pointer-events:none;transition:opacity .4s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.rec-auto.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.rec-auto-barra{width:70px;height:4px;background:rgba(244,239,228,.15);overflow:hidden}
.rec-auto-barra i{display:block;height:100%;width:0;background:#a8b8f3}
.rec-auto button{font:inherit;font-family:var(--pixel);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 12px;border-radius:999px;border:1px solid rgba(168,184,243,.35);background:transparent;color:#f4efe4;cursor:pointer}
.rec-auto button:hover{background:rgba(168,184,243,.18)}
.rec-auto-x{width:30px;height:30px;padding:0 !important;display:grid;place-items:center}

/* ═══ Tablet y móvil ════════════════════════════════════════════ */
@media (max-width:1100px){
  .tm-pos-2,.tm-pos-4{display:none}
  .tm-pos-1{top:24%;width:24%}
  .tm-pos-3{top:22%;width:24%}
  .tm-hud-frase{display:none}
}
@media (max-width:860px){
  .sv-cab{grid-template-columns:1fr;gap:12px;text-align:center;justify-items:center;padding-top:clamp(76px,10vh,110px)}
  .sv-titulo{font-size:clamp(30px,8.6vw,52px)}
  .sv-desc{display:none}
  .sv-escenario{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .sv-izq{padding:0 16px}
  .sv-der{padding:0 20px 8px;gap:0}
  .rec .dvp-words{height:150px}
  .rec .drum-words-3d{height:80px;perspective:900px}
  .rec .dword{height:80px;margin-top:-40px;line-height:80px;font-size:clamp(34px,9vw,56px);text-align:center;padding-right:0}
  .rec .dword.is-front::after{content:none}   /* en columna no señala nada y descentraba */
  .rec .drum-stat{text-align:center;padding-right:0}
}
@media (max-width:720px){
  .rec-pf{height:320vh}.rec-tm{height:420vh}.rec-sv{height:340vh}
  .pf-palabra{top:15%;font-size:clamp(48px,17vw,120px)}
  .pf-lap-caja{top:55%;width:84vw}
  .pf-hud{display:none}
  .pf-card-nom{font-size:12px}
  .pf-card-txt{padding:7px 8px 8px}
  .pf-card-cat{font-size:7px}
  .pf-cta{bottom:4%;font-size:13px;padding:12px 20px;white-space:nowrap}
  .tm-hud-lista{display:none}
  .tm-comp{width:min(96vw, calc((100svh - 190px) * .885));bottom:150px}
  .tm-pos-1{left:3%;top:9%;width:36%}
  .tm-pos-3{right:3%;top:9%;width:36%;left:auto}
  .tm-panel{opacity:.55}
  .tm-fichas{left:18px;right:18px;width:auto;bottom:22px}
  .tm-ficha-nom{font-size:34px;margin-top:6px}
  .tm-ficha-rol{font-size:18px}
  .tm-ficha p{font-size:13px;margin-top:6px}
  .tm-ficha a{margin-top:8px}
  .tm-progreso{display:none}   /* la ficha ya dice «03 / 04»; arriba chocaba con los paneles */
  .rec .drum-cards-3d{width:min(360px,100%);height:340px;perspective:900px}
  .rec .dcard{height:340px;margin-top:-170px}
  .rec .dc-img{height:88px}
  .rec .dc-top{display:none}          /* los puntos ya dicen cuál es */
  .rec .dc-content{padding:16px 20px 18px}
  .rec .dc-title{font-size:26px}
  .rec .dc-desc{font-size:13.5px;margin-bottom:12px}
  .rec-auto{bottom:14px;max-width:calc(100vw - 28px)}
  .rec-auto-barra{display:none}
}
/* Móviles bajos (iPhone SE, 667 px): la tarjeta necesita el sitio. Fuera la
   etiqueta y las palabras vecinas de la ruleta; queda la del frente. */
@media (max-width:720px) and (max-height:740px){
  .sv-tag{display:none}
  .sv-cab{padding-top:70px}
  .rec .dvp-words{height:84px}
}
@media (prefers-reduced-motion:reduce){
  .tm-panel{animation:none !important}
  .tm-destello{display:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Panel de presentación del equipo (estado «intro») */
.tm-barras{display:flex;flex-direction:column;gap:10px;font-size:9px;color:var(--rec-tinta-2)}
.tm-barras div{display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:10px}
.tm-barras i{height:6px;background:rgba(168,184,243,.12);position:relative}
.tm-barras i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);
  background:linear-gradient(90deg, var(--rec-peri-f), var(--rec-peri))}
.tm-apps-rej{display:grid;grid-template-columns:repeat(4,1fr)}
.tm-apps-rej span{font-size:11px}
/* Ilustración de relleno mientras no haya imagen real en el hueco */
.tm-slot-arte svg{position:absolute;inset:0;width:100%;height:100%}

/* Luz de estudio detrás del equipo: separa los trajes negros del fondo
   (en oscuro, un foco frío; en claro, el gris suave de la referencia). */
.tm-comp::before{content:"";position:absolute;inset:6% -8% -2%;pointer-events:none;
  background:radial-gradient(ellipse 50% 52% at 50% 60%, rgba(119,144,237,.16), rgba(119,144,237,0) 70%)}

/* ═══════════════════════════════════════════════════════════════════
   TEMA CLARO
   El recorrido sigue en crema, continuo con el resto de la página: no
   hay cambio a oscuro. Se redefinen las variables y, donde el oscuro
   usa un color fijo, se da su equivalente claro. La pantalla de la
   laptop sigue siendo oscura: es una pantalla.
   `:not([data-theme="dark"])` cubre también el caso sin atributo.
   ═══════════════════════════════════════════════════════════════════ */
:root:not([data-theme="dark"]) .rec{
  --rec-fondo:transparent;
  --rec-tinta:#292621;
  --rec-tinta-2:rgba(41,38,33,.7);
  --rec-tinta-3:rgba(41,38,33,.5);
  --rec-peri:#4d63c4;
  --rec-peri-f:#7790ed;
  --rec-borde:rgba(41,38,33,.13);
  --rec-vidrio:rgba(252,249,243,.72);
  --rec-palabra-2:rgba(41,38,33,.2);
  --rec-verde:#1f8f62;
  background:transparent;
}
:root:not([data-theme="dark"]) .rec-entrada,
:root:not([data-theme="dark"]) .rec-salida{background:none}
:root:not([data-theme="dark"]) .rec-escena{background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(77,99,196,.35), transparent 60%),
    radial-gradient(1.4px 1.4px at 72% 12%, rgba(77,99,196,.25), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 64%, rgba(77,99,196,.35), transparent 60%),
    radial-gradient(1.4px 1.4px at 34% 82%, rgba(77,99,196,.2), transparent 60%)}

/* Portafolio */
:root:not([data-theme="dark"]) .pf-suelo{background-image:
    linear-gradient(rgba(77,99,196,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,99,196,.2) 1px, transparent 1px)}
:root:not([data-theme="dark"]) .pf-halo{background:radial-gradient(closest-side, rgba(119,144,237,.22), rgba(119,144,237,0))}
:root:not([data-theme="dark"]) .pf-tapa-frente{
  background:#f3eee4;border-color:rgba(77,99,196,.5);
  box-shadow:0 0 0 1px rgba(255,255,255,.8) inset, 0 24px 50px rgba(41,38,33,.16),
             0 0 34px rgba(119,144,237,calc(var(--pf-brillo, 0) * .35))}
:root:not([data-theme="dark"]) .pf-tapa-dorso{
  background:linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,0) 60%),
             repeating-linear-gradient(0deg, rgba(77,99,196,.05) 0 2px, transparent 2px 6px), #ece5d7;
  border-color:rgba(77,99,196,.5)}
:root:not([data-theme="dark"]) .pf-tapa-dorso svg{fill:#7790ed;filter:drop-shadow(0 0 8px rgba(119,144,237,.7))}
:root:not([data-theme="dark"]) .pf-base{
  background:linear-gradient(to bottom, #f6f2ea, #e4dbcc);border-color:rgba(77,99,196,.5);
  box-shadow:0 30px 60px rgba(41,38,33,.16)}
:root:not([data-theme="dark"]) .pf-teclado{background:
    repeating-linear-gradient(90deg, transparent 0 2px, #ebe3d5 2px 4px) 0 0 / 100% 100%,
    repeating-linear-gradient(0deg, rgba(41,38,33,.24) 0 calc(100% / 6 - 3px), #ebe3d5 0 calc(100% / 6))}
:root:not([data-theme="dark"]) .pf-trackpad{border-color:rgba(41,38,33,.2);background:rgba(41,38,33,.04)}
:root:not([data-theme="dark"]) .pf-sombra{background:radial-gradient(closest-side, rgba(41,38,33,.28), rgba(41,38,33,0))}
:root:not([data-theme="dark"]) .pf-card{border-color:rgba(77,99,196,.28);
  box-shadow:0 18px 44px rgba(41,38,33,.16), 0 0 0 1px rgba(255,255,255,.6) inset}
:root:not([data-theme="dark"]) .pf-card:hover,
:root:not([data-theme="dark"]) .pf-card:focus-visible{border-color:#7790ed;
  box-shadow:0 22px 50px rgba(41,38,33,.2), 0 0 24px rgba(119,144,237,.35)}
:root:not([data-theme="dark"]) .pf-card-cat{background:rgba(255,255,255,.75);border-color:rgba(77,99,196,.3)}
:root:not([data-theme="dark"]) .pf-card-img{background:#e8e0d2}
:root:not([data-theme="dark"]) .pf-card-sin{background:
  repeating-linear-gradient(135deg, rgba(77,99,196,.08) 0 8px, transparent 8px 16px), #efe8dc}
:root:not([data-theme="dark"]) .pf-cta{color:#f5ede2}
:root:not([data-theme="dark"]) .pf-cta:hover{background:#4d63c4}

/* Equipo */
:root:not([data-theme="dark"]) .tm-orbitas ellipse{stroke:rgba(41,38,33,.12)}
:root:not([data-theme="dark"]) .tm-hud-lista ul{border-left-color:rgba(41,38,33,.18)}
:root:not([data-theme="dark"]) .tm-comp::before{
  background:radial-gradient(ellipse 50% 52% at 50% 60%, rgba(41,38,33,.09), rgba(41,38,33,0) 70%)}
/* Atenuar en claro es ACLARAR hacia el fondo, no oscurecer: oscurecidos
   se leían como manchas negras sobre el crema. Sin transparencia, para
   que un recorte de delante no deje ver al de detrás. */
:root:not([data-theme="dark"]) .tm-escena[data-activo]:not([data-activo=""]) .tm-capa{
  filter:grayscale(.75) contrast(.42) brightness(1.55)}
:root:not([data-theme="dark"]) .tm-escena[data-activo="jorge"]   .tm-capa[data-p="jorge"],
:root:not([data-theme="dark"]) .tm-escena[data-activo="abraham"] .tm-capa[data-p="abraham"],
:root:not([data-theme="dark"]) .tm-escena[data-activo="emilio"]  .tm-capa[data-p="emilio"],
:root:not([data-theme="dark"]) .tm-escena[data-activo="andres"]  .tm-capa[data-p="andres"]{
  filter:drop-shadow(0 16px 26px rgba(41,38,33,.28)) drop-shadow(0 0 22px rgba(119,144,237,.35))}
:root:not([data-theme="dark"]) .tm-escena[data-activo="jorge"]   .tm-tag[data-p="jorge"],
:root:not([data-theme="dark"]) .tm-escena[data-activo="abraham"] .tm-tag[data-p="abraham"],
:root:not([data-theme="dark"]) .tm-escena[data-activo="emilio"]  .tm-tag[data-p="emilio"],
:root:not([data-theme="dark"]) .tm-escena[data-activo="andres"]  .tm-tag[data-p="andres"]{
  background:#4d63c4;color:#fff;box-shadow:0 6px 18px rgba(77,99,196,.35)}
:root:not([data-theme="dark"]) .tm-destello svg{fill:#7790ed;
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px rgba(119,144,237,.9))}
:root:not([data-theme="dark"]) .tm-panel{box-shadow:0 18px 40px rgba(41,38,33,.12), 0 0 0 1px rgba(255,255,255,.6) inset;opacity:.9}
:root:not([data-theme="dark"]) .tm-panel-cab{border-bottom-color:rgba(41,38,33,.08)}
:root:not([data-theme="dark"]) .tm-panel-cab i{background:rgba(41,38,33,.2)}
:root:not([data-theme="dark"]) .tm-codigo{color:var(--rec-tinta-2)}
:root:not([data-theme="dark"]) .tm-codigo .k{color:#6a4fd0}
:root:not([data-theme="dark"]) .tm-codigo .s{color:#1f8f62}
:root:not([data-theme="dark"]) .tm-apps span,
:root:not([data-theme="dark"]) .tm-nodos span{background:rgba(255,255,255,.8)}
:root:not([data-theme="dark"]) .tm-nodos i{background:linear-gradient(90deg, rgba(77,99,196,.55), rgba(77,99,196,.15))}
:root:not([data-theme="dark"]) .tm-pistas div,
:root:not([data-theme="dark"]) .tm-barras i{background:rgba(41,38,33,.08)}
:root:not([data-theme="dark"]) .tm-progreso span{background:rgba(41,38,33,.15)}

/* Servicios */
:root:not([data-theme="dark"]) .sv-escena{background-image:radial-gradient(rgba(77,99,196,.12) 1px, transparent 1px)}
:root:not([data-theme="dark"]) .rec .dcard{box-shadow:0 30px 60px rgba(41,38,33,.16)}
:root:not([data-theme="dark"]) .rec .dc-ia{border:1px solid rgba(41,38,33,.12)}
:root:not([data-theme="dark"]) .rec .drum-dot{background:rgba(41,38,33,.18)}
:root:not([data-theme="dark"]) .sv-progreso{background:rgba(41,38,33,.08)}

/* Control del recorrido automático (fuera de .rec: colores explícitos) */
:root:not([data-theme="dark"]) .rec-auto{background:rgba(251,247,239,.86);border-color:rgba(41,38,33,.14);
  color:#292621;box-shadow:0 12px 36px rgba(41,38,33,.14)}
:root:not([data-theme="dark"]) .rec-auto button{color:#292621;border-color:rgba(41,38,33,.2)}
:root:not([data-theme="dark"]) .rec-auto button:hover{background:rgba(119,144,237,.15)}
:root:not([data-theme="dark"]) .rec-auto-barra{background:rgba(41,38,33,.12)}
:root:not([data-theme="dark"]) .rec-auto-barra i{background:#7790ed}