/* ==========================================================================
   DriverX · Suite legal
   Hoja de estilos única. Sin dependencias, sin build, sin framework.

   Los tokens vienen del sistema de driverx-web-main (Next.js), portados a CSS
   plano para que estas páginas funcionen dentro del sitio estático actual sin
   arrastrar Tailwind.

   Contraste: todos los pares de color usados sobre fondo se verificaron
   contra WCAG 2.1 AA. Los valores calculados están anotados al lado.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* Superficies */
  --bg:#050506;
  --bg-soft:#09090d;
  --surface:rgba(18,18,24,.84);
  --surface-glass-a:rgba(255,255,255,.075);
  --surface-glass-b:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.16);

  /* Texto */
  --ink:#f5f5f7;          /* 18.9:1 sobre --bg */
  --muted:#b4b4c0;        /*  9.9:1 sobre --bg */
  --muted-soft:#8f8f9d;   /*  6.2:1 sobre --bg */

  /* Marca */
  --brand:#ef1624;
  --brand-light:#ff4a57;  /*  5.6:1 sobre --bg — usado en enlaces y acentos */
  --brand-solid:#d81121;  /*  5.2:1 con texto blanco encima — usado en botones */
  --brand-dark:#8e0d17;

  /* Radios */
  --r-card:24px;
  --r-panel:32px;
  --r-mini:16px;
  --r-pill:999px;

  /* Sombras */
  --sh-card:0 24px 80px rgba(0,0,0,.42);
  --sh-lift:0 28px 90px rgba(0,0,0,.48), 0 0 32px rgba(239,22,36,.10);
  --sh-brand:0 14px 40px rgba(239,22,36,.28);

  /* Layout */
  --w-page:1180px;
  --w-prosa:760px;
  --w-indice:268px;

  --font:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ── Reset mínimo ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
/* Tope duro para los iconos. Sin esto, un SVG sin tamaño intrínseco crece
   hasta el ancho del contenedor si alguna regla no llega a aplicarse. */
svg{max-width:24px;max-height:24px;flex:none}
::selection{background:rgba(239,22,36,.35);color:#fff}

/* ── Fondo tecnológico ──────────────────────────────────────────────────── */
/* Dos capas fijas: un degradado de base y una cuadrícula enmascarada que se
   desvanece hacia abajo. Nada se mueve: en una página de lectura larga el
   movimiento de fondo cansa. */
.fondo{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 12% 0%,rgba(239,22,36,.16),transparent 34%),
    radial-gradient(circle at 78% 8%,rgba(255,51,68,.07),transparent 30%),
    linear-gradient(140deg,#050506 0%,#0a0a10 52%,#050506 100%);
}
.fondo-rejilla{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 0%,transparent 72%);
}

/* ── Accesibilidad ──────────────────────────────────────────────────────── */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand-solid);color:#fff;padding:14px 20px;
  font-weight:700;text-decoration:none;border-radius:0 0 var(--r-mini) 0;
}
.saltar:focus{left:0}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--brand-light);
  outline-offset:3px;
  border-radius:6px;
}

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

/* ── Encabezado ─────────────────────────────────────────────────────────── */
.barra{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line);
  background:rgba(5,5,6,.82);
  -webkit-backdrop-filter:blur(18px);
          backdrop-filter:blur(18px);
}
.barra-inner{
  width:min(var(--w-page),calc(100% - 40px));margin-inline:auto;
  padding:16px 0;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.marca{display:inline-flex;align-items:center;gap:11px;color:var(--ink);
  text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.02em}
.marca-sello{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(145deg,var(--brand-light),var(--brand-dark));
  box-shadow:var(--sh-brand);
  display:grid;place-items:center;color:#fff;font-size:13.5px;font-weight:800;
  letter-spacing:.02em;
}
.marca em{font-style:normal;color:var(--brand-light)}
.barra-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.btn-fantasma{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:9px 16px;background:rgba(255,255,255,.03);
  transition:background .2s ease,border-color .2s ease;
  display:inline-flex;align-items:center;gap:7px;
  min-height:40px;
}
.btn-fantasma:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.btn-fantasma svg{width:15px;height:15px;flex:none}

/* ── Estructura ─────────────────────────────────────────────────────────── */
.envoltura{
  width:min(var(--w-page),calc(100% - 40px));margin-inline:auto;
  padding-block:44px 88px;
}
.columnas{display:grid;grid-template-columns:minmax(0,1fr);gap:38px;align-items:start}
@media (min-width:1040px){
  .columnas{grid-template-columns:var(--w-indice) minmax(0,1fr);gap:52px}
  /* Páginas sin índice: un solo hijo. Sin esto caería en la columna estrecha
     del índice y el documento entero se leería a 268 px de ancho. */
  .columnas-simple{grid-template-columns:minmax(0,1fr)}
}

/* ── Hero legal ─────────────────────────────────────────────────────────── */
.hero{margin-bottom:36px}
.hero-etiqueta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-light);margin:0 0 14px;
}
.hero-etiqueta::before{content:"";width:22px;height:1px;background:var(--brand-light)}
.hero h1{
  font-size:clamp(2rem,5vw,3.3rem);line-height:1.04;letter-spacing:-.045em;
  font-weight:800;margin:0 0 14px;color:var(--ink);
}
.hero-bajada{color:var(--muted);font-size:18px;margin:0 0 24px;max-width:62ch}

.hero-chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);
  padding:8px 14px;font-size:13px;font-weight:600;color:var(--muted);
}
.chip strong{color:var(--ink);font-weight:700}
.chip-punto{width:7px;height:7px;border-radius:50%;background:var(--brand-light);flex:none}

/* ── Superficies ────────────────────────────────────────────────────────── */
.tarjeta{
  border:1px solid var(--line);border-radius:var(--r-card);
  background:linear-gradient(180deg,var(--surface-glass-a),var(--surface-glass-b));
  box-shadow:var(--sh-card);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  padding:24px 26px;
}
.panel{
  border:1px solid var(--line);border-radius:var(--r-panel);
  background:
    radial-gradient(circle at top right,rgba(239,22,36,.16),transparent 38%),
    linear-gradient(180deg,var(--surface-glass-a),var(--surface-glass-b));
  box-shadow:var(--sh-card);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  padding:28px 30px;
}
@media (max-width:560px){
  .tarjeta{padding:20px 18px;border-radius:20px}
  .panel{padding:22px 20px;border-radius:24px}
}

/* Ficha corporativa */
.ficha{margin:0 0 32px}
.ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 22px}
.ficha dt{color:var(--muted-soft);font-size:13.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em}
.ficha dd{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
@media (max-width:620px){
  .ficha dl{grid-template-columns:1fr;gap:2px}
  .ficha dt{margin-top:12px}
}

/* ── Índice ─────────────────────────────────────────────────────────────── */
/* Escritorio: columna fija que acompaña la lectura y marca el artículo
   visible. Móvil: <details> plegado, para no empujar el texto 18 líneas. */
.indice{margin:0 0 30px}
.indice-caja{
  border:1px solid var(--line);border-radius:var(--r-card);
  background:linear-gradient(180deg,var(--surface-glass-a),var(--surface-glass-b));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  overflow:hidden;
}
/* Red de seguridad: si la hoja no carga o el navegador es viejo, la página
   debe seguir siendo legible. Fondo y color van también en el elemento raíz. */
html{background:#050506;color:#f5f5f7}
.indice-titulo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);
}
.indice-titulo::-webkit-details-marker{display:none}
.indice-titulo .flecha{transition:transform .22s ease;flex:none}
.indice[open] .indice-titulo .flecha{transform:rotate(180deg)}
.indice ol{margin:0;padding:4px 20px 20px;list-style:none;counter-reset:art}
.indice li{counter-increment:art;margin:0}
.indice a{
  display:flex;gap:11px;align-items:baseline;
  padding:7px 0;color:var(--muted);text-decoration:none;font-size:14.5px;
  line-height:1.45;border-radius:6px;
  transition:color .18s ease;
}
.indice a::before{
  content:counter(art);
  color:var(--muted-soft);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:19px;flex:none;
}
.indice a:hover{color:var(--ink)}
.indice a[aria-current="true"]{color:var(--brand-light);font-weight:650}
.indice a[aria-current="true"]::before{color:var(--brand-light)}

@media (min-width:1040px){
  .indice{position:sticky;top:96px;margin:0;max-height:calc(100vh - 130px);
    display:flex;flex-direction:column;min-height:0}
  .indice-titulo{cursor:default;pointer-events:none}
  .indice-titulo .flecha{display:none}
  .indice ol{overflow-y:auto;scrollbar-width:thin}
}

/* ── Prosa legal ────────────────────────────────────────────────────────── */
.prosa{max-width:var(--w-prosa)}
.prosa .entrada{color:var(--ink);font-size:17.5px;margin:0 0 34px}

.prosa article{
  border-top:1px solid var(--line);
  padding-top:32px;margin-top:34px;scroll-margin-top:92px;
}
.prosa article:first-of-type{border-top:0;padding-top:0;margin-top:0}
.prosa h2{
  font-size:clamp(1.28rem,2.6vw,1.55rem);line-height:1.3;font-weight:750;
  letter-spacing:-.025em;color:var(--ink);margin:0 0 16px;
  display:flex;gap:12px;align-items:baseline;
}
.prosa h2 .num{
  color:var(--brand-light);font-weight:800;font-size:.72em;
  font-variant-numeric:tabular-nums;letter-spacing:0;flex:none;
  padding-top:.12em;
}
.prosa h3{font-size:16.5px;font-weight:700;color:var(--ink);margin:28px 0 10px}
.prosa p{margin:0 0 15px;color:var(--muted)}
.prosa ul,.prosa ol{margin:0 0 15px;padding-left:24px;color:var(--muted)}
.prosa li{margin-bottom:9px}
.prosa li::marker{color:var(--muted-soft)}
.prosa strong{color:var(--ink);font-weight:650}
.prosa a{color:var(--brand-light);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prosa a:hover{color:#fff}

/* Aviso destacado */
.aviso{
  border:1px solid rgba(239,22,36,.34);
  border-left:3px solid var(--brand);
  border-radius:var(--r-mini);
  background:linear-gradient(180deg,rgba(239,22,36,.10),rgba(239,22,36,.04));
  padding:18px 22px;margin:22px 0;
}
.aviso p{margin:0;color:var(--ink)}
.aviso p+p{margin-top:11px}
.aviso .etiqueta{
  display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--brand-light);font-weight:800;margin-bottom:8px;
}
/* Variante neutra, para notas que no son advertencias */
.aviso.nota{border-color:var(--line-strong);border-left-color:var(--muted-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))}
.aviso.nota .etiqueta{color:var(--muted)}

/* Tarjeta de contacto */
.contacto{margin-top:20px}
.contacto .titulo{font-weight:750;color:var(--ink);margin:0 0 16px;font-size:17px}
.contacto dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 22px}
.contacto dt{color:var(--muted-soft);font-weight:600;font-size:14.5px}
.contacto dd{margin:0;font-size:15px;color:var(--ink)}
.contacto a{color:var(--brand-light)}
@media (max-width:560px){
  .contacto dl{grid-template-columns:1fr;gap:2px}
  .contacto dt{margin-top:12px}
}

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:15px 28px;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:700;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn-primario{background:var(--brand-solid);color:#fff;box-shadow:var(--sh-brand)}
.btn-primario:hover{background:#c30f1d;color:#fff;transform:translateY(-2px);
  box-shadow:0 18px 48px rgba(239,22,36,.34)}
.btn-secundario{background:rgba(255,255,255,.06);color:var(--ink);
  border:1px solid var(--line-strong)}
.btn-secundario:hover{background:rgba(255,255,255,.12);color:#fff}
.btn svg{width:18px;height:18px;flex:none}
.btn-fila{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 10px}
.nota-boton{font-size:15px;color:var(--muted-soft);margin:0 0 26px;max-width:62ch;line-height:1.65}

/* ── Vías de contacto (página de eliminación) ───────────────────────────── */
.vias{display:grid;gap:14px;margin:0 0 26px}
@media (min-width:640px){.vias{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.via{
  border:1px solid var(--line);border-radius:var(--r-card);
  background:linear-gradient(180deg,var(--surface-glass-a),var(--surface-glass-b));
  padding:22px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.via:hover{border-color:rgba(239,22,36,.34);transform:translateY(-4px);box-shadow:var(--sh-lift)}
.via-icono{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(239,22,36,.14);border:1px solid rgba(239,22,36,.3);
  color:var(--brand-light);margin-bottom:6px;
}
.via-icono svg{width:19px;height:19px}
.via h3{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.via p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.via .dato{font-size:16px;font-weight:700;color:var(--ink);word-break:break-word}
.via .dato a{color:var(--brand-light)}

/* Pasos numerados */
.pasos{list-style:none;counter-reset:paso;margin:0 0 22px;padding:0}
.pasos li{counter-increment:paso;position:relative;padding-left:50px;margin-bottom:18px;
  color:var(--muted)}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:-1px;
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line-strong);
  color:var(--ink);font-size:14px;font-weight:700;
}
.pasos strong{color:var(--ink)}

/* ── Volver arriba ──────────────────────────────────────────────────────── */
.arriba{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line-strong);background:rgba(12,12,18,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.arriba.visible{opacity:1;visibility:visible;transform:translateY(0)}
.arriba:hover{border-color:rgba(239,22,36,.5);color:#fff}
.arriba svg{width:19px;height:19px}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--line);background:rgba(9,9,13,.6);margin-top:60px}
.pie-inner{width:min(var(--w-page),calc(100% - 40px));margin-inline:auto;padding:46px 0 40px}
.pie-grid{display:grid;gap:28px;margin-bottom:32px}
@media (min-width:760px){.pie-grid{grid-template-columns:1.4fr 1fr 1fr}}
.pie h2{font-size:12px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted-soft);font-weight:700;margin:0 0 14px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:9px}
.pie a{color:var(--muted);text-decoration:none;font-size:14.5px}
.pie a:hover{color:var(--ink);text-decoration:underline}
.pie-marca p{color:var(--muted);font-size:14.5px;margin:12px 0 0;max-width:38ch;line-height:1.65}
.pie-legal{border-top:1px solid var(--line);padding-top:22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pie-legal p{margin:0;color:var(--muted-soft);font-size:13.5px}

/* ── Movimiento reducido ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .via:hover,.btn-primario:hover{transform:none}
}

/* ── Impresión ──────────────────────────────────────────────────────────── */
/* El documento se imprime como documento: fondo blanco, texto negro, sin
   navegación, y las URL de los enlaces salen entre paréntesis para que la
   copia en papel siga siendo verificable. */
@media print{
  .fondo,.fondo-rejilla,.barra,.indice,.arriba,.saltar,.pie-grid,.btn-fila{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  .envoltura{width:auto;padding:0}
  .columnas{display:block}
  .prosa{max-width:none}
  .tarjeta,.panel,.aviso,.via,.contacto{
    border:1px solid #bbb!important;background:#fff!important;
    box-shadow:none!important;backdrop-filter:none!important;
    break-inside:avoid;page-break-inside:avoid;
  }
  .hero h1{font-size:22pt;color:#000}
  .hero-etiqueta,.prosa h2 .num,.aviso .etiqueta{color:#333!important}
  .prosa h2,.prosa h3,.prosa strong,.ficha dd,.contacto dd{color:#000}
  .prosa p,.prosa li,.hero-bajada,.chip{color:#222}
  .prosa article{break-inside:avoid-page;border-top:1px solid #ddd}
  .prosa a{color:#000;text-decoration:underline}
  .prosa a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .pie{border-top:1px solid #bbb;background:none}
  .pie-legal p{color:#444}
}