/* ============================================================================
   rsaas.io — sitio corporativo
   Solo composición. Ningún valor a mano: todo sale de tokens.css.
   ============================================================================ */

/* ── CABECERA ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: var(--rule) solid var(--fg);
  padding-block: var(--s4);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
}
.site-header .logo { font-size: 1.0625rem; }
.site-nav { display: flex; align-items: center; gap: var(--s6); }
.lang {
  display: flex; gap: 0; border: var(--rule) solid var(--fg-40);
}
.lang a {
  padding: 2px var(--s2); text-decoration: none;
  font-size: var(--t-micro); letter-spacing: var(--tr-label); text-transform: uppercase;
}
.lang a[aria-current] { background: var(--fg); color: var(--bg); }
/* Idioma aún no publicado: visible pero inerte, nunca un enlace a un 404. */
.lang span[aria-disabled] {
  padding: 2px var(--s2); color: var(--fg-40); cursor: not-allowed;
  font-size: var(--t-micro); letter-spacing: var(--tr-label); text-transform: uppercase;
}

@media (max-width: 780px) {
  .site-header .container { flex-wrap: wrap; row-gap: var(--s4); }
  .site-header .logo { flex: 1; }
  /* Envuelve: en pantallas muy estrechas el selector de idioma baja a su propia
     fila en lugar de salirse. Sin esto, a 320 px desborda 36 px. */
  .site-nav { width: 100%; order: 3; justify-content: space-between;
              gap: var(--s3) var(--s4); flex-wrap: wrap; }
  .site-nav .nav { gap: var(--s4) var(--s5); flex-wrap: wrap; }
}

/* ── PORTADA ──────────────────────────────────────────────────────────────── */
.hero { padding-block: var(--s10) var(--s9); }
.hero__claim {
  /* Una sola línea de 12 caracteres. Con tracking -0.055em cada uno ocupa
     ~0.545em, así que 11.5vw es lo máximo que cabe sin partir la frase. */
  font-size: clamp(2.25rem, 11.5vw, 10.5rem); line-height: var(--lh-mega);
  /* Sin nowrap a propósito: si la fuente falla y carga una sustituta más ancha,
     preferimos que la frase parta a que desborde la página. */
  letter-spacing: var(--tr-mega); font-weight: var(--w-bold);
  text-transform: lowercase; text-wrap: balance;
}
.hero__claim em { font-style: normal; display: block; }
.hero__foot {
  margin-top: var(--s8); display: flex; flex-wrap: wrap;
  gap: var(--s7); align-items: flex-end; justify-content: space-between;
}

/* ── CAPACIDADES ──────────────────────────────────────────────────────────── */
.cap { display: block; }
.cap h3 { margin-bottom: var(--s3); }
.cap p { font-size: var(--t-small); color: var(--fg-72); }
.cap__idx { color: var(--fg-40); display: block; margin-bottom: var(--s5); }

/* ── FASES ────────────────────────────────────────────────────────────────── */
.fase { display: grid; grid-template-columns: 8ch 1fr 18ch; gap: var(--s5);
        padding-block: var(--s5); border-top: var(--rule) solid var(--fg-24);
        align-items: start; }
.fase:last-child { border-bottom: var(--rule) solid var(--fg-24); }
.fase__n { font-size: var(--t-h2); font-weight: var(--w-bold);
           letter-spacing: var(--tr-head); color: var(--fg-40); line-height: 1; }
.fase__cuerpo p { font-size: var(--t-small); color: var(--fg-72);
                  margin-top: var(--s2); }
.fase__plazo { text-align: right; color: var(--fg-56); }
@media (max-width: 700px) {
  .fase { grid-template-columns: 6ch 1fr; }
  .fase__plazo { grid-column: 2; text-align: left; }
}

/* ── LO QUE NO HACEMOS ────────────────────────────────────────────────────── */
.frontera { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rule);
            background: var(--fg-24); border: var(--rule) solid var(--fg-24); }
.frontera > div { background: var(--bg); padding: var(--s7) var(--s5); }
@media (max-width: 700px) { .frontera { grid-template-columns: 1fr; } }

/* ── CATÁLOGO ─────────────────────────────────────────────────────────────── */
.catalogo { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 900px) { .catalogo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .catalogo { grid-template-columns: 1fr; } }
.card__body h3 { margin-bottom: var(--s3); }

/* ── CONTACTO ─────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s5); }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* Trampa para robots. Invisible para personas, obligatoria para el envío. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── PIE ──────────────────────────────────────────────────────────────────── */
.site-footer { padding-block: var(--s8) var(--s7); }
.site-footer .fila { display: flex; flex-wrap: wrap; gap: var(--s6);
                     justify-content: space-between; align-items: flex-start; }
.site-footer a { text-decoration: none; }
.site-footer .enlaces { display: flex; flex-direction: column; gap: var(--s2); }

/* ── SALTO DE ACCESIBILIDAD ───────────────────────────────────────────────── */
.saltar {
  position: absolute; left: var(--s4); top: var(--s4); z-index: var(--z-modal);
  transform: translateY(-200%);
  background: var(--fg); color: var(--bg); padding: var(--s3) var(--s5);
  font-size: var(--t-micro); letter-spacing: var(--tr-label); text-transform: uppercase;
  text-decoration: none;
}
.saltar:focus { transform: none; }