/*
 * DANI LORCA — CSS GLOBAL PARA ELEMENTOR
 * =================================================
 * Cómo aplicarlo:
 *   WordPress Admin → Elementor → Kit de Sitio →
 *   Configuración del sitio → CSS Personalizado
 *   → pegar todo este bloque
 *
 * O bien: Apariencia → Personalizar → CSS adicional
 * =================================================
 */

/* ---------- TOKENS ---------- */
:root {
  --e-global-color-primary:   #f43fd9;
  --e-global-color-secondary: #3e1e4d;
  --e-global-color-accent:    #ffca63;
  --e-global-color-text:      #1a1a1a;

  --dl-cream:       #f5f0ea;
  --dl-black:       #000000;
  --dl-magenta:     #f43fd9;
  --dl-yellow:      #ffca63;
  --dl-green:       #aad35a;
  --dl-pink-soft:   #e595b2;
  --dl-purple-dark: #3e1e4d;
  --dl-white:       #ffffff;
  --dl-text:        #1a1a1a;
  --dl-text-light:  #666666;

  --dl-radius:      999px;
  --dl-radius-card: 16px;
  --dl-font-title:  'DM Serif Display', Georgia, serif;
  --dl-font-body:   'AvantGarde BK BT', 'Century Gothic', 'Nunito', sans-serif;
}

/* ---------- FONDO BASE ---------- */
body { background-color: var(--dl-cream) !important; }

/* ---------- TIPOGRAFÍAS ---------- */
body, p, li, td, .elementor-widget-text-editor {
  font-family: var(--dl-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--dl-font-title) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

/* ---------- LINKS ---------- */
a { color: var(--dl-magenta); }
a:hover { opacity: 0.75; }

/* ---------- BOTONES ELEMENTOR ---------- */
.elementor-button {
  font-family: 'Agrandir Narrow', 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 999px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(244, 63, 217, 0.35) !important;
}
.elementor-button-primary,
.elementor-button.elementor-size-md {
  background-color: var(--dl-magenta) !important;
  color: var(--dl-white) !important;
}

/* ---------- SEPARADORES ---------- */
.elementor-divider-separator { border-color: rgba(0,0,0,0.1) !important; }

/* ---------- SECCIÓN HERO ---------- */
.e-con[data-id].dl-hero-section,
.elementor-section.dl-hero-section {
  background-color: var(--dl-cream) !important;
}

/* ---------- FONDO NEGRO (mentorías) ---------- */
.elementor-section.dl-dark-section {
  background-color: var(--dl-black) !important;
}
.dl-dark-section h2,
.dl-dark-section h3 { color: var(--dl-white) !important; }
.dl-dark-section p  { color: rgba(255,255,255,0.7) !important; }

/* ---------- FONDO MAGENTA ---------- */
.elementor-section.dl-magenta-section {
  background-color: var(--dl-magenta) !important;
}
.dl-magenta-section h2,
.dl-magenta-section p { color: var(--dl-white) !important; }

/* ---------- FONDO AMARILLO ---------- */
.elementor-section.dl-yellow-section {
  background-color: var(--dl-yellow) !important;
}

/* ---------- TARJETAS ---------- */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  background: var(--dl-white);
  border-radius: var(--dl-radius-card);
  padding: 36px 28px;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.elementor-widget-image-box:hover .elementor-image-box-wrapper,
.elementor-widget-icon-box:hover  .elementor-icon-box-wrapper {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* ---------- ICONOS ---------- */
.elementor-icon i,
.elementor-icon svg { color: var(--dl-magenta) !important; }

/* ---------- FORMULARIO DE CONTACTO ---------- */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
  border-radius: 10px !important;
  border: 1.5px solid rgba(0,0,0,0.15) !important;
  background-color: var(--dl-cream) !important;
  font-family: var(--dl-font-body) !important;
  font-size: 16px !important;
  padding: 14px 18px !important;
}
.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
  border-color: var(--dl-magenta) !important;
  outline: none !important;
}

/* ---------- NAV HEADER ---------- */
.elementor-nav-menu a {
  font-family: var(--dl-font-body) !important;
  font-size: 15px !important;
  color: var(--dl-black) !important;
}
.elementor-nav-menu .current-menu-item > a,
.elementor-nav-menu a:hover {
  color: var(--dl-magenta) !important;
}

/* ---------- FOOTER ---------- */
.elementor-location-footer {
  background-color: var(--dl-black) !important;
  color: rgba(255,255,255,0.6) !important;
}
.elementor-location-footer h4,
.elementor-location-footer .elementor-heading-title {
  color: var(--dl-white) !important;
  font-size: 13px !important;
}
.elementor-location-footer a { color: rgba(255,255,255,0.55) !important; }
.elementor-location-footer a:hover { color: var(--dl-magenta) !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .elementor-heading-title { font-size: clamp(28px, 8vw, 48px) !important; }
}