/* ============================================================
   ELITELECTRONIC · Theme CSS para Elementor
   ============================================================
   Pegar en: Elementor → Site Settings → Custom CSS
   (o WordPress Customizer → Additional CSS, o en el
   plugin "Simple Custom CSS and JS")
   ============================================================ */

/* -----------------------------------------
   1. FUENTES · Cargar desde Google Fonts
   ----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* -----------------------------------------
   2. VARIABLES GLOBALES DE MARCA
   ----------------------------------------- */
:root {
  /* Colores primarios */
  --ee-navy-900:  #00365f;  /* Primary — botones, CTAs, headings dark */
  --ee-navy-700:  #1f4d85;
  --ee-navy-600:  #3065af;  /* Hover / links */
  --ee-navy-300:  #9fb8d4;
  --ee-navy-100:  #dae4f2;
  --ee-navy-050:  #eef3f9;  /* Tiles, fondos suaves */

  /* Ink (oscuros) */
  --ee-ink:       #181a34;  /* Texto principal, dark mode */
  --ee-ink-soft:  #2a2d50;

  /* Accent — amber/dorado */
  --ee-amber-500: #f8ae54;  /* CTA destacado, badges */
  --ee-amber-400: #fabf78;
  --ee-amber-300: #fccb94;  /* Hover, fondos cálidos */
  --ee-amber-100: #fff3df;

  /* Neutrales */
  --ee-bg:        #fafaf7;  /* Fondo de página */
  --ee-surface:   #ffffff;  /* Cards, inputs */
  --ee-border:    #e6e4dc;  /* Separadores */
  --ee-muted:     #5a5e75;  /* Texto secundario */
  --ee-fg-faint: #9599ac;

  /* Gradiente de marca */
  --ee-gradient-hero:
    radial-gradient(ellipse 80% 60% at 80% 10%, rgba(248,174,84,0.35), transparent 60%),
    radial-gradient(ellipse 70% 80% at 10% 90%, rgba(48,101,175,0.45), transparent 60%),
    linear-gradient(135deg, #00365f 0%, #181a34 100%);

  /* Sombras */
  --ee-shadow-sm: 0 2px 6px rgba(24,26,52,0.06);
  --ee-shadow-md: 0 8px 20px rgba(24,26,52,0.08);
  --ee-shadow-lg: 0 20px 40px -12px rgba(0,54,95,0.18);

  /* Radios */
  --ee-radius-sm: 6px;
  --ee-radius-md: 10px;
  --ee-radius-lg: 16px;
  --ee-radius-xl: 24px;
  --ee-radius-pill: 9999px;

  /* Tipografía — familias */
  --ee-font-display: 'Unbounded', system-ui, sans-serif;
  --ee-font-body:    'Space Grotesk', system-ui, sans-serif;
  --ee-font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* -----------------------------------------
   3. TIPOGRAFÍA BASE
   ----------------------------------------- */
body {
  font-family: var(--ee-font-body);
  color: var(--ee-ink);
  background: var(--ee-bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--ee-font-display) !important;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ee-ink);
}

h1, .ee-h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.035em; }
h2, .ee-h2 { font-size: clamp(2rem, 3.5vw, 3rem); letter-spacing: -0.03em; }
h3, .ee-h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -0.02em; }
h4, .ee-h4 { font-size: 1.25rem; }

/* -----------------------------------------
   4. EYEBROW · texto mono uppercase
   ----------------------------------------- */
.ee-eyebrow {
  font-family: var(--ee-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ee-muted);
}

/* -----------------------------------------
   5. BOTONES · Sobrescribe botones Elementor
   ----------------------------------------- */
.elementor-button,
.ee-btn {
  font-family: var(--ee-font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 14px 28px;
  border-radius: var(--ee-radius-pill);
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Primario · navy sólido */
.elementor-button.elementor-button-primary,
.ee-btn-primary {
  background: var(--ee-navy-900);
  color: #fff;
}
.elementor-button.elementor-button-primary:hover,
.ee-btn-primary:hover {
  background: var(--ee-ink);
  transform: translateY(-1px);
  box-shadow: var(--ee-shadow-md);
}

/* Accent · amber */
.ee-btn-accent {
  background: var(--ee-amber-500);
  color: var(--ee-ink);
}
.ee-btn-accent:hover {
  background: var(--ee-amber-400);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(248,174,84,0.5);
}

/* Outline · navy */
.ee-btn-outline {
  background: transparent;
  color: var(--ee-navy-900);
  border: 1px solid var(--ee-border);
}
.ee-btn-outline:hover {
  border-color: var(--ee-navy-900);
  background: var(--ee-navy-050);
}

/* WhatsApp button */
.ee-btn-whatsapp {
  background: #25D366;
  color: #fff;
}
.ee-btn-whatsapp:hover {
  background: #1fb357;
  box-shadow: 0 10px 24px -8px rgba(37,211,102,0.5);
}

/* -----------------------------------------
   6. CARDS
   ----------------------------------------- */
.ee-card {
  background: var(--ee-surface);
  border: 1px solid var(--ee-border);
  border-radius: var(--ee-radius-lg);
  padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ee-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ee-shadow-lg);
}

/* Card dark (ink) */
.ee-card--dark {
  background: var(--ee-ink);
  color: #fff;
  border-color: var(--ee-ink);
}
.ee-card--dark h1, .ee-card--dark h2, .ee-card--dark h3 { color: #fff; }

/* Card amber */
.ee-card--accent {
  background: var(--ee-amber-500);
  color: var(--ee-ink);
  border-color: var(--ee-amber-500);
}

/* -----------------------------------------
   7. BADGES / PILLS
   ----------------------------------------- */
.ee-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--ee-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--ee-radius-pill);
  border: 1px solid var(--ee-border);
  background: var(--ee-surface);
  color: var(--ee-muted);
}
.ee-badge--accent  { background: var(--ee-amber-100); border-color: var(--ee-amber-300); color: #7a4b10; }
.ee-badge--success { background: #e8f6ee; border-color: #bde4c9; color: #1e6a3b; }
.ee-badge--dark    { background: var(--ee-ink); color: #fff; border-color: var(--ee-ink); }

/* -----------------------------------------
   8. WOOCOMMERCE · Product cards
   ----------------------------------------- */
.woocommerce ul.products li.product,
.elementor-widget-woocommerce-products .product {
  border: 1px solid var(--ee-border);
  border-radius: var(--ee-radius-lg);
  background: var(--ee-surface);
  padding: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--ee-shadow-lg);
  border-color: var(--ee-navy-300);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ee-font-body) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--ee-ink) !important;
  letter-spacing: -0.01em !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  font-family: var(--ee-font-display);
  color: var(--ee-navy-900);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.woocommerce span.onsale {
  background: var(--ee-amber-500);
  color: var(--ee-ink);
  font-family: var(--ee-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  border-radius: var(--ee-radius-pill);
  padding: 4px 10px;
}

/* -----------------------------------------
   9. FORMULARIOS
   ----------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], textarea, select {
  font-family: var(--ee-font-body);
  background: var(--ee-surface);
  border: 1px solid var(--ee-border);
  border-radius: var(--ee-radius-md);
  padding: 12px 16px;
  font-size: 15px;
  color: var(--ee-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ee-navy-600);
  box-shadow: 0 0 0 3px rgba(48,101,175,0.12);
}

/* -----------------------------------------
   10. HEADER · Barra de anuncios y navegación
   ----------------------------------------- */
.ee-announcement-bar {
  background: var(--ee-ink);
  color: #fff;
  font-family: var(--ee-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  text-align: center;
}
.ee-announcement-bar a { color: var(--ee-amber-300); text-decoration: none; }

/* -----------------------------------------
   11. HERO · Gradiente oficial
   ----------------------------------------- */
.ee-hero {
  background: var(--ee-gradient-hero);
  color: #fff;
  padding: clamp(64px, 10vw, 128px) 32px;
  border-radius: var(--ee-radius-xl);
  position: relative;
  overflow: hidden;
}
.ee-hero h1 { color: #fff; }
.ee-hero .ee-eyebrow { color: var(--ee-amber-300); }

/* Gradient text (para última línea del H1) */
.ee-gradient-text {
  background: linear-gradient(135deg, var(--ee-amber-300), var(--ee-amber-500) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -----------------------------------------
   12. WHATSAPP FLOATING · botón flotante
   ----------------------------------------- */
.ee-whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,0.6);
  z-index: 999;
  transition: transform .2s ease;
}
.ee-whatsapp-fab:hover { transform: scale(1.08); }

/* -----------------------------------------
   13. FOOTER
   ----------------------------------------- */
.ee-footer {
  background: var(--ee-ink);
  color: #9b9eb0;
  padding: 64px 0 32px;
}
.ee-footer h4 {
  color: #fff;
  font-family: var(--ee-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ee-footer a { color: #c5c8d6; text-decoration: none; transition: color .15s ease; }
.ee-footer a:hover { color: var(--ee-amber-300); }

/* -----------------------------------------
   14. UTILIDADES
   ----------------------------------------- */
.ee-container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.ee-section   { padding: clamp(64px, 8vw, 96px) 0; }
.ee-divider   { height: 1px; background: var(--ee-border); margin: 48px 0; }

/* Scrollbar fino */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ee-bg); }
::-webkit-scrollbar-thumb { background: var(--ee-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ee-navy-300); }

/* Selección */
::selection { background: var(--ee-amber-300); color: var(--ee-ink); }