/* cotiza-agil — tokens generados por master-build
   Estilo: Institucional sobrio · Perfil: directo/media/minima
   Marca propia de Cotiza Ágil (no Veta). Marino = la marca y la acción; ladrillo = la A del monograma y el precio que gana. */
:root{
  /* superficie */
  --fondo:#FFFFFF; --superficie:#F4F3F0; --texto:#1C2733;
  --texto-suave:#51606F; --linea:#D7DEE5;

  /* acción y apoyo */
  --accion:#1C1B36; --accion-ink:#121127; --accion-suave:#E7E6EF;
  --accion-contraste:#FFFFFF; --apoyo:#A93A17;

  /* estados (peligro en carmín, distinto del ladrillo del precio ganador; siempre con texto) */
  --ok:#2E6B3F; --advertencia:#8A5A00; --peligro:#9C1F3A;
  --borde-input:#8A8A94; /* 3,4:1 sobre blanco, borde de controles */
  --apoyo-suave:#F8E7E0;

  /* tokens del DOMINIO: precios de Compra Ágil */
  --precio-ganador:#A93A17;   /* la oferta que ganó (6,35:1) */
  --precio-rango:#1C1B36;     /* el rango donde se gana */
  --precio-perdedor:#666773;  /* ofertas que no ganaron (5,0:1 sobre gris, 5,6:1 sobre blanco) */

  /* forma y movimiento */
  --radio:8px; --r-pill:999px; --sombra:0 1px 2px rgba(0,0,0,.06), 0 10px 24px -18px rgba(0,0,0,.25);
  --transicion:150ms ease;

  /* tipografía: 6 tamaños en escala (densidad media) */
  --fuente:"Inter", system-ui, "Segoe UI", sans-serif;
  --fuente-titulos:"Montserrat", "Inter", system-ui, sans-serif;
  --tam-1:13px; --tam-2:16px; --tam-3:20px;
  --tam-4:25px; --tam-5:31px; --tam-6:39px;
  --tam-input:16px; /* nunca menos: evita el zoom de iOS */

  /* espaciado con ritmo (multiplos de 4) */
  --esp-1:4px; --esp-2:8px; --esp-3:16px;
  --esp-4:24px; --esp-5:32px; --esp-6:48px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--fuente);
     font-size:var(--tam-2);line-height:1.55;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
:focus-visible{outline:3px solid var(--accion);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

h1{font-family:var(--fuente-titulos);font-weight:650;
   font-size:clamp(var(--tam-5), 4vw + 1rem, var(--tam-6));line-height:1.15;margin:0 0 var(--esp-3);}
h2{font-family:var(--fuente-titulos);font-weight:650;
   font-size:var(--tam-4);line-height:1.25;margin:var(--esp-4) 0 var(--esp-2);}
p{margin:0 0 var(--esp-3);}
.mb-suave{color:var(--texto-suave);}

/* ---------- componentes base ---------- */
/* el header envuelve en pantallas angostas: sin menu mobile aparte, la nav
   baja a su propia linea y nada se corta */
.mb-header{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3);
  padding:var(--esp-3) var(--esp-4);background:var(--superficie);border-bottom:1px solid var(--linea);}
.mb-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--esp-1) var(--esp-2);}
.mb-nav a{color:var(--texto);text-decoration:none;padding:var(--esp-2);min-height:44px;
  display:inline-flex;align-items:center;}
.mb-nav a:hover{color:var(--accion);}
@media (max-width:640px){
  .mb-header{padding:var(--esp-2) var(--esp-3);}
  .mb-nav{margin-left:0;width:100%;}
}

.mb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);
  min-height:48px;padding:0 var(--esp-4);border:0;border-radius:var(--radio);
  font-family:var(--fuente);font-size:var(--tam-2);cursor:pointer;text-decoration:none;
  background:var(--accion);color:var(--accion-contraste);transition:background var(--transicion);}
.mb-btn:hover{background:var(--accion-ink);}
.mb-btn--secundario{background:transparent;color:var(--texto);border:1px solid var(--linea);}
.mb-btn--secundario:hover{border-color:var(--accion);background:var(--accion-suave);}
.mb-btn:disabled{opacity:.5;cursor:default;}

.mb-card{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  padding:var(--esp-4);box-shadow:var(--sombra);}

.mb-label{display:block;font-size:var(--tam-1);color:var(--texto-suave);margin:var(--esp-3) 0 var(--esp-1);}
.mb-input,.mb-area{width:100%;font-family:var(--fuente);font-size:var(--tam-input);color:var(--texto);
  background:var(--superficie);border:1px solid var(--borde-input);border-radius:var(--radio);
  padding:var(--esp-2) var(--esp-3);min-height:48px;}
.mb-area{min-height:96px;resize:vertical;}
.mb-input:focus,.mb-area:focus{outline:none;border-color:var(--accion);
  box-shadow:0 0 0 3px var(--accion-suave);}
.mb-obligatorio{color:var(--peligro);}

/* skeleton: el estado de carga viene en el sistema, nunca pantalla vacia */
.mb-skeleton{border-radius:var(--radio);background:linear-gradient(90deg,
  var(--linea) 25%, var(--superficie) 50%, var(--linea) 75%);
  background-size:200% 100%;animation:mb-brillo 1.4s ease infinite;min-height:1em;}
@keyframes mb-brillo{from{background-position:200% 0}to{background-position:-200% 0}}

.mb-footer{padding:var(--esp-5) var(--esp-4);border-top:1px solid var(--linea);
  color:var(--texto-suave);font-size:var(--tam-1);}

/* números de precios alineados */
.num{font-variant-numeric:tabular-nums;}