/* ==========================================================================
   Ketepares — landing
   Paleta tomada directamente de la interfaz de la aplicación (src/ui.c)
   Sin dependencias: solo CSS propio.
   ========================================================================== */

:root{
  /* Fondo y superficies (los mismos valores que usa la app) */
  --bg-top:      #0C0F15;
  --bg-bot:      #151A24;
  --panel:       #141922;
  --panel-2:     #161C26;
  --panel-br:    #232B39;
  --panel-br-hi: #33405A;
  --tile:        #0A0D13;
  --box:         #0D1118;
  --box-br:      #2A3342;
  --line:        #222A37;

  /* Texto */
  --text:        #EEF2F8;
  --text-mid:    #B6C1D2;
  --dim:         #7C8798;

  /* Acento azul */
  --accent:      #4C9AFF;
  --accent-l:    #3F86F5;
  --accent-d:    #1B57C4;
  --accent-soft: rgba(76,154,255,.12);
  --on-accent:   #08131F;

  /* Aviso */
  --danger:      #E0503F;
  --danger-d:    #BE3627;

  --btn:         #1B2230;
  --btn-hot:     #27313F;

  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 30px 60px -34px #000;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "Courier New", monospace;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font:16px/1.62 var(--font);
  color:var(--text);
  background:var(--bg-top);
  background-image:
    radial-gradient(1100px 520px at 22% -12%, rgba(76,154,255,.16), transparent 62%),
    radial-gradient(900px 460px at 96% 4%, rgba(63,134,245,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 760px, #0E1219 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  overflow-x:hidden;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Ningún hijo de una rejilla o de un contenedor flexible debe forzar el ancho
   del padre (el clásico min-width:auto). */
.wrap > *, .hero .grid > *, .grid-cards > *, .steps > *, .vs > *, .dl > *,
.gal > *, .foot-grid > *, .os > *, .vs > *{ min-width:0; }

img{ max-width:100%; }

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

h1,h2,h3,h4{ line-height:1.14; letter-spacing:-.015em; }
p{ margin:0; }

.wrap{ width:min(1120px, 100% - 44px); margin-inline:auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(12,15,21,.72);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.topbar.stuck{
  background:rgba(11,14,20,.92);
  border-bottom-color:var(--line);
}
.topbar .inner{
  display:flex; align-items:center; gap:16px;
  height:66px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  color:var(--text); font-weight:700; letter-spacing:.08em; font-size:15px;
}
.brand:hover{ text-decoration:none; }
.brand img{ width:30px; height:30px; border-radius:9px; display:block; }
.brand .ver{
  font-size:11px; font-weight:600; letter-spacing:.06em;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid rgba(76,154,255,.34); border-radius:999px; padding:2px 8px;
}
.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  color:var(--text-mid); font-size:14.2px; font-weight:500;
  padding:8px 13px; border-radius:9px; transition:.16s;
}
.nav a:hover{ color:var(--text); background:var(--btn); text-decoration:none; }
.nav a.active{ color:var(--accent); background:var(--accent-soft); }
.topbar .cta-top{ margin-left:6px; }
.burger{
  display:none; margin-left:auto;
  width:40px; height:38px; border-radius:10px;
  background:var(--btn); border:1px solid var(--panel-br); color:var(--text);
  cursor:pointer; font-size:17px; line-height:1;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:11px;
  background:var(--btn); border:1px solid var(--panel-br); color:var(--text);
  font:600 15px/1 var(--font); cursor:pointer; white-space:nowrap;
  transition:background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn:hover{ background:var(--btn-hot); border-color:var(--panel-br-hi); transform:translateY(-1px); text-decoration:none; }
.btn:active{ transform:translateY(0); }
.btn svg{ width:17px; height:17px; }
.btn-primary{
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-l) 52%, var(--accent-d) 100%);
  border-color:var(--accent-d); color:var(--on-accent);
  box-shadow:0 14px 30px -14px rgba(76,154,255,.85);
}
.btn-primary:hover{ filter:brightness(1.07); box-shadow:0 18px 36px -14px rgba(76,154,255,.95); }
.btn-ghost{ background:transparent; }
.btn-sm{ padding:9px 15px; font-size:14px; border-radius:10px; }
.btn-danger{
  background:linear-gradient(180deg, var(--danger) 0%, var(--danger-d) 100%);
  border-color:var(--danger-d); color:#FFF3F1;
}

/* --------------------------------------------------------------------------
   Encabezados de sección
   -------------------------------------------------------------------------- */
section{ padding:78px 0; scroll-margin-top:78px; }
section.tight{ padding:44px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0;
}
.eyebrow::before{
  content:""; width:22px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent));
}
h2{ font-size:clamp(25px, 3vw, 35px); margin:13px 0 0; }
.sec-head{ max-width:66ch; margin-bottom:40px; }
.sec-head p{ color:var(--text-mid); font-size:17px; margin-top:15px; }
.hr{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */
.hero{ padding:64px 0 26px; }
.hero .grid{
  display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:56px; align-items:center;
}
.hero h1{
  font-size:clamp(33px, 4.4vw, 53px);
  margin:16px 0 0; letter-spacing:-.028em;
}
.grad{
  background:linear-gradient(100deg, #9CCBFF 0%, var(--accent) 42%, #2E74E6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ color:var(--text-mid); font-size:18px; margin-top:20px; max-width:54ch; }
.lead strong{ color:var(--text); font-weight:600; }

.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.6px; font-weight:500; color:var(--text-mid);
  background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:6px 13px;
}
.badge svg{ width:13px; height:13px; color:var(--accent); flex:0 0 auto; }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.fine{ font-size:13px; color:var(--dim); margin-top:16px; }
.fine code{ font:12.5px var(--mono); color:var(--text-mid); }

/* Marco de captura */
.shot{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--panel-br); background:var(--tile);
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.shot img{ display:block; width:100%; height:auto; }
.shot-hero{ box-shadow:var(--shadow), 0 0 90px -30px rgba(76,154,255,.45); }
.shot-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* --------------------------------------------------------------------------
   Tarjetas de características
   -------------------------------------------------------------------------- */
.grid-cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.card{
  background:linear-gradient(180deg, var(--panel) 0%, #121721 100%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 20px 20px;
  transition:transform .2s, border-color .2s, background .2s;
}
.card:hover{ transform:translateY(-3px); border-color:var(--panel-br-hi); background:linear-gradient(180deg, var(--panel-2) 0%, #131926 100%); }
.card h3{ font-size:16.2px; margin:14px 0 7px; }
.card p{ color:var(--text-mid); font-size:14.4px; }
.ico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid rgba(76,154,255,.24); color:var(--accent);
}
.ico svg{ width:20px; height:20px; }
.card.wide{ grid-column:span 2; }
.card.kpi{ background:linear-gradient(180deg, rgba(76,154,255,.10), rgba(76,154,255,.03)); border-color:rgba(76,154,255,.28); }
.card.kpi .big{ font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--text); }

/* --------------------------------------------------------------------------
   Funcionamiento (pasos)
   -------------------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:15px; }
.step{
  position:relative; padding:20px 18px 18px;
  background:linear-gradient(180deg, var(--panel) 0%, #121721 100%);
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.step .n{
  width:30px; height:30px; border-radius:9px; margin-bottom:13px;
  display:grid; place-items:center; font-size:14px; font-weight:700;
  background:linear-gradient(180deg, var(--accent), var(--accent-d));
  color:var(--on-accent);
}
.step h3{ font-size:15px; margin:0 0 7px; }
.step p{ font-size:13.7px; color:var(--text-mid); }
.step:not(:last-child)::after{
  content:""; position:absolute; top:35px; right:-9px;
  width:18px; height:1.5px; background:linear-gradient(90deg, var(--panel-br), transparent);
}

/* --------------------------------------------------------------------------
   Galería
   -------------------------------------------------------------------------- */
.gal{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap:18px; }
.gal figure{
  margin:0; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; cursor:zoom-in;
  transition:transform .2s, border-color .2s;
}
.gal figure:hover{ transform:translateY(-3px); border-color:var(--panel-br-hi); }
.gal img{ display:block; width:100%; height:auto; background:var(--tile); }
.gal figcaption{
  padding:13px 17px; font-size:13.6px; color:var(--text-mid);
  border-top:1px solid var(--line); display:flex; align-items:center; gap:9px;
}
.gal figcaption b{ color:var(--text); font-weight:600; }
.pill{
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid rgba(76,154,255,.3); border-radius:999px; padding:2px 9px; margin-left:auto;
}

/* Visor */
.lb{
  position:fixed; inset:0; z-index:120; display:none;
  place-items:center; padding:26px;
  background:rgba(6,8,12,.88);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.lb.open{ display:grid; }
.lb img{
  max-width:min(1080px, 94vw); max-height:84vh;
  border-radius:var(--r-md); border:1px solid var(--panel-br);
  box-shadow:0 40px 90px -30px #000;
}
.lb .cap{ margin-top:16px; text-align:center; color:var(--text-mid); font-size:14px; }
.lb button{
  position:absolute; background:rgba(20,25,34,.86); color:var(--text);
  border:1px solid var(--panel-br); border-radius:11px;
  width:44px; height:44px; cursor:pointer; font-size:19px; line-height:1;
  display:grid; place-items:center;
}
.lb button:hover{ background:var(--btn-hot); border-color:var(--panel-br-hi); }
.lb .close{ top:22px; right:24px; }
.lb .prev{ left:24px; top:50%; transform:translateY(-50%); }
.lb .next{ right:24px; top:50%; transform:translateY(-50%); }

/* --------------------------------------------------------------------------
   Versiones (2.0 vs 1.0)
   -------------------------------------------------------------------------- */
.vs{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }
.vcard{
  min-width:0;
  background:linear-gradient(180deg, var(--panel) 0%, #121721 100%);
  border:1px solid var(--line); border-radius:20px; padding:26px 26px 24px;
}
.vcard.now{
  border-color:rgba(76,154,255,.42);
  box-shadow:0 26px 60px -40px rgba(76,154,255,.9), 0 0 0 1px rgba(76,154,255,.1) inset;
}
.vhead{ display:flex; align-items:center; gap:13px; min-width:0; flex-wrap:wrap; }
.vhead img{ width:44px; height:44px; border-radius:12px; }
.vhead h3{ margin:0; font-size:19px; min-width:0; overflow-wrap:anywhere; }
.vhead span{ display:block; font-size:13px; color:var(--dim); font-weight:500; }
.tag{
  margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px;
  border:1px solid var(--panel-br); color:var(--text-mid); background:var(--btn);
}
.tag.on{ color:var(--accent); background:var(--accent-soft); border-color:rgba(76,154,255,.34); }
.ticks{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.ticks li{ display:flex; gap:11px; font-size:14.5px; color:var(--text-mid); min-width:0; }
.ticks svg{ flex:0 0 17px; height:17px; margin-top:4px; color:var(--accent); }
.ticks.no svg{ color:var(--danger); }
.ticks b{ color:var(--text); font-weight:600; }

.timeline{ margin-top:34px; display:grid; gap:0; }
.tl-item{ display:grid; grid-template-columns:96px 22px 1fr; gap:0 14px; }
.tl-year{ font:600 14px var(--mono); color:var(--accent); padding-top:2px; text-align:right; }
.tl-dot{ position:relative; display:flex; justify-content:center; }
.tl-dot::before{
  content:""; width:9px; height:9px; margin-top:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(76,154,255,.13);
}
.tl-item:not(:last-child) .tl-dot::after{
  content:""; position:absolute; top:22px; bottom:-6px; width:1.5px;
  background:linear-gradient(180deg, var(--panel-br), transparent);
}
.tl-body{ padding-bottom:22px; }
.tl-body b{ display:block; font-size:15px; }
.tl-body span{ font-size:13.8px; color:var(--text-mid); }

/* Capturas de la versión antigua (van en pequeño dentro de su ficha) */
.gal-mini{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.gal-mini figcaption{ padding:10px 12px; font-size:12.4px; }
.pixel{ image-rendering:pixelated; }

/* Botones de descarga de la versión antigua */
.vdl{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }

/* --------------------------------------------------------------------------
   Descargas e instalación
   -------------------------------------------------------------------------- */
.dl2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.dl3{ grid-template-columns:repeat(3,minmax(0,1fr)); }   /* antes que el @media: en movil, una columna */
.dlz{
  display:flex; flex-direction:column; gap:14px; min-width:0;
  background:linear-gradient(180deg, var(--panel) 0%, #121721 100%);
  border:1px solid var(--line); border-radius:20px; padding:24px 22px;
}
.dlz.on{ border-color:rgba(76,154,255,.42); box-shadow:0 26px 60px -40px rgba(76,154,255,.9); }
.dlz header{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.dlz h3{ margin:0; font-size:19px; }
.dlz .size{ font:13px var(--mono); color:var(--dim); margin-left:auto; }
.dlz p{ font-size:14.2px; color:var(--text-mid); margin:0; }
.dlz .btn{ width:100%; margin-top:auto; }
/* huella SHA-256 del zip: letra pequeña, que no estorbe */
.dl-hash{ font-size:12.4px; color:var(--dim); line-height:1.7; }
.dl-hash code{ word-break:break-all; font-size:11.6px; color:var(--text-mid); }
/* firma del autor: avatar pequeño y nombre como enlace a su web */
.firma{ display:inline-flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; font-weight:600; }
.firma img{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:#0C0F15; }
.firma:hover{ color:var(--accent); }
.firma:hover img{ border-color:rgba(76,154,255,.45); }

.os{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.os-solo{ grid-template-columns:minmax(0,1fr); }  /* una sola tarjeta: a lo ancho */
.dl2 + .os-solo{ margin-top:20px; }              /* con su aire tras las descargas */
.oscard{
  display:flex; flex-direction:column; gap:14px; min-width:0;
  background:linear-gradient(180deg, var(--panel) 0%, #121721 100%);
  border:1px solid var(--line); border-radius:20px; padding:24px 22px;
}
.oscard header{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.oscard h3{ margin:0; font-size:18px; }
.oscard .size{ font:12px var(--mono); color:var(--dim); margin-left:auto; }
.os-ico{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid rgba(76,154,255,.24); color:var(--accent);
}
.os-ico svg{ width:19px; height:19px; }
.os-req{ font-size:13.2px; color:var(--dim); margin:0; }
.os-steps{ margin:0; padding-left:20px; display:grid; gap:8px; }
.os-steps li{ font-size:14.2px; color:var(--text-mid); }
.os-steps-nota{ font-size:14.2px; color:var(--text-mid); margin:0; }
.oscard .btn{ width:100%; }
/* ordenes para copiar (Homebrew): se parten en el movil en vez de desbordar */
.cmd{
  margin:0; padding:11px 13px; border-radius:11px;
  background:rgba(0,0,0,.28); border:1px solid var(--line);
}
.cmd code{
  font:12.8px/1.5 var(--mono); color:var(--text);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.oscard .btn + .btn{ margin-top:8px; }

.note{
  margin-top:26px; padding:16px 18px; border-radius:var(--r-md);
  background:rgba(224,80,63,.07); border:1px solid rgba(224,80,63,.24);
  color:var(--text-mid); font-size:14px;
}
.note b{ color:var(--text); }
.note-plain{
  margin-top:14px; background:var(--panel); border-color:var(--line);
}
.note-plain a{ color:var(--accent); }

/* --------------------------------------------------------------------------
   Referencias (tablas de webs)
   -------------------------------------------------------------------------- */
.refs-title{ font-size:19px; margin:44px 0 14px; }
.refs-title:first-of-type{ margin-top:8px; }
.dl2 + .refs-title{ margin-top:44px; }          /* tras las descargas, con su aire */
/* el bloque de artículos va destacado */
.refs-title.highlight{ display:flex; align-items:center; gap:11px; color:var(--text); }
.refs-title.highlight::before{
  content:""; width:4px; height:19px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent), var(--accent-d));
}
.table-wrap{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--panel) 0%, #121721 100%);
}
.table-wrap.wrap-hi{
  border-color:rgba(76,154,255,.34);
  box-shadow:0 0 0 1px rgba(76,154,255,.08) inset, 0 22px 55px -45px rgba(76,154,255,.9);
}
table.refs{ width:100%; border-collapse:collapse; }
table.refs th{
  text-align:left; font-size:11.6px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim); font-weight:600; padding:14px 18px; border-bottom:1px solid var(--line);
}
table.refs td{
  padding:13px 18px; font-size:14.4px; color:var(--text-mid);
  border-bottom:1px solid var(--line); vertical-align:middle;
}
table.refs tr:last-child td{ border-bottom:0; }
table.refs tbody tr:hover td{ background:rgba(76,154,255,.05); }
table.refs td:first-child{ color:var(--text); white-space:nowrap; }
table.refs a{ color:var(--accent); overflow-wrap:anywhere; }
table.refs a:hover{ text-decoration:underline; }
.fav{ width:16px; height:16px; border-radius:4px; vertical-align:-3px; margin-right:7px; }
.refs-note{ font-size:13.6px; color:var(--dim); margin-top:12px; }

/* etiqueta que dice qué es cada web; los artículos van destacados */
.tipo{
  display:inline-block; margin-left:9px; font-size:10.4px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  padding:2px 9px; border-radius:999px; vertical-align:1px;
  border:1px solid var(--panel-br); color:var(--dim); background:var(--btn);
}
.tipo.art{
  color:var(--accent); background:var(--accent-soft);
  border-color:rgba(76,154,255,.34);
}

/* --------------------------------------------------------------------------
   Preguntas
   -------------------------------------------------------------------------- */
.faq{ display:grid; gap:12px; max-width:900px; }
details{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:0 20px; transition:border-color .2s;
}
details[open]{ border-color:var(--panel-br-hi); }
summary{
  cursor:pointer; list-style:none; padding:17px 0;
  font-weight:600; font-size:15.4px; display:flex; align-items:center; gap:12px;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+"; margin-left:auto; color:var(--accent); font-weight:400; font-size:20px; line-height:1;
}
details[open] summary::after{ content:"–"; }
details p{ color:var(--text-mid); font-size:14.6px; padding:0 0 18px; }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(10,13,19,.9));
  padding:46px 0 34px; margin-top:20px;
}
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:32px; }
.foot-brand{ display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:.08em; }
.foot-brand img{ width:30px; height:30px; border-radius:9px; }
footer h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 12px; }
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
footer li,footer p{ font-size:14.2px; color:var(--text-mid); }
.foot-bottom{
  margin-top:32px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  font-size:13.2px; color:var(--dim);
}
.foot-bottom .sep{ opacity:.4; }

/* --------------------------------------------------------------------------
   Animación de entrada (solo si hay JavaScript: sin él el contenido se ve)
   -------------------------------------------------------------------------- */
html.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
html.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover,.card:hover,.gal figure:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   Adaptación a pantallas pequeñas
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .grid-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .os{ grid-template-columns:minmax(0,1fr); }
  .step:not(:last-child)::after{ display:none; }
}
@media (max-width:980px){
  .hero .grid{ grid-template-columns:minmax(0,1fr); gap:38px; }
  .hero{ padding-top:42px; }
  .vs{ grid-template-columns:minmax(0,1fr); }
  .dl2{ grid-template-columns:minmax(0,1fr); }
  .nav{
    position:absolute; top:66px; left:0; right:0;
    flex-direction:column; gap:2px; padding:10px 22px 16px;
    background:rgba(11,14,20,.98); border-bottom:1px solid var(--line);
    display:none;
  }
  .topbar.open .nav{ display:flex; }
  .nav a{ padding:12px 10px; }
  .burger{ display:grid; place-items:center; }
  .topbar .cta-top{ display:none; }
}
/* El menu tiene ocho enlaces (el ultimo, el idioma) y en pantallas medianas no
   caben en una linea: se usa el boton, como en el movil. Los demas ajustes de
   esa anchura siguen siendo los de 980px. */
@media (max-width:1060px){
  .nav{
    position:absolute; top:66px; left:0; right:0;
    flex-direction:column; gap:2px; padding:10px 22px 16px;
    background:rgba(11,14,20,.98); border-bottom:1px solid var(--line);
    display:none;
  }
  .topbar.open .nav{ display:flex; }
  .nav a{ padding:12px 10px; }
  .burger{ display:grid; place-items:center; }
}
@media (max-width:620px){
  .wrap{ width:min(1120px, 100% - 30px); }
  section{ padding:58px 0; }
  .grid-cards,.steps{ grid-template-columns:minmax(0,1fr); }
  .card.wide{ grid-column:span 1; }
  .foot-grid{ grid-template-columns:minmax(0,1fr); gap:26px; }
  /* las tablas de referencias pasan a fichas */
  table.refs thead{ display:none; }
  table.refs tr{ display:grid; padding:12px 0; border-bottom:1px solid var(--line); }
  table.refs tr:last-child{ border-bottom:0; }
  table.refs td{ padding:3px 16px; border-bottom:0; }
  table.refs td:first-child{ white-space:normal; }
  .refs-title{ font-size:17.4px; }
}