/* ═══════════════════════════════════════════════════════════════
   ELECTRIC CONTROL S.A.S. — IDENTIDAD OFICIAL (SITIO PÚBLICO)
   Solo aplica con .ec-public-site — NO incluye logins de portales
   ═══════════════════════════════════════════════════════════════ */

.ec-public-site {
  /* ── Paleta oficial ── */
  --ec-brand-navy: #0f1c2e;
  --ec-brand-navy-mid: #1a2d47;
  --ec-brand-green: #7dbf2a;
  --ec-brand-green-dark: #6aa822;
  --ec-brand-green-light: #94d63a;
  --ec-brand-white: #ffffff;
  --ec-brand-gray-light: #f3f5f7;
  --ec-brand-gray-medium: #6b7280;

  /* Remap tokens del design system */
  --ec-blue: var(--ec-brand-navy);
  --ec-blue-dark: #0a121e;
  --ec-blue-light: #1e3354;
  --ec-blue-50: #eef1f4;
  --ec-blue-100: #dce3ea;
  --ec-blue-700: var(--ec-brand-navy);
  --ec-green: var(--ec-brand-green);
  --ec-green-light: var(--ec-brand-green-light);
  --ec-gray-50: var(--ec-brand-gray-light);
  --ec-gray-100: #e8ecef;
  --ec-gray-200: #dde2e8;
  --ec-gray-500: var(--ec-brand-gray-medium);
  --ec-gray-900: var(--ec-brand-navy);
  --ec-gray-950: #070d16;
  --ec-text: var(--ec-brand-navy);
  --ec-text-secondary: var(--ec-brand-gray-medium);
  --ec-bg: var(--ec-brand-white);
  --ec-bg-alt: var(--ec-brand-gray-light);
  --ec-bg-card: var(--ec-brand-white);
  --ec-premium-bg: var(--ec-brand-gray-light);
  --ec-premium-hero: linear-gradient(148deg, #070d16 0%, var(--ec-brand-navy) 55%, #1a2d47 100%);
  --ec-premium-glow: 0 0 40px rgba(125, 191, 42, 0.1);

  /* Tipografía */
  --ec-font: "Open Sans", "Inter", system-ui, sans-serif;
  --ec-font-display: "Montserrat", system-ui, sans-serif;

  font-family: var(--ec-font);
  color: var(--ec-text);
  background: var(--ec-brand-gray-light);
  background-image:
    linear-gradient(135deg, rgba(15, 28, 46, 0.02) 25%, transparent 25%),
    linear-gradient(225deg, rgba(125, 191, 42, 0.025) 25%, transparent 25%),
    linear-gradient(rgba(15, 28, 46, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 28, 46, 0.025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 48px 48px, 48px 48px;
}

/* ── Tipografía: Montserrat títulos, Open Sans cuerpo ── */
.ec-public-site h1,
.ec-public-site h2,
.ec-public-site h3,
.ec-public-site h4,
.ec-public-site h5,
.ec-public-site h6,
.ec-public-site .ec-heading-xl,
.ec-public-site .ec-heading-lg,
.ec-public-site .ec-heading-md,
.ec-public-site .ec-heading-sm,
.ec-public-site .ec-brand-text,
.ec-public-site .ec-section-label,
.ec-public-site .ec-hero-slide-content h1,
.ec-public-site .ec-cta-content h2,
.ec-public-site .ec-cta-content h3,
.ec-public-site .ec-footer__links h4 {
  font-family: var(--ec-font-display);
}

/* ── CTAs primarios → Verde corporativo ── */
.ec-public-site .ec-btn-primary,
.ec-public-site .ec-header-btn--primary {
  background: var(--ec-brand-green);
  border-color: var(--ec-brand-green);
  color: var(--ec-brand-white);
  box-shadow: 0 2px 10px rgba(125, 191, 42, 0.32);
}

.ec-public-site .ec-btn-primary:hover,
.ec-public-site .ec-header-btn--primary:hover {
  background: var(--ec-brand-green-dark);
  border-color: var(--ec-brand-green-dark);
  box-shadow: 0 6px 20px rgba(125, 191, 42, 0.38);
}

.ec-public-site .ec-btn-white {
  color: var(--ec-brand-navy);
}

.ec-public-site .ec-btn-outline:hover {
  border-color: var(--ec-brand-green);
  color: var(--ec-brand-navy);
  background: rgba(125, 191, 42, 0.06);
}

/* ── Labels y acentos gráficos ── */
.ec-public-site .ec-label,
.ec-public-site .ec-section-label,
.ec-public-site .ec-hero-label {
  color: var(--ec-brand-green);
  background: rgba(125, 191, 42, 0.1);
  border-color: rgba(125, 191, 42, 0.28);
}

.ec-public-site .ec-hero__title-highlight,
.ec-public-site .ec-hero-slide-content h1 em,
.ec-public-site .ec-hero-slide-content h1 span.highlight {
  color: var(--ec-brand-green-light);
  font-style: normal;
}

/* ── Header institucional — tema auto claro/oscuro ── */
.ec-public-site .ec-header.ec-header--on-light,
.ec-public-site .ec-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 28, 46, 0.08);
  box-shadow: var(--ec-shadow-sm);
}

.ec-public-site .ec-header.ec-header--on-dark:not(.ec-header--on-light) {
  background: transparent;
  box-shadow: none;
  border-bottom-color: transparent;
}

.ec-public-site .ec-header-brand img.ec-brand-electric-control {
  height: calc(var(--ec-header-h) - 32px);
  width: auto;
  max-height: 40px;
}

@media (max-width: 640px) {
  .ec-public-site .ec-header-brand img.ec-brand-electric-control {
    height: calc(var(--ec-header-h) - 44px);
    max-height: 28px;
  }
}

@media (max-width: 390px) {
  .ec-public-site .ec-header-brand img.ec-brand-electric-control {
    height: calc(var(--ec-header-h) - 48px);
    max-height: 24px;
  }
}

.ec-public-site .ec-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(15, 28, 46, 0.08);
}

.ec-public-site .ec-header.ec-header--on-light .ec-header-btn--ghost,
.ec-public-site .ec-header.scrolled .ec-header-btn--ghost {
  color: var(--ec-brand-navy);
  border-color: rgba(15, 28, 46, 0.15);
  background: var(--ec-gray-50);
}

.ec-public-site .ec-header.ec-header--on-dark:not(.ec-header--on-light) .ec-header-btn--ghost {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.ec-public-site .ec-header.scrolled .ec-brand-text {
  color: var(--ec-brand-navy);
}

.ec-public-site .ec-header-btn--ghost {
  color: var(--ec-brand-navy);
  border-color: rgba(15, 28, 46, 0.15);
}

.ec-public-site:not(.ec-legal-shell) .ec-header:not(.scrolled) .ec-brand-text {
  color: var(--ec-brand-white);
}

/* ── Hero / fondos oscuros navy ── */
.ec-public-site .ec-hero,
.ec-public-site .ec-hero-slide::before {
  background: var(--ec-brand-navy);
}

.ec-public-site .ec-hero-slide::after {
  background:
    linear-gradient(125deg, transparent 40%, rgba(125, 191, 42, 0.08) 40%, rgba(125, 191, 42, 0.08) 41%, transparent 41%),
    linear-gradient(125deg, transparent 58%, rgba(15, 28, 46, 0.4) 58%);
}

.ec-public-site .ec-page-hero--premium::after,
.ec-public-site .ec-sector-hero::after,
.ec-public-site .ec-vacante-hero::after {
  background: radial-gradient(circle, rgba(125, 191, 42, 0.18) 0%, transparent 68%);
}

/* ── Tarjetas y secciones ── */
.ec-public-site .ec-section-alt {
  background: rgba(243, 245, 247, 0.85);
}

.ec-public-site .ec-card-premium,
.ec-public-site .ec-glass-card,
.ec-public-site .ec-form-card {
  border-color: rgba(15, 28, 46, 0.08);
}

.ec-public-site .ec-stat-value,
.ec-public-site .ec-tech-stat__value {
  color: var(--ec-brand-green);
}

/* ── CTA «Hablemos» ── */
.ec-public-site .ec-cta .ec-cta-inner {
  background: linear-gradient(148deg, #070d16 0%, var(--ec-brand-navy) 50%, #1a2d47 100%);
}

.ec-public-site .ec-cta .ec-cta-inner::before {
  background-image:
    linear-gradient(125deg, rgba(125, 191, 42, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 80px 80px, 40px 40px, 40px 40px;
}

.ec-public-site .ec-cta .ec-btn-primary-white {
  background: var(--ec-brand-green);
  color: var(--ec-brand-white);
  box-shadow: 0 8px 24px rgba(125, 191, 42, 0.35);
}

.ec-public-site .ec-cta .ec-btn-primary-white:hover {
  background: var(--ec-brand-green-dark);
  color: var(--ec-brand-white);
}

/* ── Footer institucional ── */
.ec-public-site .ec-footer {
  background: var(--ec-brand-navy);
}

.ec-public-site .ec-footer__link:hover,
.ec-public-site .ec-footer__legal a:hover {
  color: var(--ec-brand-green-light);
}

/* ── Chat flotante ── */
.ec-public-site .ec-chat-fab {
  background: linear-gradient(135deg, var(--ec-brand-green) 0%, var(--ec-brand-green-dark) 100%);
  box-shadow: 0 8px 28px rgba(125, 191, 42, 0.4);
}

.ec-public-site .ec-chat-fab:hover {
  background: linear-gradient(135deg, var(--ec-brand-green-light) 0%, var(--ec-brand-green) 100%);
  box-shadow: 0 12px 36px rgba(125, 191, 42, 0.48);
}

.ec-public-site .ec-chat-fab-pulse {
  border-color: var(--ec-brand-green-dark);
}

.ec-public-site .ec-chat-header {
  background: var(--ec-brand-navy);
}

/* ── Enlaces y foco ── */
.ec-public-site .ec-forgot-link,
.ec-public-site .ec-support-link:hover,
.ec-public-site .ec-nav-dropdown-menu__cta {
  color: var(--ec-brand-green) !important;
}

.ec-public-site .ec-form-input:focus,
.ec-public-site input:focus,
.ec-public-site textarea:focus,
.ec-public-site select:focus {
  border-color: rgba(125, 191, 42, 0.55);
  box-shadow: 0 0 0 3px rgba(125, 191, 42, 0.14);
}

.ec-public-site .ec-scroll-top {
  background: linear-gradient(135deg, var(--ec-brand-green), var(--ec-brand-green-dark)) !important;
  box-shadow: 0 8px 24px rgba(125, 191, 42, 0.35) !important;
}

/* ── Portales grid (portales.html) ── */
.ec-public-site .ec-portales-hero {
  background: linear-gradient(180deg, var(--ec-brand-navy) 0%, #1a2d47 100%);
}

.ec-public-site .ec-portal-access-card:hover {
  border-color: var(--ec-brand-green);
}

.ec-public-site .ec-portal-access-card__icon {
  background: linear-gradient(135deg, var(--ec-brand-navy), #1a2d47);
}

/* ── Legal ── */
.ec-public-site.ec-legal-shell .ec-legal-content h2 {
  color: var(--ec-brand-navy);
  font-family: var(--ec-font-display);
}

.ec-public-site.ec-legal-shell .ec-legal-content a {
  color: var(--ec-brand-green-dark);
}

/* ── Capa premium: sustituir azules genéricos ── */
.ec-public-site .ec-premium-badge,
.ec-public-site .ec-alert-info {
  background: rgba(125, 191, 42, 0.1);
  color: var(--ec-brand-green-dark);
  border-color: rgba(125, 191, 42, 0.25);
}

.ec-public-site .ec-cta-banner {
  background: linear-gradient(135deg, var(--ec-brand-navy) 0%, #1a2d47 100%);
  box-shadow: 0 20px 50px -16px rgba(15, 28, 46, 0.35);
}

.ec-public-site .ec-cta-banner .ec-btn-primary {
  background: var(--ec-brand-green);
}

.ec-public-site .ec-tech-showcase__icon,
.ec-public-site .ec-card-premium__icon {
  background: linear-gradient(135deg, var(--ec-brand-navy), #1a2d47);
  color: var(--ec-brand-green-light);
}

.ec-public-site .ec-insight-card:hover,
.ec-public-site .ec-card-premium:hover {
  border-color: rgba(125, 191, 42, 0.35);
}

.ec-public-site .ec-megamenu-view-all,
.ec-public-site .ec-portal-link {
  color: var(--ec-brand-green);
}

.ec-public-site .ec-header-nav .ec-header-nav-link:focus-visible,
.ec-public-site .ec-header-nav a.ec-header-nav-link:focus-visible {
  outline-color: var(--ec-brand-green);
}

.ec-public-site .ec-nav-dropdown-menu--inline a:hover {
  color: var(--ec-brand-green-dark);
  background: rgba(125, 191, 42, 0.08);
}