/* ============================================================
   VOXLAN — CUSTOM CSS MASTER FILE
   Pega esto completo en:
   Elementor → Site Settings → Custom CSS
   (o Apariencia → Personalizar → CSS adicional)

   Este archivo SOLO contiene lo que Elementor no resuelve bien
   de forma nativa: tokens de color/tipografía como variables,
   el sistema de botones pill, las animaciones, y ajustes finos
   de layout. Los textos, tamaños de letra puntuales y paddings
   de cada sección se controlan desde el propio Elementor usando
   Global Colors / Global Fonts (ver guía principal, Paso 1).
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS DE COLOR (variables CSS)
   Configura también estos mismos valores como Global Colors
   dentro de Elementor (Site Settings → Global Colors) usando
   los mismos nombres para que el equipo los reconozca fácil.
   ------------------------------------------------------------ */
:root{
  --vox-bg:              oklch(98% 0.006 265);   /* ~#F9FAFC */
  --vox-surface:         oklch(95% 0.012 265);   /* ~#EDF0F5 */
  --vox-border:          oklch(90% 0.025 265);   /* ~#DCE1EB */
  --vox-ink:             oklch(16% 0.025 265);   /* ~#12151F */
  --vox-ink-dim:         oklch(45% 0.025 265);   /* ~#5C6273 */
  --vox-dark:            oklch(14% 0.025 265);   /* ~#0E1119 */
  --vox-dark-surface:    oklch(19% 0.025 265);   /* ~#171B26 */
  --vox-dark-border:     oklch(30% 0.025 265);   /* ~#2E3444 */
  --vox-ink-light:       oklch(96% 0.012 265);   /* ~#F0F2F7 */
  --vox-ink-light-dim:   oklch(70% 0.018 265);   /* ~#A2A8B8 */
  --vox-accent:          oklch(62% 0.22 35);     /* ~#EF5A26 */
  --vox-accent-2:        oklch(66% 0.16 65);     /* ~#EB8A45 */
}

/* ------------------------------------------------------------
   2. TIPOGRAFÍA BASE
   Importa las fuentes en Elementor → Site Settings → Fonts
   (o vía Custom Fonts / plugin de Google Fonts) además de esto.
   ------------------------------------------------------------ */
body{
  background: var(--vox-bg);
  color: var(--vox-ink);
  font-family: 'IBM Plex Sans', sans-serif;
}
h1, h2, h3,
.vox-heading{
  font-family: 'Space Grotesk', sans-serif;
}

/* Eyebrow / label (usar como clase CSS en el widget de texto de Elementor) */
.vox-eyebrow{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vox-accent);
}

/* ------------------------------------------------------------
   3. BOTONES PILL
   Aplica estas clases al widget Button de Elementor
   (pestaña Advanced → CSS Classes).
   ------------------------------------------------------------ */
.vox-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px !important;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 28px !important;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
  text-decoration: none !important;
}
.vox-btn:hover{ transform: translateY(-1px); }

.vox-btn-primary{
  background: var(--vox-accent) !important;
  color: var(--vox-ink) !important;
  border: none !important;
}
.vox-btn-primary:hover{ background: var(--vox-accent-2) !important; color: var(--vox-ink) !important; }

.vox-btn-secondary{
  background: transparent !important;
  color: var(--vox-ink) !important;
  border: 1.5px solid var(--vox-ink) !important;
}
.vox-btn-secondary:hover{ border-color: var(--vox-accent) !important; color: var(--vox-accent) !important; }

.vox-btn-navcta{
  background: var(--vox-ink) !important;
  color: var(--vox-bg) !important;
  border: none !important;
  padding: 11px 22px !important;
  font-size: 14px !important;
}
.vox-btn-navcta:hover{ background: var(--vox-dark-surface) !important; }

/* Enlaces globales */
a{ color: var(--vox-accent); }
a:hover{ color: var(--vox-accent-2); }

/* ------------------------------------------------------------
   4. SECCIONES OSCURAS ("puntuación" del diseño)
   Clase para aplicar a un Container/Section de Elementor.
   ------------------------------------------------------------ */
.vox-dark-section{
  background: var(--vox-dark) !important;
  color: var(--vox-ink-light);
}
.vox-dark-section h1, .vox-dark-section h2, .vox-dark-section h3{
  color: var(--vox-ink-light);
}
.vox-dark-section p{ color: var(--vox-ink-light-dim); }
.vox-dark-section .vox-eyebrow{ color: var(--vox-accent); }

.vox-dark-surface-section{
  background: var(--vox-dark-surface) !important;
  color: var(--vox-ink-light);
}

/* Panel de formulario oscuro (contact band) */
.vox-form-panel{
  background: var(--vox-dark) !important;
  border-radius: 20px !important;
  padding: 36px !important;
}
.vox-form-panel label{
  font-size: 13px;
  font-weight: 600;
  color: var(--vox-ink-light-dim);
  margin-bottom: 6px;
  display: block;
}
.vox-form-panel input,
.vox-form-panel textarea,
.vox-form-panel select{
  background: var(--vox-dark-surface) !important;
  border: 1px solid var(--vox-dark-border) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  color: var(--vox-ink-light) !important;
  font-size: 15px !important;
}
.vox-form-panel textarea{ resize: none; }
.vox-form-panel .elementor-button,
.vox-form-panel button[type="submit"]{
  width: 100%;
  background: var(--vox-accent) !important;
  color: var(--vox-ink) !important;
  border-radius: 100px !important;
  padding: 15px 24px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin-top: 6px;
}

/* ------------------------------------------------------------
   5. TARJETAS (surface cards, service rows, result cards)
   ------------------------------------------------------------ */
.vox-card{
  background: var(--vox-surface) !important;
  border-radius: 16px !important;
}
.vox-panel{
  background: var(--vox-surface) !important;
  border-radius: 20px !important;
}

/* ------------------------------------------------------------
   6. BADGE con punto pulsante (hero)
   Estructura HTML sugerida (widget HTML de Elementor):
   <div class="vox-badge"><span class="vox-badge-dot"></span>For growing businesses across the US</div>
   ------------------------------------------------------------ */
.vox-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--vox-border);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vox-ink-dim);
  margin-bottom: 28px;
}
.vox-badge-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vox-accent);
  animation: voxpulse 2s ease-in-out infinite;
}
@keyframes voxpulse{
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ------------------------------------------------------------
   7. MARQUEE DE LOGOS (usado por voxlan-widget-logo-marquee.html)
   ------------------------------------------------------------ */
.vox-marquee-wrap{
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.vox-marquee-track{
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: voxmarquee 22s linear infinite;
}
.vox-marquee-track img{
  width: 140px;
  height: 56px;
  flex: none;
  object-fit: contain;
}
@keyframes voxmarquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   8. TIMELINE (página How We Work)
   ------------------------------------------------------------ */
.vox-timeline-row{
  display: flex;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--vox-border);
}
.vox-timeline-row:last-child{ border-bottom: none; }
.vox-timeline-marker{
  flex: 0 0 110px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--vox-accent);
}

/* ------------------------------------------------------------
   9. ACCESIBILIDAD / MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .vox-marquee-track,
  .vox-badge-dot{
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   10. RESPONSIVE — tamaños de display en mobile
   Los tamaños "normales" los controla Elementor por breakpoint
   de forma nativa (icono de responsive en cada widget de texto).
   Estos clamps son un respaldo si prefieres no tocar cada widget.
   ------------------------------------------------------------ */
.vox-h1-home{ font-size: clamp(36px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.02em; }
.vox-h1-sub{  font-size: clamp(32px, 5vw, 52px); line-height: 1.08; letter-spacing: -0.02em; }
.vox-h2{      font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -0.01em; }

/* ------------------------------------------------------------
   11. TIPOGRAFÍA DEL CONTENIDO DE BLOG (single.php)
   Estiliza automáticamente lo que escribes en el editor de WP.
   ------------------------------------------------------------ */
.vox-entry-content{
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--vox-ink-dim);
}
.vox-entry-content h2{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--vox-ink);
  margin: 40px 0 16px;
}
.vox-entry-content h3{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--vox-ink);
  margin: 32px 0 12px;
}
.vox-entry-content p{ margin: 0 0 20px; }
.vox-entry-content a{ color: var(--vox-accent); font-weight: 600; }
.vox-entry-content ul, .vox-entry-content ol{ margin: 0 0 20px; padding-left: 24px; }
.vox-entry-content li{ margin-bottom: 8px; }
.vox-entry-content img{ max-width: 100%; height: auto; border-radius: 16px; margin: 24px 0; }
.vox-entry-content blockquote{
  border-left: 3px solid var(--vox-accent);
  padding-left: 20px;
  margin: 28px 0;
  font-style: italic;
  color: var(--vox-ink);
}

@media (max-width: 768px){
  .elementor-section.vox-section-padding{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}