/* =====================================================================
   Landing PneumaDev — BASE compartida.
   Tokens, tipografía, reset, contenedor, botones, etiquetas y titulares.
   Cada bloque [C-xx] tiene su hoja en css/ (misma numeración que index.html)
   y los efectos transversales viven en css/effects.css.
   ===================================================================== */

/* ---------- [F] Tipografía: Avenir Next (la de PneumaDev; viene con macOS/iOS).
   No se puede alojar por licencia: fuera de Apple cae a Inter, alojada en assets/fonts. ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
}

/* ---------- [T] Tokens PneumaDev (tokens.css de la skill pneumadev-dashboard + landing viva) ---------- */
:root {
  --font: "Avenir Next", "Avenir", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Pesos (nota del vault TEC-2026-0048): Bold titulares · DemiBold títulos y botones · Medium navegación y enlaces · Regular cuerpo */
  /* Paleta azul/gris (19-sep-2026): derivada del "Bloom Field gradient" del hero
     (#E2E2E2 · #1B9FFE · #4AC9FF). Azul profundo para botones y enlaces (contraste AA),
     azules del bloom para puntos y acentos, grises fríos en superficies y líneas. */
  --s0: #F6F8FA;          /* lienzo gris frío */
  --s1: #FFFFFF;          /* panel */
  --s2: #EEF1F5;          /* cabecera / hover */
  --s3: #E3E7ED;          /* control / pista */
  --ink: #1B1F24;         /* tinta primaria */
  --ink-2: #3A404A;       /* tinta secundaria */
  --ink-3: #5B6370;       /* etiquetas, párrafos en gris */
  --muted: #8B929C;
  --ac: #1573C4;          /* acento: enlaces, etiquetas, barra líder */
  --ac-hi: #0F4C81;       /* acento profundo: botones */
  --ac-hover: #0B3D68;    /* acento profundo al pasar el cursor (enlaces) */
  --btn: #3D4451;         /* botones: gris frío oscuro, texto blanco (pedido de Adrián) */
  --btn-hover: #2F3540;
  --btn-shadow: 40, 48, 60; /* rgb para la sombra de los botones */
  --blue: #1B9FFE;        /* azul del bloom: puntos y acentos pequeños */
  --blue-light: #4AC9FF;  /* celeste del bloom */
  --blue-soft: #A9D5F5;   /* bordes suaves */
  --blue-pale: #E3F1FC;   /* fondos pálidos (chips, KPIs) */
  --bar-lead: #1573C4;
  --bar-soft: #BFDDF5;    /* fases no activas */
  --line: #E2E6EC;        /* bordes laterales del contenedor y filetes */
  --line-2: #D3D8E0;
  --rule: #E2E6EC;
  --ok: #1573C4; --no: #A3A9B3; --warn: #805D14;
  --shadow: 15, 76, 129;  /* rgb del azul profundo para sombras */
  --container: 1676px;
  --gutter: 20px;

  /* Movimiento (compartido por todos los efectos) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* salida expo: revelados */
  --ease-spring: cubic-bezier(.34, 1.32, .5, 1); /* rebote suave: navbar */
  --ease-soft: cubic-bezier(.22, 1, .36, 1);     /* carrusel y barras */
  --auto: 5000ms;                                /* autoplay de carrusel y fases */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--s1);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, p, figure, dl, dd { margin: 0; }
button { font: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.section--bordered .container {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
/* Separador punteado entre secciones (patrón de 12 px, como en la réplica) */
.section--dashed {
  background-image: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 12px);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

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

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--btn); color: #fff;
  font-weight: 600; white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { background: var(--btn-hover); }
.btn--nav {
  height: 40px; padding: 0 18px; border-radius: 10px;
  font-size: 17px; letter-spacing: -0.01em;
}
.btn--primary {
  height: 48px; padding: 0 18px 0 20px; border-radius: 14px;
  font-size: 18px; letter-spacing: -0.01em; gap: 10px;
  box-shadow: 0 8px 26px rgba(var(--btn-shadow), 0.22);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(var(--btn-shadow), 0.28); }
.btn--primary:active { transform: translateY(1px); }
.ico-arrow { flex: none; transition: transform .25s var(--ease-out); }
.btn--primary:hover .ico-arrow { transform: translateX(3px); }

/* Etiqueta verde con chevron ("01 · Servicios ›") */
.label-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ac); font-size: 17px; font-weight: 500; line-height: 24px;
  letter-spacing: -0.005em;
}
.label-link .chev { margin-top: 1px; transition: transform .25s var(--ease-out); }
a.label-link:hover .chev { transform: translateX(3px); }
.label-link--center { display: flex; justify-content: center; }
.text-link { color: var(--ac); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-link:hover { color: var(--ac-hi); }

/* Titular de sección (36 px) y párrafo lead (22 px) */
.h2 {
  font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.01em;
  margin-left: 336px; max-width: 1000px;
}
.lead {
  font-size: 22px; line-height: 35.5px; color: var(--ink-3); font-weight: 400;
  letter-spacing: -0.004em;
  margin: 20px 0 0 336px; max-width: 1000px;
}

/* ---------- Comportamiento base por debajo de 1920 px ---------- */
@media (max-width: 1719px) {
  .h2, .lead { margin-left: 20%; }
  .lead { max-width: 60%; }
}
@media (max-width: 1100px) {
  .h2, .lead { margin-left: 20px; margin-right: 20px; max-width: none; }
}