/* ===========================================================
   FONGASEL NORTE · Sistema de marca
   Colores extraídos del logo: agua (cian/azul), gas (rojo/naranja),
   electricidad (amarillo). Energético, moderno, profesional.
   =========================================================== */

:root{
  /* Neutros (cálido-fríos, baja saturación) */
  --ink:        #0B1726;   /* casi negro azulado */
  --ink-2:      #16263A;
  --slate:      #4F6076;
  --slate-2:    #7C8BA0;
  --line:       #E3EAF2;
  --mist:       #EEF4FA;   /* off-white frío */
  --paper:      #FFFFFF;

  /* Marca */
  --blue:       #0E63B3;   /* primario (agua profunda) */
  --blue-deep:  #0A4C8C;
  --cyan:       #15A9DC;   /* agua */
  --red:        #E23A2C;   /* gas */
  --red-deep:   #B5271C;
  --orange:     #F58A2B;   /* gas calor */
  --yellow:     #F6C518;   /* electricidad */

  /* Gradientes firma */
  --grad-water: linear-gradient(140deg, #1FC0E8 0%, #0E63B3 100%);
  --grad-gas:   linear-gradient(140deg, #F7A93C 0%, #E23A2C 100%);
  --grad-tri:   linear-gradient(100deg, #15A9DC 0%, #0E63B3 32%, #E23A2C 70%, #F58A2B 100%);

  /* Tipografía */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, sans-serif;

  /* Forma */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(11,23,38,.06);
  --shadow-md: 0 14px 40px rgba(11,23,38,.12);
  --shadow-lg: 0 30px 70px rgba(11,23,38,.22);
  --shadow-blue: 0 18px 44px rgba(14,99,179,.34);
  --shadow-red:  0 18px 44px rgba(226,58,44,.32);

  --maxw: 1200px;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.04; letter-spacing:-.02em; }
p{ margin:0; }
a{ color: inherit; text-decoration: none; }
img{ display:block; max-width:100%; }

/* Utilidades */
.tri-bar{ height:6px; background: var(--grad-tri); border:0; margin:0; }
.eyebrow{
  font-family: var(--font-display); font-weight:700;
  text-transform: uppercase; letter-spacing:.18em; font-size:13px;
}

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family: var(--font-display); font-weight:700; font-size:16px;
  padding:15px 26px; border-radius: var(--r-pill); border:0;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-red{ background: var(--red); color:#fff; box-shadow: var(--shadow-red); }
.btn-red:hover{ background:#cf2f22; }
.btn-blue{ background: var(--blue); color:#fff; box-shadow: var(--shadow-blue); }
.btn-blue:hover{ background: var(--blue-deep); }
.btn-ghost{ background: transparent; color: var(--ink); border:2px solid var(--line); }
.btn-ghost:hover{ border-color: var(--blue); color: var(--blue); }
.btn-white{ background:#fff; color: var(--ink); box-shadow: var(--shadow-md); }
.btn-wa{ background:#25D366; color:#0a3; color:#06371d; }
.btn-wa:hover{ background:#1fbe5b; }

/* Pulso urgencias */
@keyframes pulse-ring{
  0%{ box-shadow: 0 0 0 0 rgba(226,58,44,.5); }
  70%{ box-shadow: 0 0 0 18px rgba(226,58,44,0); }
  100%{ box-shadow: 0 0 0 0 rgba(226,58,44,0); }
}
@keyframes bolt-flicker{
  0%,100%{ opacity:1; filter: drop-shadow(0 0 0 rgba(246,197,24,0)); }
  45%{ opacity:.85; }
  50%{ opacity:1; filter: drop-shadow(0 0 14px rgba(246,197,24,.8)); }
  55%{ opacity:.9; }
}
@keyframes float-y{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
@keyframes grad-pan{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }