/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.2.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
*/


/* =================================================================
   1. DESIGN TOKENS — Variables globales del sistema de marca
   ================================================================= */

:root {

  /* ── Marca / Brand ──────────────────────────── */
  --wl-orange:          #FF5A1F;
  --wl-orange-light:    #FF952C;
  --wl-orange-dark:     #E15200;
  --wl-orange-medio:    #993300;
  --wl-orange-oscuro:   #6D2100;
  --wl-orange-soft:     #FFF4ED;

  --wl-gradient:        linear-gradient(135deg, var(--wl-orange-light) 0%, var(--wl-orange-dark) 100%);
  --wl-gradient-warm:   linear-gradient(135deg, var(--wl-orange-light) 0%, var(--wl-orange-dark) 100%);
  --wl-gradient-soft:   linear-gradient(135deg, rgba(255,149,44,0.12) 0%, rgba(225,82,0,0.06) 100%);

  /* ── Fondos modo claro ──────────────────────── */
  --wl-bg:              #161616;
  --wl-bg-elevated:     #1a1a1a;
  --wl-bg-glass:        rgba(255,255,255,0.04);
  --wl-bg-glass-strong: rgba(255,255,255,0.08);

  /* ── Fondos modo oscuro (para .wl-dark-context) ─ */
  --wl-bg-dark:         #0c0c0d;
  --wl-bg-dark-2:       #131316;
  --wl-surface:         #16161a;
  --wl-surface-2:       #1c1c21;
  --wl-surface-3:       #232329;

  /* ── Texto ──────────────────────────────────── */
  --wl-text-primary:    #FFFFFF;
  --wl-text-secondary:  #B0B0B0;
  --wl-text-muted:      #888888;
  --wl-text-dim:        #666666;
  --wl-text-on-light:   #161616;

  /* Texto modo oscuro */
  --wl-text-dark:       #f5f5f7;
  --wl-text-dark-soft:  rgba(245, 245, 247, 0.74);
  --wl-text-dark-muted: rgba(245, 245, 247, 0.5);
  --wl-text-dark-faint: rgba(245, 245, 247, 0.32);

  /* Alias modo claro (legacy) */
  --wl-text:            #1F2937;
  --wl-text-soft:       #6B7280;

  /* ── Bordes ─────────────────────────────────── */
  --wl-border:            #E5E7EB;
  --wl-border-base:       rgba(255,255,255,0.08);
  --wl-border-soft:       rgba(255,255,255,0.06);
  --wl-border-strong:     rgba(255,255,255,0.16);
  --wl-border-brand:      rgba(255,149,44,0.35);
  --wl-border-brand-soft: rgba(255,149,44,0.15);

  /* ── Glows decorativos (SOLO fondos/orbs, NO texto) ── */
  --wl-glow-brand:       radial-gradient(circle, rgba(255,122,26,0.30) 0%, rgba(255,122,26,0) 65%);
  --wl-glow-violet:      #5C58DD;
  --wl-glow-violet-soft: #7878D6;

  /* ── Sombras ────────────────────────────────── */
  --wl-shadow-btn:       0 8px 24px rgba(225,82,0,0.35);
  --wl-shadow-btn-hover: 0 12px 32px rgba(225,82,0,0.45);
  --wl-shadow-card:      0 4px 14px rgba(0,0,0,0.3);

  /* ── Tipografía ─────────────────────────────── */
  --wl-font-display:    'Inter', system-ui, -apple-system, sans-serif;
  --wl-font-body:       'Inter', system-ui, -apple-system, sans-serif;

  --wl-text-eyebrow:    clamp(0.625rem, 0.7vw, 0.6875rem);
  --wl-text-xs:         clamp(0.6875rem, 0.75vw, 0.75rem);
  --wl-text-sm:         clamp(0.8125rem, 0.85vw, 0.875rem);
  --wl-text-base:       clamp(0.9375rem, 1vw, 1rem);
  --wl-text-lg:         clamp(1rem, 1.1vw, 1.125rem);
  --wl-text-h3:         clamp(1.125rem, 1.5vw, 1.5rem);
  --wl-text-h2:         clamp(1.5rem, 2.2vw, 2.25rem);
  --wl-text-h1:         clamp(2rem, 3.2vw, 3.2rem);

  --wl-weight-light:    300;
  --wl-weight-regular:  400;
  --wl-weight-medium:   500;
  --wl-weight-bold:     700;

  --wl-track-tight:     -0.02em;
  --wl-track-normal:    0;
  --wl-track-wide:      0.2px;
  --wl-track-eyebrow:   1.5px;

  --wl-lh-tight:        1.1;
  --wl-lh-snug:         1.15;
  --wl-lh-normal:       1.4;
  --wl-lh-relaxed:      1.6;

  /* ── Espaciado ──────────────────────────────── */
  --wl-space-xs:        4px;
  --wl-space-sm:        8px;
  --wl-space-md:        12px;
  --wl-space-lg:        16px;
  --wl-space-xl:        24px;
  --wl-space-2xl:       32px;
  --wl-space-3xl:       48px;

  /* ── Radios ─────────────────────────────────── */
  --wl-radius-sm:       6px;
  --wl-radius-md:       10px;
  --wl-radius-lg:       14px;
  --wl-radius-xl:       16px;
  --wl-radius-2xl:      20px;
  --wl-radius-3xl:      28px;
  --wl-radius-pill:     999px;

  /* ── Transiciones ───────────────────────────── */
  --wl-transition-fast: 0.15s ease;
  --wl-transition-base: 0.25s ease;
  --wl-transition-slow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* =================================================================
   2. ANIMACIONES GLOBALES
   ================================================================= */

@keyframes wl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

@keyframes wl-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wl-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}


/* =================================================================
   3. UTILIDADES BASE
   ================================================================= */

.wl-text-gradient {
  background: var(--wl-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.wl-eyebrow {
  color: var(--wl-orange-light);
  font-size: var(--wl-text-eyebrow);
  font-weight: var(--wl-weight-medium);
  letter-spacing: var(--wl-track-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 var(--wl-space-sm);
}


/* =================================================================
   4. CONTEXTO MODO OSCURO
   Aplicar clase .wl-dark-context al Container raíz de la página
   (Contacto, Nosotros, landings) para activar el sistema dark.
   ================================================================= */

.wl-dark-context {
  position: relative;
  background: var(--wl-bg-dark);
  color: var(--wl-text-dark);
  font-family: var(--wl-font-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.wl-dark-context *,
.wl-dark-context *::before,
.wl-dark-context *::after { box-sizing: border-box; }

.wl-dark-context a { color: inherit; text-decoration: none; }
.wl-dark-context img,
.wl-dark-context svg { display: block; }


/* =================================================================
   5. LAYOUT — Footer
   ================================================================= */

/* TODO: añadir clase CSS "wl-footer" al footer en Elementor
   y luego eliminar ".elementor-element-c9b0c98" de los selectores */
.elementor-element-c9b0c98,
.wl-footer {
  position: relative;
  background-color: #0F0F0F !important;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(225, 82, 0, 0.12) 0%, rgba(225, 82, 0, 0) 70%) !important;
  border-top: 1px solid rgba(255, 149, 44, 0.12);
  overflow: hidden;
}

.elementor-element-c9b0c98::before,
.wl-footer::before {
  content: "";
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 88, 221, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.elementor-element-c9b0c98 .e-con-inner,
.wl-footer .e-con-inner {
  position: relative;
  z-index: 1;
}


/* =================================================================
   6. COMPONENTES — CURSOS (Shortcodes ACF)
   ================================================================= */

/* ── [curso_incluye] ────────────────────────── */
.curso-incluye-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.curso-incluye-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--wl-text);
  font-size: 15px;
  line-height: 1.5;
}

.curso-incluye-icon {
  color: var(--wl-orange);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── [curso_objetivos] ──────────────────────── */
.curso-objetivos-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 16px 24px;
}

.curso-objetivo-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--wl-text);
  font-size: 15px;
  line-height: 1.5;
}

.curso-objetivo-icon {
  color: var(--wl-orange);
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .curso-objetivos-grid {
    grid-template-columns: 1fr;
  }
}

/* ── [curso_requisitos] ─────────────────────── */
.curso-requisitos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.curso-requisito-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--wl-text);
  font-size: 15px;
  line-height: 1.5;
}

.curso-requisito-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--wl-orange);
  flex-shrink: 0;
}

/* ── [curso_modulos] ────────────────────────── */
.curso-modulos-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.curso-modulo {
  border: 1px solid var(--wl-border);
  border-radius: 12px;
  padding: 20px 24px;
  background: #fff;
  transition: all .2s ease;
}

.curso-modulo:hover {
  border-color: var(--wl-orange);
  box-shadow: 0 4px 16px rgba(255, 90, 31, .08);
}

.curso-modulo-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.curso-modulo-numero {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--wl-orange);
  background: var(--wl-orange-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

.curso-modulo-titulo {
  font-size: 18px;
  font-weight: 600;
  color: var(--wl-text);
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.curso-modulo-duracion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--wl-text-soft);
}

.curso-modulo-descripcion {
  color: var(--wl-text-soft);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
}

.curso-modulo-descripcion p { margin: 0 0 8px 0; }
.curso-modulo-descripcion p:last-child { margin-bottom: 0; }

/* ── [curso_horario_meta] ───────────────────── */
.curso-horarios-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.curso-horarios-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--wl-text);
  line-height: 1.5;
}

.curso-horarios-list li::before {
  content: "•";
  color: var(--wl-orange);
  font-weight: bold;
  flex-shrink: 0;
}

.curso-horarios-list strong { font-weight: 600; }


/* =================================================================
   7. COMPONENTES — Product Cards (carrusel de cursos)
   ================================================================= */

.wl-product-card {
  height: 100%;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  cursor: pointer;
}

.wl-product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 82, 0, 0.4) !important;
  box-shadow:
    0 12px 30px rgba(225, 82, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

.wl-product-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.wl-product-card .elementor-widget-theme-post-title h4 {
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

.wl-product-card .elementor-widget-theme-post-title h4 a {
  transition: color 0.3s ease;
}

.wl-product-card:hover .elementor-widget-theme-post-title h4 a {
  color: var(--e-global-color-primary);
}

.wl-product-card .e-divider-base { margin-top: auto; }

.wl-product-card .elementor-widget-theme-post-featured-image {
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.wl-product-card .elementor-widget-theme-post-featured-image img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.wl-product-card:hover .elementor-widget-theme-post-featured-image img {
  transform: scale(1.05);
  opacity: 1 !important;
}

.elementor-widget-loop-carousel .swiper-slide { height: auto; }
.elementor-widget-loop-carousel .swiper-slide > .elementor-element { height: 100%; }


/* =================================================================
   8. OVERRIDES — WooCommerce / Elementor Pro
   ================================================================= */

/* ── Mini-cart de Elementor (botones del footer) ── */
.elementor-menu-cart__footer-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.elementor-menu-cart__footer-buttons .elementor-button {
  width: 100%;
  padding: 12px 24px;
  border-radius: var(--wl-radius-pill);
  font-weight: 700;
  text-align: center;
  text-transform: none;
  transition: all 0.3s ease;
  border: 2px solid var(--wl-orange);
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background-color: var(--wl-orange);
  color: #FFFFFF;
}

.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  background-color: var(--wl-orange-dark);
  border-color: var(--wl-orange-dark);
}

.elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  background-color: transparent;
  color: #000000;
  border-color: #000000;
}

.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
  background-color: #000000;
  color: #FFFFFF;
}


/* =================================================================
   9. PÁGINA DE CONTACTO
   Migrado desde widget HTML al CSS global. Requiere wrapper
   .wl-dark-context en el Container raíz.
   ================================================================= */

/* ── Atmósfera (orbs decorativos de fondo) ──── */
.wl-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.wl-atmosphere::before,
.wl-atmosphere::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.45;
}

.wl-atmosphere::before {
  width: 720px; height: 720px;
  background: radial-gradient(circle at 30% 30%, var(--wl-orange-dark) 0%, transparent 60%);
  top: -240px; right: -200px;
}

.wl-atmosphere::after {
  width: 640px; height: 640px;
  background: radial-gradient(circle at 70% 70%, var(--wl-glow-violet) 0%, transparent 60%);
  bottom: -200px; left: -200px;
  opacity: 0.32;
}

.wl-page { position: relative; z-index: 1; }

.wl-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Section tag (chip "Contacto comercial · B2B") ── */
.wl-section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 14px 0 12px;
  border-radius: var(--wl-radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--wl-border-base);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wl-text-dark-soft);
}

.wl-section-tag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wl-orange);
  box-shadow: 0 0 14px var(--wl-orange);
}

/* ── HERO ───────────────────────────────────── */
.wl-hero { padding: 96px 0 56px; position: relative; }

.wl-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: end;
  margin-top: 28px;
}

.wl-h1 {
  font-size: clamp(48px, 6.2vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}

/* Gradiente del título: 100% naranja (sin violeta) */
.wl-h1 .wl-gradient {
  background: var(--wl-gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wl-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 8px;
}

.wl-hero-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--wl-text-dark-soft);
  max-width: 44ch;
  margin: 0;
  font-weight: 400;
}

.wl-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--wl-border-base);
  border-radius: var(--wl-radius-lg);
  overflow: hidden;
  border: 1px solid var(--wl-border-base);
}

.wl-stat { padding: 18px 16px; background: rgba(255,255,255,0.015); }

.wl-stat-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wl-text-dark);
}

.wl-stat-value sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--wl-text-dark-muted);
  vertical-align: baseline;
  margin-left: 2px;
}

.wl-stat-label {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--wl-text-dark-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Trust strip ────────────────────────────── */
.wl-trust {
  margin-top: 56px;
  border-top: 1px solid var(--wl-border-base);
  border-bottom: 1px solid var(--wl-border-base);
  padding: 22px 0;
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}

.wl-trust-label {
  font-size: 11.5px;
  color: var(--wl-text-dark-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wl-trust-items {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}

.wl-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--wl-text-dark-soft);
  font-weight: 500;
}

.wl-trust-chip svg {
  width: 16px;
  height: 16px;
  color: var(--wl-orange-light);
}

/* ── Section genérica ───────────────────────── */
.wl-section { padding: 96px 0; }

.wl-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.wl-section-title {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 12px 0 0;
  text-wrap: balance;
  max-width: 18ch;
}

.wl-section-sub {
  margin: 16px 0 0;
  font-size: 16px;
  color: var(--wl-text-dark-soft);
  line-height: 1.55;
  max-width: 44ch;
}

/* ── Form card ──────────────────────────────── */
.wl-form-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 24px;
  align-items: stretch;
}

.wl-form-card {
  position: relative;
  background: var(--wl-surface);
  border: 1px solid var(--wl-border-base);
  border-radius: var(--wl-radius-3xl);
  padding: 40px 40px 32px;
  overflow: hidden;
}

.wl-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, rgba(225,82,0,0.10) 0%, transparent 60%);
  pointer-events: none;
}

.wl-form-card-inner { position: relative; }

.wl-form-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--wl-border-base);
}

.wl-form-card-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.wl-form-card-desc {
  font-size: 13.5px;
  color: var(--wl-text-dark-muted);
  margin: 0;
  line-height: 1.5;
  max-width: 42ch;
}

.wl-form-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wl-text-dark-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--wl-border-base);
  padding: 6px 10px;
  border-radius: var(--wl-radius-pill);
  white-space: nowrap;
}

/* ── Form fields ────────────────────────────────
   Selectores compatibles con: inputs HTML manuales (.wl-input)
   Y Elementor Pro Form (.elementor-field-textual)
*/
.wl-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.wl-field { display: flex; flex-direction: column; gap: 8px; }
.wl-field.col-2 { grid-column: span 2; }

.wl-label,
.wl-form-card .elementor-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--wl-text-dark-soft);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wl-label .req,
.wl-form-card .elementor-mark-required .elementor-field-label::after {
  color: var(--wl-orange-light);
  font-weight: 700;
}

.wl-input,
.wl-textarea,
.wl-form-card .elementor-field-textual {
  appearance: none;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--wl-border-base);
  color: var(--wl-text-dark);
  font: inherit;
  font-size: 15px;
  padding: 14px;
  border-radius: 12px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.wl-input::placeholder,
.wl-textarea::placeholder,
.wl-form-card .elementor-field-textual::placeholder {
  color: var(--wl-text-dark-faint);
}

.wl-input:hover,
.wl-textarea:hover,
.wl-form-card .elementor-field-textual:hover {
  border-color: var(--wl-border-strong);
}

.wl-input:focus,
.wl-textarea:focus,
.wl-form-card .elementor-field-textual:focus {
  border-color: var(--wl-orange);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 0 0 4px rgba(225,82,0,0.14);
}

.wl-textarea,
.wl-form-card textarea.elementor-field-textual {
  min-height: 130px;
  resize: vertical;
  line-height: 1.5;
}

/* Form footer (consent + submit) */
.wl-form-footer {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
}

.wl-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--wl-text-dark-muted);
  max-width: 38ch;
  line-height: 1.5;
}

.wl-consent input,
.wl-form-card .elementor-field-type-acceptance input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--wl-border-strong);
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

.wl-consent input:checked,
.wl-form-card .elementor-field-type-acceptance input[type="checkbox"]:checked {
  background: var(--wl-orange);
  border-color: var(--wl-orange);
}

.wl-consent input:checked::after,
.wl-form-card .elementor-field-type-acceptance input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wl-consent a {
  color: var(--wl-text-dark-soft);
  text-decoration: underline;
  text-decoration-color: var(--wl-border-strong);
  text-underline-offset: 3px;
}

/* ── Botones del contexto dark ──────────────── */
.wl-btn,
.wl-form-card .elementor-button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px;
  border-radius: var(--wl-radius-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s, filter 0.15s;
}

.wl-btn-primary,
.wl-form-card .elementor-button[type="submit"] {
  background: var(--wl-gradient-warm);
  color: white;
  box-shadow: 0 12px 30px -10px rgba(225,82,0,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
}

.wl-btn-primary:hover,
.wl-form-card .elementor-button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.wl-btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--wl-text-dark);
  border: 1px solid var(--wl-border-strong);
}

.wl-btn-ghost:hover { background: rgba(255,255,255,0.08); }

/* ── Channels (WhatsApp/Central/Correo) ─────── */
.wl-channels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wl-channel {
  position: relative;
  background: var(--wl-surface);
  border: 1px solid var(--wl-border-base);
  border-radius: var(--wl-radius-2xl);
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}

.wl-channel:hover {
  border-color: var(--wl-border-strong);
  transform: translateY(-2px);
}

.wl-channel-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--wl-border-base);
  color: var(--wl-text-dark);
}

.wl-channel-icon svg { width: 20px; height: 20px; }

.wl-channel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wl-channel-label {
  font-size: 11.5px;
  color: var(--wl-text-dark-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wl-channel-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--wl-text-dark);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-channel-arrow {
  color: var(--wl-text-dark-faint);
  transition: transform 0.2s, color 0.2s;
  width: 18px;
  height: 18px;
}

.wl-channel:hover .wl-channel-arrow {
  color: var(--wl-text-dark);
  transform: translate(2px, -2px);
}

.wl-channel.is-primary {
  background: linear-gradient(135deg, rgba(225,82,0,0.20) 0%, rgba(225,82,0,0.06) 60%), var(--wl-surface);
  border-color: rgba(225,82,0,0.35);
}

.wl-channel.is-primary .wl-channel-icon {
  background: var(--wl-gradient-warm);
  border-color: transparent;
  color: white;
  box-shadow: 0 10px 24px -10px rgba(225,82,0,0.6);
}

/* ── Hours card ─────────────────────────────── */
.wl-hours-card {
  background: var(--wl-surface);
  border: 1px solid var(--wl-border-base);
  border-radius: var(--wl-radius-2xl);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wl-hours-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wl-hours-title {
  font-size: 13px;
  color: var(--wl-text-dark-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wl-hours-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #5be58a;
}

.wl-hours-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5be58a;
  box-shadow: 0 0 12px #5be58a;
}

.wl-hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.wl-hours-row .day { color: var(--wl-text-dark-soft); }
.wl-hours-row .time { color: var(--wl-text-dark); font-weight: 500; }
.wl-hours-row.is-closed .time { color: var(--wl-text-dark-faint); }

/* ── Socials ────────────────────────────────── */
.wl-socials {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.wl-social {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--wl-border-base);
  color: var(--wl-text-dark-soft);
  transition: all 0.15s;
}

.wl-social:hover {
  background: var(--wl-orange);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
}

.wl-social svg { width: 18px; height: 18px; }

/* ── Map section ────────────────────────────── */
.wl-map-section { padding: 24px 0 96px; }

.wl-map-wrap {
  position: relative;
  border-radius: var(--wl-radius-3xl);
  overflow: hidden;
  border: 1px solid var(--wl-border-base);
  background: var(--wl-surface);
  min-height: 460px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
}

.wl-map-info {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-right: 1px solid var(--wl-border-base);
  background: linear-gradient(180deg, var(--wl-surface) 0%, var(--wl-surface-2) 100%);
}

.wl-map-tag {
  font-size: 11.5px;
  color: var(--wl-text-dark-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wl-map-title {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 700;
}

.wl-map-address {
  font-size: 15px;
  line-height: 1.5;
  color: var(--wl-text-dark-soft);
  margin: 0;
}

.wl-map-address strong {
  color: var(--wl-text-dark);
  font-weight: 600;
}

.wl-map-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--wl-border-base);
}

.wl-map-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14px;
}

.wl-map-row svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--wl-orange-light);
}

.wl-map-row .label {
  font-size: 11.5px;
  color: var(--wl-text-dark-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.wl-map-row .value { color: var(--wl-text-dark); }

.wl-map-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--wl-orange-light);
  padding: 12px 18px;
  border-radius: var(--wl-radius-pill);
  border: 1px solid var(--wl-border-brand);
  background: rgba(255,149,44,0.08);
  transition: all 0.15s;
}

.wl-map-cta:hover { background: rgba(255,149,44,0.16); }

.wl-map-canvas {
  position: relative;
  background: #0a0a0c;
  min-height: 460px;
  overflow: hidden;
}

.wl-map-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(0.92) saturate(0.55);
}

.wl-map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 50%, transparent 30%, rgba(12,12,13,0.55) 100%),
    linear-gradient(90deg, rgba(12,12,13,0.55) 0%, transparent 25%);
}

.wl-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.wl-pin-card {
  background: var(--wl-text-dark);
  color: var(--wl-bg-dark);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--wl-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,0.6);
  white-space: nowrap;
}

.wl-pin-card::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wl-orange);
  box-shadow: 0 0 10px var(--wl-orange);
}

.wl-pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wl-orange);
  position: relative;
  box-shadow: 0 0 0 8px rgba(225,82,0,0.18), 0 0 24px var(--wl-orange);
}

.wl-pin-dot::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: white;
}

/* ── Sedes ──────────────────────────────────── */
.wl-sedes {
  margin-top: 64px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  align-items: center;
  padding: 32px 40px;
  background: var(--wl-surface);
  border: 1px solid var(--wl-border-base);
  border-radius: var(--wl-radius-3xl);
}

.wl-sedes-head .label {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wl-text-dark-faint);
}

.wl-sedes-head .title {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.wl-sedes-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.wl-sede {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wl-sede-flag {
  width: 28px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.wl-sede-flag svg {
  width: 100%;
  height: 100%;
}

.wl-sede-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--wl-text-dark);
  margin-top: 6px;
}

.wl-sede-role {
  font-size: 11px;
  color: var(--wl-text-dark-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wl-sede.is-hq .wl-sede-role {
  color: var(--wl-orange-light);
}

/* ── FAQ ────────────────────────────────────── */
.wl-faq-section { padding: 32px 0 96px; }

.wl-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}

.wl-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wl-faq-item {
  border: 1px solid var(--wl-border-base);
  border-radius: var(--wl-radius-lg);
  background: var(--wl-surface);
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}

.wl-faq-item.is-open,
.wl-faq-item.elementor-active {
  border-color: var(--wl-border-brand);
  background: linear-gradient(180deg, rgba(255,149,44,0.06) 0%, var(--wl-surface) 60%);
}

.wl-faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  background: transparent;
  border: 0;
  color: var(--wl-text-dark);
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  line-height: 1.4;
}

.wl-faq-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--wl-border-base);
  transition: transform 0.2s, background 0.2s;
  flex-shrink: 0;
}

.wl-faq-item.is-open .wl-faq-toggle,
.wl-faq-item.elementor-active .wl-faq-toggle {
  transform: rotate(45deg);
  background: var(--wl-orange);
  border-color: transparent;
}

.wl-faq-toggle svg { width: 14px; height: 14px; }

.wl-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.wl-faq-item.is-open .wl-faq-a { max-height: 240px; }

.wl-faq-a-inner {
  padding: 0 26px 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--wl-text-dark-soft);
  max-width: 60ch;
}

/* ── Responsive (Contacto) ──────────────────── */
@media (max-width: 1024px) {
  .wl-hero-grid,
  .wl-form-grid,
  .wl-faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .wl-map-wrap { grid-template-columns: 1fr; }
  .wl-map-info {
    border-right: 0;
    border-bottom: 1px solid var(--wl-border-base);
  }
  .wl-sedes { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 720px) {
  .wl-container { padding: 0 20px; }
  .wl-section { padding: 64px 0; }
  .wl-hero { padding: 56px 0 32px; }
  .wl-form-card { padding: 28px 22px 24px; }
  .wl-form { grid-template-columns: 1fr; }
  .wl-field.col-2 { grid-column: span 1; }
  .wl-form-footer {
    grid-column: span 1;
    flex-direction: column;
    align-items: stretch;
  }
  .wl-sedes-list { grid-template-columns: repeat(2, 1fr); }
  .wl-hero-stats { grid-template-columns: 1fr; }
}