/*
 * SegmentaAds Footer — Estilos del widget Elementor
 * v2.0.0
 *
 * Sistema de variables CSS centralizadas:
 *   --bg          color de fondo
 *   --text        color del texto principal (datos: tel, email, dirección, horario)
 *   --text-soft   color del texto secundario (etiquetas, claim, copyright, legal)
 *   --accent      color de acento (línea superior, halo, hover)
 *   --border      color de bordes y líneas separadoras
 *
 * 5 TEMAS PREMIUM DIFERENCIADOS:
 *   .sa-footer-theme-midnight  Navy oscuro corporativo (por defecto)
 *   .sa-footer-theme-obsidian  Negro premium estilo SaaS (Apple/Stripe)
 *   .sa-footer-theme-paper     Blanco editorial cálido
 *   .sa-footer-theme-cream     Crema vintage con dorado
 *   .sa-footer-theme-slate     Gris pizarra moderno con cyan
 */

/* ─────────────────────────────────────────────────────
   FULL-WIDTH ESCAPE
───────────────────────────────────────────────────── */
.elementor-widget-segmentaads_footer,
.elementor-widget-segmentaads_footer > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.elementor-section:has(.elementor-widget-segmentaads_footer),
.elementor-container:has(.elementor-widget-segmentaads_footer),
.elementor-column:has(.elementor-widget-segmentaads_footer),
.elementor-widget-wrap:has(.elementor-widget-segmentaads_footer),
.elementor-row:has(.elementor-widget-segmentaads_footer),
.e-con:has(.elementor-widget-segmentaads_footer),
.e-con-inner:has(.elementor-widget-segmentaads_footer),
.e-con-full:has(.elementor-widget-segmentaads_footer) {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
/* (3) Sacar el .sa-footer del flujo restringido del padre.
   Técnica: el footer adopta width 100% pero el wrapper padre se "abre" lateralmente
   con un margin negativo dinámico calculado en JavaScript (ver más abajo en el
   plugin) o, como fallback CSS, usamos un negative margin amplio + max-width
   controlado en body para evitar el overflow horizontal. */
.elementor-widget-segmentaads_footer .sa-footer {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Anulamos cualquier max-width en los padres directos del widget cuando contienen
   el footer, para que ocupe el 100% real disponible */
.elementor-widget-segmentaads_footer .sa-footer-in {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

/* Prevenir scroll horizontal global por si acaso */
body:has(.elementor-widget-segmentaads_footer) {
  overflow-x: clip;
}
@supports not selector(:has(*)) {
  .elementor-widget-segmentaads_footer .sa-footer { margin-top: -1px; }
}

/* ─────────────────────────────────────────────────────
   RESET MÍNIMO scopeado
───────────────────────────────────────────────────── */
.sa-footer,
.sa-footer *,
.sa-footer *::before,
.sa-footer *::after {
  box-sizing: border-box;
}
.sa-footer h1, .sa-footer h2, .sa-footer h3, .sa-footer h4,
.sa-footer p, .sa-footer ul, .sa-footer li {
  margin: 0;
  padding: 0;
}
.sa-footer ul { list-style: none; }

/* ══════════════════════════════════════════════════════
   5 TEMAS PREMIUM
══════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TEMA 1: MIDNIGHT — Navy oscuro corporativo (default)
   Tono profesional, financiero, identidad SegmentaAds
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sa-footer,
.sa-footer-theme-midnight {
  --bg:        #011525;
  --text:      #c4dae5;
  --text-soft: #6b8a9a;
  --accent:    #4a9eff;
  --border:    #1a2f3f;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TEMA 2: OBSIDIAN — Negro premium SaaS
   Estética Apple / Stripe / Linear. Sobrio, técnico.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sa-footer-theme-obsidian {
  --bg:        #0a0e14;
  --text:      #e8eaed;
  --text-soft: #6e7681;
  --accent:    #58a6ff;
  --border:    #21262d;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TEMA 3: PAPER — Blanco editorial cálido
   Para webs con fondos oscuros que necesitan contraste claro.
   Tipografía navy sobre papel hueso. Vibe periódico.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sa-footer-theme-paper {
  --bg:        #f8f7f4;
  --text:      #1a1a1a;
  --text-soft: #6e6e6e;
  --accent:    #0057b8;
  --border:    #e5e2dc;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TEMA 4: CREAM — Crema vintage con dorado
   Lujo cálido. Editorial. Sectores premium: vino,
   hostelería, joyería, real estate alto standing.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sa-footer-theme-cream {
  --bg:        #f5ede0;
  --text:      #2c2417;
  --text-soft: #8a7960;
  --accent:    #c4985a;
  --border:    #e8ddc7;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TEMA 5: SLATE — Gris pizarra moderno con cyan
   Tech moderno, cyber, contemporáneo.
   Alternativa al navy: más neutro y atemporal.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sa-footer-theme-slate {
  --bg:        #1c2025;
  --text:      #d8dee4;
  --text-soft: #8b95a1;
  --accent:    #7ac0d6;
  --border:    #2a2f36;
}

/* ══════════════════════════════════════════════════════
   FOOTER — estilos que usan las variables
══════════════════════════════════════════════════════ */
.sa-footer {
  --f:       'Helvetica Neue', Helvetica, Arial, sans-serif;
  --max:     1160px;
  --pad:     clamp(1.5rem, 5vw, 3.5rem);

  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--f);
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--pad) 0;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}

/* Línea decorativa superior con degradado del color de acento */
.sa-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 140px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
/* Halo radial decorativo con tinte del acento */
.sa-footer::after {
  content: '';
  position: absolute;
  bottom: -50%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%);
  pointer-events: none;
}

.sa-footer-in {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ─── BLOQUE PRINCIPAL ─── */
.sa-footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}

/* Columna marca */
.sa-footer-brand .sa-logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 1.5rem;
  line-height: 0;
}
.sa-footer-brand .sa-logo img {
  width: auto;
  display: block;
  opacity: .92;
  transition: opacity .2s;
  max-width: 100%;
}
.sa-footer-brand .sa-logo:hover img { opacity: 1; }

.sa-footer-brand p {
  font-size: .82rem;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 280px;
}

/* Columnas de contacto */
.sa-footer-col h4 {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 1.1rem;
}
.sa-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.sa-footer-col ul li {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--text);
}
.sa-footer-col ul li a {
  color: var(--text);
  text-decoration: none;
  transition: color .2s;
}
.sa-footer-col ul li a:hover { color: var(--accent); }
.sa-footer-col ul li.sa-multi {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

/* ─── BLOQUE INFERIOR ─── */
.sa-footer-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.75rem 0 2rem;
}
.sa-footer-copy {
  font-size: .74rem;
  color: var(--text-soft);
  letter-spacing: .01em;
}
.sa-footer-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.sa-footer-legal a {
  font-size: .74rem;
  color: var(--text-soft);
  text-decoration: none;
  transition: color .2s;
}
.sa-footer-legal a:hover { color: var(--accent); }

/* Redes sociales */
.sa-footer-social {
  display: flex;
  gap: .5rem;
  margin-top: 1.5rem;
}
.sa-footer-social a {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid; place-items: center;
  text-decoration: none;
  transition: all .2s;
}
.sa-footer-social a svg {
  width: 14px; height: 14px;
  fill: var(--text-soft);
  transition: fill .2s;
}
.sa-footer-social a:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.sa-footer-social a:hover svg { fill: var(--accent); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */

/* ─── TABLET ─── */
@media (max-width: 1024px) and (min-width: 821px) {
  .sa-footer { padding-top: clamp(3rem, 6vw, 4.5rem); }
  .sa-footer-top {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
    padding-bottom: 2.75rem;
  }
  .sa-footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
  }
}

/* ─── MÓVIL (incluye iPhone Plus/Pro Max y todos los móviles modernos) ─── */
@media (max-width: 820px) {
  .sa-footer {
    padding-top: clamp(2rem, 5vw, 2.75rem);
    text-align: left;
  }

  /* Marca arriba a ancho completo */
  .sa-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: none;
  }
  .sa-footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 1.5rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .sa-footer-brand .sa-logo {
    display: inline-block;
    margin-bottom: 1rem;
  }
  .sa-footer-brand .sa-logo img {
    margin: 0;
  }
  .sa-footer-brand p {
    max-width: 360px;
    margin: 0;
    font-size: .82rem;
    line-height: 1.55;
  }
  .sa-footer-social {
    justify-content: flex-start;
    margin-top: 1.1rem;
    gap: .5rem;
  }
  .sa-footer-social a {
    width: 36px; height: 36px;
    border-radius: 7px;
  }
  .sa-footer-social a svg { width: 14px; height: 14px; }

  /* Las 3 columnas de datos: en 2 columnas compactas */
  .sa-footer-col {
    padding: 0;
    border-bottom: none;
    text-align: left;
  }
  .sa-footer-col h4 {
    text-align: left;
    margin-bottom: .4rem;
    font-size: .58rem;
    letter-spacing: .14em;
  }
  .sa-footer-col h4[style] {
    margin-top: 1rem !important;
  }
  .sa-footer-col ul {
    align-items: flex-start;
    text-align: left;
    gap: .2rem;
  }
  .sa-footer-col ul li,
  .sa-footer-col ul li a {
    font-size: .82rem;
    font-weight: 400;
    color: var(--text);
  }
  .sa-footer-col ul li a {
    display: inline-block;
    padding: 0;
    line-height: 1.45;
  }
  .sa-footer-col ul li.sa-multi {
    gap: .1rem;
    line-height: 1.4;
  }
  .sa-footer-col ul li.sa-multi span { font-size: .82rem; }

  /* Bloque inferior compacto y CENTRADO */
  .sa-footer-bot {
    flex-direction: column-reverse;
    align-items: center;
    gap: .5rem;
    text-align: center;
    padding: 1.25rem 0 1.25rem;
    border-top: 1px solid var(--border);
    margin-top: 1.25rem;
  }
  .sa-footer-copy {
    font-size: .68rem;
    text-align: center;
  }
  .sa-footer-legal {
    gap: 1rem;
    justify-content: center;
  }
  .sa-footer-legal a {
    font-size: .72rem;
    padding: 0;
    opacity: .85;
  }
}

/* ─── MÓVIL PEQUEÑO (iPhone SE y similares) ─── */
@media (max-width: 480px) {
  .sa-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sa-footer-top {
    gap: 1.25rem 1rem;
  }
  .sa-footer-social a { width: 34px; height: 34px; }
  .sa-footer-col h4 { font-size: .55rem; }
  .sa-footer-col ul li,
  .sa-footer-col ul li a { font-size: .78rem; }
  .sa-footer-col ul li.sa-multi span { font-size: .78rem; }
}