/* =========================================================================
   DeCA · Web corporativa — hoja de estilos
   ========================================================================= */

:root {
  --navy-900: #08152b;
  --navy-800: #0d2144;
  --navy-700: #14315e;
  --brand:    #1f3b63;
  --accent:   #38bdf8;
  --accent-2: #3b82f6;
  --cyan:     #22d3ee;
  --gold:     #e2b23a;

  --bg:       #f5f8fc;
  --surface:  #ffffff;
  --surface-2:#eef3f9;
  --text:     #0f1b2d;
  --muted:    #5c6b80;
  --border:   #e1e8f1;

  --success:  #16a34a;
  --success-bg:#e9f8ef;
  --danger:   #dc2626;
  --danger-bg:#fdecec;
  --warn:     #d97706;

  --radius:   16px;
  --radius-sm:10px;
  --shadow:   0 10px 30px -12px rgba(15,27,45,.18);
  --shadow-lg:0 30px 60px -20px rgba(8,21,43,.35);
  --ring:     0 0 0 4px rgba(56,189,248,.28);
  --maxw:     1160px;
  --nav-h:    68px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* El atributo hidden debe prevalecer sobre display de las clases (.result, etc.) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0; font-family: var(--font); color: var(--text);
  background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.grad {
  background: linear-gradient(100deg, var(--cyan), var(--accent-2) 60%, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Icono SVG en línea (estilo Bootstrap Icons) */
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -0.125em; }

/* ---------- Botones ---------- */
.btn {
  --b: transparent;
  display: inline-flex; align-items: center; gap: .5em; justify-content: center;
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--b);
  padding: .72em 1.25em; border-radius: 999px; transition: .2s ease;
  white-space: nowrap; background: none; color: inherit;
}
.btn--primary {
  background: linear-gradient(120deg, var(--accent-2), var(--cyan));
  color: #06263c; --b: transparent; box-shadow: 0 8px 20px -8px rgba(59,130,246,.6);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(59,130,246,.7); }
.btn--ghost { --b: var(--border); background: var(--surface); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-2px); }
.btn--lg { padding: .95em 1.7em; font-size: 1.05rem; }
.btn--sm { padding: .5em .9em; font-size: .86rem; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

.link { background: none; border: none; color: var(--accent-2); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  backdrop-filter: blur(14px); background: rgba(255,255,255,.72);
  border-bottom: 1px solid transparent; transition: .3s;
}
.nav.is-scrolled { border-color: var(--border); box-shadow: 0 4px 20px -12px rgba(15,27,45,.25); background: rgba(255,255,255,.9); }
.nav__inner { display: flex; align-items: center; height: 100%; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; }
/* Distintivo "Test" del entorno de pruebas (quitar cuando pase a producción) */
.brand__test { color: var(--accent-2); }
.brand__sub { font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 10px; margin-left: 2px; }
@media (max-width: 640px) { .brand__sub { display: none; } }
.brand__mark { border-radius: 8px; }
.nav__links { display: flex; gap: 22px; margin-left: auto; font-weight: 500; color: var(--muted); }
.nav__links a { position: relative; transition: color .2s; display: inline-flex; align-items: center; gap: 7px; }
.nav__links a .ico { opacity: .7; }
.nav__links a:hover .ico { opacity: 1; }
.nav__links a:hover { color: var(--text); }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--accent); transition: width .25s; }
.nav__links a:hover::after { width: 100%; }
.nav__cta { margin-left: 4px; }
/* Enlaces que duplican al botón CTA (mismo destino). En escritorio manda el
   botón; el enlace queda para el menú móvil, donde el CTA está oculto. */
.nav__links .nav__mobile { display: none; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__burger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #eaf2ff;
  background: radial-gradient(1200px 600px at 70% -10%, #1c3f74 0%, transparent 60%),
              linear-gradient(160deg, var(--navy-900), var(--navy-800) 55%, #0a1c3a);
  padding: clamp(70px, 12vw, 140px) 0 clamp(80px, 10vw, 120px);
}
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 15% 20%, rgba(34,211,238,.22), transparent 70%),
              radial-gradient(500px 300px at 90% 80%, rgba(139,92,246,.18), transparent 70%);
}
.hero__grid {
  position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(700px 400px at 50% 0%, #000 0%, transparent 80%);
}
.hero__inner { position: relative; text-align: center; max-width: 900px; margin-inline: auto; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600;
  padding: 7px 15px; border-radius: 999px; color: #bfe6ff;
  background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.3);
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(34,211,238,.7); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(34,211,238,.6)} 70%{box-shadow:0 0 0 10px rgba(34,211,238,0)} 100%{box-shadow:0 0 0 0 rgba(34,211,238,0)} }
.hero__title { font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 800; margin: 22px 0 18px; }
.hero__sub { font-size: clamp(1.02rem, 1.8vw, 1.22rem); color: #b8c6e0; max-width: 680px; margin: 0 auto 32px; }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .btn--ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #eaf2ff; }
.hero .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--cyan); color: #fff; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 44px; color: #93a6c6; font-size: .9rem; font-weight: 500; }
.hero__badges i { width: 5px; height: 5px; border-radius: 50%; background: #3c4f70; }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 18px;
  margin-top: -46px; position: relative; z-index: 5;
}
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; box-shadow: var(--shadow); }
.stat__num { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(120deg,var(--brand),var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__lbl { color: var(--muted); font-size: .9rem; margin-top: 4px; }

/* ---------- Secciones ---------- */
.section { padding: clamp(64px, 9vw, 108px) 0; }
.section--alt { background: linear-gradient(180deg, var(--surface-2), var(--bg)); }
.section__head { max-width: 640px; margin: 0 auto clamp(38px,5vw,58px); text-align: center; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.section__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; margin: 12px 0 12px; }
.section__head p { color: var(--muted); font-size: 1.06rem; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow); transition: .28s; position: relative; overflow: hidden;
}
.card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--cyan),var(--accent-2)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: #cdd9ea; }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .96rem; margin: 0; }
.card__ic { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(56,189,248,.16), rgba(59,130,246,.16)); display: grid; place-items: center; position: relative; }
.card__ic::after { content:""; width: 26px; height: 26px; background: var(--accent-2); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.ic--doc::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 2h8l4 4v16H6z' opacity='.9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 2h8l4 4v16H6z'/%3E%3C/svg%3E"); }
.ic--qr::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8v8H3zM5 5v4h4V5zM13 3h8v8h-8zM15 5v4h4V5zM3 13h8v8H3zM5 15v4h4v-4zM13 13h3v3h-3zM18 13h3v3h-3zM13 18h3v3h-3zM18 18h3v3h-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8v8H3zM5 5v4h4V5zM13 3h8v8h-8zM15 5v4h4V5zM3 13h8v8H3zM5 15v4h4v-4zM13 13h3v3h-3zM18 13h3v3h-3zM13 18h3v3h-3zM18 18h3v3h-3z'/%3E%3C/svg%3E"); }
.ic--sign::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 1l8 3v6c0 5-3.4 8.6-8 10-4.6-1.4-8-5-8-10V4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 1l8 3v6c0 5-3.4 8.6-8 10-4.6-1.4-8-5-8-10V4z'/%3E%3C/svg%3E"); }
.ic--clock::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10V6h-2v8h6v-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10V6h-2v8h6v-2z'/%3E%3C/svg%3E"); }
.ic--check::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.4-1.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.4-1.4z'/%3E%3C/svg%3E"); }
.ic--list::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 5h16v3H4zM4 10.5h16v3H4zM4 16h16v3H4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 5h16v3H4zM4 10.5h16v3H4zM4 16h16v3H4z'/%3E%3C/svg%3E"); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); position: relative; }
.step__n { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #06263c; background: linear-gradient(135deg,var(--cyan),var(--accent-2)); margin-bottom: 14px; }
.step h3 { font-size: 1.08rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .93rem; margin: 0; }
.step code { background: var(--surface-2); padding: 2px 6px; border-radius: 6px; font-size: .85em; }

/* ---------- Compliance ---------- */
.compliance { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: center; }
.compliance h2 { font-size: clamp(1.6rem,3vw,2.3rem); margin: 12px 0 14px; }
.ticks { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 32px; color: #33435c; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--success-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316a34a'%3E%3Cpath d='M13.485 1.929a.75.75 0 0 1 0 1.06L6.06 10.414a.75.75 0 0 1-1.06 0L1.515 6.93a.75.75 0 1 1 1.06-1.06L5.53 8.823l6.895-6.894a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E") center / 12px no-repeat; }
.disclaimer { font-size: .86rem; color: var(--muted); border-left: 3px solid var(--border); padding-left: 14px; }
.doc-preview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; transform: rotate(1.2deg); transition: .4s; }
.doc-preview:hover { transform: rotate(0); }
.doc-preview__bar { background: var(--surface-2); padding: 12px 16px; display: flex; gap: 7px; border-bottom: 1px solid var(--border); }
.doc-preview__bar span { width: 11px; height: 11px; border-radius: 50%; background: #cdd7e5; }
.doc-preview__body { padding: 24px; }
.dp-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.dp-title { width: 150px; height: 13px; border-radius: 4px; background: linear-gradient(90deg,var(--brand),var(--accent-2)); }
.dp-sub { width: 100px; height: 8px; border-radius: 4px; background: var(--border); margin-top: 8px; }
.dp-qr { width: 58px; height: 58px; border-radius: 8px; background:
  repeating-linear-gradient(0deg,#0f1b2d 0 4px,transparent 4px 8px),
  repeating-linear-gradient(90deg,#0f1b2d 0 4px,#fff 4px 8px); opacity: .85; }
.dp-sec { height: 18px; border-radius: 5px; background: var(--brand); opacity: .9; margin: 16px 0 10px; }
.dp-row { height: 9px; border-radius: 4px; background: var(--surface-2); margin-bottom: 8px; }
.dp-row.short { width: 55%; }
.dp-verify { margin-top: 20px; padding: 12px 14px; border-radius: 10px; background: var(--success-bg); color: var(--success); font-weight: 700; font-size: .86rem; display: flex; align-items: center; gap: 8px; }
.dp-check { width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; font-size: .7rem; }

/* ---------- Ficha normativa ---------- */
.factsheet-wrap { margin-top: -42px; position: relative; z-index: 5; }
.factsheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(5, 1fr); }
.factsheet > div { padding: 20px 22px; border-right: 1px solid var(--border); }
.factsheet > div:last-child { border-right: none; }
.factsheet span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.factsheet strong { font-size: .98rem; color: var(--text); line-height: 1.3; }

/* ---------- Alcance (DeCA vs externo) ---------- */
.scope2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.cov, .ext { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; border-top: 4px solid var(--border); }
.cov { border-top-color: var(--success); }
.ext { border-top-color: var(--warn); }
.cov__hd { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.cov__hd h3 { font-size: 1.12rem; line-height: 1.2; }
/* Solo el subtítulo (span dentro del div de texto) va en bloque; el span del
   badge de icono NO debe verse afectado (rompía su display:flex de centrado). */
.cov__hd > div > span { display: block; font-size: .84rem; color: var(--muted); margin-top: 2px; }
.cov__badge { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.cov__badge svg { width: 20px; height: 20px; }
.cov__badge--in { background: var(--success); }
.cov__badge--out { background: var(--warn); }
.cov__gt { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 14px; padding-top: 18px; border-top: 1px dashed var(--border); }
.cov__gt:first-child { padding-top: 0; border-top: none; }
.cov__gt + .feat { margin-bottom: 0; }

/* Chips: datos exigidos (art. 6). Icono arriba a la izquierda; etiqueta + nota en líneas propias. */
.chips { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.chips li { display: flex; align-items: flex-start; gap: 10px; }
.chips .ltr { margin-top: 1px; }
.chip-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chip-txt b { font-size: .89rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.chip-txt small { font-size: .78rem; font-weight: 500; color: var(--muted); line-height: 1.3; }
.chips .ltr { background: rgba(22,163,74,.14); color: var(--success); }
.ltr--plus { background: rgba(22,163,74,.14) !important; }
.feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feat li { position: relative; padding-left: 26px; font-size: .9rem; color: #33435c; line-height: 1.45; }
.feat li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--success-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316a34a'%3E%3Cpath d='M13.485 1.929a.75.75 0 0 1 0 1.06L6.06 10.414a.75.75 0 0 1-1.06 0L1.515 6.93a.75.75 0 1 1 1.06-1.06L5.53 8.823l6.895-6.894a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* Documentación externa: icono real <svg> centrado por flexbox (sin CSS mask -> sin
   variaciones entre navegadores; misma técnica ya usada en el resto del sitio). */
.extlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.extitem { display: flex; gap: 15px; align-items: flex-start; padding: 12px 0; }
.extitem + .extitem { border-top: 1px dashed var(--border); }
.extitem__ic, .scope-note__ic {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: #fdf1de;
}
.extitem__ic svg, .scope-note__ic svg { width: 21px; height: 21px; fill: var(--warn); }
.extitem > div b { font-size: .95rem; }
.extitem > div p { margin: 3px 0 7px; font-size: .87rem; color: var(--muted); line-height: 1.45; }
.muted-inline { color: var(--muted); font-weight: 500; font-size: .84rem; }
.tagref { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--warn); background: #fdf1de; border-radius: 6px; padding: 2px 8px; margin-right: 4px; }

.scope-note { display: flex; gap: 14px; align-items: center; margin-top: 22px; padding: 16px 20px; background: var(--surface-2); border-left: 4px solid var(--accent-2); border-radius: 12px; }
.scope-note p { margin: 0; font-size: .92rem; color: #33435c; line-height: 1.5; }
.scope-note__ic { background: #e7effc; }
.scope-note__ic svg { fill: var(--accent-2); }

/* ---------- Justificación legal ---------- */
/* Cadena normativa */
.norm-chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; margin: 26px 0 34px; }
@media (max-width: 1000px) { .norm-chain { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .norm-chain { grid-template-columns: 1fr; } }
.norm { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px 22px; box-shadow: var(--shadow); position: relative; }
.norm__step { position: absolute; top: -15px; left: 22px; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--cyan), var(--accent-2)); color: #06263c; font-weight: 800; display: grid; place-items: center; box-shadow: var(--shadow); }
.norm__tag { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-2); background: rgba(59,130,246,.1); padding: 3px 10px; border-radius: 999px; margin: 8px 0 10px; }
.norm h3 { font-size: 1.1rem; color: var(--brand); margin-bottom: 8px; }
.norm p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.norm-link { position: relative; }
.norm-link::before { content: ""; position: absolute; top: 50%; left: 4px; right: 4px; height: 2px; background: linear-gradient(90deg, var(--accent-2), var(--cyan)); }
.norm-link::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 13px; height: 13px; background: var(--accent-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Dos columnas de bloques legales */
.legal-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; align-items: stretch; }
.legal-two--single { grid-template-columns: 1fr; }
.lblock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.block-h { font-size: 1.05rem; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tagmini { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 4px 0 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 12px; width: 2px; background: linear-gradient(var(--accent-2), var(--gold)); }
.tl { position: relative; padding: 0 0 22px 42px; }
.tl:last-child { padding-bottom: 0; }
.tl__dot { position: absolute; left: 8px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-2); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--accent-2); }
.tl--final .tl__dot { background: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.tl__date { display: inline-block; font-weight: 800; font-size: .9rem; color: var(--brand); margin-bottom: 4px; }
.tl--final .tl__date { color: #b45309; }
.tl__txt { margin: 0; font-size: .92rem; color: #33435c; line-height: 1.45; }

/* Reparto de responsabilidades (letras a-g) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split__col { border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.split__col--carg { background: rgba(56,189,248,.06); border-color: rgba(56,189,248,.3); }
.split__col--transp { background: rgba(22,163,74,.06); border-color: rgba(22,163,74,.3); }
.split__hd { font-weight: 700; font-size: .84rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.split__badge { font-size: .7rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; color: #fff; white-space: nowrap; }
.split__col--carg .split__badge { background: var(--accent-2); }
.split__col--transp .split__badge { background: var(--success); }
.letters { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.letters li { display: flex; align-items: center; gap: 10px; font-size: .87rem; color: #33435c; }
.ltr { width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: .76rem; }
.split__col--carg .ltr { background: rgba(59,130,246,.16); color: var(--accent-2); }
.split__col--transp .ltr { background: rgba(22,163,74,.16); color: var(--success); }

/* Requisitos técnicos con icono */
.req { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.req li { display: flex; gap: 14px; align-items: center; }
.req__ic { width: 40px; height: 40px; flex: none; border-radius: 11px; background: linear-gradient(135deg, rgba(56,189,248,.16), rgba(59,130,246,.16)); position: relative; }
.req__ic::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: var(--accent-2); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.ri--doc::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 2h8l4 4v16H6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 2h8l4 4v16H6z'/%3E%3C/svg%3E"); }
.ri--qr::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8v8H3zM5 5v4h4V5zM13 3h8v8h-8zM15 5v4h4V5zM3 13h8v8H3zM5 15v4h4v-4zM13 13h3v3h-3zM18 13h3v3h-3zM13 18h3v3h-3zM18 18h3v3h-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8v8H3zM5 5v4h4V5zM13 3h8v8h-8zM15 5v4h4V5zM3 13h8v8H3zM5 15v4h4v-4zM13 13h3v3h-3zM18 13h3v3h-3zM13 18h3v3h-3zM18 18h3v3h-3z'/%3E%3C/svg%3E"); }
.ri--clock::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10V6h-2v8h6v-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10V6h-2v8h6v-2z'/%3E%3C/svg%3E"); }
.ri--shield::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 1l8 3v6c0 5-3.4 8.6-8 10-4.6-1.4-8-5-8-10V4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 1l8 3v6c0 5-3.4 8.6-8 10-4.6-1.4-8-5-8-10V4z'/%3E%3C/svg%3E"); }
.req li > div { display: flex; flex-direction: column; }
.req li > div b { font-size: .95rem; }
.req li > div span { font-size: .85rem; color: var(--muted); }

/* Régimen sancionador por severidad */
.sanc { display: grid; gap: 10px; }
.sanc__row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); }
.sev { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 4px 8px; border-radius: 999px; text-align: center; }
.sanc__t { font-size: .89rem; color: #33435c; }
.sanc__a { font-weight: 800; white-space: nowrap; font-size: .95rem; }
.sanc--leve { background: #fffbeb; border-color: #fde68a; } .sanc--leve .sev { background: #fef3c7; color: #b45309; } .sanc--leve .sanc__a { color: #b45309; }
.sanc--grave { background: #fff7ed; border-color: #fed7aa; } .sanc--grave .sev { background: #ffedd5; color: #c2410c; } .sanc--grave .sanc__a { color: #c2410c; }
.sanc--muy { background: #fef2f2; border-color: #fecaca; } .sanc--muy .sev { background: #fee2e2; color: #dc2626; } .sanc--muy .sanc__a { color: #dc2626; }

.legal__fn { font-size: .8rem; color: var(--muted); margin-top: 14px; }
.callout { display: flex; gap: 14px; align-items: flex-start; background: #fff8ec; border: 1px solid #f4d79a; border-left: 4px solid var(--gold); border-radius: 12px; padding: 18px 20px; font-size: .92rem; color: #5a4a1e; margin-bottom: 20px; line-height: 1.55; }
.callout__ic { flex: none; color: var(--gold); font-size: 24px; line-height: 0; margin-top: 1px; }
.sources { font-size: .86rem; color: var(--muted); }
.sources a { color: var(--accent-2); }

/* ---------- Panel ---------- */
.section--panel { background: linear-gradient(180deg, var(--bg), var(--surface-2)); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.panel__bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.panel__status { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--muted); font-weight: 500; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; transition: .3s; }
.dot.is-up { background: var(--success); box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
.dot.is-down { background: var(--danger); box-shadow: 0 0 0 4px rgba(220,38,38,.15); }
.panel__auth { display: flex; align-items: center; gap: 10px; }
.tag { font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.tag--off { background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.tag--on { background: var(--success-bg); color: var(--success); }

.tabs { display: flex; gap: 4px; padding: 14px 22px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab { background: none; border: none; font: inherit; font-weight: 600; color: var(--muted); padding: 12px 18px; cursor: pointer; border-radius: 10px 10px 0 0; position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tab .ico { opacity: .75; }
.tab.is-active .ico { opacity: 1; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent-2); }
.tab.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg,var(--cyan),var(--accent-2)); }
.tabpanel { display: none; padding: 28px 22px; }
.tabpanel.is-active { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Form ---------- */
.form__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.fs { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 18px 8px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: start; }
.fs legend { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-2); padding: 0 8px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; font-weight: 600; color: #40506a; }
.form .col2 { grid-column: 1 / -1; }
.fs--wide { grid-column: 1 / -1; display: block; }

/* --- Líneas de mercancía --- */
.merc-lines { display: grid; gap: 10px; margin-bottom: 12px; }
.merc-line { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 10px 12px; }
.merc-line__main { display: grid; grid-template-columns: 1fr 130px 90px 120px auto auto; gap: 8px; align-items: center; }
.merc-line input, .merc-line select { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); width: 100%; }
.merc-line input:focus, .merc-line select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.ml-adr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--warn); white-space: nowrap; cursor: pointer; }
.ml-del { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--danger); font-size: 1rem; display: grid; place-items: center; cursor: pointer; transition: .15s; }
.ml-del:hover { background: var(--danger-bg); border-color: var(--danger); }
.ml-adr-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.ml-adr-fields[hidden] { display: none; }
.merc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.merc-total { font-size: .92rem; color: var(--muted); }
.merc-total strong { color: var(--text); font-size: 1.05rem; }
@media (max-width: 680px) {
  .merc-line__main { grid-template-columns: 1fr 1fr; }
  .ml-adr-fields { grid-template-columns: 1fr; }
}
.form input, .form select {
  font: inherit; font-weight: 500; color: var(--text); padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); transition: .18s;
}
.form input:focus, .form select:focus, #keyInput:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.form__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }

/* ---------- Result ---------- */
.result { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; margin-top: 26px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(160deg, var(--success-bg), var(--surface)); animation: fade .4s; }
.result__qr img { width: 150px; height: 150px; border-radius: 12px; border: 1px solid var(--border); background: #fff; padding: 8px; }
.result__ok { font-size: 1.15rem; font-weight: 800; color: var(--success); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.result__ok span { width: 26px; height: 26px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; }
.result dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 16px; font-size: .92rem; }
.result dt { color: var(--muted); font-weight: 600; }
.result dd { margin: 0; font-weight: 600; word-break: break-all; }
.result dd a { color: var(--accent-2); }
.result__cta { display: flex; gap: 10px; }

/* ---------- Toolbar + tabla ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar__filters { display: flex; gap: 10px; flex-wrap: wrap; }
.toolbar input, .toolbar select { font: inherit; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.toolbar label { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; }
.table th, .table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.table thead th { background: var(--surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); cursor: default; user-select: none; white-space: nowrap; }
.table th[data-sort] { cursor: pointer; }
.table th[data-sort]:hover { color: var(--accent-2); }
.table th .arrow { display: inline-block; width: 11px; height: 11px; vertical-align: middle; }
.table th.sort-asc .arrow, .table th.sort-desc .arrow { background: currentColor; opacity: .6; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 9px; mask-size: 9px; }
.table th.sort-asc .arrow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 4.86 2.451 10.34C1.885 10.99 2.345 12 3.204 12h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 4.86 2.451 10.34C1.885 10.99 2.345 12 3.204 12h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E"); }
.table th.sort-desc .arrow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody td { font-weight: 500; }
.badge-sign { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--success); }
.badge-sign::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.table .empty { text-align: center; color: var(--muted); padding: 40px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.pager__info { font-size: .9rem; color: var(--muted); font-weight: 600; }

/* ---------- Administración (API keys / usuarios) ---------- */
.admin-hint { margin: 0; font-size: .9rem; color: var(--muted); max-width: 640px; }
.admin-hint code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: .85em; }
.muted-cell { color: var(--muted); }
.keybox { margin: 14px 0 18px; padding: 16px 18px; border: 1px solid #bfe3c4; background: var(--success-bg); border-radius: 12px; }
.keybox__t { font-size: .9rem; color: #14532d; margin-bottom: 10px; }
.keybox__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.keybox__row code { flex: 1; min-width: 220px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: .9rem; word-break: break-all; }
.user-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.user-form input, .user-form select { font: inherit; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.user-form input:focus, .user-form select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* ---------- Rutas de reparto ---------- */
.ruta-detail { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--border); }
.ruta-detail__hd { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.ruta-detail__hd h4 { margin: 0; font-size: 1.05rem; color: var(--text); }
.ruta-detail__total td { font-weight: 700; background: var(--surface-2); }
.ruta-detail__note { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
.row-link { cursor: pointer; }

/* ---------- Dropzone / verify ---------- */
.dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 48px 24px; text-align: center; transition: .2s; background: var(--surface-2); }
.dropzone.is-over { border-color: var(--accent); background: rgba(56,189,248,.08); }
.dropzone__ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(59,130,246,.18)); position: relative; }
.dropzone__ic::after { content: ""; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; background: var(--accent-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z'/%3E%3C/svg%3E") center/contain no-repeat; }
.dropzone p { margin: 0 0 4px; }
.dropzone__hint { font-size: .85rem; color: var(--muted); }
.verdict { margin-top: 24px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; animation: fade .4s; }
.verdict__head { padding: 20px 24px; display: flex; align-items: center; gap: 14px; color: #fff; }
.verdict__head.ok { background: linear-gradient(120deg, #15803d, var(--success)); }
.verdict__head.bad { background: linear-gradient(120deg, #b91c1c, var(--danger)); }
.verdict__ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; }
.verdict__title { font-size: 1.15rem; font-weight: 800; }
.verdict__sub { font-size: .88rem; opacity: .9; }
.verdict__body { padding: 20px 24px; background: var(--surface); }
.verdict dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; font-size: .92rem; }
.verdict dt { color: var(--muted); font-weight: 600; }
.verdict dd { margin: 0; font-weight: 600; }
.vflag { display: inline-flex; align-items: center; gap: 6px; }
.vflag.y { color: var(--success); } .vflag.n { color: var(--danger); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-900); color: #9fb0cc; padding: 54px 0 26px; }
.footer__inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer .brand__name { color: #fff; font-size: 1.3rem; font-weight: 800; }
.footer__brand p { margin: 8px 0 0; font-size: .9rem; max-width: 340px; }
.footer__links { display: flex; gap: 26px; align-items: center; font-weight: 500; }
.footer__links a:hover { color: #fff; }
.footer__legal { font-size: .82rem; padding-top: 22px; color: #6d7f9c; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(8,21,43,.6); backdrop-filter: blur(4px); animation: fade .25s; }
.modal__card { position: relative; background: var(--surface); border-radius: var(--radius); padding: 34px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); animation: pop .3s ease; }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
.modal__x { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.15rem; color: var(--muted); cursor: pointer; line-height: 0; padding: 4px; transition: color .15s; }
.modal__x:hover { color: var(--text); }
.modal__card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.modal .muted { color: var(--muted); font-size: .9rem; margin-bottom: 20px; }
.modal code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: .85em; }
#keyForm { display: grid; gap: 12px; }
.btn--wide { width: 100%; }
.sso-sep { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); font-size: .8rem; }
.sso-sep::before, .sso-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn--google .ico { color: #4285F4; }
/* Campos de usuario/contraseña del login: icono + estado de foco elegante */
.field { position: relative; display: block; min-width: 0; }
.field__ic {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); fill: currentColor;
  pointer-events: none; transition: color .18s;
}
.field input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .96rem;
  padding: 13px 14px 13px 44px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text);
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.field input::placeholder { color: var(--muted); }
.field input:hover { border-color: #c3ceda; }
.field input:focus {
  outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--ring);
}
.field:focus-within .field__ic { color: var(--accent-2); }
.check { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); cursor: pointer; }
.check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent-2); cursor: pointer; }
.modal__err { color: var(--danger); font-size: .88rem; margin: 4px 0 0; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: grid; gap: 10px; }
.toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent-2); border-radius: 10px; padding: 13px 18px; box-shadow: var(--shadow-lg); font-size: .9rem; font-weight: 500; animation: slidein .3s ease; max-width: 340px; }
.toast.ok { border-left-color: var(--success); }
.toast.err { border-left-color: var(--danger); }
@keyframes slidein { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cards, .steps { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
  .compliance { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  .scope2, .legal-two { grid-template-columns: 1fr; }
  .norm-chain { grid-template-columns: 1fr; gap: 22px; }
  .norm-link { display: none; }
  .split { grid-template-columns: 1fr 1fr; }
  .factsheet { grid-template-columns: repeat(2, 1fr); }
  .factsheet > div:nth-child(2) { border-right: none; }
}
@media (max-width: 680px) {
  .nav__links, .nav__cta { display: none; }
  /* El margin-left:auto que empujaba todo a la derecha vive en .nav__links, que
     aquí está oculto: sin esto la hamburguesa se queda pegada a la marca. */
  .nav__burger { display: flex; margin-left: auto;
    align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  /* Desplegable anclado a la derecha, bajo el botón hamburguesa. */
  .nav__links.is-open { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: flex-end; text-align: right; background: var(--surface); padding: 18px 22px; gap: 16px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
  /* En móvil el botón CTA está oculto: aquí estos enlaces SÍ deben verse. */
  .nav__links.is-open .nav__mobile { display: inline-flex; }
  /* Área táctil holgada: solo el alto del texto se queda muy por debajo del
     mínimo recomendado (~48 px) y falla el criterio de Lighthouse. */
  .nav__links.is-open a { padding: 10px 0; min-height: 44px; }
  .cards, .steps, .stats { grid-template-columns: 1fr; }
  .factsheet { grid-template-columns: 1fr; }
  .factsheet > div { border-right: none; border-bottom: 1px solid var(--border); }
  .factsheet > div:last-child { border-bottom: none; }
  .split { grid-template-columns: 1fr; }
  .chips { grid-template-columns: 1fr; }
  .fs { grid-template-columns: 1fr; }
  /* Los botones llevan white-space:nowrap y juntos no caben en pantallas
     estrechas: se apilan a lo ancho en lugar de desbordar la tarjeta. */
  .form__actions { flex-wrap: wrap; }
  .form__actions .btn { flex: 1 1 100%; }
  .result { grid-template-columns: 1fr; text-align: center; }
  .result__qr img { margin: 0 auto; }
  .result dl { text-align: left; }
  .modal__card { padding: 26px 20px; }
  .field input { padding: 12px 12px 12px 40px; font-size: .93rem; }
  .field__ic { left: 13px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

/* ===================== CUMPLIMIENTO PUNTO POR PUNTO ===================== */
/* Aislado bajo #cumplimiento para no colisionar con la lista .req heredada. */
#cumplimiento .aud-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: -4px 0 26px; }
#cumplimiento .aud { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 13px; }
#cumplimiento .aud .ico { width: 15px; height: 15px; color: var(--accent-2); }

#cumplimiento .compliance { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
#cumplimiento .req { display: block; width: 100%; margin: 0; padding: 0; border: 1px solid var(--border);
  border-radius: 14px; background: var(--surface); overflow: hidden;
  transition: border-color .2s, box-shadow .2s; }
#cumplimiento .req[open] { border-color: var(--accent); box-shadow: var(--shadow); }
#cumplimiento .req > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 14px; padding: 15px 18px; }
#cumplimiento .req > summary::-webkit-details-marker { display: none; }
#cumplimiento .req__chk { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid;
  place-items: center; background: var(--success-bg); color: var(--success); }
#cumplimiento .req__chk svg { width: 15px; height: 15px; }
#cumplimiento .req__ttl { font-weight: 700; color: var(--text); font-size: 1.02rem; line-height: 1.3; }
#cumplimiento .req__meta { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
#cumplimiento .req__norm { font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: var(--accent-2);
  background: rgba(59,130,246,.09); border: 1px solid rgba(59,130,246,.22);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
#cumplimiento .req__chev { width: 16px; height: 16px; color: var(--muted); transition: transform .25s; flex: none; }
#cumplimiento .req[open] .req__chev { transform: rotate(180deg); }
#cumplimiento .req__body { padding: 0 18px 18px 58px; }
#cumplimiento .req__normline { display: none; font-size: .72rem; font-weight: 700; color: var(--accent-2); margin: 2px 0 10px; }
#cumplimiento .req__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  border-top: 1px dashed var(--border); padding-top: 14px; }
#cumplimiento .req__col { min-width: 0; }
#cumplimiento .req__col h4 { margin: 0 0 7px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#cumplimiento .req__col--n h4 { color: var(--muted); }
#cumplimiento .req__col--a h4 { color: var(--success); }
#cumplimiento .req__col p { margin: 0; font-size: .92rem; color: var(--text); line-height: 1.5; }
#cumplimiento .req__col--n p { color: var(--muted); }
#cumplimiento .techs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#cumplimiento .kbd { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .76rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 7px; color: var(--text); }

#cumplimiento .extra-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 16px; }
#cumplimiento .ecap { display: flex; gap: 11px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
#cumplimiento .ecap .ico { width: 18px; height: 18px; color: var(--accent-2); flex: none; margin-top: 2px; }
#cumplimiento .ecap b { display: block; font-size: .92rem; color: var(--text); margin-bottom: 3px; }
#cumplimiento .ecap span { font-size: .83rem; color: var(--muted); line-height: 1.45; }

@media (max-width: 760px) {
  #cumplimiento .req__body { padding-left: 18px; }
  #cumplimiento .req__grid { grid-template-columns: 1fr; gap: 12px; }
  #cumplimiento .req__norm { display: none; }
  #cumplimiento .req__normline { display: block; }
}