/* ============================================================
   Celcom · Design Tokens
   Fuente de verdad de color/tipografía para assets HTML.
   Inserta este archivo dentro del <style> del artifact y
   consume las variables var(--celcom-*). No hardcodees colores.
   ============================================================ */

:root{
  /* ---- Par de marca ---- */
  --celcom-azul:        #0033A0;   /* primario: hero, footer, títulos, estructura */
  --celcom-azul-900:    #00246E;   /* azul profundo para capas/hover */
  --celcom-azul-100:    #E7ECF7;   /* azul muy claro para fondos suaves */
  --celcom-naranjo:     #F89800;   /* ACENTO: solo CTAs, destacados, énfasis */
  --celcom-naranjo-600: #D97F00;   /* hover del acento */

  /* ---- Texto y neutros ---- */
  --celcom-navy:        #0D1B33;   /* texto principal sobre claro (nunca negro puro) */
  --celcom-gris-txt:    #40506B;   /* texto secundario */
  --celcom-gris:        #F4F6FA;   /* fondo de sección alterno */
  --celcom-gris-borde:  #E1E7F0;   /* bordes suaves */
  --celcom-blanco:      #FFFFFF;

  /* ---- Canal / apoyo ---- */
  --celcom-wa:          #25D366;   /* verde WhatsApp: solo el canal */

  /* ---- Estados ---- */
  --celcom-ok:          #1E9E5A;
  --celcom-warn:        #C77700;
  --celcom-bad:         #C62828;

  /* ---- Tipografía (provisional: Poppins / Inter) ---- */
  --celcom-font-tit: 'Poppins', system-ui, -apple-system, sans-serif;
  --celcom-font-txt: 'Inter', system-ui, -apple-system, sans-serif;
  --celcom-font-mono:'Fira Code', ui-monospace, monospace;

  /* ---- Escala tipográfica ---- */
  --celcom-fs-hero:  34px;
  --celcom-fs-h1:    28px;
  --celcom-fs-h2:    22px;
  --celcom-fs-h3:    18px;
  --celcom-fs-body:  16px;
  --celcom-fs-small: 13px;
  --celcom-lh-body:  1.6;

  /* ---- Radios y sombras ---- */
  --celcom-radius:     16px;
  --celcom-radius-pill:999px;
  --celcom-shadow:     0 6px 20px rgba(13,27,51,.06);
}

/* ============================================================
   Componentes base que replican el sitio (opcionales)
   ============================================================ */

.celcom-hero{
  background:var(--celcom-azul);
  color:#fff;
  padding:48px 0 52px;
}
.celcom-hero h1{ color:#fff; font-family:var(--celcom-font-tit); font-weight:700; }

/* Botón píldora — CTA en naranjo */
.celcom-btn{
  display:inline-block; font-family:var(--celcom-font-tit); font-weight:600;
  padding:12px 26px; border-radius:var(--celcom-radius-pill); border:0;
  text-decoration:none; cursor:pointer;
}
.celcom-btn--cta{ background:var(--celcom-naranjo); color:#fff; }
.celcom-btn--cta:hover{ background:var(--celcom-naranjo-600); }
.celcom-btn--ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); }

/* Banda de énfasis naranjo */
.celcom-band{ background:var(--celcom-naranjo); color:#3a2400; border-radius:var(--celcom-radius); padding:26px 28px; }

/* Secciones alternas */
.celcom-sec-white{ background:#fff; }
.celcom-sec-gris{ background:var(--celcom-gris); }

/* Tarjeta con sombra suave */
.celcom-card{
  background:#fff; border:1px solid var(--celcom-gris-borde);
  border-radius:var(--celcom-radius); padding:22px; box-shadow:var(--celcom-shadow);
}

/* Tipografía base */
body.celcom{ font-family:var(--celcom-font-txt); color:var(--celcom-navy); line-height:var(--celcom-lh-body); }
.celcom h1,.celcom h2,.celcom h3,.celcom h4{ font-family:var(--celcom-font-tit); color:var(--celcom-azul); }