/* ==========================================================================
   FinanzLatina — Design System
   Paleta extraida con precision de propuesta1.png / propuesta2.png
   (texto hex literal visible en las imagenes, confirmado en ambas):
     #008080 teal      -> confianza, color principal de marca
     #D87042 naranja    -> energia latina, acentos/CTA
     #F5DEB3 crema      -> fondo secundario, usar con moderacion
     #333333 carbon     -> texto principal
   Base: blanco puro, 80% del lienzo (estrategia de marca.md: "fondo blanco,
   nunca lo cambiaria" + regla 80% blanco / 10% azul-teal / 5% turquesa /
   5% acentos). Sin banderas, sin colores patrios, sin estetica folclorica
   (decision explicita de la estrategia de marca).
   ========================================================================== */

:root {
  /* --- Color: marca --- */
  --color-teal: #008080;
  --color-teal-dark: #006666;
  --color-teal-light: #e0f0f0;
  --color-naranja: #d87042;
  --color-naranja-dark: #b85a31;
  --color-naranja-light: #fbe8dd;
  --color-crema: #f5deb3;
  --color-carbon: #333333;

  /* --- Color: base neutra --- */
  --color-blanco: #ffffff;
  --color-fondo: #fffdf9;
  --color-gris-100: #f7f6f3;
  --color-gris-200: #ece9e3;
  --color-gris-400: #b9b5ac;
  --color-gris-600: #756f64;
  --color-texto: var(--color-carbon);
  --color-texto-suave: #5a5650;

  /* --- Color: estado --- */
  --color-exito: #1f8a52;
  --color-error: #c0392b;
  --color-borde: var(--color-gris-200);

  /* --- Tipografia --- */
  --font-titulo: "Poppins", "Segoe UI", sans-serif;
  --font-cuerpo: "Inter", "Segoe UI", sans-serif;

  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-extrabold: 800;

  /* Escala tipografica fluida, mobile-first */
  --tam-h1: clamp(2rem, 1.5rem + 3vw, 3.25rem);
  --tam-h2: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  --tam-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --tam-h4: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --tam-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --tam-cuerpo: 1rem;
  --tam-pequeno: 0.875rem;
  --tam-micro: 0.75rem;

  --interlineado-titulo: 1.15;
  --interlineado-cuerpo: 1.65;

  /* --- Espaciado (escala 4px) --- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 2.5rem;
  --esp-8: 3rem;
  --esp-9: 4rem;
  --esp-10: 5rem;
  --esp-11: 6.5rem;

  /* --- Layout --- */
  --ancho-maximo: 1180px;
  --ancho-texto: 720px;
  --radio-s: 8px;
  --radio-m: 14px;
  --radio-l: 22px;
  --radio-pill: 999px;

  /* --- Sombra --- */
  --sombra-s: 0 2px 8px rgba(51, 51, 51, 0.06);
  --sombra-m: 0 8px 24px rgba(51, 51, 51, 0.1);
  --sombra-teal: 0 10px 28px rgba(0, 128, 128, 0.18);

  /* --- Movimiento --- */
  --duracion-rapida: 150ms;
  --duracion-media: 250ms;
  --easing-estandar: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ==========================================================================
   Reset minimo
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-cuerpo);
  font-size: var(--tam-cuerpo);
  line-height: var(--interlineado-cuerpo);
  color: var(--color-texto);
  background-color: var(--color-blanco);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

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