/* ============================================================
   WEBMASTER LEO — Base
   Fuentes autoalojadas (subset latino), reset, tipografía y la
   rejilla de 12 columnas que ordena todo el sitio.
   ============================================================ */

/* ---- Fuentes de marca ---------------------------------------
   Servidas desde el propio dominio: sin petición a Google, sin
   latencia de terceros y sin fuga de IP de los visitantes.
   font-display:swap evita el texto invisible mientras cargan.   */
@font-face { font-family:"Sora"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/sora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Sora"; font-style:normal; font-weight:800; font-display:swap;
  src:url("/assets/fonts/sora-latin-800-normal.woff2") format("woff2"); }

@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }

@font-face { font-family:"Rajdhani"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/rajdhani-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Rajdhani"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/rajdhani-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Rajdhani"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/rajdhani-latin-700-normal.woff2") format("woff2"); }

/* ---- Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Titulares: Sora ----------------------------------------- */
h1, h2, h3, h4 {
  margin: 0; font-family: var(--f-display);
  line-height: var(--lh-tight); letter-spacing: var(--ls-h);
  color: var(--ink); text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); font-weight: 700; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: var(--lh-snug); }
h4 { font-size: 1.125rem;    font-weight: 700; line-height: var(--lh-snug); letter-spacing: -.02em; }

p { margin: 0; max-width: var(--w-prose); text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--ink); }

/* ---- Enlaces -------------------------------------------------- */
a { color: var(--accent); text-decoration: none; transition: color var(--d-fast) var(--e-soft); }
a:hover { color: var(--accent-hi); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm);
}

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

ul, ol { margin: 0; padding-left: 1.15em; }
li { margin-block: .3em; }
li::marker { color: var(--accent); }

code, kbd, samp {
  font-family: var(--f-tech); font-weight: 600; font-size: .95em;
  background: var(--surface-2); color: var(--cyan);
  padding: .1em .4em; border-radius: var(--r-sm);
}

/* ---- Tablas ---------------------------------------------------- */
.table-scroll {
  overflow-x: auto; border: 1px solid var(--line-2);
  border-radius: var(--r-md); background: var(--surface);
}
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
thead th {
  font-family: var(--f-tech); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--cyan); background: var(--surface-2); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-family: var(--f-tech); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================
   REJILLA DE 12 COLUMNAS
   El desorden viene de componer a ojo. Aquí todo se alinea a una
   sola rejilla y las secciones comparten el mismo ritmo vertical.
   ============================================================ */
.wrap {
  width: 100%; max-width: var(--w-max); margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow { max-width: 52rem; }

.g12 { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gutter); }
/* Los tramos se colapsan a ancho completo por debajo de 62rem, así
   que no hace falta declarar variantes móviles en cada uso. */
.c-4  { grid-column: span 4; }
.c-5  { grid-column: span 5; }
.c-6  { grid-column: span 6; }
.c-7  { grid-column: span 7; }
.c-8  { grid-column: span 8; }
.c-12 { grid-column: span 12; }
@media (max-width: 62rem) {
  .c-4, .c-5, .c-6, .c-7, .c-8 { grid-column: span 12; }
}

/* ---- Ritmo ------------------------------------------------------ */
.section { padding-block: var(--s-sec); position: relative; }
.section--tight { padding-block: var(--s-8); }
.section--surface { background: var(--bg-elev); }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--xs { gap: var(--s-2); }
.stack--sm { gap: var(--s-3); }
.stack--lg { gap: var(--s-6); }
.stack--xl { gap: var(--s-8); }

.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.cards { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
.cards--sm { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
/* Rejilla fija de 3 para servicios: es la que permite que una tarjeta
   ocupe dos tramos sin que el auto-fit reordene el bloque. */
@media (min-width: 64rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   TIPOGRAFÍA UTILITARIA
   ============================================================ */
/* Etiqueta técnica: Rajdhani en versalitas. Es la voz de "dato". */
.eyebrow {
  font-family: var(--f-tech); font-weight: 700;
  font-size: var(--t-xs); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--cyan);
  display: inline-flex; align-items: center; gap: .6em;
}
.lead { font-size: var(--t-lead); color: var(--ink-2); line-height: 1.6; }
.muted { color: var(--ink-3); }
.small { font-size: var(--t-sm); }
.tech { font-family: var(--f-tech); font-weight: 600; letter-spacing: .04em; }

/* Palabra destacada del titular: degradado tecnológico oficial. */
.hl {
  background: var(--grad-tech);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not (background-clip: text) { .hl { color: var(--cyan); } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -5rem; z-index: 100;
  background: var(--blue); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md); font-weight: 600;
  transition: top var(--d-base) var(--e-out);
}
.skip-link:focus { top: var(--s-4); color: #fff; }