/* ============================================================
   TWL · Tipos de daños — rediseño premium (namespace .twl-dz)
   Dark, glassmorphism, micro-interacciones. Sin dependencias.
   ============================================================ */
.twl-dz,.twl-ba,.twl-sv{
  --o:var(--c-orange-burnt,#e76301); --o2:var(--c-orange-bright,#ff7a1a);
  --bg:var(--c-ink-950,#0a0a0b); --ink:#f4f4f5; --muted:#bcbcc2; --dim:#8e8e95; --line:rgba(255,255,255,.1);
  --glass:rgba(255,255,255,.03); --glass-h:rgba(255,255,255,.05);
  --ease:var(--ease-expo,cubic-bezier(.16,1,.3,1));
  position:relative; isolation:isolate;
  padding:clamp(4rem,9vw,8rem) clamp(1.25rem,5vw,5rem);
  background:radial-gradient(120% 80% at 18% 30%,rgba(231,99,1,.10) 0%,transparent 55%),
             radial-gradient(100% 100% at 85% 90%,rgba(231,99,1,.05) 0%,transparent 50%),
             #0a0a0b;
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow:hidden;
}
.twl-dz{
  display:flex;
  flex-direction:column;
}
/* grilla técnica de fondo */
.twl-dz::before,.twl-ba::before,.twl-sv::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(100% 70% at 50% 40%,#000 0%,transparent 75%);
          mask-image:radial-gradient(100% 70% at 50% 40%,#000 0%,transparent 75%);
}
/* canvas más sutil sobre daños/antes-después (ya muy ocupados) */
.twl-dz .twl-particles-canvas,.twl-ba .twl-particles-canvas{ opacity:.50; }
/* la grilla técnica deriva lento (keyframe en twl-lab-fx.css) */
.twl-dz::before,.twl-ba::before{ animation:twlLabGridDrift 90s linear infinite; }
@media (prefers-reduced-motion:reduce){ .twl-dz::before,.twl-ba::before{ animation:none; } }
.twl-dz__intro{
  position:relative;
  z-index:2;
  order:1;
  flex-shrink:0;
  width:min(940px,100%);
  margin:0 auto clamp(1rem,2.2vw,1.5rem);
  text-align:center;
}
.twl-dz__intro .twl-dz__eyebrow{
  justify-content:center;
  width:max-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
.twl-dz__intro .twl-dz__title{
  margin-left:auto;
  margin-right:auto;
  margin-bottom:0;
  text-align:center;
}
.twl-dz__inner{
  position:relative; z-index:1; order:3; flex-shrink:0; max-width:1800px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
}

/* ---------- columna llanta ---------- */
.twl-dz__stage{
  position:relative; align-self:center;
  min-height:min(620px,82vh);
  display:flex; align-items:center; justify-content:center;
}
.twl-dz__halo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(45% 45% at 50% 50%,rgba(231,99,1,.22) 0%,rgba(231,99,1,.06) 40%,transparent 70%);
  filter:blur(14px);
}
/* anillos concéntricos decorativos (rotan lento, contrarios) */
.twl-dz__rings{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.twl-dz__rings svg{ width:min(115%,640px); height:auto; opacity:.5;
  animation:twlDzSpin 140s linear infinite; transform-origin:50% 50%; }
.twl-dz__sweep{
  position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:50%;
  width:min(92%,520px); aspect-ratio:1; margin:auto;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(231,99,1,.16) 24deg,transparent 60deg);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);
          mask:radial-gradient(circle,transparent 52%,#000 53%);
  animation:twlDzSpin 9s linear infinite; mix-blend-mode:screen;
}
.twl-dz__wheelwrap{
  position:relative; z-index:2; width:min(98%,560px);
  display:flex; align-items:center; justify-content:center;
  transform:perspective(1300px) rotateX(0deg) rotateY(0deg);
  transition:transform .3s var(--ease); transform-style:preserve-3d; will-change:transform;
}
.twl-dz__rotor{ position:relative; width:100%; }
.twl-dz__wheel{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.18));
}
@media (prefers-reduced-motion:reduce){
  .twl-dz__rings svg,.twl-dz__sweep{animation:none}
}
/* hotspots — fijos sobre la zona real de cada daño */
.twl-dz__dots{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.twl-dz__dotn{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; }
.twl-dz__dot{
  position:absolute; width:38px; height:38px; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center; pointer-events:auto; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:600; color:var(--ink);
  border-radius:50%; background:rgba(10,10,11,.6); border:1px solid var(--line);
  backdrop-filter:blur(4px); transition:.4s var(--ease);
}
.twl-dz__dot::after{ /* anillo pulsante */
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(231,99,1,.55); opacity:0; animation:twlDzPulse 2.6s ease-out infinite;
}
.twl-dz__dot:nth-child(2)::after{animation-delay:.6s}
.twl-dz__dot:nth-child(3)::after{animation-delay:1.2s}
.twl-dz__dot:nth-child(4)::after{animation-delay:1.8s}
.twl-dz__dot.is-active,.twl-dz__dot:hover{
  background:var(--o); border-color:var(--o); color:#0a0a0b;
  box-shadow:0 0 0 4px rgba(231,99,1,.18),0 10px 28px rgba(231,99,1,.4);
  transform:translate(-50%,-50%) scale(1.18);
}
.twl-dz__dot.is-active::after{border-color:var(--o);opacity:0}

/* ---------- HUD superior (laboratorio) ---------- */
.twl-dz__hud{
  position:relative; z-index:2; flex-shrink:0; width:100%; margin:0 0 clamp(1rem,2vw,1.5rem);
  padding:1rem clamp(1rem,2.4vw,1.8rem);
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  backdrop-filter:blur(8px);
  font-family:'JetBrains Mono',monospace;
}
.twl-dz__hud::after{ /* línea de barrido que recorre el HUD */
  content:""; position:absolute; left:0; top:0; bottom:0; width:120px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(231,99,1,.10),transparent);
  animation:twlDzScanX 5.5s linear infinite;
}
.twl-dz__hudbrk{ position:absolute; width:14px; height:14px; border:1px solid var(--o); opacity:.7; }
.twl-dz__hudbrk.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.twl-dz__hudbrk.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.twl-dz__hudbrk.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.twl-dz__hudbrk.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.twl-dz__hudtop{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.twl-dz__hudst{ display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); }
.twl-dz__hudst i{ width:8px; height:8px; border-radius:50%; background:var(--o); position:relative; }
.twl-dz__hudst i::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--o);
  animation:twlDzPulse 2s ease-out infinite; }
.twl-dz__hudbar{ position:relative; flex:1; min-width:120px; height:6px; border-radius:3px;
  background:rgba(255,255,255,.06); overflow:hidden; }
.twl-dz__hudbar::before{ content:""; position:absolute; top:0; left:0; height:100%; width:38%;
  background:linear-gradient(90deg,transparent,var(--o)); border-radius:3px;
  animation:twlDzLoad 2.8s cubic-bezier(.6,0,.2,1) infinite; }
.twl-dz__hudtag{ font-size:.74rem; letter-spacing:.1em; color:#d2d2d7; text-transform:uppercase; white-space:nowrap; }
.twl-dz__hudmetrics{ display:flex; flex-wrap:wrap; gap:.5rem .55rem; margin-top:.85rem; }
.twl-dz__chip{ display:inline-flex; align-items:baseline; gap:.45rem;
  padding:.34rem .7rem; border:1px solid var(--line); border-radius:7px;
  background:rgba(0,0,0,.25); font-size:.74rem; font-weight:600; color:var(--o2); white-space:nowrap; }
.twl-dz .twl-dz__chip b{ font-size:.64rem; letter-spacing:.1em; color:#fff; text-transform:uppercase; font-weight:600; }
.twl-dz__chip span{ color:var(--o2); }

/* ---------- stage premium: gauge / retícula / brackets / scan ---------- */
.twl-dz__gauge{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.twl-dz__gauge svg{ width:min(118%,690px); height:auto; animation:twlDzSpin 60s linear infinite; transform-origin:50% 50%; }
.twl-dz__cross{ position:absolute; z-index:1; width:min(86%,490px); aspect-ratio:1; margin:auto; inset:0; pointer-events:none; }
.twl-dz__cross::before,.twl-dz__cross::after{ content:""; position:absolute; background:rgba(231,99,1,.18); }
.twl-dz__cross::before{ left:50%; top:8%; bottom:8%; width:1px; transform:translateX(-50%); }
.twl-dz__cross::after{ top:50%; left:8%; right:8%; height:1px; transform:translateY(-50%); }
.twl-dz__brk{ position:absolute; width:26px; height:26px; border:1.5px solid rgba(231,99,1,.55); z-index:4; pointer-events:none; }
.twl-dz__brk.tl{ top:4%; left:6%; border-right:0; border-bottom:0; }
.twl-dz__brk.tr{ top:4%; right:6%; border-left:0; border-bottom:0; }
.twl-dz__brk.bl{ bottom:4%; left:6%; border-right:0; border-top:0; }
.twl-dz__brk.br{ bottom:4%; right:6%; border-left:0; border-top:0; }
.twl-dz__scanline{ position:absolute; z-index:3; left:8%; right:8%; height:2px; top:10%;
  background:linear-gradient(90deg,transparent,rgba(231,99,1,.85),transparent);
  box-shadow:0 0 14px 2px rgba(231,99,1,.5); pointer-events:none;
  animation:twlDzScanY 4.5s cubic-bezier(.5,0,.5,1) infinite; }
.twl-dz__readout{ position:absolute; z-index:4; bottom:3%; left:6%; font-family:'JetBrains Mono',monospace;
  font-size:.68rem; letter-spacing:.1em; color:#c4c4c9; text-transform:uppercase; pointer-events:none; }
.twl-dz .twl-dz__readout b{ color:var(--o2); }
/* reflejo/base bajo la llanta */
.twl-dz__wheelwrap::after{ content:""; position:absolute; left:50%; bottom:-7%; transform:translateX(-50%);
  width:72%; height:34px; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent 75%); filter:blur(4px); }
@media (prefers-reduced-motion:reduce){ .twl-dz__gauge svg,.twl-dz__scanline,.twl-dz__hud::after{animation:none} }

/* ---------- columna contenido ---------- */
.twl-dz__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
  font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}
.twl-dz__eyebrow::before{content:""; width:26px; height:1px; background:var(--o)}
.twl-dz .twl-dz__title{
  font-family:'Conthrax','Montserrat',sans-serif; font-weight:700;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.04; letter-spacing:-.02em;
  margin:0 0 2.2rem; color:var(--ink); text-shadow:none; opacity:1;
}
.twl-dz .twl-dz__title b{color:var(--o); font-weight:700}

/* acordeón "diagnóstico" — lenguaje HUD: hairlines, mono, corner-brackets, naranja. Sin cajas. */
.twl-dz__list{ display:flex; flex-direction:column; }
.twl-dz__item{
  position:relative; border-top:1px solid var(--line);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  opacity:0; transform:translateY(22px);
}
.twl-dz__item:last-child{ border-bottom:1px solid var(--line); }
.twl-dz__item.is-in{ opacity:1; transform:none; }
/* lavado naranja sutil del activo (no es una caja) */
.twl-dz__item::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(231,99,1,.07),transparent 55%);
  opacity:0; transition:opacity .45s var(--ease); }
.twl-dz__item.is-open::after{ opacity:1; }
/* corner-brackets HUD en hover / activo */
.twl-dz__ibrk{ position:absolute; width:13px; height:13px; border:1.5px solid var(--o); z-index:2;
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none; }
.twl-dz__ibrk.tl{ top:7px; left:-2px; border-right:0; border-bottom:0; }
.twl-dz__ibrk.br{ bottom:7px; right:-2px; border-left:0; border-top:0; }
.twl-dz__item:hover .twl-dz__ibrk,.twl-dz__item.is-open .twl-dz__ibrk{ opacity:1; }

/* reset agresivo del <button> del tema (background/radius/borde por defecto) */
.twl-dz .twl-dz__head{
  position:relative; z-index:1;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.3rem;
  width:100%; text-align:left; padding:1.5rem .7rem; cursor:pointer; color:inherit; font:inherit;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  transition:padding-left .4s var(--ease);
}
.twl-dz__item:hover .twl-dz__head,
.twl-dz__item.is-open .twl-dz__head{ padding-left:1.3rem; }
/* número mono con barra de acento (igual lenguaje que eyebrow/título) */
.twl-dz__num{
  position:relative; padding-left:1.05rem;
  font-family:'JetBrains Mono',monospace; font-size:1.45rem; font-weight:700; line-height:1;
  letter-spacing:-.02em; color:var(--o); transition:color .4s var(--ease);
}
.twl-dz__num::before{ content:""; position:absolute; left:0; top:50%; width:3px; height:0;
  background:linear-gradient(var(--o),var(--o2)); transform:translateY(-50%); transition:height .45s var(--ease); }
.twl-dz__item:hover .twl-dz__num,.twl-dz__item.is-open .twl-dz__num{ color:var(--o); }
.twl-dz__item:hover .twl-dz__num::before,.twl-dz__item.is-open .twl-dz__num::before{ height:135%; }
.twl-dz__h{ display:flex; flex-direction:column; gap:.36rem; min-width:0; }
.twl-dz .twl-dz__h h3{
  margin:0; font-family:'Conthrax','Montserrat',sans-serif; font-weight:600;
  font-size:clamp(.9rem,1.35vw,1.04rem); letter-spacing:.03em; color:#fff; text-transform:uppercase;
}
.twl-dz__h p{ margin:0; font-size:.85rem; color:#cdcdd2; line-height:1.5; }
/* indicador + / − minimalista */
.twl-dz__chev{ position:relative; width:20px; height:20px; flex:none; }
.twl-dz__chev::before,.twl-dz__chev::after{
  content:""; position:absolute; top:50%; left:50%; width:14px; height:1.5px; background:var(--muted);
  transform:translate(-50%,-50%); transition:.45s var(--ease);
}
.twl-dz__chev::after{ transform:translate(-50%,-50%) rotate(90deg); }
.twl-dz__item:hover .twl-dz__chev::before,.twl-dz__item:hover .twl-dz__chev::after,
.twl-dz__item.is-open .twl-dz__chev::before{ background:var(--o); }
.twl-dz__item.is-open .twl-dz__chev::after{ transform:translate(-50%,-50%) rotate(0); opacity:0; }

/* panel expandible (grid trick) */
.twl-dz__panel{ position:relative; z-index:1; display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.twl-dz__item.is-open .twl-dz__panel{ grid-template-rows:1fr; }
.twl-dz__panel>div{ overflow:hidden; }
.twl-dz__panelin{ padding:.2rem 1.5rem 1.9rem 2.95rem; }
.twl-dz__row{ display:grid; grid-template-columns:6rem 1fr; gap:1rem; padding:.95rem 0;
  border-top:1px solid var(--line); font-size:.88rem; line-height:1.62; color:#d6d6db; }
.twl-dz__row:first-child{ border-top:0; }
.twl-dz .twl-dz__row b{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.14em;
  color:var(--o2); text-transform:uppercase; font-weight:600; align-self:start; padding-top:.3rem; }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .twl-dz__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .twl-dz__stage{ min-height:auto; order:-1; }
  .twl-dz__wheelwrap{ width:min(62%,320px); }
}
@media (max-width:560px){
  .twl-dz__head{ gap:.95rem; padding:1.2rem .2rem; }
  .twl-dz__num{ font-size:1.25rem; }
  .twl-dz__panelin{ padding:.2rem .2rem 1.4rem 2.4rem; }
  .twl-dz__row{ grid-template-columns:1fr; gap:.2rem; padding:.7rem 0; }
  .twl-dz__dot{ width:30px; height:30px; }
}

/* ============ ANTES / DESPUÉS — slider tech (.twl-ba) ============ */
.twl-ba__inner{ position:relative; z-index:1; max-width:1800px; margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.twl-ba .twl-ba__title{ font-family:'Conthrax','Montserrat',sans-serif; font-weight:700;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 1.4rem;
  color:#fff; text-transform:uppercase; }
.twl-ba .twl-ba__title b{ color:var(--o); font-weight:700; }
.twl-ba .twl-ba__lead{ font-size:1rem; line-height:1.65; color:var(--muted); margin:0 0 1.9rem; max-width:46ch; }
.twl-ba__stats{ display:flex; flex-wrap:wrap; gap:.7rem; }
.twl-ba__stat{ position:relative; padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:12px;
  background:var(--glass); backdrop-filter:blur(6px); min-width:118px; }
.twl-ba .twl-ba__stat b{ display:block; font-family:'JetBrains Mono',monospace; font-size:1.3rem;
  font-weight:700; color:var(--o2); line-height:1; }
.twl-ba .twl-ba__stat span{ display:block; margin-top:.45rem; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; }

.twl-ba__stage{ position:relative; }
.twl-ba__frame{ position:relative; width:100%; aspect-ratio:16/11; overflow:hidden; border-radius:16px;
  border:1px solid var(--line); cursor:ew-resize; user-select:none; touch-action:none; background:#08080a;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02); }
.twl-ba__frame:active{ cursor:grabbing; }
.twl-ba__after,.twl-ba__before{ position:absolute; inset:0; }
.twl-ba__after img,.twl-ba__before img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.twl-ba__before{ clip-path:inset(0 50% 0 0); will-change:clip-path; }

/* ---- HUD superior dentro del frame ---- */
.twl-ba__hud{ position:absolute; z-index:6; top:0; left:0; right:0; display:flex; align-items:center; gap:.9rem;
  padding:.7rem clamp(.8rem,2vw,1.1rem); font-family:'JetBrains Mono',monospace; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,9,.85),rgba(8,8,9,0)); }
.twl-ba__hudst{ display:inline-flex; align-items:center; gap:.5rem; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; white-space:nowrap; }
.twl-ba__hudst i{ width:8px; height:8px; border-radius:50%; background:var(--o); position:relative; flex:none; }
.twl-ba__hudst i::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--o);
  animation:twlDzPulse 2s ease-out infinite; }
.twl-ba__hudbar{ position:relative; flex:1; min-width:48px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.08); overflow:hidden; }
.twl-ba__hudbar b{ position:absolute; top:0; left:0; bottom:0; width:50%; border-radius:3px;
  background:linear-gradient(90deg,rgba(231,99,1,.25),var(--o)); box-shadow:0 0 10px rgba(231,99,1,.5);
  transition:width .08s linear; }
.twl-ba__hudtag{ font-size:.64rem; letter-spacing:.1em; color:#d2d2d7; text-transform:uppercase; white-space:nowrap; }
.twl-ba .twl-ba__hudtag b{ color:var(--o2); font-weight:700; font-variant-numeric:tabular-nums; }

/* ---- barrido vertical tech ---- */
.twl-ba__scan{ position:absolute; z-index:3; left:0; right:0; top:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(231,99,1,.7),transparent);
  box-shadow:0 0 14px 2px rgba(231,99,1,.35); animation:twlBaScanY 5s cubic-bezier(.5,0,.5,1) infinite; }
@media (prefers-reduced-motion:reduce){ .twl-ba__scan{ animation:none; opacity:0; } }

.twl-ba__tag{ position:absolute; bottom:1rem; z-index:4; font-family:'JetBrains Mono',monospace;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; padding:.32rem .7rem; border-radius:4px;
  border:1px solid var(--line); background:rgba(10,10,11,.72); backdrop-filter:blur(4px); color:#fff; }
.twl-ba__tag--before{ left:1rem; }
.twl-ba__tag--after{ right:1rem; color:var(--o2); border-color:rgba(231,99,1,.45); }

/* ---- línea de revelado con marcas tipo retícula ---- */
.twl-ba__divider{ position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(231,99,1,.2),var(--o) 16%,var(--o) 84%,rgba(231,99,1,.2));
  box-shadow:0 0 16px rgba(231,99,1,.6); z-index:5; pointer-events:none; }
.twl-ba__divider::before,.twl-ba__divider::after{ content:""; position:absolute; left:50%; width:9px; height:9px;
  transform:translateX(-50%) rotate(45deg); border:1.5px solid var(--o); background:#0a0a0b; }
.twl-ba__divider::before{ top:7px; } .twl-ba__divider::after{ bottom:7px; }

/* ---- retícula / handle ---- */
.twl-ba__handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6;
  width:48px; height:48px; border-radius:50%; background:rgba(10,10,11,.85); border:2px solid var(--o);
  display:flex; align-items:center; justify-content:center; gap:4px;
  box-shadow:0 0 22px rgba(231,99,1,.5), inset 0 0 0 4px rgba(231,99,1,.08); pointer-events:none; }
.twl-ba__handle::before,.twl-ba__handle::after{ content:""; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.twl-ba__handle::before{ border-right:7px solid var(--o); }
.twl-ba__handle::after{ border-left:7px solid var(--o); }

.twl-ba__brk{ position:absolute; width:22px; height:22px; border:1.5px solid var(--o); z-index:7; pointer-events:none; opacity:.85; }
.twl-ba__brk.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.twl-ba__brk.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.twl-ba__brk.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.twl-ba__brk.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.twl-ba__readout{ margin-top:1rem; font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:#c4c4c9; display:flex; align-items:center; gap:.6rem; }
.twl-ba__readout i{ width:7px; height:7px; border-radius:50%; background:var(--o); flex:none;
  box-shadow:0 0 8px rgba(231,99,1,.7); }
@keyframes twlBaScanY{ 0%,100%{ top:0; opacity:0; } 10%{ opacity:1; } 50%{ top:100%; opacity:1; } 62%{ opacity:0; } }
@media (max-width:1024px){ .twl-ba__inner{ grid-template-columns:1fr; gap:2.4rem; } .twl-ba__content{ order:-1; } }

/* ============ NUESTROS SERVICIOS — lista + visor con info overlay (.twl-sv) ============ */
.twl-sv{
  --bg:#f3f0ea;
  --ink:#151517;
  --muted:#5f6067;
  --dim:#8b8176;
  --line:rgba(10,10,12,.16);
  --glass:rgba(255,255,255,.72);
  --glass-h:rgba(255,255,255,.88);
  background:
    radial-gradient(95% 85% at 18% 18%,rgba(231,99,1,.08) 0%,transparent 58%),
    radial-gradient(85% 80% at 92% 86%,rgba(10,10,12,.05) 0%,transparent 55%),
    #f3f0ea;
  color:var(--ink);
}
.twl-sv::before{
  display:block;
  background-image:linear-gradient(rgba(15,23,42,.085) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(15,23,42,.085) 1px,transparent 1px);
  opacity:.55;
}
.twl-sv .twl-particles-canvas{opacity:.46}  /* canvas inyectado por twl-particles-bg.js */
.home .services-section{display:none!important}  /* ocultar la versión original de "Nuestros Servicios" */
.twl-sv__inner{position:relative;z-index:1;max-width:1800px;margin:0 auto}
.twl-sv__eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.twl-sv__eyebrow::before{content:"";width:26px;height:1px;background:var(--o)}
.twl-sv .twl-sv__title{font-family:'Conthrax','Montserrat',sans-serif;font-weight:700;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 2.2rem;color:#151517;text-transform:uppercase}
.twl-sv .twl-sv__title b{color:var(--o);font-weight:700}
.twl-sv__grid{display:grid;grid-template-columns:.68fr 1.32fr;gap:clamp(2.5rem,5.5vw,5rem);align-items:stretch}
.twl-sv__list{display:flex;flex-direction:column}
.twl-sv__row{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:1.15rem .3rem;border-top:1px solid var(--line);cursor:pointer;transition:.4s var(--ease)}
.twl-sv__row:last-child{border-bottom:1px solid var(--line)}
.twl-sv__row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:linear-gradient(90deg,var(--o),transparent);transition:width .5s var(--ease)}
.twl-sv__row.is-on::after{width:100%}.twl-sv__row.is-on{padding-left:.9rem}
.twl-sv__n{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.25rem;color:var(--dim);transition:.4s var(--ease)}
.twl-sv__row.is-on .twl-sv__n{color:var(--o)}
.twl-sv .twl-sv__rt{margin:0;font-family:'Conthrax','Montserrat',sans-serif;font-weight:600;text-transform:uppercase;font-size:clamp(.9rem,1.35vw,1.02rem);letter-spacing:.02em;color:#151517}
.twl-sv__viewer{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:clamp(340px,42vw,470px)}
.twl-sv__ph{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1;clip-path:inset(0 0 0 100%);transition:clip-path .7s var(--ease)}
.twl-sv__ph.is-on{clip-path:inset(0 0 0 0)}
.twl-sv__viewer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,10,11,.88));z-index:1;pointer-events:none}
.twl-sv__brk{position:absolute;width:22px;height:22px;border:1.5px solid var(--o);z-index:3;pointer-events:none}
.twl-sv__brk.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}.twl-sv__brk.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.twl-sv__ovl{position:absolute;left:1.4rem;right:1.4rem;bottom:1.3rem;z-index:3;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.twl-sv__ovl.is-on{opacity:1;transform:none}
.twl-sv__ovl .tag{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--o2);display:block;margin-bottom:.5rem}
.twl-sv .twl-sv__ovl h3{margin:0 0 .4rem;font-family:'Conthrax','Montserrat',sans-serif;font-weight:700;text-transform:uppercase;color:#fff;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:.01em}
.twl-sv__ovl p{color:#dcdce0;font-size:.9rem;line-height:1.5;margin:0 0 .8rem;max-width:52ch}
.twl-sv__ovl ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.twl-sv__ovl ul li{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--o2);border:1px solid rgba(231,99,1,.4);border-radius:5px;padding:.26rem .55rem;background:rgba(10,10,11,.55);backdrop-filter:blur(3px)}
.twl-sv__row:hover,.twl-sv__row.is-on{background:rgba(255,255,255,.44)}
@media(max-width:860px){.twl-sv__grid{grid-template-columns:1fr}.twl-sv__viewer{order:-1;min-height:300px}.twl-sv__ovl p{display:none}}

/* ---------- keyframes ---------- */
@keyframes twlDzSpin{ to{ transform:rotate(360deg); } }
@keyframes twlDzSpinRev{ to{ transform:rotate(-360deg); } }
@keyframes twlDzPulse{ 0%{ transform:scale(.85); opacity:.7; } 100%{ transform:scale(1.6); opacity:0; } }
@keyframes twlDzScanX{ 0%{ transform:translateX(-130px); } 100%{ transform:translateX(1320px); } }
@keyframes twlDzScanY{ 0%,100%{ top:10%; opacity:0; } 12%{ opacity:1; } 50%{ top:86%; opacity:1; } 62%{ opacity:0; } }
@keyframes twlDzLoad{ 0%{ left:-40%; } 100%{ left:110%; } }