/* ==========================================================================
   CrediListo — styles.css (v2, rediseño completo)
   Sistema de diseño audaz: tipografía enorme, bloques de color a sangre
   completa, formas orgánicas inspiradas en el ícono de marca (dos cintas
   entrelazadas). Nada de tarjetas blancas genéricas repetidas — cada
   sección tiene su propia composición.
   ========================================================================== */

:root {
  /* Fija el esquema claro: sin esto, un navegador en modo oscuro pinta el texto
     de los campos de formulario en blanco sobre fondo blanco. */
  color-scheme: light;

  /* ---- Color: marca real (muestreada de assets, ver docs/BRAND.md) ---- */
  --navy-900: #061A2E;   /* azul marino real (v0.5.1): el tono anterior viraba a verde petróleo */
  --navy-800: #0B4675;
  --navy-700: #145C93;

  /* Verdes "amigables" (v0.3) — misma familia de marca, pero más vívida y cálida,
     alejada del verde petróleo/oscuro-apagado de v0.2. Contraste WCAG recalculado
     para cada tono, ver docs/QA.md. */
  --green-900: #147B44;  /* texto blanco — 5.3:1 */
  --green-800: #158449;  /* texto blanco — 4.7:1 */
  --green-700: #189553;  /* acentos medios, no usar con texto blanco pequeño */
  --green-600: #1DAF61;
  --green-500: #22D375;
  --green-400: #3EE089;
  --green-300: #7BEAAF;  /* verde muy claro — acentos sobre fondo oscuro */
  --whatsapp-green: #127D44;  /* texto blanco — 5.2:1 */

  /* v0.5 — paleta 95% azul / 5% verde (pedido del cliente, 15/09/2026).
     El verde deja de ser superficie y queda solo como acento puntual. */
  --gradient-brand: linear-gradient(135deg, #0E5C8A 0%, var(--navy-800) 52%, #06202E 100%);
  --gradient-hero: radial-gradient(120% 140% at 15% 0%, #0E3A63 0%, var(--navy-900) 58%);
  --gradient-mesh: radial-gradient(60% 60% at 85% 20%, rgba(20,92,147,0.55) 0%, transparent 62%),
                    radial-gradient(50% 50% at 8% 88%, rgba(11,70,117,0.55) 0%, transparent 62%);

  /* ---- Liquid glass (glassmorphism) ---- */
  --glass-bg: rgba(255,255,255,0.12);
  --glass-bg-strong: rgba(255,255,255,0.85);
  --glass-border: rgba(255,255,255,0.28);
  --glass-shadow: 0 8px 32px rgba(7,29,40,0.16);
  --glass-blur: blur(20px) saturate(180%);

  /* ---- Neutrales ---- */
  --white: #FFFFFF;
  --cream: #F6F3EA;      /* crudo cálido — reemplaza el gris frío de plantilla */
  --ink: #0F1E27;
  --gray-700: #45535C;
  --gray-600: #5A6870;  /* texto secundario legible — 5.2-5.8:1 sobre blanco/crema */
  --gray-500: #6C7A84;
  --gray-400: #A2AEB6;
  --gray-300: #C7D0D6;
  --gray-200: #E4E9EC;
  --gray-100: #F2F5F6;

  --success: #1DAF61;
  --error: #C0392B;

  /* ---- Tipografía (v0.4.1): Geist (titulares) + Hanken Grotesk (cuerpo).
     Bricolage Grotesque se sentía "creativo/agencia" para una financiera —
     Geist da un trazo más técnico y confiable, alineado al tono serio que
     necesita una entidad de crédito. Ver BRAND.md. ---- */
  --font-display: "Geist", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(3rem, 1.6rem + 7vw, 7.5rem);     /* hero — escala Wise/Monzo */
  --fs-h1: clamp(2.4rem, 1.6rem + 3.2vw, 4.2rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* ---- Espaciado ---- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.5rem;
  --space-7: 5.5rem;
  --space-8: 8rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(7, 29, 40, 0.08);
  --shadow-md: 0 16px 36px rgba(7, 29, 40, 0.14);
  --shadow-lg: 0 30px 60px rgba(7, 29, 40, 0.22);

  --header-height: 84px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--gray-500); opacity: 1; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}
h2 { font-size: var(--fs-h2); line-height: 1.05; }
h3 { font-size: var(--fs-h3); line-height: 1.15; }

p.lead { font-size: var(--fs-lead); color: var(--gray-700); line-height: 1.5; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 2px;
}

/* ---- Layout utilities ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section { padding-block: var(--space-7); position: relative; }
.section--tight { padding-block: var(--space-6); }
.section--cream { background: var(--cream); }
.section--dark { background: var(--navy-900); color: var(--white); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--green { background: var(--gradient-brand); color: var(--white); }
.section--green h2, .section--green h3 { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin-bottom: var(--space-3);
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: currentColor; }
.section--dark .eyebrow, .section--green .eyebrow { color: var(--green-300); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--navy-900);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---- Scroll reveal (progressive enhancement vía JS) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Variante: cascada por hijo en vez de bloque plano — para grids con un solo
   data-reveal en el contenedor (bento, pillars-grid, grid-cards). El propio
   contenedor no anima (se neutraliza abajo); cada hijo directo entra con su
   propio retraso, así la grilla se revela en cascada y no de un salto. */
[data-reveal].stagger-children {
  opacity: 1;
  transform: none;
  transition: none;
}
[data-reveal].stagger-children > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
[data-reveal].stagger-children.is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal].stagger-children > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal].stagger-children > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal].stagger-children > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal].stagger-children > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal].stagger-children > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal].stagger-children > *:nth-child(6) { transition-delay: 350ms; }

/* ---- Grid utilities ---- */
.grid { display: grid; gap: var(--space-4); }

/* ---- Liquid glass (glassmorphism) ----
   Uso: paneles flotantes sobre fondos oscuros o imágenes (tarjetas de stats,
   formulario del CTA, header al hacer scroll, chips flotantes del hero).
   Con fallback sólido si el navegador no soporta backdrop-filter. */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
}
/* Variante clara — para paneles flotantes sobre fondos oscuros con texto oscuro */
.glass--light {
  background: var(--glass-bg-strong);
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--ink);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(11,29,38,0.92); }
  .glass--light { background: rgba(255,255,255,0.96); }
}