/* ==========================================================================
   base.css · cimientos que no se ven: fuente, reinicio, accesibilidad
   Sin diseño todavía: el diseño llega con la dirección de arte (ruva-web-pro, Etapa 2).
   ========================================================================== */

/* Geist en un solo archivo variable: cubre 400, 500, 600 y 900 */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth; /* sin JS, los enlaces internos igual se deslizan */
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--peso-regular);
  overflow-x: clip; /* nunca scroll horizontal */
  -webkit-font-smoothing: antialiased;
}

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4, p { margin: 0; overflow-wrap: break-word; }

/* Foco visible para teclado */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Saltar al contenido */
.saltar {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--midnight);
  color: var(--tinta-noche);
  border-radius: var(--radio-boton);
}
.saltar:focus { top: var(--space-2); }

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Paneles alternados (mockup final, principio de aliabdaal.com): Soft White, radio 28, separados del borde.
   Nunca dos paneles seguidos. Lo usan la portada, Lo que cambió y Contacto. */
.panel {
  position: relative;
  margin: var(--panel-borde) var(--panel-borde) 0;
  border-radius: var(--radio-panel);
  background: var(--panel);
  overflow: clip; /* la luz de dentro no se sale del panel ni crea scroll de lado */
}

/* Las secciones que se enlazan desde el menú no quedan pegadas al borde */
[id] { scroll-margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Regla de oro: todo se ve sin JavaScript.
   Los estados ocultos para animar SOLO existen bajo .js (la clase la pone
   un script mínimo en <head>). Si el JS falla, la página se ve completa.
   -------------------------------------------------------------------------- */

/* Menos movimiento = más suave, no cero: se quitan bucles y desplazamientos;
   los fundidos y cambios de color se quedan (cada sección quita sus transform bajo esta misma consulta). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Rescate: lo que la entrada esconde (solo con .js) aparece solo a los 4 s aunque el JS falle */
@keyframes rescate { to { visibility: visible; } }

/* Botones (sistema compartido): primario azul, secundario con contorno Midnight. Press a 0.97. */
.boton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 22px;
  overflow: hidden;
  border-radius: var(--radio-boton);
  border: 1.5px solid transparent;
  font-weight: var(--peso-semibold);
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease);
}
.boton:active { transform: scale(0.97); }
.boton--primario { background-color: var(--cta); color: var(--sobre-cta); }
.boton--secundario { background-color: transparent; color: var(--tinta); border-color: var(--secundario-borde); }
@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover { background-color: var(--cta-hover); }
  .boton--secundario:hover { background-color: var(--superficie); }
}
@media (prefers-reduced-motion: reduce) { .boton:active { transform: none; } }

.boton__texto { position: relative; z-index: 1; }

/* Producto sin URL: botón o enlace gris, sin clic, con la etiqueta "Muy pronto" (regla del 16-oct).
   Lo usan la tarjeta de Vida Agéntica (destacado) y las columnas de Cómo te ayudo. */
.pronto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.boton--pronto {
  background-color: var(--pronto-fondo);
  color: var(--pronto-tinta);
  cursor: not-allowed;
}
.boton--pronto:active { transform: none; }
.pronto__etiqueta {
  font-size: 0.75rem;
  font-weight: var(--peso-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tinta-suave);
}
/* Escritorio: la etiqueta aparece al pasar el cursor o al llegar con el teclado. En pantallas táctiles, siempre. */
@media (hover: hover) and (pointer: fine) {
  .pronto__etiqueta { opacity: 0; transition: opacity var(--t-hover) ease; }
  .pronto:hover .pronto__etiqueta,
  .pronto:focus-within .pronto__etiqueta { opacity: 1; }
}