.hero-hvac .hvac-bang .p{
  transform: translate(var(--sx,0px), var(--sy,0px)) scale(var(--s,1));
}


.hero-hvac{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0E3A66; /* azul marca */
}

/* Todo el contenido del hero arriba */
.hero-hvac > *{
  position: relative;
  z-index: 30;
}

/* La capa de efectos NO debe empujar layout */
.hero-hvac .hvac-effects{
  position:absolute;
  inset:0;
  z-index: 12;           /* arriba del fondo, abajo del texto */
  pointer-events:none;
}

/* ===== EXPLOSIÓN ===== */
.hero-hvac::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 220vmax;
  height: 220vmax;
  transform: translate(-50%, -50%) scale(0.02);
  border-radius: 50%;
  z-index: 6;
  pointer-events:none;
  opacity: 0;

  background: radial-gradient(circle,
    rgba(0,170,255,.65) 0%,
    rgba(0,170,255,.25) 28%,
    rgba(255,60,60,.60) 55%,
    rgba(255,60,60,0) 75%);
  filter: blur(10px);

  animation: hvacBurstOut 1.2s ease-out .05s forwards;
}
@keyframes hvacBurstOut{
  0%   {opacity:0; transform: translate(-50%,-50%) scale(0.02);}
  30%  {opacity:1; transform: translate(-50%,-50%) scale(0.25);}
  70%  {opacity:1; transform: translate(-50%,-50%) scale(0.85);}
  100% {opacity:0; transform: translate(-50%,-50%) scale(1.10);}
}

/* ===== DEGRADADO DINÁMICO (SE MUEVE CON EL MOUSE) ===== */
.hero-hvac::after{
  content:"";
  position:absolute;
  inset:-30%;
  z-index: 7;
  pointer-events:none;
  opacity:.70;

  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(0,170,255,.28) 0%,
    rgba(0,170,255,.10) 28%,
    rgba(255,60,60,.42) 55%,
    rgba(255,60,60,.18) 68%,
    rgba(255,60,60,0) 80%);
  filter: blur(10px);
}

/* ===== MITADES ===== */
.hero-hvac .hvac-snow,
.hero-hvac .hvac-heat{
  position:absolute;
  top:0; bottom:0;
}
.hero-hvac .hvac-snow{ left:0; width:50%; }
.hero-hvac .hvac-heat{ right:0; width:50%; }

/* ===== NIEVE ===== */
.hero-hvac .hvac-snow::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.65) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.80) 1px, transparent 2px);
  background-size: 80px 80px, 120px 120px, 170px 170px;
  background-position: 0 0, 30px -40px, -20px -80px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
  animation: snowIntro 3.8s ease-out .2s forwards;
}
@keyframes snowIntro{
  0%   {transform: translateY(-25%); opacity:0;}
  35%  {opacity:.60;}
  100% {transform: translateY(0%); opacity:.60;}
}

/* ===== CALOR (ondas visibles) ===== */
.hero-hvac .hvac-heat::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;

  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255,180,90,.00) 0px,
      rgba(255,180,90,.18) 22px,
      rgba(255,80,60,.00) 44px
    ),
    radial-gradient(circle, rgba(255,120,60,.55) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,210,120,.75) 1px, transparent 2px);

  background-size: 240px 100%, 170px 220px, 110px 140px;
  background-position: 0 0, -30px 80px, 10px 30px;

  filter: blur(1px) saturate(1.2);
  animation: heatIntro 3.8s ease-out .25s forwards;
}
@keyframes heatIntro{
  0%   {transform: translateY(18%); opacity:0;}
  35%  {opacity:.55;}
  100% {transform: translateY(0%); opacity:.55;}
}

@media (prefers-reduced-motion: reduce){
  .hero-hvac::before,
  .hero-hvac::after,
  .hero-hvac .hvac-snow::before,
  .hero-hvac .hvac-heat::before{
    animation: none !important;
    opacity: .55 !important;
    transform: none !important;
  }
}


.hero-hvac{ position:relative; overflow:hidden; }
.hero-hvac .hvac-bang{
  position:absolute; inset:0;
  pointer-events:none;
  z-index: 15; /* debajo texto, arriba fondo */
}

.hero-hvac .hvac-bang .ring{
  position:absolute; left:50%; top:50%;
  width: 20vmax; height: 20vmax;
  transform: translate(-50%,-50%) scale(.1);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(0,180,255,.35) 0%,
    rgba(0,180,255,.10) 35%,
    rgba(255,90,60,.20) 55%,
    rgba(255,90,60,0) 75%);
  filter: blur(2px);
  animation: hvacRing 1.3s ease-out .05s forwards;
}

@keyframes hvacRing{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.1); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(7.5); }
}

/* contenedores frío/calor */
.hero-hvac .hvac-bang .cold,
.hero-hvac .hvac-bang .hot{
  position:absolute; inset:0;
}

/* Partículas base */
.hero-hvac .hvac-bang .p{
  position:absolute;
  left:50%; top:50%;
  width: clamp(22px, 2.4vw, 44px);
  height: clamp(22px, 2.4vw, 44px);
  transform: translate(-50%,-50%) scale(.2);
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: bangOut 1.8s cubic-bezier(.12,.9,.18,1) forwards;
  animation-delay: var(--d, .15s);
}

/* La animación “dispara” desde el centro a un vector y frena */
@keyframes bangOut{
  0%   {opacity:0; transform:translate(-50%,-50%) scale(.2);}
  18%  {opacity:1;}
  100% {opacity:1; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--s,1));}
}

/* COPOS estilo “3D” con relieve */
.hero-hvac .hvac-bang .snow{
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.25) 55%, rgba(255,255,255,.05) 75%),
    radial-gradient(circle at 70% 70%, rgba(140,220,255,.35), rgba(0,0,0,0) 55%);
  mask: radial-gradient(circle, #000 62%, transparent 63%); /* forma suave */
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

/* FUEGO “blob” con glow */
.hero-hvac .hvac-bang .fire{
  border-radius: 60% 40% 65% 35% / 55% 45% 70% 30%;
  background:
    radial-gradient(circle at 45% 30%, rgba(255,255,210,.95), rgba(255,175,60,.85) 40%, rgba(255,70,50,.45) 70%, rgba(255,70,50,0) 78%),
    radial-gradient(circle at 40% 70%, rgba(255,120,60,.55), rgba(0,0,0,0) 60%);
  filter:
    drop-shadow(0 0 14px rgba(255,170,60,.55))
    drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

/* opcional: “heat shimmer” suave en el lado derecho */
.hero-hvac .hvac-bang .hot::after{
  content:"";
  position:absolute; inset:0;
  opacity:.18;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,180,90,0) 0px,
    rgba(255,180,90,.35) 18px,
    rgba(255,180,90,0) 36px
  );
  filter: blur(6px);
  mask: linear-gradient(90deg, transparent 0 50%, #000 58% 100%);
}

.hero-hvac .elementor-button:hover{
  transform: translateY(1px);
  box-shadow: inset 0 4px 10px rgba(0,0,0,.25);
}

.hero-hvac h1,
.hero-hvac .hero-title{
  position: relative;
  --tx: 50%;
  --ty: 50%;
  background: radial-gradient(
    circle at var(--tx) var(--ty),
    #ffffff 0%,
    #e6f3ff 35%,
    #ffd6cc 55%,
    #ffffff 75%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 8px 24px rgba(0,0,0,.35),
    0 0 32px rgba(0,170,255,.35),
    0 0 42px rgba(255,80,60,.25);

  transition: background-position .15s ease;
}

/* Elevar tarjetas sobre la transición */
.services-cards{
  position: relative;
  z-index: 50;
  margin-top: -120px; /* controla cuánto suben */
}

/* ===== BASE DE LAS CARDS ===== */
.hvac-card{
  position: relative;
  transition:
    box-shadow .35s ease,
    transform .35s ease;
}

/* Línea superior (invisible al inicio) */
.hvac-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  opacity:0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    opacity .35s ease,
    transform .35s ease;
}

/* ===== HOVER GENERAL ===== */
.hvac-card:hover{
  transform: translateY(-4px); /* MUY sutil */
  box-shadow:
    0 12px 28px rgba(0,0,0,.08);
}

.hvac-card:hover::before{
  opacity:1;
  transform: scaleX(1);
}

/* ===== FRÍO (izquierda) ===== */
.hvac-cold::before{
  background: linear-gradient(
    90deg,
    #4FC3FF,
    #256EB1
  );
}

/* ===== CALOR (derecha) ===== */
.hvac-hot::before{
  background: linear-gradient(
    90deg,
    #FFB347,
    #FF6A00
  );
}

/* =========================
   SECTION: PRO SPLIT LOOK
   ========================= */
.hvac-split{
  position: relative;
  overflow: hidden;
  background: #f6f8fb; /* base muy clara */
}

/* capa suave que da “atmósfera” (azul izq / rojo der) */
.hvac-split::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index: 0;
  pointer-events:none;

  background:
    radial-gradient(600px 360px at 30% 55%,
      rgba(64,165,255,.35) 0%,
      rgba(64,165,255,0) 70%),
    radial-gradient(720px 420px at 78% 55%,
      rgba(255,90,60,.28) 0%,
      rgba(255,90,60,0) 70%),
    linear-gradient(180deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.85) 38%,
      rgba(255,255,255,.92) 100%);
  filter: blur(12px);
  opacity: 1;
}

/* línea de luz superior tenue (como el ejemplo) */
.hvac-split::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  top:-40px;
  height: 120px;
  z-index: 0;
  pointer-events:none;

  background: radial-gradient(closest-side,
    rgba(255,255,255,.55),
    rgba(255,255,255,0));
  filter: blur(8px);
  opacity: .9;
}

/* asegurar que el contenido quede arriba de las capas */
.hvac-split > *{
  position: relative;
  z-index: 2;
}

/* Imagen con bordes suaves / blend (opcional) */
.hvac-split img{
  border-radius: 14px;
}

/* =========================
   MINI GLASS CARDS
   ========================= */
.hvac-miniwrap{
  display:flex;
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}

/* si en móvil se apilan */
@media (max-width: 767px){
  .hvac-miniwrap{ flex-direction: column; }
}

.hvac-mini{
  position: relative;
  width: min(320px, 48%);
  padding: 18px 18px 16px;
  border-radius: 14px;

  background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 40px rgba(18,38,63,.10);

  overflow: hidden;
}

/* glow line arriba */
.hvac-mini::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:3px;
  opacity: .95;
}

/* brillo suave detrás (halo) */
.hvac-mini::after{
  content:"";
  position:absolute;
  inset:-30%;
  opacity:.55;
  filter: blur(18px);
  pointer-events:none;
}

.hvac-mini--cold::before{
  background: linear-gradient(90deg, #0E3A66, #4FC3FF);
}
.hvac-mini--hot::before{
  background: linear-gradient(90deg, #FF3C00, #FFB347);
}

.hvac-mini--cold::after{
  background: radial-gradient(circle at 30% 40%,
    rgba(79,195,255,.35),
    rgba(79,195,255,0) 60%);
}
.hvac-mini--hot::after{
  background: radial-gradient(circle at 70% 50%,
    rgba(255,120,60,.32),
    rgba(255,120,60,0) 60%);
}

/* micro-hover premium (muy sutil) */
.hvac-mini{
  transition: transform .25s ease, box-shadow .25s ease;
}
.hvac-mini:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(18,38,63,.14);
}

/* ==============================
   BOTÓN PLAY HVAC PRO
   ============================== */

.hvac-play{
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    #ffffff 0%,
    #f8f8f8 60%,
    #eaeaea 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

/* Ícono play */
.hvac-play i,
.hvac-play svg{
  font-size: 28px;
  color: #0E3A66;
  z-index: 6;
}

/* ===== ANILLO EXTERIOR GLOW ===== */
.hvac-play::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background: linear-gradient(
    135deg,
    #2A7FFF,
    #4FC3FF,
    #FFB347,
    #FF6A00
  );
  filter: blur(8px);
  opacity: .85;
  z-index: 1;
}

/* ===== AURA SUAVE ===== */
.hvac-play::after{
  content:"";
  position:absolute;
  inset:-28px;
  border-radius:50%;
  background: radial-gradient(circle,
    rgba(79,195,255,.35) 0%,
    rgba(255,106,0,.30) 45%,
    rgba(255,106,0,0) 70%);
  filter: blur(24px);
  opacity: .75;
  z-index: 0;
}

/* ===== HOVER PREMIUM ===== */
.hvac-play:hover{
  transform: scale(1.06);
}

.hvac-play:hover::before{
  opacity: 1;
  filter: blur(10px);
}

.hvac-play:hover::after{
  opacity: 1;
}

/* ===== ANIMACIÓN SUTIL CONTINUA ===== */
@keyframes hvacPulse{
  0%   { transform: scale(1); opacity:.85; }
  50%  { transform: scale(1.08); opacity:1; }
  100% { transform: scale(1); opacity:.85; }
}

.hvac-play::after{
  animation: hvacPulse 3.2s ease-in-out infinite;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .hvac-play::after{
    animation:none;
  }
}

/* ===== HVAC NUMBERS SECTION ===== */
.hvac-numbers{
  position: relative;
  padding: 120px 0 100px;
  background:
    radial-gradient(circle at 20% 60%,
      rgba(79,195,255,.18),
      transparent 55%),
    radial-gradient(circle at 80% 50%,
      rgba(255,140,80,.18),
      transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#f7f9fb 100%);
}

/* TITULO */
.hvac-numbers h2{
  font-weight: 700;
  margin-bottom: 12px;
}

/* METRICAS */
.hvac-metric{
  position: relative;
  text-align: center;
  padding: 40px 20px;
}

/* NUMERO GRANDE */
.hvac-metric .number{
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
}

/* TEXTO */
.hvac-metric p{
  font-size: 16px;
  opacity: .85;
}

/* ICONO DE FONDO */
.hvac-metric .elementor-icon{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160px;
  opacity: .06;
  pointer-events: none;
}

/* COLORES */
.hvac-cold .number{ color:#4FC3FF; }

.hvac-trust .number{ color:#2FA4A9; }


/* ==========================
   HVAC NUMBERS (FULL PRO)
   ========================== */

/* Sección full width + fondo pro */
.hvac-numbers{
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 6vw, 120px) 0;
  background: linear-gradient(90deg,
    rgba(70,170,255,.20) 0%,
    rgba(255,255,255,.92) 40%,
    rgba(255,170,120,.22) 100%
  );
}

/* Glow central suave */
.hvac-numbers::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background: radial-gradient(circle at 50% 55%,
    rgba(0,170,255,.22) 0%,
    rgba(255,120,80,.20) 35%,
    rgba(255,255,255,0) 70%
  );
  filter: blur(18px);
  opacity: .9;
}

/* Asegura que el contenido quede arriba del fondo */
.hvac-numbers .elementor-container,
.hvac-numbers .elementor-widget-wrap{
  position: relative;
  z-index: 2;
}

/* Ajuste general de cada bloque numérico */
.hvac-num{
  position: relative;
  text-align: center;
  padding: 18px 10px;
}

/* Número grande */
.hvac-num .elementor-counter-number-wrapper{
  justify-content: center;
}

.hvac-num .elementor-counter-number{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Colores de números (izq/der turquesa, centro naranja) */
.hvac-left .elementor-counter-number,
.hvac-right .elementor-counter-number{
  color:#0BA8B2;
}


/* Título bajo el número */
.hvac-num .elementor-counter-title{
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.25;
  color: rgba(20,25,30,.70);
}

/* Rayita de acento debajo */
.hvac-num::after{
  content:"";
  display:block;
  width: 110px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  opacity: .9;
}

.hvac-left::after{
  background: linear-gradient(90deg,#1E4F7A,#4FC3FF);
}
.hvac-mid::after{
  background: linear-gradient(90deg,#FFB347,#FF6A00);
}
.hvac-right::after{
  background: linear-gradient(90deg,#0BA8B2,#66E6EA);
}


/* Responsive */
@media (max-width: 768px){
  .hvac-num::before{
    width: 170px;
    height: 170px;
    transform: translate(-50%,-60%);
  }
  .hvac-num::after{ width: 90px; }
}

/* Espacio lateral para el botón del formulario */
.hvac-btn-spacing{
  margin-left: 16px;
}

/* Mobile: el botón baja y se separa bien */
@media (max-width: 768px){
  .hvac-btn-spacing{
    margin-left: 0;
    margin-top: 16px;
    width: 100%;
  }
}

/* ==========================
   HVAC SERVICE DETAIL (PRO)
   Keep same structure, upgrade style
   ========================== */

.hvac-service-detail{
  padding: clamp(40px, 5vw, 90px) 0;
  background: #fff;
}

/* Layout polish */
.hvac-service-detail .elementor-container{
  align-items: flex-start;
  gap: clamp(18px, 2vw, 36px);
}

/* LEFT: media column */
.hvac-service-media{
  position: relative;
}

/* Make images feel premium */
.hvac-service-media img{
  border-radius: 18px !important;
  box-shadow: 0 18px 45px rgba(15, 25, 35, .14);
  transform: translateZ(0);
}

/* Slight separation between stacked images */
.hvac-service-media .elementor-widget-image + .elementor-widget-image{
  margin-top: 18px;
}

/* Optional: create a subtle gradient glow behind images */
.hvac-service-media:before{
  content:"";
  position:absolute;
  inset:-20px;
  background:
    radial-gradient(circle at 20% 30%, rgba(79,195,255,.18), transparent 55%),
    radial-gradient(circle at 85% 65%, rgba(255,140,80,.14), transparent 58%);
  filter: blur(14px);
  opacity: .9;
  z-index: 0;
  pointer-events:none;
}
.hvac-service-media > *{
  position: relative;
  z-index: 1;
}

/* RIGHT: copy column */
.hvac-service-copy{
  padding-top: 6px;
}

/* Headings: more premium than plain red */
.hvac-service-copy h2,
.hvac-service-copy h3{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
}

/* Add a tiny accent line under each red heading */
.hvac-service-copy h2:after,
.hvac-service-copy h3:after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #E5483A, rgba(229,72,58,0));
  opacity: .95;
}

/* Paragraphs: better readability */
.hvac-service-copy p{
  font-size: 16px;
  line-height: 1.85;
  color: rgba(20,25,30,.78);
  margin: 0;
  max-width: 62ch;
}

/* Blocks: add clean card feel WITHOUT changing layout */
.hvac-service-block{
  padding: 18px 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,25,35,.08);
  box-shadow: 0 10px 28px rgba(15,25,35,.08);
  backdrop-filter: blur(6px);
}

/* Space between the two blocks */
.hvac-service-block + .hvac-service-block{
  margin-top: 22px;
}

/* Alternate block: subtle cool tint */
.hvac-service-block--alt{
  background: linear-gradient(180deg, rgba(79,195,255,.08), rgba(255,255,255,.70));
  border-color: rgba(79,195,255,.18);
}

/* Responsive: remove extra effects and keep clean */
@media (max-width: 768px){
  .hvac-service-media:before{ opacity:.55; }
  .hvac-service-copy p{ max-width: 100%; }
  .hvac-service-block{ padding: 16px; }
}

/* =========================
   HVAC ABOUT – GRADIENT PRO
   ========================= */

.hvac-about-gradient{
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(70,170,255,0.18) 0%,
    rgba(255,255,255,0.92) 40%,
    rgba(255,140,80,0.22) 100%
  );
}

/* Glow suave para darle look premium */
.hvac-about-gradient::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 35%,
      rgba(79,195,255,0.25),
      transparent 55%),
    radial-gradient(circle at 80% 65%,
      rgba(255,120,80,0.22),
      transparent 55%);
  filter: blur(18px);
  opacity: .9;
}

/* Asegura que el contenido quede arriba */
.hvac-about-gradient .elementor-container,
.hvac-about-gradient .elementor-widget-wrap{
  position: relative;
  z-index: 2;
}

/* ===== DARK SERVICE SECTION (same design line) ===== */
.hvac-dark-service{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 55%, rgba(79,195,255,.20), transparent 55%),
    radial-gradient(circle at 85% 55%, rgba(255,120,80,.18), transparent 55%),
    linear-gradient(180deg, #4b4f58 0%, #3d4048 60%, #343740 100%);
}

/* subtle top highlight so it doesn't look like a flat block */
.hvac-dark-service:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 35%);
  mix-blend-mode: overlay;
  opacity: .8;
}

/* Make sure content stays above overlays */
.hvac-dark-service .elementor-container,
.hvac-dark-service .elementor-widget-wrap{
  position: relative;
  z-index: 2;
}

/* Eyebrow label: "Additional Services" */
.hvac-dark-service .elementor-heading-title,
.hvac-dark-service .elementor-widget-heading .elementor-heading-title{
  /* we don't touch your main H1/H2 here; only better spacing if needed */
}

/* If your "Additional Services" is a small Heading widget, add a class to it: hvac-eyebrow */
.hvac-dark-service .hvac-eyebrow .elementor-heading-title{
  color: #22c1c8;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  font-size: 12px;
  opacity: .95;
}

/* Main title (Emergency Heating Repair Services) 
   Add class to that heading widget: hvac-dark-title */
.hvac-dark-service .hvac-dark-title .elementor-heading-title{
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Paragraph text: add class to the text editor widget: hvac-dark-text */
.hvac-dark-service .hvac-dark-text{
  color: rgba(255,255,255,.82);
  line-height: 1.75;
  max-width: 520px;
}

/* Button: add class to the button widget: hvac-dark-btn */
.hvac-dark-service .hvac-dark-btn .elementor-button{
  background: #0BA8B2;
  color: #ffffff;
  border-radius: 12px;
  padding: 14px 26px;
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.hvac-dark-service .hvac-dark-btn .elementor-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.34);
  filter: brightness(1.05);
}

/* Image styling: add class to the image widget: hvac-dark-img */
.hvac-dark-service .hvac-dark-img img{
  border-radius: 26px;
  box-shadow: 0 22px 55px rgba(0,0,0,.38);
  outline: 1px solid rgba(255,255,255,.10);
}

/* Optional: add a soft overlay to image for cohesion (only if you like)
   Add class to the image widget container/column: hvac-img-wrap */
.hvac-dark-service .hvac-img-wrap{
  position: relative;
}

.hvac-dark-service .hvac-img-wrap:after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 26px;
  pointer-events:none;
  background: radial-gradient(circle at 15% 20%, rgba(79,195,255,.16), transparent 50%),
              radial-gradient(circle at 90% 30%, rgba(255,120,80,.14), transparent 55%);
  mix-blend-mode: screen;
  opacity: .7;
}

/* Mobile spacing */
@media (max-width: 768px){
  .hvac-dark-service{
    background:
      radial-gradient(circle at 20% 35%, rgba(79,195,255,.20), transparent 60%),
      radial-gradient(circle at 80% 60%, rgba(255,120,80,.18), transparent 60%),
      linear-gradient(180deg, #4b4f58 0%, #3b3e46 100%);
  }
  .hvac-dark-service .hvac-dark-text{ max-width: 100%; }
}

/* CONTENEDOR BASE */
.hero-lava-soft{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #f2f2f2; /* base clara */
}

/* CAPA LAVA (DIFUMINADA) */
.hero-lava-soft::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index: 0;

  background:
    radial-gradient(ellipse 40% 30% at 15% 30%,
      rgba(255, 70, 0, .55) 0%,
      rgba(255,170, 60, .30) 35%,
      transparent 70%),

    radial-gradient(ellipse 55% 45% at 55% 25%,
      rgba(255, 60, 0, .50) 0%,
      rgba(255,180, 70, .28) 38%,
      transparent 75%),

    radial-gradient(ellipse 60% 55% at 78% 35%,
      rgba(255, 70, 0, .45) 0%,
      rgba(255,190, 80, .25) 40%,
      transparent 78%),

    radial-gradient(ellipse 55% 50% at 45% 80%,
      rgba(120,150,255,.45) 0%,
      rgba(120,150,255,.22) 42%,
      transparent 75%),

    radial-gradient(ellipse 45% 40% at 80% 75%,
      rgba(120,150,255,.40) 0%,
      rgba(120,150,255,.20) 40%,
      transparent 72%);

  filter: blur(70px) saturate(130%);
  opacity: .45; /* 👈 clave: suavidad */
  animation: lavaSoft 22s ease-in-out infinite alternate;
}

/* CAPA EXTRA DE SUAVIZADO */
.hero-lava-soft::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background: rgba(255,255,255,.65); /* velo blanco */
  pointer-events:none;
}

/* ASEGURAR CONTENIDO ARRIBA */
.hero-lava-soft > *{
  position: relative;
  z-index: 2;
}

/* ANIMACIÓN LENTA (TIPO LAVA) */
@keyframes lavaSoft{
  0%   { transform: translate(-2%,  1%) scale(1.03); }
  50%  { transform: translate( 2%, -1%) scale(1.06); }
  100% { transform: translate(-1%,  2%) scale(1.04); }
}

/* ACCESIBILIDAD */
@media (prefers-reduced-motion: reduce){
}

/* =========================================
   X&R – BORDE DE LUZ PRO (AZUL + ROJO)
   Solo CSS – sin plugins
   ========================================= */

/* CONTENEDOR DE LA IMAGEN */
.xr-photo{
  position: relative;
  isolation: isolate;
  border-radius: 16px;
}

/* IMAGEN */
.xr-photo img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 18px 45px rgba(0,0,0,0.22);
}

/* BORDE DE LUZ EXTERIOR (AZUL + ROJO) */
.xr-photo::before{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  background: linear-gradient(
    120deg,
    rgba(60,120,255,0.95),
    rgba(60,120,255,0.25),
    rgba(230,80,80,0.95)
  );
  filter: blur(10px);
  opacity: 0.95;
  z-index: -1;
}

/* BORDE INTERNO TIPO GLASS (FINO) */
.xr-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12);
  pointer-events: none;
}

/* =========================================
   FOTO PRINCIPAL – MÁS IMPACTO VISUAL
   ========================================= */
.xr-photo--main::before{
  inset: -7px;
  filter: blur(14px);
  opacity: 1;
}

/* =========================================
   RESPONSIVE AJUSTES
   ========================================= */
@media (max-width: 1024px){
  .xr-photo{
    border-radius: 14px;
  }

  .xr-photo img{
    border-radius: 14px;
  }

  .xr-photo::before{
    border-radius: 18px;
    filter: blur(9px);
  }

  .xr-photo::after{
    border-radius: 14px;
  }
}

@media (max-width: 767px){
  .xr-photo::before{
    inset: -3px;
    filter: blur(8px);
    opacity: 0.9;
  }
}

/* =========================================
   X&R – WHY CHOOSE US (PRO UPGRADE)
   Mantiene estructura: foto izq + texto der + stat 20+
   ========================================= */

.xr-why{
  position: relative;
  padding: clamp(40px, 5vw, 80px) 0;
}

/* Alineación */
.xr-why .elementor-container{
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
}

/* ---------- Kicker / Subtitle ---------- */
.xr-kicker{
  display: inline-block;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(20, 30, 45, 0.58);
  margin-bottom: 10px;
  position: relative;
  padding-left: 14px;
}
.xr-kicker::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:6px;height:6px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(60,120,255,.95), rgba(230,80,80,.95));
  box-shadow: 0 0 0 4px rgba(60,120,255,.10);
}

/* ---------- Title ---------- */
.xr-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 12px;
  max-width: 18ch; /* look premium */
}

/* Texto de apoyo */
.xr-why__content .elementor-widget-text-editor{
  color: rgba(20, 30, 45, 0.78);
  line-height: 1.6;
  max-width: 60ch;
}

/* =========================================
   FOTO PRO: borde luz azul/rojo + depth
   Usa clase: xr-photo (ya la estás usando)
   ========================================= */
.xr-photo{
  position: relative;
  isolation: isolate;
  border-radius: 18px;
}
.xr-photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.22);
}

/* Glow dual */
.xr-photo::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 24px;
  background:
    radial-gradient(60% 60% at 18% 28%,
      rgba(60,120,255,0.38) 0%,
      rgba(60,120,255,0.00) 62%),
    radial-gradient(60% 60% at 82% 72%,
      rgba(230,80,80,0.32) 0%,
      rgba(230,80,80,0.00) 62%),
    linear-gradient(120deg,
      rgba(60,120,255,0.35),
      rgba(230,80,80,0.28)
    );
  filter: blur(14px);
  opacity: .95;
  z-index: -1;
}

/* Glass frame fino */
.xr-photo::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  pointer-events:none;
}

/* =========================================
   STAT "20+ years" como tarjeta flotante
   Asigna clase al contenedor del stat: xr-stat
   ========================================= */
.xr-stat{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(15, 18, 26, 0.08);
  box-shadow:
    0 18px 55px rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Número 20+ */
.xr-stat .elementor-heading-title{
  margin: 0 !important;
}

/* Si tu "20+" es un Heading, dale look */
.xr-stat .elementor-heading-title{
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(90deg,
    rgba(60,120,255,1),
    rgba(230,80,80,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Texto "years of experience" */
.xr-stat .elementor-widget-text-editor{
  margin: 0 !important;
  color: rgba(20, 30, 45, 0.70);
  font-weight: 600;
  line-height: 1.2;
}

/* Línea decorativa debajo (si usas Divider) */
.xr-why .elementor-divider-separator{
  width: 90px !important;
  border-top-width: 2px !important;
  border-color: rgba(60,120,255,0.45) !important;
}

/* =========================================
   LISTA PRO: convierte Icon List en tarjetas
   Clase en el Icon List widget: xr-list
   ========================================= */
.xr-list .elementor-icon-list-item{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(15, 18, 26, 0.06);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  margin-bottom: 10px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.xr-list .elementor-icon-list-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}

.xr-list .elementor-icon-list-icon i,
.xr-list .elementor-icon-list-icon svg{
  color: rgba(60,120,255,0.95) !important;
}

/* Texto de lista */
.xr-list .elementor-icon-list-text{
  color: rgba(20, 30, 45, 0.82) !important;
  font-weight: 600;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 1024px){
  .xr-title{ max-width: none; }
  .xr-photo{ border-radius: 16px; }
  .xr-photo img{ border-radius: 16px; }
  .xr-photo::after{ border-radius: 16px; }
  .xr-photo::before{ border-radius: 22px; inset:-5px; filter: blur(12px); }
}

@media (max-width: 767px){
  .xr-why{ padding: 34px 0; }
  .xr-stat{ width: 100%; justify-content: center; }
  .xr-list .elementor-icon-list-item{ padding: 10px 10px; }
}


/* =========================================
   X&R – CONTACT SECTION (PRO)
   Clase sección: xr-contact
   ========================================= */

.xr-contact{
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 6vw, 110px) 0;
  isolation: isolate;

  /* ✅ FONDO PRO: sobrio + tech (sin espacial) */
  background:
    radial-gradient(900px 420px at 15% 25%,
      rgba(60,120,255,0.35) 0%,
      rgba(60,120,255,0.00) 62%),
    radial-gradient(800px 380px at 85% 65%,
      rgba(230,80,80,0.28) 0%,
      rgba(230,80,80,0.00) 62%),
    linear-gradient(180deg,
      rgba(10,16,28,1) 0%,
      rgba(14,22,40,1) 100%);
}

/* “grain” sutil para que se vea caro */
.xr-contact::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, rgba(0,0,0,0) 1px);
  background-size: 18px 18px;
  opacity: .18;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* Contenido encima */
.xr-contact .elementor-container{
  position: relative;
  z-index: 1;
  align-items: center;
  gap: clamp(22px, 3vw, 44px);
}

/* =========================================
   COLUMNA IZQUIERDA: textos
   ========================================= */
.xr-contact__left .elementor-heading-title{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 14px;
  max-width: 20ch;
}

.xr-contact__left .elementor-widget-text-editor{
  color: rgba(255,255,255,0.74);
  line-height: 1.7;
  max-width: 62ch;
}

/* =========================================
   CARD DEL FORM (glass)
   Clase: xr-formCard
   ========================================= */
.xr-formCard{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: clamp(18px, 2vw, 26px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}

/* Borde luz sutil alrededor de la card */
.xr-formCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  background: linear-gradient(120deg,
    rgba(60,120,255,0.55),
    rgba(255,255,255,0.06),
    rgba(230,80,80,0.45));
  filter: blur(10px);
  opacity: .65;
  z-index: -1;
}

/* =========================================
   INPUTS – estilo pro (Elementor Forms)
   ========================================= */

/* Inputs/textarea */
.xr-contact .elementor-field-group .elementor-field{
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(15,18,26,0.10) !important;
  border-radius: 12px !important;
  padding: 14px 14px !important;
  font-size: 15px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* Placeholder */
.xr-contact .elementor-field-group .elementor-field::placeholder{
  color: rgba(20,30,45,0.50);
}

/* Focus glow azul/rojo */
.xr-contact .elementor-field-group .elementor-field:focus{
  outline: none !important;
  border-color: rgba(60,120,255,0.55) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.14),
    0 0 0 6px rgba(60,120,255,0.12),
    0 0 0 10px rgba(230,80,80,0.06);
  transform: translateY(-1px);
}

/* Espaciado entre campos */
.xr-contact .elementor-field-group{
  margin-bottom: 14px !important;
}

/* Textarea más premium */
.xr-contact textarea.elementor-field{
  min-height: 150px;
  resize: vertical;
}

/* =========================================
   BOTÓN – premium
   ========================================= */
.xr-contact .elementor-button{
  width: 100%;
  border-radius: 999px !important;
  padding: 14px 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(90deg,
    rgba(60,120,255,0.95),
    rgba(230,80,80,0.95)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,0.22),
    0 0 0 7px rgba(60,120,255,0.10);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.xr-contact .elementor-button:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.26),
    0 0 0 8px rgba(230,80,80,0.12);
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px){
  .xr-contact{
    padding: 60px 0;
  }
  .xr-contact__left .elementor-heading-title{
    max-width: none;
  }
}

@media (max-width: 767px){
  .xr-contact{
    padding: 44px 0;
  }
  .xr-formCard{
    border-radius: 16px;
  }
}

/* =========================================
   X&R – SERVICES + ACCORDION (WHITE + BLUR)
   Sección: xr-services
   ========================================= */

.xr-services{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  padding: clamp(50px, 5vw, 90px) 0;
}

/* Glow/blur sutil de marca (azul + rojo) sin "espacial" */
.xr-services::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(700px 480px at 18% 40%,
      rgba(60,120,255,0.16) 0%,
      rgba(60,120,255,0.00) 65%),
    radial-gradient(640px 420px at 42% 22%,
      rgba(230,80,80,0.12) 0%,
      rgba(230,80,80,0.00) 62%),
    radial-gradient(760px 520px at 85% 55%,
      rgba(60,120,255,0.10) 0%,
      rgba(60,120,255,0.00) 68%);
  filter: blur(26px);
  opacity: 1;
  z-index: 0;
}

/* Contenido encima */
.xr-services .elementor-container{
  position: relative;
  z-index: 1;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}

/* =========================================
   Imagen PNG: que se vea más pro (depth)
   ========================================= */
.xr-services__media img{
  display:block;
  width: 100%;
  height: auto;
  /* deja tu PNG tal cual */
  filter: drop-shadow(0 22px 55px rgba(0,0,0,0.18));
  transform: translateZ(0);
}

/* (Opcional) si quieres un micro “glass halo” detrás del PNG */
.xr-services__media{
  position: relative;
}
.xr-services__media::after{
  content:"";
  position:absolute;
  left: 6%;
  top: 10%;
  width: 72%;
  height: 78%;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(60,120,255,0.18),
      rgba(60,120,255,0) 60%),
    radial-gradient(circle at 70% 60%,
      rgba(230,80,80,0.14),
      rgba(230,80,80,0) 62%);
  filter: blur(22px);
  opacity: .9;
  z-index: -1;
}

/* =========================================
   Titulares (jerarquía pro)
   ========================================= */
.xr-services__content .elementor-heading-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 12px;
}

/* =========================================
   ACCORDION PREMIUM
   Widget: Toggle o Accordion
   Clase: xr-acc
   ========================================= */

/* El wrapper de cada item */
.xr-acc .elementor-accordion-item{
  border: 1px solid rgba(15,18,26,0.08) !important;
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
  overflow: hidden;
  margin-bottom: 12px;
}

/* Título */
.xr-acc .elementor-tab-title{
  padding: 18px 18px !important;
  font-weight: 800 !important;
  color: rgba(20,30,45,0.88) !important;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

/* Ícono + / - */
.xr-acc .elementor-accordion-icon{
  font-size: 18px;
  color: rgba(60,120,255,0.95) !important;
}

/* Línea de “acento” en el borde izquierdo al abrir */
.xr-acc .elementor-tab-title.elementor-active{
  background:
    linear-gradient(90deg,
      rgba(60,120,255,0.10),
      rgba(230,80,80,0.06),
      rgba(255,255,255,0) 60%);
}

.xr-acc .elementor-tab-title.elementor-active{
  position: relative;
}
.xr-acc .elementor-tab-title.elementor-active::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background: linear-gradient(180deg,
    rgba(60,120,255,0.95),
    rgba(230,80,80,0.85));
  opacity: .95;
}

/* Contenido */
.xr-acc .elementor-tab-content{
  padding: 0 18px 18px !important;
  color: rgba(20,30,45,0.72);
  line-height: 1.65;
}

/* Hover sutil */
.xr-acc .elementor-accordion-item:hover{
  transform: translateY(-1px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 16px 36px rgba(0,0,0,0.08);
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 1024px){
  .xr-services{ padding: 56px 0; }
  .xr-services__media::after{ opacity: .75; }
}

@media (max-width: 767px){
  .xr-services{ padding: 42px 0; }
  .xr-acc .elementor-tab-title{ padding: 16px !important; }
  .xr-acc .elementor-tab-content{ padding: 0 16px 16px !important; }
}

/* =========================
   Popup + CF7 Compact Pro UI
   Target: Popup Maker #popmake-2332
   ========================= */

#popmake-2332{
  padding: 18px 18px !important;
}

#popmake-2332 .pum-container{
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Grid */
#popmake-2332 .xr-cf7-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

#popmake-2332 .xr-span-1{ grid-column: span 1 !important; }
#popmake-2332 .xr-span-2{ grid-column: 1 / -1 !important; }

/* Reduce overall vertical spacing */
#popmake-2332 .wpcf7 form p{
  margin: 0 !important;
}

#popmake-2332 label{
  display:block !important;
  margin: 0 0 6px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Inputs */
#popmake-2332 .wpcf7 input[type="text"],
#popmake-2332 .wpcf7 input[type="email"],
#popmake-2332 .wpcf7 input[type="tel"],
#popmake-2332 .wpcf7 input[type="file"],
#popmake-2332 .wpcf7 textarea{
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background: #fff !important;
  outline: none !important;
}

/* Message: same “visual height” as others (compact) */
#popmake-2332 .wpcf7 textarea{
  min-height: 56px !important;
  height: 56px !important;
  resize: vertical !important;
}

/* Section title */
#popmake-2332 .xr-cf7-section,
#popmake-2332 h4{
  margin: 6px 0 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Acceptance checkbox line */
#popmake-2332 .xr-consent{
  margin-top: 2px !important;
}

#popmake-2332 .wpcf7-acceptance label{
  display:flex !important;
  align-items:flex-start !important;
  gap: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

#popmake-2332 .wpcf7-acceptance input[type="checkbox"]{
  margin-top: 2px !important;
  width: 18px !important;
  height: 18px !important;
}

/* Submit button */
#popmake-2332 .xr-submit-wrap{
  display:flex !important;
  justify-content:center !important;
}

#popmake-2332 .wpcf7 input[type="submit"]{
  width: min(520px, 100%) !important; /* centered but not ultra-wide */
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: none !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  background: #0b74ff !important;
  color: #fff !important;
  cursor: pointer !important;
  margin-top: 6px !important;
}

#popmake-2332 .wpcf7 input[type="submit"]:hover{
  filter: brightness(.95) !important;
}

/* Mobile */
@media (max-width: 720px){
  #popmake-2332{ padding: 16px !important; }
  #popmake-2332 .xr-cf7-grid{ grid-template-columns: 1fr !important; }
  #popmake-2332 .xr-span-1,
  #popmake-2332 .xr-span-2{ grid-column: 1 / -1 !important; }
}


/* Consent full width */
#popmake-2332 .xr-consent{
  grid-column: 1 / -1;
  margin-top: 6px;
}

#popmake-2332 .wpcf7-acceptance label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}

#popmake-2332 .wpcf7-acceptance input[type="checkbox"]{
  margin-top: 3px;
  width: 18px;
  height: 18px;
}

/* ===== Directions Popup (Google Maps) ===== */
#popmake-2437{
  padding: 16px !important;
}

#popmake-2437 .pum-container{
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Alto del popup */
#popmake-2437 .pum-content{
  padding: 0 !important;
}

#popmake-2437 .xr-map-wrap{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min(72vh, 720px);
  background: #fff;
}

#popmake-2437 .xr-map{
  width: 100%;
  height: 100%;
  border: 0 !important;
  display: block;
}

#popmake-2437 .xr-map-actions{
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  justify-content: flex-end;
}

#popmake-2437 .xr-map-btn{
  background: #0b74ff;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 10px;
  display: inline-block;
}

#popmake-2437 .xr-map-btn:hover{
  filter: brightness(.95);
}

/* =========================
   XR Footer (Full-width + Gradient)
   ========================= */

.xr-footer-band{
  /* Fuerza full width aunque el tema use container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: clamp(22px, 3vw, 34px) 18px;
  background:
    radial-gradient(900px 420px at 10% 20%, rgba(11,116,255,.28), transparent 60%),
    radial-gradient(900px 420px at 95% 85%, rgba(255,122,24,.28), transparent 60%),
    linear-gradient(135deg, #0a1020 0%, #111a2b 55%, #1a1220 100%);
}

.xr-footer{
  max-width: 1180px;
  margin: 0 auto;
  color: rgba(255,255,255,.92);
  background: rgba(18,24,36,.62);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 28px);
}

.xr-footer__brand{
  display:flex;
  align-items:center;
  gap: 14px;
}

.xr-footer__logo{
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 8px;
}

.xr-footer__name{
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -.2px;
}

.xr-footer__rule{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 16px 0 18px;
}

.xr-footer__grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: clamp(18px, 2.2vw, 34px);
}

.xr-footer__title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
}

.xr-dot{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}

.xr-dot--red{ background: rgba(255,74,74,.22); border-color: rgba(255,74,74,.35); }
.xr-dot--blue{ background: rgba(50,140,255,.22); border-color: rgba(50,140,255,.35); }
.xr-dot--orange{ background: rgba(255,140,40,.22); border-color: rgba(255,140,40,.35); }
.xr-dot--pink{ background: rgba(255,64,160,.22); border-color: rgba(255,64,160,.35); }

.xr-footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
  color: rgba(255,255,255,.86);
}

.xr-footer__list a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.xr-footer__list a:hover{ text-decoration: underline; }

.xr-footer__list--bullets li{
  position: relative;
  padding-left: 16px;
}
.xr-footer__list--bullets li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color: rgba(255,255,255,.35);
}

.xr-footer__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration:none;
  color: #fff;
  background: linear-gradient(90deg, #0b74ff 0%, #1aa2ff 100%);
  border: 1px solid rgba(255,255,255,.12);
  width: fit-content;
}

.xr-footer__btn:hover{ filter: brightness(.96); }

.xr-footer__social{
  display:flex;
  gap: 10px;
  margin-top: 14px;
}

.xr-footer__socialbtn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.xr-footer__socialbtn:hover{ background: rgba(255,255,255,.12); }

.xr-footer__bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  text-align:center; /* solo centro, sin texto a la derecha */
  color: rgba(255,255,255,.70);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 980px){
  .xr-footer__grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px){
  .xr-footer-band{ padding: 18px 12px; }
  .xr-footer__grid{ grid-template-columns: 1fr; }
  .xr-footer__logo{ width: 50px; height: 50px; }
}

/* =========================
   Fix franjas grises arriba/abajo
   (tema / footer wrapper)
   ========================= */

/* 1) Quita fondos y padding del contenedor típico del footer */
footer,
.site-footer,
#colophon,
.wp-block-template-part.footer,
.wp-site-blocks > footer,
.wp-block-group.is-layout-constrained,
.wp-block-group.has-background,
.wp-block-cover,
.wp-block-cover__inner-container{
  background: transparent !important;
}

/* 2) Si el footer está dentro de un "group" con padding, se lo quitamos */
footer .wp-block-group,
footer .wp-block-columns,
footer .wp-block-column{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3) Asegura que tu banda no deje huecos */
.xr-footer-band{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: clamp(22px, 3vw, 34px) !important;
  padding-bottom: clamp(22px, 3vw, 34px) !important;
}

/* 4) Si el tema mete un "content area" con fondo, lo anulamos */
.site,
.site-content,
#page{
  background: transparent !important;
}

/* =========================
   FIX: Astra Above Footer gray bars + full width
   ========================= */

/* Quita fondo/padding del “Above Footer” que crea las franjas */
.ast-above-footer-wrap,
.ast-above-footer {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* Astra mete un contenedor con max-width; lo soltamos a 100% */
.ast-above-footer .ast-container,
.ast-above-footer .ast-builder-grid-row-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Quita márgenes típicos de widgets dentro del footer */
.ast-above-footer .widget,
.ast-above-footer .widget:last-child {
  margin: 0 !important;
}

/* Por si tu bloque tiene “espacio extra” arriba/abajo */
.ast-above-footer .widget-content,
.ast-above-footer .widget_text,
.ast-above-footer .textwidget {
  padding: 0 !important;
}

.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap {
  margin: 0 !important;
}