/* ==========================================================================
   DigiAccess — sistema de diseño del sitio
   Claro / corporativo. Cero dependencias externas: funciona 100% offline.
   ========================================================================== */

/* ---------- Tipografía local (Plus Jakarta Sans variable, SIL OFL 1.1) ---------- */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/PlusJakartaSans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  /* Texto y superficies */
  --ink:      #0f172a;
  --body:     #475569;
  --muted:    #64748b;
  --line:     #e2e8f0;
  --line-2:   #cbd8e8;
  --bg:       #ffffff;
  --surface:  #f6f9fc;
  --tint:     #eaf3fe;

  /* Marca (derivada del logo: chevron cian → azul, palabra en navy) */
  --brand:      #0f62d6;   /* 5.6:1 sobre blanco  */
  --brand-deep: #0b4fa8;   /* 8.0:1 sobre blanco  */
  --brand-ink:  #0a2d5e;
  --cyan:       #22c1f0;   /* solo decorativo, nunca detrás de texto */
  --brand-grad: linear-gradient(135deg,#1668d8 0%,#0b4fa8 100%);
  --edge-grad:  linear-gradient(135deg,var(--cyan) 0%,var(--brand) 100%);

  /* Veredictos de acceso (semántica del propio producto) */
  --ok:       #0e8f63;
  --ok-bg:    #e7f6ef;
  --deny:     #c6362a;
  --deny-bg:  #fdeceb;
  --info-bg:  #e8f1fe;

  /* Espacio (densidad estándar, página de marketing) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:56px; --s-8:80px; --s-9:112px;

  --r-sm:8px; --r:12px; --r-lg:18px;
  --shadow-1:0 1px 2px rgba(15,23,42,.04);
  --shadow-2:0 1px 2px rgba(15,23,42,.04), 0 14px 40px rgba(15,23,42,.07);
  --wrap:1200px;
  --sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; }
img{ height:auto; display:block; }

h1,h2,h3,h4{ color:var(--ink); margin:0 0 .5em; font-weight:800; line-height:1.14; letter-spacing:-.032em; }
h1{ font-size:clamp(2.3rem,5vw,3.9rem); line-height:1.06; letter-spacing:-.038em; }
h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); letter-spacing:-.032em; }
h3{ font-size:1.16rem; font-weight:700; letter-spacing:-.015em; line-height:1.3; }
h4{ font-size:1rem; font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
ul{ margin:0 0 1.1em; padding-left:1.15em; }
li{ margin-bottom:.4em; }
strong{ color:var(--ink); font-weight:700; }

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

code{
  font-family:var(--mono); font-size:.87em;
  background:var(--tint); color:var(--brand-ink);
  padding:.13em .42em; border-radius:5px;
}

/* Foco visible en todo lo enfocable (requisito de accesibilidad) */
:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}

/* Enlace de salto para lectores de pantalla / teclado */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand-deep); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--r-sm) 0; font-weight:700;
}
.skip:focus{ left:0; text-decoration:none; }

/* ---------- Estructura ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.narrow{ max-width:780px; }

.section{ padding:var(--s-9) 0; }
.section--tight{ padding:var(--s-8) 0; }
.section--surface{ background:var(--surface); border-block:1px solid var(--line); }
.section--surface .card{ box-shadow:none; }

.section-head{ max-width:720px; margin-bottom:var(--s-8); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head p:last-child{ margin-bottom:0; }

.eyebrow{
  display:block; font-size:.76rem; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:var(--brand); margin-bottom:var(--s-3);
}
.lead{ font-size:1.18rem; line-height:1.55; color:var(--body); }
.muted{ color:var(--muted); font-size:.95rem; }
.center{ text-align:center; }
.mb-0{ margin-bottom:0; }

/* ---------- Encabezado ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:var(--s-6); height:76px; }
.logo{ flex:0 0 auto; display:flex; align-items:center; }
.logo{ color:var(--ink); }
.logo:hover{ text-decoration:none; }

.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a{
  color:var(--ink); font-size:.95rem; font-weight:600;
  padding:10px 13px; border-radius:var(--r-sm); white-space:nowrap;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.nav a:hover{ background:var(--tint); color:var(--brand-deep); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--brand); }
.nav .btn{ margin-left:var(--s-3); }

.nav-toggle{
  display:none; margin-left:auto;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; color:var(--ink);
}
.nav-toggle svg{ display:block; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:12px 22px;
  font-family:inherit; font-size:.97rem; font-weight:700; line-height:1.2;
  border:1px solid transparent; border-radius:10px; cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease),
             background .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--brand-grad); color:#fff; box-shadow:0 4px 14px rgba(11,79,168,.26); }
.btn--primary:hover{ box-shadow:0 8px 22px rgba(11,79,168,.32); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-1); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand-deep); }
.btn--onDark{ background:#fff; color:var(--brand-ink); }
.btn--outlineDark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--outlineDark:hover{ background:rgba(255,255,255,.12); }
.btn--sm{ min-height:38px; padding:8px 16px; font-size:.9rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
.btn-row--center{ justify-content:center; }

/* ---------- Portada ---------- */
.hero{
  padding:var(--s-9) 0;
  background:
    radial-gradient(880px 380px at 92% -10%, rgba(34,193,240,.14), transparent 60%),
    radial-gradient(700px 400px at -5% 0%, rgba(15,98,214,.09), transparent 58%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:var(--s-8); align-items:center; }
.hero h1{ margin-bottom:.36em; }
.hero .lead{ font-size:1.3rem; line-height:1.5; max-width:31em; }
.hero-note{ margin:var(--s-5) 0 0; font-size:.9rem; color:var(--muted); }

.page-hero{
  padding:var(--s-8) 0 var(--s-7);
  background:linear-gradient(180deg,var(--tint) 0%,#fff 100%);
  border-bottom:1px solid var(--line);
}
.page-hero h1{ margin-bottom:.3em; }
.page-hero .lead{ max-width:44em; margin-bottom:0; }

/* Migas */
.crumbs{ font-size:.86rem; color:var(--muted); margin-bottom:var(--s-4); }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--brand); }

/* ==========================================================================
   ELEMENTO FIRMA — Consola de decisiones de acceso
   Es lo que el producto realmente hace: lee una placa o una cédula y devuelve
   un veredicto. Los cuatro veredictos son los del motor real.
   ========================================================================== */
.console{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); overflow:hidden;
}
.console-bar{
  display:flex; align-items:center; gap:10px;
  padding:13px 18px;
  background:var(--brand-ink); color:#fff;
  font-size:.83rem; font-weight:700; letter-spacing:.01em;
}
.console-bar .live{
  width:8px; height:8px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 0 rgba(34,193,240,.6);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,193,240,.55); }
  70%{ box-shadow:0 0 0 9px rgba(34,193,240,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,193,240,0); }
}
.console-bar .site{ margin-left:auto; font-weight:500; opacity:.72; font-size:.78rem; }
.console-body{ padding:var(--s-4); display:grid; gap:10px; }

.evt{
  display:flex; align-items:center; gap:var(--s-4);
  padding:13px 15px;
  border:1px solid var(--line); border-left:3px solid var(--line-2);
  border-radius:var(--r-sm); background:var(--surface);
  animation:evt-in .38s var(--ease) both;
}
.evt--ok{ border-left-color:var(--ok); }
.evt--deny{ border-left-color:var(--deny); }
.evt--info{ border-left-color:var(--brand); }
@keyframes evt-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.cred{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.cred-ico{
  width:32px; height:32px; flex:0 0 auto; border-radius:8px;
  background:#fff; border:1px solid var(--line-2); color:var(--brand-deep);
  display:flex; align-items:center; justify-content:center;
}
.cred-ico svg{ width:18px; height:18px; }
.plate{
  font-family:var(--mono); font-weight:700; font-size:.98rem; letter-spacing:.09em;
  color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:6px; padding:6px 11px; white-space:nowrap;
}
.evt-meta{ flex:1; min-width:0; font-size:.85rem; line-height:1.4; color:var(--muted); }
.evt-meta b{ display:block; color:var(--ink); font-size:.93rem; font-weight:700; }
.verdict{
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:99px; white-space:nowrap;
}
.verdict--ok{ background:var(--ok-bg); color:var(--ok); }
.verdict--deny{ background:var(--deny-bg); color:var(--deny); }
.verdict--info{ background:var(--info-bg); color:var(--brand-deep); }
.console-foot{
  padding:12px 18px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--muted); background:#fff;
}

/* ---------- Rejillas ---------- */
.grid{ display:grid; gap:var(--s-5); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Tarjetas ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s-6); box-shadow:var(--shadow-1);
}
.card > :last-child{ margin-bottom:0; }
.card h3{ margin-bottom:.4em; }

a.card{
  color:inherit; display:block;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
a.card:hover{ text-decoration:none; transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--line-2); }
.card-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:var(--s-4); font-weight:700; font-size:.94rem; color:var(--brand);
}
a.card:hover .card-link svg{ transform:translateX(3px); }
.card-link svg{ transition:transform .18s var(--ease); }

/* Icono en cuadro tintado (SVG, nunca emoji) */
.ico{
  width:46px; height:46px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:11px; background:var(--tint); color:var(--brand-deep);
  margin-bottom:var(--s-4);
}
.ico svg{ width:24px; height:24px; }
.ico--solid{ background:var(--brand-grad); color:#fff; }
.ico--sm{ width:38px; height:38px; border-radius:9px; }
.ico--sm svg{ width:20px; height:20px; }

/* ---------- Listas con check ---------- */
.checks{ list-style:none; padding:0; }
.checks li{ position:relative; padding-left:30px; margin-bottom:.6em; }
.checks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:18px; height:18px; border-radius:50%; background:var(--tint);
}
.checks li::after{
  content:""; position:absolute; left:6px; top:.72em;
  width:5px; height:9px;
  border:solid var(--brand-deep); border-width:0 2.2px 2.2px 0; transform:rotate(43deg);
}

/* ---------- Cifras ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); }
.stat b{
  display:block; font-size:2.2rem; font-weight:800; letter-spacing:-.04em;
  color:var(--ink); line-height:1.05; margin-bottom:2px;
}
.stat span{ font-size:.92rem; color:var(--muted); line-height:1.4; display:block; }

/* ---------- Bloque partido ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center; }
.split--wide{ grid-template-columns:1.15fr .85fr; }

/* ---------- Franja oscura ---------- */
.band{
  background:linear-gradient(135deg,#0a2d5e 0%,#123a72 100%);
  color:#c8d8ee;
  border-block:none;
}
.band h2,.band h3,.band .stat b{ color:#fff; }
.band .lead{ color:#c8d8ee; }
.band .eyebrow{ color:var(--cyan); }
.band .stat span{ color:#9fb6d4; }
.band strong{ color:#fff; }
.band .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); box-shadow:none; color:#c8d8ee; }
.band .ico{ background:rgba(255,255,255,.11); color:#fff; }
.band .checks li::before{ background:rgba(255,255,255,.13); }
.band .checks li::after{ border-color:var(--cyan); }

/* ---------- Sectores ---------- */
.row-item{ display:flex; gap:var(--s-4); align-items:flex-start; }
.row-item .ico{ margin-bottom:0; }
.row-item h3{ margin-bottom:.25em; }
.row-item p{ margin-bottom:0; font-size:.96rem; }

/* ---------- Instalaciones / casos ---------- */
.case{ border-left:3px solid var(--cyan); padding-left:var(--s-5); }
.case b{ display:block; color:var(--ink); font-size:1.06rem; margin-bottom:.15em; }
.case p{ margin-bottom:0; font-size:.96rem; }

/* ---------- Tabla ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
table{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:580px; }
caption{ text-align:left; font-size:.9rem; color:var(--muted); padding:0 0 var(--s-3); }
th,td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ color:var(--ink); font-weight:700; background:var(--surface); white-space:nowrap; }
tbody tr:last-child td{ border-bottom:none; }

/* ---------- Formulario ---------- */
.form{ display:grid; gap:var(--s-4); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.field label{ display:block; font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:6px; }
.field .hint{ font-size:.83rem; color:var(--muted); font-weight:400; margin-top:4px; display:block; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink);
  min-height:46px; padding:11px 14px;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,98,214,.16);
}
.field .error{ display:none; color:var(--deny); font-size:.85rem; font-weight:600; margin-top:5px; }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:var(--deny); }
.field.invalid .error{ display:block; }
.form-status{
  display:none; padding:15px 18px; border-radius:var(--r-sm);
  background:var(--ok-bg); color:#0b6b4b; border:1px solid rgba(14,143,99,.28); font-size:.95rem;
}
.form-status.show{ display:block; }
.form-status > :last-child{ margin-bottom:0; }

/* ---------- Preguntas frecuentes ---------- */
details{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:18px 22px; margin-bottom:10px;
}
details[open]{ box-shadow:var(--shadow-1); }
summary{
  cursor:pointer; font-weight:700; color:var(--ink); list-style:none;
  display:flex; align-items:flex-start; gap:12px; min-height:28px;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:""; flex:0 0 auto; margin-left:auto; margin-top:7px;
  width:9px; height:9px; border:solid var(--brand); border-width:0 2px 2px 0;
  transform:rotate(45deg); transition:transform .18s var(--ease);
}
details[open] summary::after{ transform:rotate(-135deg); margin-top:11px; }
details p{ margin:.85em 0 0; font-size:.96rem; }
details p:last-child{ margin-bottom:0; }

/* ---------- Cierre ---------- */
.cta{ text-align:center; }
.cta .lead{ max-width:36em; margin-inline:auto; }

/* ---------- Pie ---------- */
.site-footer{ background:#0a1830; color:#93a7c4; padding:var(--s-8) 0 var(--s-5); font-size:.93rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s-6); margin-bottom:var(--s-7); }
.site-footer strong{ color:#fff; }
.site-footer h4{ color:#fff; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1.1em; }
.site-footer a{ color:#93a7c4; }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom:.55em; }
.footer-logo{ color:#fff; margin-bottom:var(--s-4); }
.footer-about p{ font-size:.92rem; line-height:1.6; max-width:34ch; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:var(--s-5);
  display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap;
  font-size:.85rem; color:#6d8199;
}

/* ---------- Aviso de borrador offline ---------- */
.draft-note{
  background:#fff8e6; border-bottom:1px solid #f0dfae; color:#7a5c14;
  font-size:.86rem; text-align:center; padding:9px 24px;
}
.draft-note strong{ color:#6b4f0d; }

/* ---------- Adaptable ---------- */
@media (max-width:980px){
  .hero-grid,.split,.split--wide{ grid-template-columns:1fr; gap:var(--s-7); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  body{ font-size:16px; }
  .section{ padding:var(--s-8) 0; }
  .section--tight{ padding:var(--s-7) 0; }
  .nav-toggle{ display:inline-flex; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:76px;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--line);
    padding:10px 18px 20px; box-shadow:var(--shadow-2);
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:13px 12px; }
  .nav .btn{ margin:8px 0 0; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .evt{ flex-wrap:wrap; gap:10px 12px; }
  .evt-meta{ flex-basis:100%; order:3; }
}
@media (max-width:520px){
  .grid-4{ grid-template-columns:1fr; }
  .card{ padding:var(--s-5); }
  .footer-grid{ grid-template-columns:1fr; gap:var(--s-5); }
}

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

@media print{
  .site-header,.site-footer,.nav-toggle,.draft-note{ display:none; }
  body{ font-size:11pt; color:#000; }
  a{ color:#000; }
}

/* ---------- Secuencia numerada (solo donde el orden es real) ---------- */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); }
.step{ position:relative; padding-top:52px; }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:0;
  width:40px; height:40px; border-radius:11px;
  background:var(--tint); color:var(--brand-deep);
  font-size:.88rem; font-weight:800; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
}
.step h3{ margin-bottom:.35em; }
.step p{ font-size:.96rem; margin-bottom:0; }
.band .step::before{ background:rgba(255,255,255,.12); color:#fff; }

/* Comparativa lado a lado */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
.compare .card--dim{ background:var(--surface); }
.compare h3 .label{
  display:block; font-size:.74rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.35em;
}

@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){ .steps,.compare{ grid-template-columns:1fr; } }

/* Utilidades */
.mt-32{ margin-top:var(--s-6); }
.mt-24{ margin-top:var(--s-5); }

/* ---------- Contraste catálogo / ingeniería (motivo recurrente) ---------- */
.card--eng{ border-color:var(--line-2); box-shadow:var(--shadow-2); position:relative; }
.card--eng::before{
  content:""; position:absolute; inset:-1px -1px auto -1px; height:3px;
  border-radius:var(--r) var(--r) 0 0; background:var(--edge-grad);
}
.compare h3 .label{
  display:block; font-size:.72rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.4em;
}
.compare .card--eng h3 .label{ color:var(--brand); }
.band .compare .card--dim{ background:rgba(255,255,255,.04); }
.band .compare h3 .label{ color:#8fa8c8; }
.band .compare .card--eng h3 .label{ color:var(--cyan); }

/* ---------- Barra de respaldo de marca ---------- */
.trustbar{ background:var(--surface); border-bottom:1px solid var(--line); }
.trustbar-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5);
  padding:var(--s-5) 0;
}
.trust{ display:flex; align-items:center; gap:12px; }
.trust svg{ width:22px; height:22px; flex:0 0 auto; color:var(--brand); }
.trust span{ font-size:.88rem; line-height:1.35; color:var(--ink); font-weight:600; }

/* Distintivo de serie */
.serie{
  display:inline-block; font-family:var(--mono); font-size:.76rem; font-weight:700;
  letter-spacing:.1em; color:var(--brand-deep); background:var(--tint);
  border:1px solid #d3e4fb; border-radius:6px; padding:4px 10px; margin-bottom:var(--s-4);
}
.card .serie{ margin-bottom:var(--s-3); }

/* Nota de origen en el pie */
.origin{
  display:flex; align-items:center; gap:10px; margin-bottom:var(--s-4);
  font-size:.86rem; color:#b8c8de; font-weight:600;
}
.origin svg{ width:20px; height:20px; flex:0 0 auto; color:var(--cyan); }

@media (max-width:900px){ .trustbar-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .trustbar-grid{ grid-template-columns:1fr; gap:var(--s-4); } }

/* ---------- Panel de líneas de producto (portada) ---------- */
.lineup{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); overflow:hidden;
}
.lineup-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; background:var(--brand-ink); color:#fff;
  font-size:.83rem; font-weight:700;
}
.lineup-head span{ font-weight:500; opacity:.72; font-size:.78rem; }
.lineup-item{
  display:flex; align-items:center; gap:14px;
  padding:13px 20px; border-top:1px solid var(--line); color:inherit;
  transition:background .15s var(--ease);
}
.lineup-item:first-of-type{ border-top:none; }
.lineup-item:hover{ background:var(--tint); text-decoration:none; }
.lineup-code{
  flex:0 0 46px; text-align:center;
  font-family:var(--mono); font-size:.78rem; font-weight:700; letter-spacing:.06em;
  color:var(--brand-deep); background:var(--tint); border:1px solid #d3e4fb;
  border-radius:6px; padding:5px 0;
}
.lineup-code--vacio{ background:transparent; border-color:transparent; }
.lineup-item:hover .lineup-code{ background:#fff; }
.lineup-item:hover .lineup-code--vacio{ background:transparent; }
.lineup-text{ flex:1; min-width:0; font-size:.84rem; color:var(--muted); line-height:1.35; }
.lineup-text b{ display:block; color:var(--ink); font-size:.95rem; font-weight:700; }
.lineup-item svg{ width:16px; height:16px; flex:0 0 auto; color:var(--line-2); }
.lineup-item:hover svg{ color:var(--brand); }

/* ---------- Imágenes de producto ---------- */
.shot{ margin:0; }
.shot img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-2); background:var(--surface);
}
.shot figcaption{
  margin-top:12px; font-size:.88rem; color:var(--muted); line-height:1.5;
}
.shot figcaption b{ color:var(--ink); font-weight:700; }

.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-6); }
.gallery .shot img{ box-shadow:var(--shadow-1); }

/* Hueco de fotografía pendiente — visible solo mientras el sitio es borrador */
.photo-todo{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  aspect-ratio:4/3; padding:24px; text-align:center;
  border:2px dashed #d8c79a; border-radius:var(--r); background:#fdf9ee; color:#8a6d1f;
}
.photo-todo svg{ width:28px; height:28px; opacity:.6; }
.photo-todo b{ font-size:.95rem; color:#7a5c14; }
.photo-todo span{ font-size:.83rem; line-height:1.45; max-width:34ch; }

@media (max-width:768px){ .gallery{ grid-template-columns:1fr; } }

/* ---------- Agrupación por familia dentro del panel de líneas ---------- */
.lineup-group{
  display:block; padding:11px 20px 5px;
  border-top:1px solid var(--line); background:var(--surface);
  font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-deep);
}
.lineup-group:first-of-type{ border-top:none; }
.lineup-group + .lineup-item{ border-top:none; }
.lineup .lineup-item{ padding-top:11px; padding-bottom:11px; }

/* ---------- Familias de producto en el pie ---------- */
.footer-fam{
  color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; margin:1.4em 0 .5em; opacity:.85;
}
.footer-fam:first-child{ margin-top:0; }
.site-footer .footer-lines li{ margin-bottom:.4em; }
.site-footer .footer-lines li a{ padding-left:10px; display:inline-block; }

/* ---------- H1 con definición ---------- */
.h1-def{
  display:block; margin-top:.38em;
  font-size:clamp(1rem,1.5vw,1.18rem); font-weight:600; line-height:1.45;
  letter-spacing:-.01em; color:var(--body);
}

/* ---------- Bloque por línea de producto ---------- */
.linea{ padding-top:var(--s-7); border-top:1px solid var(--line); margin-top:var(--s-7); }
.linea:first-of-type{ padding-top:0; border-top:none; margin-top:0; }
.linea > h2{ margin-bottom:.25em; }
.linea .linea-lead{ font-size:1.06rem; max-width:58ch; margin-bottom:var(--s-6); }
.linea-series{
  display:inline-block; margin-left:12px; vertical-align:middle;
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.08em;
  color:var(--brand-deep); background:var(--tint); border:1px solid #d3e4fb;
  border-radius:6px; padding:3px 9px;
}
.linea-mas{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--s-5); font-weight:700; }

/* ---------- Plataformas de clientes en operación ---------- */
.plataformas{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); }
.plataforma{
  display:flex; flex-direction:column; gap:6px; min-height:150px;
  padding:24px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; color:inherit; box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.plataforma:hover{
  text-decoration:none; transform:translateY(-3px);
  box-shadow:var(--shadow-2); border-color:var(--line-2);
}
.plataforma-nombre{
  font-size:1.22rem; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1.15;
}
.plataforma-tipo{ font-size:.83rem; color:var(--muted); line-height:1.4; }
.plataforma-url{
  margin-top:auto; font-family:var(--mono); font-size:.76rem; letter-spacing:-.01em;
  color:var(--brand); overflow-wrap:anywhere;
}
.plataforma-url::after{ content:" ↗"; }
.plataforma--pend{ background:var(--surface); box-shadow:none; }
.plataforma--pend .plataforma-nombre{ color:var(--body); }
.plataforma--pend .plataforma-url{ color:var(--muted); font-family:var(--sans); font-size:.8rem; }
.plataforma--pend .plataforma-url::after{ content:""; }

@media (max-width:980px){ .plataformas{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .plataformas{ grid-template-columns:1fr; } }

/* ---------- Logotipo real ---------- */
.logo{ display:flex; align-items:flex-start; gap:2px; }
.wordmark{ display:block; height:46px; width:auto; }
.footer-logo .wordmark{ height:38px; }
.marca-r{ font-size:.6rem; font-weight:700; color:var(--muted); line-height:1; margin-top:9px; }
.footer-logo{ margin-bottom:var(--s-4); }

/* ---------- Herramientas para el integrador ---------- */
.herramienta{
  display:flex; flex-direction:column; gap:8px;
  padding:24px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; color:inherit; box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
a.herramienta:hover{
  text-decoration:none; transform:translateY(-3px);
  box-shadow:var(--shadow-2); border-color:var(--line-2);
}
.herramienta .ico{ margin-bottom:4px; }
.herramienta h3{ margin-bottom:0; }
.herramienta p{ font-size:.93rem; margin-bottom:0; }
.herramienta-estado{
  margin-top:auto; padding-top:12px;
  font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.herramienta-estado--lista{ color:var(--brand); }
.herramienta--pend{ background:var(--surface); box-shadow:none; border-style:dashed; }
.herramienta--pend .ico{ background:#e8edf4; color:var(--muted); }
.herramienta--pend h3{ color:var(--body); }
.herramienta-estado--pend{ color:var(--muted); }

/* ---------- Ficha técnica (sustituye a la fotografía de producto) ---------- */
.ficha{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:#fff; box-shadow:var(--shadow-1);
}
.ficha-cab{
  padding:13px 20px; background:var(--brand-ink); color:#fff;
  font-family:var(--mono); font-size:.76rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
}
.ficha-lista{ margin:0; padding:6px 20px 14px; }
.ficha-fila{
  display:flex; align-items:baseline; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.ficha-fila:last-child{ border-bottom:none; }
.ficha-fila dt{
  flex:0 0 40%; font-size:.83rem; color:var(--muted); line-height:1.4;
}
.ficha-fila dd{
  flex:1; margin:0; font-size:.93rem; font-weight:650; color:var(--ink); line-height:1.4;
}
.ficha-fila dd em{ font-style:normal; font-weight:400; color:var(--body); }
.section--surface .ficha{ box-shadow:none; }
@media (max-width:520px){
  .ficha-fila{ flex-direction:column; gap:3px; }
  .ficha-fila dt{ flex-basis:auto; }
}

/* ---------- Selector de idioma ---------- */
.idiomas{ display:flex; align-items:center; gap:2px; margin-left:10px; padding-left:12px;
  border-left:1px solid var(--line); }
.idiomas a{
  font-size:.82rem; font-weight:650; color:var(--muted);
  padding:6px 9px; border-radius:7px;
}
.idiomas a:hover{ background:var(--tint); color:var(--brand-deep); text-decoration:none; }
@media (max-width:768px){
  .idiomas{ margin:8px 0 0; padding:10px 0 0; border-left:none; border-top:1px solid var(--line); }
  .idiomas a{ padding:11px 10px; }
}

/* Aviso de error del formulario */
.form-status--error{
  background:var(--deny-bg); color:#9c2a20; border-color:rgba(198,54,42,.3);
}
/* Trampa anti-robots: fuera de la vista, también para lectores de pantalla */
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Aviso: si no es integrador ---------- */
.aviso-canal{
  display:block; padding:16px 20px; margin-bottom:var(--s-5);
  border:1px solid #d3e4fb; border-left:3px solid var(--brand);
  border-radius:var(--r-sm); background:var(--tint);
}
.aviso-canal b{ display:block; color:var(--brand-ink); font-size:.95rem; margin-bottom:3px; }
.aviso-canal span{ font-size:.92rem; color:var(--body); line-height:1.5; }

/* ---------- Equipos: producto con fotografía ---------- */
.equipos{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); }
.equipo{
  display:flex; flex-direction:column; color:inherit;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
a.equipo:hover{ text-decoration:none; transform:translateY(-4px);
  box-shadow:var(--shadow-2); border-color:var(--line-2); }
.equipo-foto{ background:var(--surface); border-bottom:1px solid var(--line); }
.equipo-foto img{ width:100%; height:auto; display:block; }
.equipo-cuerpo{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.equipo-serie{
  align-self:flex-start; font-family:var(--mono); font-size:.7rem; font-weight:700;
  letter-spacing:.1em; color:var(--brand-deep); background:var(--tint);
  border:1px solid #d3e4fb; border-radius:6px; padding:3px 9px; margin-bottom:10px;
}
.equipo h3{ margin-bottom:.35em; }
.equipo p{ font-size:.94rem; margin-bottom:0; }
.equipo .card-link{ margin-top:auto; padding-top:16px; }

/* El panel de series, a lo ancho bajo los equipos */
.lineup--ancho{ margin-top:var(--s-7); }
.lineup--ancho .lineup-item{ padding-left:24px; padding-right:24px; }

@media (max-width:900px){ .equipos{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .equipos{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   Herramientas del integrador: calculadoras y acceso al área privada
   --------------------------------------------------------------------------- */
.herramienta-estado--priv{ color:var(--muted); }
.herramienta-estado--priv::before{
  content:"";
  display:inline-block;
  width:13px; height:13px;
  margin-right:7px;
  vertical-align:-2px;
  background:currentColor;
  -webkit-mask:var(--candado) center/contain no-repeat;
  mask:var(--candado) center/contain no-repeat;
}
:root{
  --candado:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10h12v11H6z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8.5 10V7.5a3.5 3.5 0 0 1 7 0V10' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

.calc-form{ margin-top:var(--s-5); }
.calc-num{ position:relative; display:block; }
.calc-num .calc-suf{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:.85rem; font-weight:700; color:var(--muted); pointer-events:none;
}
.calc-num input{ padding-right:52px; }
.calc-nota{
  margin-top:var(--s-4); font-size:.92rem; color:var(--muted);
  border-left:3px solid var(--line); padding-left:14px;
}
.calc-res{
  position:sticky; top:96px;
  border:1px solid var(--line); border-radius:var(--r-2);
  background:var(--surface); overflow:hidden;
}
.calc-res .ficha-cab{
  background:var(--brand-grad); color:#fff;
  padding:14px 20px; font-weight:800; letter-spacing:.02em;
}
.calc-res .ficha-lista{ margin:0; }
.calc-res .ficha-fila{
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline;
  padding:13px 20px; border-top:1px solid var(--line);
}
.calc-res .ficha-fila dt{ color:var(--muted); font-size:.93rem; }
.calc-res .ficha-fila dd{ margin:0; font-variant-numeric:tabular-nums; text-align:right; }
.calc-res .ficha-fila dd b{ color:var(--brand); font-size:1.06rem; }

.login-panel{
  border:1px solid var(--line); border-radius:var(--r-2);
  background:var(--surface); padding:var(--s-6);
  box-shadow:0 8px 26px rgba(16,32,56,.06);
}
.login-pie{ margin:var(--s-5) 0 0; font-size:.93rem; color:var(--muted); }

@media (max-width:900px){
  .calc-res{ position:static; margin-top:var(--s-5); }
}

/* ---------------------------------------------------------------------------
   Catálogo del inicio: índice doble — por línea de producto y por sector
   --------------------------------------------------------------------------- */
.catalogo-doble{
  display:grid; grid-template-columns:1.12fr .88fr; gap:var(--s-6);
  align-items:start; margin-top:var(--s-6);
}
.lineup-code--ico{ display:flex; align-items:center; justify-content:center; padding:6px 0; }
.lineup-code--ico svg{ width:17px; height:17px; }
@media (max-width:900px){ .catalogo-doble{ grid-template-columns:1fr; } }

/* Tarjetas de línea del catálogo de producto: exactamente una por línea */
.card--linea h3 a{ color:inherit; }
.card--linea h3 a:hover{ color:var(--brand); text-decoration:none; }
.linea-enlaces{ margin:14px 0 0; font-size:.9rem; line-height:2; }