/* ==========================================================================
   BlueBox — Sistema de diseño de la landing

   La paleta es LA MISMA del portal de clientes, copiada valor por valor, para
   que pasar de la landing al portal no se sienta como cambiar de empresa.

   La tipografía sí es distinta: la landing usa Manrope y Sora; el portal usa
   las fuentes del sistema y no se toca.

   Regla: los colores se declaran acá y en ningún otro archivo. Las demás hojas
   consumen estas variables.
   ========================================================================== */

:root{
  /* ---- Marca: azul ---- */
  --bb-blue-900:#0d2b3e;
  --bb-blue-800:#12405c;
  --bb-blue-700:#175074;
  --bb-blue-600:#1e608a;   /* azul principal, tomado del logo */
  --bb-blue-500:#2b7aab;
  --bb-blue-300:#7fb4d2;
  --bb-blue-100:#dbebf4;
  --bb-blue-050:#eef6fa;

  /* ---- Marca: ámbar ---- */
  --bb-amber-700:#a5652e;
  --bb-amber-600:#cc8442;  /* ámbar del logo */
  --bb-amber-300:#e6bb8b;
  --bb-amber-100:#f9ecdc;

  /* ---- Neutros ---- */
  --bb-ink:#101c26;        /* texto principal */
  --bb-ink-soft:#33475a;
  --bb-muted:#5d7385;      /* texto secundario: 4.6:1 sobre blanco */
  --bb-surface:#ffffff;
  --bb-ground:#eef2f6;
  --bb-line:#d7e2ea;
  --bb-line-strong:#bccddb;

  /* ---- Roles ---- */
  --bb-primary:var(--bb-blue-600);
  --bb-primary-hover:var(--bb-blue-700);
  --bb-primary-text:#ffffff;
  --bb-accent:var(--bb-amber-600);
  --bb-accent-strong:var(--bb-amber-700);  /* el que lleva texto blanco encima */
  --bb-whatsapp:#25d366;
  --bb-whatsapp-dark:#1da851;
  --bb-danger:#b42318;

  /* Sí y no, para marcar lo que una ruta permite y lo que no.
     El verde es propio y NO el de WhatsApp: ese está reservado a la marca del
     mensajero, y usarlo en una lista de condiciones haría pensar en un enlace
     para escribir. Este es más oscuro y apagado, para que pase el contraste
     sobre fondo blanco (5,0:1) y no compita con el ámbar de los avisos. */
  --bb-si:#1a7f4b;
  --bb-no:var(--bb-danger);

  /* ---- Tipografía ----
     Sora para títulos: geométrica, con carácter técnico que le va a logística.
     Manrope para texto: abierta y muy legible en tamaños chicos. */
  --bb-font-display:'Sora','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bb-font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Escala fluida: crece con el ancho de la ventana sin saltos por breakpoint */
  --bb-fs-hero:clamp(2.1rem,5.2vw,4rem);
  --bb-fs-h2:clamp(1.6rem,3vw,2.4rem);
  --bb-fs-h3:1.15rem;
  --bb-fs-body:clamp(1rem,1.1vw,1.0625rem);
  --bb-fs-sm:0.9375rem;
  --bb-fs-xs:0.8125rem;

  /* ---- Espaciado y formas ---- */
  --bb-r-sm:8px;
  --bb-r:14px;
  --bb-r-lg:22px;
  --bb-r-pill:999px;
  --bb-content-max:1200px;
  --bb-gutter:clamp(1.15rem,4vw,2.5rem);
  --bb-section-y:clamp(3.5rem,8vw,6.5rem);
  --bb-topbar-shadow:0 1px 0 var(--bb-line);

  /* ---- Sombras: azuladas, no grises, para que asienten en la paleta ---- */
  --bb-shadow-sm:0 1px 2px rgba(13,43,62,.06),0 1px 3px rgba(13,43,62,.10);
  --bb-shadow:0 4px 6px -1px rgba(13,43,62,.08),0 10px 20px -6px rgba(13,43,62,.16);
  --bb-shadow-lg:0 12px 28px -8px rgba(13,43,62,.22),0 30px 60px -20px rgba(13,43,62,.28);

  --bb-ring:0 0 0 3px rgba(30,96,138,.35);
  --bb-topbar-h:76px;
  --bb-ease:cubic-bezier(.4,0,.2,1);
}

/* El ancho del contenido crece en monitores grandes.
   Con un tope fijo de 1200px, en una pantalla de 2000px la barra superior y el
   pie quedan como islas estrechas en medio de dos franjas vacías: el contenido
   se ve encogido y la página, mal aprovechada. */
@media (min-width:1600px){
  :root{
    --bb-content-max:1400px;
    --bb-topbar-h:82px;
  }
}
@media (min-width:2000px){
  :root{ --bb-content-max:1560px }
}

/* La landing se diseña en claro a propósito: es la cara pública de la marca y
   debe verse igual para todo el mundo. No hay variante oscura, y el fondo se
   pinta explícito para que el navegador no la tiña según el tema del sistema. */
@media (prefers-color-scheme:dark){
  :root{ color-scheme:light }
}

/* Respeta a quien pidió menos animación en su sistema operativo. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}