/* ==========================================================================
   Oncovive · Tokens de marca
   Fuente de verdad: Brand Guidelines v0.1 (oct 2026).
   Regla: ningun color, tipografia o radio se escribe "a mano" en styles.css.
   Si necesitas un valor nuevo, agregalo aqui primero.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Marca ------------------------------------------------------------ */
  --verde-vida: #7AC143;      /* superficies, botones, graficos. NO texto chico */
  --verde-hoja: #5FA22F;      /* hover de botones, texto GRANDE (>=24px) */
  --verde-profundo: #3D741C;  /* texto y enlaces sobre fondos claros (AA) */
  --grafito: #4D4D4F;
  --tinta: #1B1D1F;
  --blanco: #FFFFFF;

  /* --- Superficies ------------------------------------------------------ */
  --niebla: #F4F5F3;
  --bruma: #EDF6E5;
  --piedra: #E4E6E2;
  --linea: #EAEBE8;
  --linea-suave: #F0F1EE;
  --linea-oscura: #2C2F31;

  /* --- Texto ------------------------------------------------------------ */
  --texto: var(--tinta);
  --texto-2: var(--grafito);
  --texto-3: #6B6E70;          /* minimo para texto secundario en claro */
  --sobre-oscuro: #E1E3E0;
  --sobre-oscuro-2: #C9CBC8;
  --sobre-oscuro-3: #A8ABAD;   /* minimo para texto secundario en oscuro */
  --punto-inactivo: #C9CBC8;
  --dato-pendiente: #FFF1B8;   /* resalta datos que falta que entregue el cliente */

  /* --- Tipografia ------------------------------------------------------- */
  --fuente: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --peso-ligero: 300;
  --peso-regular: 400;
  --peso-semi: 600;
  --peso-negrita: 700;

  --t-h1: clamp(40px, 5.2vw, 68px);
  --t-h2: clamp(32px, 3.6vw, 46px);
  --t-h2-banda: clamp(30px, 3.4vw, 44px);
  --t-declaracion: clamp(24px, 2.8vw, 34px);
  --t-tarjeta: 24px;
  --t-subtitulo: 19px;
  --t-cuerpo-l: 18px;
  --t-cuerpo: 15px;
  --t-chico: 14px;
  --t-micro: 13px;
  --t-etiqueta: 12px;

  /* --- Forma y espacio -------------------------------------------------- */
  --radio-pildora: 40px;
  --radio-tarjeta: 24px;
  --radio-panel: 20px;
  --radio-foto: 28px;
  --ancho-max: 1240px;
  --margen: 32px;
  --sombra-foto: 0 30px 60px rgba(27, 29, 31, 0.16);
  --sombra-flotante: 0 16px 40px rgba(27, 29, 31, 0.14);
  --sombra-whatsapp: 0 12px 30px rgba(27, 29, 31, 0.25);
}

@media (max-width: 600px) {
  :root { --margen: 20px; }
}