/*
 Theme Name:   NatureSolar Child
 Theme URI:    https://naturesolar.es
 Description:  Child theme de NatureSolar para Divi 5
 Author:       NatureSolar
 Author URI:   https://naturesolar.es
 Template:     Divi
 Version:      1.0.0
 Text Domain:  naturesolar-child
*/

/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — MARCA NATURESOLAR
═══════════════════════════════════════════════════════ */
:root {
  /* Colores de marca */
  --ns-orange:        #FF6B35;
  --ns-orange-dark:   #E5541F;
  --ns-orange-pale:   #FFF0EA;
  --ns-amber:         #FFC300;
  --ns-amber-dark:    #E0A800;
  --ns-amber-pale:    #FFFBEA;
  --ns-black:         #1C1C1C;
  --ns-gray-900:      #1C1C1C;
  --ns-gray-700:      #3D3D3D;
  --ns-gray-500:      #6B6B6B;
  --ns-gray-300:      #B0B0B0;
  --ns-gray-100:      #E8E8E5;
  --ns-gray-50:       #F5F5F0;
  --ns-white:         #FFFFFF;

  /* Tipografías */
  --ns-font-head:     'Manrope', sans-serif;
  --ns-font-body:     'Inter', sans-serif;

  /* Bordes */
  --ns-r-sm:   6px;
  --ns-r-md:   12px;
  --ns-r-lg:   20px;
  --ns-r-xl:   32px;

  /* Sombras */
  --ns-s-sm:     0 2px 8px rgba(28,28,28,.07);
  --ns-s-md:     0 6px 28px rgba(28,28,28,.10);
  --ns-s-lg:     0 16px 56px rgba(28,28,28,.14);
  --ns-s-orange: 0 8px 32px rgba(255,107,53,.30);
}

/* ═══════════════════════════════════════════════════════
   RESET GLOBAL DIVI
   (Google Fonts Manrope + Inter se cargan desde functions.php)
═══════════════════════════════════════════════════════ */
body {
  font-family: var(--ns-font-body) !important;
  color: var(--ns-gray-900) !important;
  background-color: var(--ns-white) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════
   TIPOGRAFÍA GLOBAL
═══════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.et_pb_text h4, .et_pb_text h5, .et_pb_text h6 {
  font-family: var(--ns-font-head) !important;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ns-black);
}

p, li, .et_pb_text p {
  font-family: var(--ns-font-body) !important;
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════
   NAVEGACIÓN (Divi Header)
═══════════════════════════════════════════════════════ */
#main-header,
#main-header .et-menu-nav {
  background-color: rgba(28,28,28,.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#main-header.et-fixed-header {
  background-color: rgba(28,28,28,1) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.4) !important;
}

/* Logo */
#logo { max-height: 36px !important; }

/* Links de navegación */
#main-header .et_pb_menu .et-menu a,
#main-header .nav li a {
  font-family: var(--ns-font-head) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.65) !important;
  letter-spacing: 0 !important;
  padding: 8px 13px !important;
  border-radius: var(--ns-r-sm);
  transition: color .25s, background .25s !important;
}
#main-header .et_pb_menu .et-menu a:hover,
#main-header .nav li a:hover {
  color: var(--ns-white) !important;
  background: rgba(255,255,255,.08) !important;
}

/* Teléfono en nav */
.nav-phone-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ns-font-head) !important;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ns-amber) !important;
}

/* ═══════════════════════════════════════════════════════
   BOTONES GLOBALES (Divi)
═══════════════════════════════════════════════════════ */
.et_pb_button,
a.et_pb_button {
  font-family: var(--ns-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border-radius: var(--ns-r-md) !important;
  border-width: 0 !important;
  padding: 15px 28px !important;
  transition: all .22s ease !important;
}

/* Botón primario (naranja) */
.et_pb_button.ns-btn-primary,
a.et_pb_button.ns-btn-primary,
.et_pb_section--dark .et_pb_button:not(.ns-btn-outline):not(.ns-btn-ghost) {
  background-color: var(--ns-orange) !important;
  color: var(--ns-white) !important;
  box-shadow: var(--ns-s-orange) !important;
}
.et_pb_button.ns-btn-primary:hover {
  background-color: var(--ns-orange-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255,107,53,.42) !important;
}

/* Botón ámbar */
.et_pb_button.ns-btn-amber {
  background-color: var(--ns-amber) !important;
  color: var(--ns-black) !important;
}
.et_pb_button.ns-btn-amber:hover {
  background-color: var(--ns-amber-dark) !important;
  transform: translateY(-2px);
}

/* Botón oscuro */
.et_pb_button.ns-btn-dark {
  background-color: var(--ns-black) !important;
  color: var(--ns-white) !important;
}
.et_pb_button.ns-btn-dark:hover {
  background-color: var(--ns-gray-700) !important;
  transform: translateY(-2px);
}

/* Botón outline naranja */
.et_pb_button.ns-btn-outline {
  background-color: transparent !important;
  color: var(--ns-orange) !important;
  border: 2px solid var(--ns-orange) !important;
  border-width: 2px !important;
}
.et_pb_button.ns-btn-outline:hover {
  background-color: var(--ns-orange) !important;
  color: var(--ns-white) !important;
}

/* Botón ghost (sobre fondos oscuros) */
.et_pb_button.ns-btn-ghost {
  background-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-width: 1px !important;
}
.et_pb_button.ns-btn-ghost:hover {
  background-color: rgba(255,255,255,.18) !important;
  color: var(--ns-white) !important;
}

/* Tamaño grande */
.et_pb_button.ns-btn-lg {
  padding: 18px 36px !important;
  font-size: 1rem !important;
  border-radius: 14px !important;
}

/* ═══════════════════════════════════════════════════════
   SECCIONES
═══════════════════════════════════════════════════════ */

/* Sección hero (oscura con orbs) */
.ns-hero {
  background-color: var(--ns-black) !important;
  position: relative;
  overflow: hidden;
}
.ns-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none; z-index: 0;
}
.ns-hero .et_pb_row { position: relative; z-index: 1; }

/* Orb decorativo (añadir como background image en Divi) */
.ns-hero-orb-1 {
  position: absolute !important;
  top: -150px; right: -100px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,53,.18) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none; z-index: 0;
  animation: ns-float1 8s ease-in-out infinite;
}
.ns-hero-orb-2 {
  position: absolute !important;
  bottom: -50px; left: 10%;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,195,0,.12) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none; z-index: 0;
  animation: ns-float2 10s ease-in-out infinite;
}
@keyframes ns-float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-20px)} }
@keyframes ns-float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,30px)} }

/* Sección oscura genérica */
.ns-section-dark {
  background-color: var(--ns-black) !important;
}
.ns-section-dark .et_pb_text_inner,
.ns-section-dark p,
.ns-section-dark li {
  color: rgba(255,255,255,.55) !important;
}
.ns-section-dark h1,
.ns-section-dark h2,
.ns-section-dark h3 {
  color: var(--ns-white) !important;
}

/* Sección gris suave */
.ns-section-alt {
  background-color: var(--ns-gray-50) !important;
}

/* ═══════════════════════════════════════════════════════
   BADGE / ETIQUETA DE SECCIÓN
═══════════════════════════════════════════════════════ */
.ns-section-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--ns-font-head) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ns-orange) !important;
  margin-bottom: 12px !important;
}
.ns-section-label::before {
  content: '';
  display: inline-block;
  width: 20px; height: 2px;
  background: var(--ns-orange);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════
   HERO BADGE (pastilla superior)
═══════════════════════════════════════════════════════ */
.ns-hero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: rgba(255,107,53,.12) !important;
  border: 1px solid rgba(255,107,53,.28) !important;
  color: var(--ns-orange) !important;
  padding: 7px 16px !important;
  border-radius: 100px !important;
  font-family: var(--ns-font-head) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}

/* ═══════════════════════════════════════════════════════
   HERO TITLE
═══════════════════════════════════════════════════════ */
.ns-hero h1,
.ns-hero-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em !important;
  color: var(--ns-white) !important;
}
.ns-hero-title .accent { color: var(--ns-amber) !important; }
.ns-hero-title .line-dim {
  color: rgba(255,255,255,.45) !important;
  font-weight: 300 !important;
}

/* ═══════════════════════════════════════════════════════
   STATS DE HERO (banda inferior del hero)
═══════════════════════════════════════════════════════ */
.ns-hero-stats {
  display: flex !important;
  gap: 36px;
  flex-wrap: wrap;
  padding-top: 36px !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  margin-top: 16px !important;
}
.ns-stat-num {
  font-family: var(--ns-font-head) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--ns-amber) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  display: block;
}
.ns-stat-label {
  font-size: .78rem !important;
  color: rgba(255,255,255,.38) !important;
  margin-top: 5px !important;
}

/* ═══════════════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════════════ */
.ns-trust-bar {
  background-color: var(--ns-gray-50) !important;
  border-bottom: 1px solid var(--ns-gray-100) !important;
  padding: 18px 0 !important;
}
.ns-trust-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--ns-font-head) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: var(--ns-gray-500) !important;
}

/* ═══════════════════════════════════════════════════════
   TARJETAS DE SERVICIO
═══════════════════════════════════════════════════════ */
.ns-service-card.et_pb_blurb {
  background: var(--ns-white) !important;
  border: 1px solid var(--ns-gray-100) !important;
  border-radius: var(--ns-r-xl) !important;
  padding: 36px 32px !important;
  transition: all .3s ease !important;
  position: relative;
  overflow: hidden;
}
.ns-service-card.et_pb_blurb::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ns-orange), var(--ns-amber));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.ns-service-card.et_pb_blurb:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--ns-s-lg) !important;
  border-color: transparent !important;
}
.ns-service-card.et_pb_blurb:hover::after { transform: scaleX(1); }

/* Tarjeta destacada (oscura) */
.ns-service-card.ns-featured {
  background: var(--ns-black) !important;
  border-color: var(--ns-black) !important;
}
.ns-service-card.ns-featured .et_pb_blurb_content,
.ns-service-card.ns-featured p,
.ns-service-card.ns-featured .et_pb_module_header {
  color: var(--ns-white) !important;
}

/* Ícono de servicio */
.ns-service-icon {
  width: 52px !important; height: 52px !important;
  border-radius: 14px !important;
  background: var(--ns-orange-pale) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-bottom: 24px !important;
}
.ns-service-icon.amber { background: var(--ns-amber-pale) !important; }
.ns-service-icon.dark  { background: rgba(255,195,0,.12) !important; }

/* ═══════════════════════════════════════════════════════
   STATS BAND (banda negra con números grandes)
═══════════════════════════════════════════════════════ */
.ns-stats-band {
  background-color: var(--ns-black) !important;
}
.ns-stats-band .et_pb_column {
  border-right: 1px solid rgba(255,255,255,.07) !important;
  padding: 32px 24px !important;
  text-align: center !important;
}
.ns-stats-band .et_pb_column:last-child { border-right: none !important; }
.ns-big-num {
  font-family: var(--ns-font-head) !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: var(--ns-amber) !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   PROCESO (pasos numerados)
═══════════════════════════════════════════════════════ */
.ns-process-num {
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  background: var(--ns-orange) !important;
  color: var(--ns-white) !important;
  font-family: var(--ns-font-head) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 20px !important;
  box-shadow: 0 0 0 8px var(--ns-orange-pale), var(--ns-s-orange) !important;
}

/* ═══════════════════════════════════════════════════════
   TARJETA DE PROYECTO
═══════════════════════════════════════════════════════ */
.ns-project-card {
  border-radius: var(--ns-r-lg) !important;
  overflow: hidden !important;
  background: var(--ns-white) !important;
  box-shadow: var(--ns-s-sm) !important;
  transition: all .3s ease !important;
}
.ns-project-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ns-s-md) !important;
}
.ns-project-stat-n {
  font-family: var(--ns-font-head) !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  color: var(--ns-orange) !important;
}

/* ═══════════════════════════════════════════════════════
   TESTIMONIOS
═══════════════════════════════════════════════════════ */
.ns-testimonial.et_pb_blurb,
.ns-testimonial.et_pb_testimonial {
  background: var(--ns-white) !important;
  border: 1px solid var(--ns-gray-100) !important;
  border-radius: var(--ns-r-lg) !important;
  padding: 28px !important;
  transition: all .3s ease !important;
  /* overflow: visible permite que el icono decorativo ::before
     (comilla en font ETmodules con top:-16px) se vea entero */
  overflow: visible !important;
  /* margin-top para que la mitad superior del icono decorativo no
     quede pegada al borde superior del row */
  margin-top: 18px !important;
}
.ns-testimonial.et_pb_blurb:hover,
.ns-testimonial.et_pb_testimonial:hover {
  box-shadow: var(--ns-s-md) !important;
  transform: translateY(-3px) !important;
}
.ns-stars {
  color: var(--ns-amber) !important;
  font-size: 1rem !important;
  letter-spacing: 2px !important;
  margin-bottom: 12px !important;
}

/* ═══════════════════════════════════════════════════════
   CTA BANNER FINAL
═══════════════════════════════════════════════════════ */
.ns-cta-banner {
  background: linear-gradient(135deg, #2A1A0E 0%, #1C1C1C 40%, #1A1500 100%) !important;
  border: 1px solid rgba(255,107,53,.2) !important;
  border-radius: var(--ns-r-xl) !important;
  position: relative;
  overflow: hidden;
}
.ns-cta-banner::before {
  content: '';
  position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,53,.15) 0%, transparent 70%);
  pointer-events: none;
}
.ns-cta-banner h2 {
  color: var(--ns-white) !important;
  font-size: 2rem !important;
}
.ns-cta-banner .accent { color: var(--ns-amber) !important; }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
#main-footer,
#footer-widgets {
  background-color: #111 !important;
}
#main-footer .footer-widget,
#main-footer p,
#main-footer li,
#main-footer a {
  color: rgba(255,255,255,.4) !important;
  font-size: .85rem !important;
}
#main-footer a:hover { color: var(--ns-orange) !important; }
#main-footer h4,
#main-footer .widget-title {
  font-family: var(--ns-font-head) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important;
  margin-bottom: 16px !important;
}
#et-footer-nav {
  border-top: 1px solid rgba(255,255,255,.07) !important;
  background-color: #111 !important;
}
#et-footer-nav .bottom-nav a,
#et-footer-nav #footer-info {
  color: rgba(255,255,255,.2) !important;
  font-size: .75rem !important;
}

/* ═══════════════════════════════════════════════════════
   CALCULADORA (código nativo en HTML/JS, no módulo Divi)
   Se embebe con módulo Code de Divi
═══════════════════════════════════════════════════════ */
.ns-calc-wrap {
  max-width: 740px;
  margin: 0 auto;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--ns-r-xl);
  padding: 44px 40px;
}
.ns-calc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.ns-calc-label {
  font-family: var(--ns-font-head);
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  letter-spacing: .04em;
  display: block;
  margin-bottom: 7px;
}
.ns-calc-input, .ns-calc-select {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--ns-r-md);
  padding: 12px 16px;
  font-family: var(--ns-font-body);
  font-size: .9rem;
  color: var(--ns-white);
  width: 100%;
  outline: none;
  appearance: none;
  transition: border-color .25s;
}
.ns-calc-input:focus, .ns-calc-select:focus {
  border-color: var(--ns-orange);
}
.ns-calc-slider {
  -webkit-appearance: none;
  width: 100%; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.15);
  outline: none; cursor: pointer;
}
.ns-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ns-orange); cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255,107,53,.25);
}
.ns-calc-result {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin: 24px 0;
}
.ns-calc-result-item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ns-r-md);
  padding: 16px 20px;
}
.ns-calc-result-item.highlight {
  background: linear-gradient(135deg, rgba(255,107,53,.18), rgba(255,195,0,.1));
  border-color: rgba(255,107,53,.3);
}
.ns-calc-result-label {
  font-size: .7rem;
  color: rgba(255,255,255,.4);
  margin-bottom: 6px;
}
.ns-calc-result-val {
  font-family: var(--ns-font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ns-amber);
  letter-spacing: -.03em;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════
   FIX RESPONSIVE GLOBAL DIVI 5 (backwards compat)
   Divi 5 con BC Mode aplica `width: 1200px !important` LITERAL
   a rows/columnas con selector de altísima especificidad
   (body #page-container .et-db #et-boc .et-l .et_pb_row_N).
   Para ganar tenemos que igualar la especificidad.
═══════════════════════════════════════════════════════ */
/* Row: limitar a 1080px y centrar (siempre activo, también desktop)
   EXCLUYE et_pb_row_0 — ese es el row "wrapper" exterior que contiene
   todas las secciones anidadas; debe quedarse full-width o el resto
   de la página queda confinado a 1080px. */
body #page-container #et-boc .et_pb_row[class*="et_pb_row_"]:not(.et_pb_row_0),
body #page-container #et-boc .et_pb_row.et_pb_row:not(.et_pb_row_0) {
  width: auto !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
/* El row exterior: full-width sin padding lateral */
body #page-container #et-boc .et_pb_row.et_pb_row_0 {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
/* También full-width los wrappers que llevan al contenido interno */
body #page-container #et-boc .et_pb_row.et_pb_row_0 > .et_pb_column,
body #page-container #et-boc .et_pb_row.et_pb_row_0 > .et_pb_column .et_pb_text,
body #page-container #et-boc .et_pb_row.et_pb_row_0 > .et_pb_column .et_pb_text .et_pb_text_inner {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Columnas y textos: forzar 100% SOLO en viewport <1200px (tablet+móvil),
   para preservar el grid multi-columna de Divi en desktop. */
@media (max-width: 1199px) {
  body #page-container #et-boc .et_pb_column[class*="et_pb_column_"],
  body #page-container #et-boc .et_pb_column.et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
  }
  body #page-container #et-boc .et_pb_text[class*="et_pb_text_"],
  body #page-container #et-boc .et_pb_text[class*="et_pb_text_"] .et_pb_text_inner,
  body #page-container #et-boc .et_pb_text[class*="et_pb_text_"] .et_pb_text_inner > *,
  body #page-container #et-boc .et_pb_button_module_wrapper {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* En desktop SOLO arreglamos los textos y wrappers de botones que Divi
   pone con width literal — pero respetando los grids de columnas */
@media (min-width: 1200px) {
  body #page-container #et-boc .et_pb_text[class*="et_pb_text_"],
  body #page-container #et-boc .et_pb_text[class*="et_pb_text_"] .et_pb_text_inner,
  body #page-container #et-boc .et_pb_button_module_wrapper {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Sección "Soluciones para cada perfil": las 3 cards ya están en 3
     columnas hermanas (re-distribuidas por JS). Aplicamos grid 3 cols
     para que se alineen perfectamente. */
  body #page-container #et-boc .et_pb_section.et_pb_section_4 > .et_pb_row.et_pb_row_5 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  body #page-container #et-boc .et_pb_section.et_pb_section_4 > .et_pb_row.et_pb_row_5 > .et_pb_column {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
  body #page-container #et-boc .et_pb_section.et_pb_section_4 > .et_pb_row.et_pb_row_5 .ns-service-card {
    height: 100% !important;
    margin: 0 !important;
  }
}

/* En tablet (768-1199): 2 columnas */
@media (min-width: 768px) and (max-width: 1199px) {
  body #page-container #et-boc .et_pb_section.et_pb_section_4 > .et_pb_row.et_pb_row_5 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  body #page-container #et-boc .et_pb_section.et_pb_section_4 > .et_pb_row.et_pb_row_5 > .et_pb_column {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* ───────────────────────────────────────────────────────
   HERO — pintar oscuro el wrapper exterior para que NO
   queden bordes blancos a los lados del hero. El #ns-bg
   se extiende full-viewport vía JS.
─────────────────────────────────────────────────────── */
body #page-container #et-boc .et_pb_section_0.et_pb_section {
  background-color: #0A0A0A !important;
}
/* Overlay oscuro full-viewport sobre el área del hero, para legibilidad
   del texto sobre los videos. Se aplica al wrapper exterior porque el
   #ns-bg vive ahí (no dentro del hero confinado). */
body #page-container #et-boc .et_pb_section_0 .ns-bg-overlay {
  position: absolute;
  left: 0; right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.20) 45%, rgba(0,0,0,.55) 100%);
  z-index: 1;
  pointer-events: none;
}
body #page-container #et-boc .et_pb_section.ns-hero > .et_pb_row {
  position: relative;
  z-index: 2;
}
/* Evitar overflow horizontal en toda la página */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

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

/* ── TABLET (≤980px) ──────────────────────────────────── */
@media (max-width: 980px) {
  /* Calculadora: una columna */
  .ns-calc-grid, .ns-calc-result {
    grid-template-columns: 1fr !important;
  }
  .ns-calc-wrap { padding: 28px 20px !important; }
  .ns-calc-result-val { font-size: 1.3rem !important; }

  /* Hero */
  .ns-hero h1, .ns-hero-title { font-size: 2.4rem !important; }
  .ns-hero-stats { gap: 24px !important; padding-top: 28px !important; }

  /* Stats band: bordes inferiores en lugar de laterales */
  .ns-stats-band .et_pb_column {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    padding: 24px 16px !important;
  }
  .ns-stats-band .et_pb_column:last-child { border-bottom: none !important; }

  /* Tarjetas */
  .ns-service-card.et_pb_blurb { padding: 28px 24px !important; }
  .ns-testimonial.et_pb_blurb { padding: 22px !important; }

  /* CTA */
  .ns-cta-banner h2 { font-size: 1.6rem !important; }

  /* Orbs decorativos: reducir tamaño/blur (mejor rendimiento móvil) */
  .ns-hero-orb-1 { width: 380px !important; height: 380px !important; filter: blur(45px) !important; }
  .ns-hero-orb-2 { width: 280px !important; height: 280px !important; filter: blur(45px) !important; }
}

/* ── MÓVIL (≤767px) ───────────────────────────────────── */
@media (max-width: 767px) {
  /* Tipografía base global Divi */
  body { font-size: 15px !important; }

  /* Padding vertical de secciones Divi (suele ser excesivo) */
  .et_pb_section { padding: 50px 0 !important; }
  .et_pb_section.ns-hero { padding: 0 !important; } /* hero usa 100svh */

  /* Header: logo más pequeño */
  #logo { max-height: 30px !important; }

  /* Hero */
  .ns-hero h1, .ns-hero-title {
    font-size: 2rem !important;
    line-height: 1.1 !important;
  }
  .ns-hero-badge {
    font-size: .7rem !important;
    padding: 6px 12px !important;
    margin-bottom: 18px !important;
  }
  .ns-hero-stats {
    gap: 18px !important;
    padding-top: 24px !important;
    margin-top: 12px !important;
  }
  .ns-stat-num { font-size: 1.3rem !important; }
  .ns-stat-label { font-size: .72rem !important; }

  /* Trust bar: items más compactos, permitir wrap */
  .ns-trust-bar { padding: 14px 0 !important; }
  .ns-trust-item {
    font-size: .72rem !important;
    gap: 6px !important;
  }

  /* Section label */
  .ns-section-label { font-size: .68rem !important; }

  /* Tarjetas servicio */
  .ns-service-card.et_pb_blurb { padding: 24px 20px !important; }
  .ns-service-icon { width: 44px !important; height: 44px !important; margin-bottom: 18px !important; }

  /* Stats band */
  .ns-big-num { font-size: 2rem !important; }

  /* Proceso */
  .ns-process-num {
    width: 48px !important; height: 48px !important;
    font-size: 1rem !important;
    box-shadow: 0 0 0 6px var(--ns-orange-pale), var(--ns-s-orange) !important;
    margin-bottom: 16px !important;
  }

  /* CTA banner */
  .ns-cta-banner { padding: 40px 24px !important; }
  .ns-cta-banner h2 { font-size: 1.4rem !important; line-height: 1.15 !important; }

  /* Botones: full-width opcional con clase .ns-btn-block */
  .et_pb_button.ns-btn-block { display: block !important; text-align: center !important; }
  .et_pb_button { padding: 13px 22px !important; font-size: .92rem !important; }
  .et_pb_button.ns-btn-lg { padding: 15px 28px !important; font-size: .95rem !important; }

  /* Orbs aún más pequeños en móvil */
  .ns-hero-orb-1 { width: 260px !important; height: 260px !important; filter: blur(40px) !important; }
  .ns-hero-orb-2 { width: 200px !important; height: 200px !important; filter: blur(40px) !important; display: none !important; }

  /* Footer: ajustar columnas */
  #footer-widgets .footer-widget { margin-bottom: 24px !important; }

  /* Calculadora: paddings más ajustados */
  .ns-calc-wrap { padding: 24px 16px !important; border-radius: var(--ns-r-lg) !important; }
  .ns-calc-result-val { font-size: 1.2rem !important; }
}

/* ── MÓVIL PEQUEÑO (≤480px) ───────────────────────────── */
@media (max-width: 480px) {
  .ns-hero h1, .ns-hero-title { font-size: 1.7rem !important; }
  .ns-hero-stats { gap: 14px !important; }
  .ns-hero-stats > * { flex: 1 1 45% !important; }
  .ns-stat-num { font-size: 1.15rem !important; }

  .ns-cta-banner { padding: 32px 18px !important; }
  .ns-cta-banner h2 { font-size: 1.25rem !important; }

  .ns-big-num { font-size: 1.7rem !important; }

  .ns-service-card.et_pb_blurb { padding: 22px 18px !important; border-radius: var(--ns-r-lg) !important; }
  .ns-testimonial.et_pb_blurb { padding: 18px !important; }

  .et_pb_section { padding: 40px 0 !important; }
}

/* ── ACCESIBILIDAD: respetar reduce-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  .ns-fade-up { transition: none !important; transform: none !important; opacity: 1 !important; }
  .ns-hero-orb-1, .ns-hero-orb-2 { animation: none !important; }
  #ns-bg .ns-vl { transition: opacity .3s linear !important; }
}