/* =====================================================================================================
   IvanImports · Tools Lab — portada de /herramientas/ (nov 2026)
   Identidad propia, distinta de Radar: centro de mando automovilístico + software premium + editorial.
   Todo encapsulado bajo .tl (solo se carga en /herramientas/). Sin dependencias, sin animaciones infinitas;
   respeta prefers-reduced-motion y funciona igual sin JavaScript.
   ===================================================================================================== */
@font-face{font-family:"Manrope";font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/academy/fonts/manrope-latin.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/academy/fonts/inter-latin.woff2) format("woff2")}

.tl{
  --tl-night:#0b1830;--tl-deep:#112a48;--tl-deep-2:#173a63;
  --tl-blue:#3478f6;--tl-blue-ink:#1f5fd6;--tl-blue-soft:#e7efff;
  --tl-mint:#75e1b5;--tl-mint-ink:#0b6646;--tl-mint-soft:#dcf7ec;
  --tl-violet:#9b8dfa;--tl-violet-ink:#5141c4;--tl-violet-soft:#efecff;
  --tl-amber:#ffc66e;--tl-amber-ink:#7a4f00;--tl-amber-soft:#fff3df;
  --tl-teal:#0d7f86;--tl-teal-soft:#e2f8f4;
  --tl-paper:#f4f8fd;--tl-ink:#0b1830;--tl-ink-2:#26395a;--tl-mu:#56677f;--tl-line:#dde6f2;
  --tl-r-s:12px;--tl-r-m:18px;--tl-r-l:26px;--tl-pill:999px;
  --tl-sh-1:0 1px 2px rgba(11,24,48,.05),0 10px 26px -14px rgba(11,24,48,.22);
  --tl-sh-2:0 2px 6px rgba(11,24,48,.06),0 30px 60px -26px rgba(11,24,48,.42);
  --tl-ease:cubic-bezier(.2,.7,.2,1);
  --tl-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --tl-display:Manrope,Inter,ui-sans-serif,system-ui,sans-serif;
  --tl-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  font-family:var(--tl-sans);color:var(--tl-ink);overflow-x:clip
}
.tl *,.tl *:before,.tl *:after{box-sizing:border-box}
:where(.tl) a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.tl a:focus-visible{outline:3px solid var(--tl-blue);outline-offset:3px}
.tl h1,.tl h2,.tl h3{font-family:var(--tl-display);margin:0}
/* los estilos globales pintan .hub-page h1-h3 y .hub-page p con colores fijos: dentro del hub se hereda el del bloque */
.tl :is(h1,h2,h3){color:inherit}
.tl p{color:inherit}
.tl p{margin:0}
.tl ul,.tl ol{list-style:none;margin:0;padding:0}
.tl-ic{width:1.15em;height:1.15em;flex:none}
.tl-shell{max-width:1200px;margin:0 auto;padding:0 16px}

/* ---------- etiquetas comunes ---------- */
.tl .tl-kicker{display:inline-flex;align-items:center;gap:9px;font:700 11.5px/1 var(--tl-mono);letter-spacing:.14em;text-transform:uppercase;color:#a9c4f2}
.tl-kicker span{width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--tl-mint),var(--tl-blue))}
.tl .tl-kicker-dark{color:var(--tl-blue-ink)}
.tl-head{display:grid;gap:10px;margin-bottom:22px;max-width:720px}
.tl-head h2{font-size:clamp(28px,6.4vw,44px);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:var(--tl-ink);text-wrap:balance}
.tl-head>p:not(.tl-kicker){color:var(--tl-mu);font-size:16px;line-height:1.55}

/* =====================================================================================================
   HERO
   ===================================================================================================== */
.tl-hero{position:relative;color:#fff;padding:12px 0 30px;isolation:isolate;background:
  radial-gradient(60% 70% at 88% 18%,rgba(52,120,246,.34),transparent 62%),
  radial-gradient(45% 55% at 6% 100%,rgba(117,225,181,.18),transparent 65%),
  radial-gradient(35% 45% at 55% 0%,rgba(155,141,250,.22),transparent 70%),
  linear-gradient(170deg,var(--tl-night) 0%,#0d1f3d 60%,var(--tl-deep) 100%)}
/* cuadrícula técnica sutil */
.tl-hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:linear-gradient(rgba(150,180,230,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(150,180,230,.08) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(90% 80% at 70% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(90% 80% at 70% 30%,#000 30%,transparent 80%)}

/* subnavegación propia de Herramientas */
.tl-subnav{display:flex;align-items:center;gap:10px;padding:6px 0 18px;min-width:0}
.tl-brand{display:inline-flex;align-items:center;gap:8px;flex:none;font:800 14px/1 var(--tl-display);letter-spacing:-.01em;color:#fff;padding:7px 12px 7px 7px;border-radius:var(--tl-pill);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.tl-brand span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tl-mint);color:var(--tl-night)}
.tl-brand .tl-ic{width:15px;height:15px;fill:currentColor;stroke:none}
.tl-subnav-links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:22px}
.tl-subnav-links::-webkit-scrollbar{display:none}
.tl-subnav-links a{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;color:#c2d3ee;font:600 14px/1 var(--tl-sans);padding:11px 12px;border-radius:var(--tl-pill);min-height:40px;transition:color .2s,background .2s}
.tl-subnav-links a .tl-ic{width:16px;height:16px;opacity:.75}
.tl-subnav-links a:after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--tl-mint);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--tl-ease)}

.tl-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center}
.tl-hero-copy{display:grid;gap:16px;min-width:0}
.tl-hero h1{font-size:clamp(34px,9vw,60px);line-height:1;letter-spacing:-.045em;font-weight:800;text-wrap:balance}
.tl-hero h1 em{display:block;font-style:normal;margin-top:4px;background:linear-gradient(95deg,var(--tl-mint) 0%,#8fc3ff 55%,var(--tl-violet) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl .tl-lead{font-size:16.5px;line-height:1.55;color:#c7d6ee;max-width:56ch}
.tl-flags{display:flex;flex-wrap:wrap;gap:8px}
.tl-flags li{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--tl-sans);color:#dbe8fb;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);padding:8px 11px;border-radius:var(--tl-pill)}
.tl-flags .tl-chk{width:14px;height:14px;color:var(--tl-mint);stroke-width:3}
.tl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.tl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:13px 20px;border-radius:var(--tl-pill);font:800 15.5px/1.1 var(--tl-display);letter-spacing:-.01em;transition:transform .25s var(--tl-ease),box-shadow .25s var(--tl-ease),background .25s}
.tl-btn .tl-ic{width:18px;height:18px}
.tl-btn-main{background:linear-gradient(135deg,var(--tl-mint),#9ff0cf);color:var(--tl-night);box-shadow:0 16px 34px -16px rgba(117,225,181,.9)}
.tl-btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.tl-btn-ghost .tl-arr{transform:rotate(90deg)}

/* accesos rápidos (móvil y tablet): las herramientas aparecen en la primera pantalla */
.tl-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.tl-quick a{display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 12px;border-radius:var(--tl-r-m);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font:700 14px/1.2 var(--tl-sans);color:#fff}
.tl-quick a .tl-ic{width:34px;height:34px;padding:8px;border-radius:11px;flex:none}
.tl-quick-calc .tl-ic{background:rgba(117,225,181,.18);color:var(--tl-mint)}
.tl-quick-docs .tl-ic{background:rgba(155,141,250,.2);color:#c3b9ff}
.tl-quick-form .tl-ic{background:rgba(255,198,110,.18);color:var(--tl-amber)}
.tl-quick-chat .tl-ic{background:rgba(95,211,230,.18);color:#8ee6f2}

/* consola ilustrativa (escritorio) */
.tl-console{display:none;position:relative;border-radius:var(--tl-r-l);background:linear-gradient(160deg,rgba(23,58,99,.75),rgba(11,24,48,.85));border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);padding:12px}
.tl-console-bar{display:flex;align-items:center;gap:6px;padding:4px 6px 12px;font:600 11.5px/1 var(--tl-mono);color:#9fb5d8;letter-spacing:.04em}
.tl-console-bar b{margin-left:8px;font-weight:600}
.tl-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.tl-dot:first-child{background:#ff7a6e}.tl-dot:nth-child(2){background:var(--tl-amber)}.tl-dot:nth-child(3){background:var(--tl-mint)}
.tl-console-grid{display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:auto auto;gap:10px}
.tl-pane{border-radius:var(--tl-r-m);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:10px;min-width:0;overflow:hidden}
.tl-pane-calc{grid-row:span 2;display:grid}
.tl-pane-calc .tl-v-calc{grid-template-rows:auto repeat(4,1fr) auto;align-items:center}
.tl-pane-chat{grid-column:1/-1}
.tl-console-tag{position:absolute;right:16px;bottom:-12px;font:600 11px/1 var(--tl-mono);letter-spacing:.06em;color:#0b1830;background:#cfe0ff;padding:6px 10px;border-radius:var(--tl-pill)}

/* =====================================================================================================
   ILUSTRACIONES DE PRODUCTO (decorativas: sin resultados ni datos inventados)
   ===================================================================================================== */
.tl-v{position:relative;min-width:0}
/* calculadora */
.tl-v-calc{border-radius:var(--tl-r-m);background:rgba(4,14,32,.38);border:1px solid rgba(255,255,255,.12);padding:12px;display:grid;gap:8px;color:#dbe8fb}
.tl-vc-top{display:flex;align-items:center;gap:5px;font:700 11px/1 var(--tl-mono);color:#9fb5d8;padding-bottom:4px}
.tl-vc-top .tl-dot{width:7px;height:7px}
.tl-vc-top b{margin-left:6px;font-weight:700;letter-spacing:.03em}
.tl-vc-row{display:flex;align-items:center;gap:8px;font:600 12.5px/1.2 var(--tl-sans)}
.tl-vc-row span{flex:none}
.tl-vc-row i{flex:1;height:1px;border-bottom:1px dashed rgba(255,255,255,.22);min-width:12px}
.tl-vc-row em{font-style:normal;font:700 12px/1 var(--tl-mono);color:#9fb5d8;width:64px;text-align:right;padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.tl-vc-total{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;padding:10px 12px;border-radius:12px;background:rgba(117,225,181,.12);border:1px solid rgba(117,225,181,.45);font:700 12.5px/1.2 var(--tl-sans);color:#d9fbe9}
.tl-vc-total strong{font:800 22px/1 var(--tl-display);color:var(--tl-mint)}
/* documentos */
.tl-v-docs{height:178px}
.tl-doc{position:absolute;width:62%;height:150px;border-radius:14px;background:#fff;border:1px solid #e3e8f5;box-shadow:0 18px 30px -18px rgba(37,30,110,.45);padding:12px;transition:transform .45s var(--tl-ease)}
.tl-doc b{display:inline-block;font:800 11.5px/1 var(--tl-mono);letter-spacing:.04em;padding:6px 8px;border-radius:7px}
.tl-doc-3{right:2%;top:2px;transform:rotate(7deg);background:#f6f3ff}.tl-doc-3 b{background:var(--tl-violet);color:#fff}
.tl-doc-2{right:16%;top:10px;transform:rotate(-5deg);background:#f3f7ff}.tl-doc-2 b{background:#c9dbff;color:var(--tl-blue-ink)}
.tl-doc-1{left:2%;top:22px;display:grid;gap:7px;align-content:start}.tl-doc-1 b{background:var(--tl-blue);color:#fff;justify-self:start}
.tl-fld{display:flex;align-items:center;gap:7px}
.tl-fld i{font:800 10.5px/1 var(--tl-mono);font-style:normal;color:var(--tl-blue-ink);background:var(--tl-blue-soft);border-radius:6px;padding:4px 5px;min-width:30px;text-align:center}
.tl-fld u{flex:1;height:7px;border-radius:4px;background:#e8edf6;text-decoration:none}
.tl-fld-on i{background:var(--tl-violet);color:#fff}
.tl-fld-on u{background:linear-gradient(90deg,#d9d3ff,#eae6ff)}
/* formulario 576 */
.tl-v-form{border-radius:var(--tl-r-m);background:#fff;border:1px solid #f1dfbf;box-shadow:0 18px 30px -20px rgba(122,79,0,.45);padding:12px;display:grid;gap:8px}
.tl-vf-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tl-vf-head b{font:800 13.5px/1 var(--tl-display);color:var(--tl-ink)}
.tl-vf-head span{font:700 10.5px/1 var(--tl-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--tl-amber-ink);background:var(--tl-amber-soft);border:1px solid #ffdca6;padding:5px 8px;border-radius:var(--tl-pill)}
.tl-vf-steps{display:flex;gap:5px}
.tl-vf-steps i{flex:1;height:5px;border-radius:5px;background:#f1e7d6}
.tl-vf-steps i.on{background:linear-gradient(90deg,var(--tl-amber),#ffb347)}
.tl-vf-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;font:600 11.5px/1.2 var(--tl-sans);color:var(--tl-mu)}
.tl-vf-row u{display:block;height:24px;border-radius:8px;border:1px solid #ecdcc0;background:linear-gradient(90deg,#fff7ea 0 0) no-repeat left/0 100%,#fffdf8;text-decoration:none;transition:background-size .6s var(--tl-ease);transition-delay:calc(var(--i,0) * 90ms)}
.tl-vf-check{display:flex;align-items:center;gap:8px;font:700 11.5px/1.2 var(--tl-sans);color:var(--tl-ink-2)}
.tl-vf-check i{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--tl-mint);color:var(--tl-night)}
.tl-vf-check .tl-chk{width:12px;height:12px;stroke-width:3.4}
/* chat en alemán */
.tl-v-chat{display:grid;gap:7px;align-content:start}
.tl-msg{max-width:88%;padding:9px 12px;border-radius:15px;font:600 13px/1.4 var(--tl-sans);transition:transform .4s var(--tl-ease)}
.tl-msg small{display:block;font:700 10px/1.2 var(--tl-mono);letter-spacing:.05em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
.tl-msg-es{justify-self:start;background:#fff;color:var(--tl-ink-2);border:1px solid #d5ece6;border-bottom-left-radius:5px}
.tl-msg-de{justify-self:end;background:linear-gradient(135deg,#0f8c8f,#0d7f86);color:#fff;border-bottom-right-radius:5px;box-shadow:0 12px 22px -14px rgba(13,127,134,.8)}
.tl-msg-de small{color:#bff3ea;opacity:1}
.tl-copy{justify-self:end;display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--tl-mono);letter-spacing:.04em;color:var(--tl-mint-ink);background:var(--tl-mint-soft);border:1px solid #b8ecd6;padding:6px 9px;border-radius:var(--tl-pill)}
.tl-copy .tl-chk{width:12px;height:12px;stroke-width:3.2}
.tl-msg-2{display:none}
/* las ilustraciones dentro de la consola oscura */
.tl-console .tl-msg-es{background:rgba(255,255,255,.92)}
.tl-console .tl-v-docs{height:150px}
.tl-console .tl-doc{height:128px;width:66%}

/* =====================================================================================================
   CATÁLOGO
   ===================================================================================================== */
.tl-cat{padding:34px 0 26px;background:
  linear-gradient(rgba(52,120,246,.045) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,rgba(52,120,246,.045) 1px,transparent 1px) 0 0/28px 28px,
  var(--tl-paper)}
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.tl-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;padding:20px;border-radius:var(--tl-r-l);border:1px solid var(--tl-line);background:#fff;box-shadow:var(--tl-sh-1);overflow:hidden;min-width:0;transition:transform .35s var(--tl-ease),box-shadow .35s var(--tl-ease),border-color .35s}
.tl-card:active{transform:scale(.993)}
.tl-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tl-badge{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;flex:none}
.tl-badge .tl-ic{width:24px;height:24px}
.tl-num{font:700 11px/1 var(--tl-mono);letter-spacing:.14em;color:var(--tl-mu)}
.tl-card-txt{display:grid;gap:8px;min-width:0;align-content:start}
.tl-card h3{font-size:clamp(22px,5.6vw,28px);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.tl .tl-sub-t{font:600 15.5px/1.45 var(--tl-sans);color:var(--tl-ink-2)}
.tl .tl-body{font-size:14.5px;line-height:1.55;color:var(--tl-mu);display:none}
.tl .tl-note{display:flex;align-items:flex-start;gap:7px;font:600 12.5px/1.4 var(--tl-sans);color:var(--tl-amber-ink)}
.tl-note .tl-ic{width:15px;height:15px;margin-top:1px}
.tl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tl-chips span{font:700 12px/1 var(--tl-sans);padding:7px 10px;border-radius:var(--tl-pill)}
.tl-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;justify-self:start;min-height:48px;padding:12px 18px;border-radius:var(--tl-pill);font:800 15px/1.1 var(--tl-display);letter-spacing:-.01em;transition:gap .3s var(--tl-ease),box-shadow .3s}
.tl-cta .tl-arr{width:17px;height:17px;transition:transform .3s var(--tl-ease)}

/* 01 · calculadora: protagonista oscura, azul profundo a verde azulado */
.tl-card--calc{color:#fff;border-color:transparent;background:
  radial-gradient(70% 60% at 100% 0%,rgba(117,225,181,.22),transparent 60%),
  radial-gradient(60% 50% at 0% 100%,rgba(52,120,246,.28),transparent 65%),
  linear-gradient(150deg,var(--tl-deep) 0%,#0f3550 55%,#0e5552 100%);box-shadow:var(--tl-sh-2)}
.tl-card--calc .tl-badge{background:rgba(117,225,181,.16);color:var(--tl-mint);border:1px solid rgba(117,225,181,.35)}
.tl-card--calc .tl-num{color:#8fe9c5}
.tl .tl-card--calc .tl-sub-t{color:#e2ecfb}
.tl .tl-card--calc .tl-body{color:#b8cbe7}
.tl-card--calc .tl-chips span{background:rgba(255,255,255,.08);color:#dff8ee;border:1px solid rgba(117,225,181,.3)}
.tl-card--calc .tl-cta{background:var(--tl-mint);color:var(--tl-night);box-shadow:0 14px 30px -14px rgba(117,225,181,.85)}
/* 02 · documentos: azul eléctrico y violeta */
.tl-card--docs{background:linear-gradient(155deg,#eef3ff 0%,#f2eeff 55%,#fff 100%);border-color:#e1dcff}
.tl-card--docs .tl-badge{background:linear-gradient(135deg,var(--tl-blue),var(--tl-violet));color:#fff}
.tl-card--docs .tl-num{color:var(--tl-violet-ink)}
.tl-card--docs .tl-chips span{background:#fff;color:var(--tl-violet-ink);border:1px solid #ddd6ff}
.tl-card--docs .tl-cta{background:linear-gradient(135deg,var(--tl-blue-ink),var(--tl-violet-ink));color:#fff;box-shadow:0 14px 28px -16px rgba(81,65,196,.8)}
/* 03 · Modelo 576: ámbar cálido */
.tl-card--form{background:linear-gradient(160deg,#fff4e2 0%,#fffaf2 60%,#fff 100%);border-color:#ffe1ae}
.tl-card--form .tl-badge{background:var(--tl-amber);color:#4a3000}
.tl-card--form .tl-num{color:var(--tl-amber-ink)}
.tl-card--form .tl-chips span{background:#fff;color:var(--tl-amber-ink);border:1px solid #ffdca6}
.tl-card--form .tl-cta{background:var(--tl-ink);color:#ffe2b0}
/* 04 · alemán: verde azulado suave */
.tl-card--chat{background:linear-gradient(150deg,#e6faf4 0%,#e9f6fb 100%);border-color:#c8ede3}
.tl-card--chat .tl-badge{background:var(--tl-teal);color:#fff}
.tl-card--chat .tl-num{color:var(--tl-teal)}
.tl-card--chat .tl-chips span{background:#fff;color:#0b5f63;border:1px solid #bfe9e0}
.tl-card--chat .tl-cta{background:var(--tl-teal);color:#fff;box-shadow:0 14px 28px -16px rgba(13,127,134,.85)}

/* ---------- ¿por dónde empiezo? ---------- */
.tl-start{padding:30px 0 34px;background:#fff;border-top:1px solid var(--tl-line)}
.tl-route{position:relative;display:grid;gap:12px}
.tl-route:before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:repeating-linear-gradient(var(--tl-line) 0 6px,transparent 6px 12px)}
.tl-route a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:14px 16px 14px 12px;border-radius:var(--tl-r-m);border:1px solid var(--tl-line);background:var(--tl-paper);transition:transform .3s var(--tl-ease),border-color .3s,background .3s}
.tl-step{grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;margin-left:0;border-radius:50%;background:var(--tl-ink);color:var(--tl-mint);font:800 14px/1 var(--tl-mono);box-shadow:0 0 0 5px #fff}
.tl-route-txt{display:grid;gap:3px;min-width:0}
.tl-route-txt strong{font:800 17px/1.2 var(--tl-display);letter-spacing:-.02em;color:var(--tl-ink)}
.tl-route-txt span{font-size:14px;line-height:1.45;color:var(--tl-mu)}
.tl-route-go{grid-column:2;display:inline-flex;align-items:center;gap:6px;font:800 13.5px/1 var(--tl-sans);color:var(--tl-blue-ink);margin-top:4px}
.tl-route-go .tl-arr{width:15px;height:15px;transition:transform .3s var(--tl-ease)}

/* ---------- sigue con tu importación ---------- */
.tl-more{padding:26px 0 38px;background:var(--tl-paper);border-top:1px solid var(--tl-line)}
.tl .tl-more-t{font:800 15px/1 var(--tl-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tl-mu);margin-bottom:14px}
.tl-more-g{display:grid;gap:10px}
.tl-more-g a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px;border-radius:var(--tl-r-m);background:#fff;border:1px solid var(--tl-line);transition:border-color .3s,transform .3s var(--tl-ease)}
.tl-more-g a>.tl-ic{width:38px;height:38px;padding:9px;border-radius:12px;background:var(--tl-blue-soft);color:var(--tl-blue-ink)}
.tl-more-g strong{display:block;font:800 15.5px/1.25 var(--tl-display);color:var(--tl-ink);margin-bottom:2px}
.tl-more-g a>span>span{display:block;font-size:13.5px;line-height:1.45;color:var(--tl-mu)}

/* =====================================================================================================
   TABLET Y ESCRITORIO
   ===================================================================================================== */
@media(min-width:600px){
  .tl-quick{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tl-quick a{flex-direction:column;align-items:flex-start;gap:8px}
  .tl .tl-body{display:block}
  .tl-msg-2{display:block}
  .tl-more-g{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:768px){
  .tl-shell{padding:0 28px}
  .tl-hero{padding:16px 0 44px}
  .tl-cat{padding:52px 0 36px}
  .tl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .tl-card{padding:24px}
  .tl-card--calc,.tl-card--chat{grid-column:1/-1}
  .tl-card--calc{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);grid-template-rows:auto 1fr auto;column-gap:26px}
  .tl-card--calc .tl-card-top,.tl-card--calc .tl-card-txt,.tl-card--calc .tl-cta{grid-column:1}
  .tl-card--calc .tl-v{grid-column:2;grid-row:2/4;align-self:center}
  .tl-card--chat{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:26px}
  .tl-card--chat .tl-card-top,.tl-card--chat .tl-card-txt,.tl-card--chat .tl-cta{grid-column:1}
  .tl-card--chat .tl-v{grid-column:2;grid-row:2/4;align-self:center}
  .tl-card--calc .tl-card-top,.tl-card--chat .tl-card-top{grid-column:1/-1}
  .tl-start{padding:44px 0 48px}
  .tl-route{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .tl-route:before{left:40px;right:40px;top:31px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--tl-line) 0 6px,transparent 6px 12px)}
  .tl-route a{grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;padding:18px;height:100%}
  .tl-step{grid-row:auto;width:36px;height:36px}
  .tl-route-go{grid-column:auto;margin-top:auto}
}
@media(min-width:1024px){
  .tl-hero{padding:14px 0 46px}
  .tl-hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.9fr);gap:44px}
  .tl-console .tl-msg-2{display:none}
  .tl-subnav{padding-bottom:10px}
  .tl-quick{display:none}
  .tl-console{display:block}
  .tl-cat{padding:44px 0 44px}
  .tl-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
  .tl-card{padding:28px}
  .tl-card--calc{grid-column:1/span 7;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto}
  .tl-card--calc .tl-card-top,.tl-card--calc .tl-card-txt,.tl-card--calc .tl-cta,.tl-card--calc .tl-v{grid-column:auto;grid-row:auto}
  .tl-card--calc .tl-v{align-self:center}
  .tl-card--calc h3{font-size:38px}
  .tl-card--docs,.tl-card--form{grid-column:span 5;grid-template-columns:minmax(0,1fr) 44%;grid-template-rows:auto 1fr auto;column-gap:16px}
  .tl-card--docs .tl-card-top,.tl-card--docs .tl-card-txt,.tl-card--docs .tl-cta,.tl-card--form .tl-card-top,.tl-card--form .tl-card-txt,.tl-card--form .tl-cta{grid-column:1}
  .tl-card--docs .tl-v,.tl-card--form .tl-v{grid-column:2;grid-row:2/4;align-self:center}
  .tl-card--docs .tl-card-top,.tl-card--form .tl-card-top{grid-column:1/-1}
  .tl .tl-card--docs .tl-body,.tl .tl-card--form .tl-body{font-size:14px}
  .tl-card--form{grid-column:1/span 5}
  .tl-card--chat{grid-column:span 7;column-gap:20px}
}
@media(min-width:1280px){
  .tl-hero h1{font-size:60px}
}

/* ---------- microinteracciones (solo con puntero real) ---------- */
@media(hover:hover){
  .tl-subnav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
  .tl-subnav-links a:hover:after{transform:scaleX(1)}
  .tl-subnav-links a:hover .tl-ic{opacity:1}
  .tl-btn-main:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(117,225,181,1)}
  .tl-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
  .tl-quick a:hover{background:rgba(255,255,255,.11)}
  .tl-card:hover{transform:translateY(-5px);box-shadow:var(--tl-sh-2)}
  .tl-card:hover .tl-cta .tl-arr,.tl-route a:hover .tl-arr{transform:translateX(5px)}
  .tl-card--calc:hover .tl-vc-total{border-color:var(--tl-mint);box-shadow:0 0 0 4px rgba(117,225,181,.12)}
  .tl-card--docs:hover .tl-doc-1{transform:translateY(-6px) rotate(-1.5deg)}
  .tl-card--docs:hover .tl-doc-2{transform:rotate(-8deg) translateX(-6px)}
  .tl-card--docs:hover .tl-doc-3{transform:rotate(10deg) translateX(6px)}
  .tl-card--form:hover .tl-vf-row u{background-size:100% 100%}
  .tl-card--chat:hover .tl-msg-es{transform:translateX(4px)}
  .tl-card--chat:hover .tl-msg-de{transform:translateX(-4px)}
  .tl-route a:hover{border-color:#bcd2fb;background:#fff;transform:translateY(-2px)}
  .tl-more-g a:hover{border-color:#bcd2fb;transform:translateY(-2px)}
}

/* ---------- entrada suave: solo si el usuario no pide menos movimiento; sin JavaScript ---------- */
@media(prefers-reduced-motion:no-preference){
  .tl-hero-copy>*{animation:tlUp .6s var(--tl-ease) both}
  .tl-hero-copy>:nth-child(2){animation-delay:.05s}.tl-hero-copy>:nth-child(3){animation-delay:.1s}.tl-hero-copy>:nth-child(4){animation-delay:.15s}.tl-hero-copy>:nth-child(5){animation-delay:.2s}.tl-hero-copy>:nth-child(6){animation-delay:.25s}
  .tl-console{animation:tlIn .8s .15s var(--tl-ease) both}
  /* aparición al entrar en pantalla: solo desplazamiento (nunca opacidad 0), así el contenido jamás queda oculto
     aunque el navegador capture la página entera o no llegue a hacer scroll */
  @supports (animation-timeline:view()){
    .tl-card,.tl-route li,.tl-more-g a{animation:tlRise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
/* la entrada usa «translate» (no «transform») para no pisar la elevación del hover */
@keyframes tlUp{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes tlRise{from{translate:0 22px}to{translate:none}}
@keyframes tlIn{from{opacity:0;translate:0 18px;scale:.985}to{opacity:1;translate:none;scale:none}}
@media(prefers-reduced-motion:reduce){
  .tl *,.tl *:before,.tl *:after{animation:none!important;transition-duration:.01ms!important}
}

/* =====================================================================================================
   05 · Calculadora del impuesto de matriculación (nov 2026): acento menta-turquesa, distinto del simulador (ámbar)
   ===================================================================================================== */
.tl-quick-tax .tl-ic{background:rgba(64,214,190,.18);color:#7eead8}
.tl-card--tax{background:linear-gradient(150deg,#e3fbf6 0%,#eefcf9 55%,#fff 100%);border-color:#bfeee3}
.tl-card--tax .tl-badge{background:linear-gradient(135deg,#14b8a6,var(--tl-mint));color:#04302b}
.tl-card--tax .tl-num{color:#0b6b62}
.tl-card--tax .tl-chips span{background:#fff;color:#0b6b62;border:1px solid #b8eadf}
.tl-card--tax .tl-cta{background:#0b6b62;color:#fff;box-shadow:0 14px 28px -16px rgba(11,107,98,.85)}
.tl .tl-card--tax .tl-note{color:#0b6b62}
.tl-v-tax{border-radius:var(--tl-r-m);background:#fff;border:1px solid #c9efe5;box-shadow:0 18px 30px -20px rgba(11,107,98,.45);padding:12px;display:grid;gap:8px}
.tl-vt-head{display:flex;justify-content:space-between;align-items:center;font:800 13px/1 var(--tl-display);color:var(--tl-ink)}
.tl-vt-head span{font:700 10.5px/1 var(--tl-mono);letter-spacing:.08em;text-transform:uppercase;color:#0b6b62;background:#e3fbf6;padding:5px 7px;border-radius:var(--tl-pill)}
.tl-vt-row{display:grid;gap:4px;font:600 11.5px/1.2 var(--tl-sans);color:var(--tl-ink-2)}
.tl-vt-row i{display:block;height:8px;border-radius:5px;background:linear-gradient(90deg,#14b8a6,var(--tl-mint));width:var(--w);transform-origin:left;animation:tlvt .9s var(--tl-ease) both;animation-delay:calc(var(--i)*.12s)}
.tl-vt-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed #bfeee3;padding-top:8px;font:800 13px/1 var(--tl-display)}
.tl-vt-total b{font-size:20px;color:#0b6b62}
@keyframes tlvt{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.tl-vt-row i{animation:none}}
@media(min-width:600px){.tl-quick{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:768px) and (max-width:1023px){
  .tl-card--form{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:26px}
  .tl-card--form .tl-card-top{grid-column:1/-1}
  .tl-card--form .tl-card-txt,.tl-card--form .tl-cta{grid-column:1}
  .tl-card--form .tl-v{grid-column:2;grid-row:2/4;align-self:center}
}
@media(min-width:1024px){
  .tl-card--tax{grid-column:1/span 7;grid-template-columns:minmax(0,1fr) 42%;grid-template-rows:auto 1fr auto;column-gap:20px}
  .tl-card--tax .tl-card-top{grid-column:1/-1}
  .tl-card--tax .tl-card-txt,.tl-card--tax .tl-cta{grid-column:1}
  .tl-card--tax .tl-v{grid-column:2;grid-row:2/4;align-self:center}
  .tl-card--form{grid-column:span 5}
  .tl-card--chat{grid-column:1/-1}
}

/* Servicio externo (carVertical, afiliación · nov 2026): sección propia, separada del catálogo de herramientas gratis. */
.tl-partner{padding:28px 0 32px;background:#fff;border-top:1px solid var(--tl-line)}
.tl-partner .tl-head{margin-bottom:14px}
@media(min-width:760px){.tl-partner{padding:40px 0 44px}}