@import url("/cotizador/fonts/fonts.css");
/* ============================================================
   Cotizador Tecnergy — estilos base (dirección «Banda institucional»)
   Azul institucional #1a2387 · Lima institucional #7ec43a
   Montserrat (texto) + JetBrains Mono (códigos/SKU)
   ============================================================ */

:root{
  --ink:        #161927;
  --ink-2:      #3a3f55;
  --navy:       #1a2387;   /* azul institucional — exacto */
  --navy-deep:  #131a66;   /* hover del azul */
  --paper:      #f5f6f9;
  --paper-2:    #ffffff;
  --line:       rgba(22,25,39,0.10);
  --line-2:     rgba(22,25,39,0.06);
  --mute:       rgba(22,25,39,0.55);
  --accent:     #7ec43a;   /* lima institucional — exacto */
  --accent-deep:#4d8f1f;   /* lima para TEXTO (contraste AA sobre blanco) */
  --accent-soft:#ecf6e0;
  --on-navy-mute: rgba(255,255,255,0.66);
  --on-navy-line: rgba(255,255,255,0.16);
  --radius:     16px;
  --radius-s:   10px;
  --pad-x:      64px;
  --shadow-card: 0 1px 2px rgba(22,25,39,0.05), 0 8px 24px rgba(22,25,39,0.06);
  --shadow-pop:  0 16px 40px rgba(8,12,55,0.30);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Foco visible (accesibilidad) */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.site{
  width: 100%;
  min-height: 100vh;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Topbar — vive sobre la banda azul; se funde con .page-header
   ============================================================ */
.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px var(--pad-x);
  background: var(--navy);
  color: #fff;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.brand img{ height: 28px; width: auto; }
.brand .tag{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--on-navy-line);
  border-radius: 999px;
}

.actions{
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Píldoras del topbar (sobre azul) */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: transparent;
  color: #fff;
}
.pill:hover{ background: rgba(255,255,255,0.10); }
.pill.accent{
  background: var(--accent);
  color: var(--navy);
  border-color: var(--accent);
  font-weight: 700;
}
.pill.accent:hover{ background: #8fd04e; border-color: #8fd04e; color: var(--navy); }

/* ============================================================
   Botones
   .btn      — primario azul (sobre fondos claros)
   .btn.add  — acción principal de cotizar: lima institucional
   .btn.ghost— secundario delineado
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover{ background: var(--navy-deep); border-color: var(--navy-deep); }
.btn.add{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy);
  font-weight: 700;
}
.btn.add:hover{ background: #8fd04e; border-color: #8fd04e; }
.btn.ghost{
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn.ghost:hover{ background: var(--navy); color: #fff; }

/* ============================================================
   Responsive base
   ============================================================ */
@media (max-width: 1100px){
  :root{ --pad-x: 28px; }
}
@media (max-width: 600px){
  :root{ --pad-x: 20px; }
  .topbar{ padding-top: 16px; padding-bottom: 16px; }
  .brand img{ height: 24px; }
  .brand .tag{ display: none; }
}