.elementor-kit-3{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-7e11e17:#9DBBE5;--e-global-color-6b39262:#FA1F02;--e-global-color-bc69b55:#EFCE8C;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-3 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== HumiX · CTAs inline Madrid (CSS separado) ===== */
#hx-mad-ctas-inline{
  --hx-blue:#9dbbe5;
  --hx-red:#fa1f02;
  --hx-gold:#efce8c;
  --hx-ink:#0f172a;
  --gap:10px;
}

/* Contenedor de botones (sin fondo) */
#hx-mad-ctas-inline .btns{
  display:flex; flex-wrap:wrap; gap:var(--gap);
  align-items:center; justify-content:center;
  margin:0; padding:0; list-style:none;
}

/* Alineaciones: cambia la clase del contenedor a align-left / align-right si quieres */
#hx-mad-ctas-inline.align-left  .btns{ justify-content:flex-start; }
#hx-mad-ctas-inline.align-right .btns{ justify-content:flex-end;  }

/* Botones */
#hx-mad-ctas-inline .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:999px; text-decoration:none;
  font-weight:800; line-height:1; white-space:nowrap;
  border:2px solid transparent;
  transition:transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
  will-change:transform;
}
#hx-mad-ctas-inline .btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,0,0,.06); }
#hx-mad-ctas-inline .btn:hover{ transform:translateY(-1px); }

/* Variantes */
#hx-mad-ctas-inline .btn-primary{
  background:var(--hx-red); color:#fff;
}
#hx-mad-ctas-inline .btn-primary:hover{
  filter:saturate(108%) brightness(1.02);
}

#hx-mad-ctas-inline .btn-ghost{
  background:transparent; color:var(--hx-red); border-color:var(--hx-red);
}
#hx-mad-ctas-inline .btn-ghost:hover{
  background:rgba(250,31,2,.06);
}

#hx-mad-ctas-inline .btn-neutral{
  background:var(--hx-blue); color:var(--hx-ink);
}
#hx-mad-ctas-inline .btn-neutral:hover{
  filter:saturate(110%);
}

/* Responsivo */
@media (max-width:640px){
  #hx-mad-ctas-inline .btn{ width:100%; }
}
/* ===== Hero HS-221 · CSS ===== */

/* Tokens HumiX */
#hero-hs221{
  --hx-blue:#9dbbe5;
  --hx-red:#fa1f02;
  --hx-gold:#efce8c;
  --hx-ink:#0f172a;
  --hx-white:#ffffff;
  --hx-max:1200px;

  position:relative;
  /* 🔁 Reemplaza la URL por la imagen que subas a tu biblioteca de medios */
  background-image:url("https://www.humedadenmadrid.com//wp-content/uploads/sites/45/2025/10/hs-221-hero.webp");
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;

  /* Altura de hero */
  min-height:68vh;
  display:flex; align-items:center; justify-content:center;
  padding:64px 16px;
  isolation:isolate; /* para overlay */
}

/* Overlay para legibilidad de texto */
#hero-hs221 .hx-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.56) 0%, rgba(0,0,0,.36) 45%, rgba(0,0,0,.28) 100%);
  z-index:0;
}

/* Contenido */
#hero-hs221 .hx-inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--hx-max);
  margin-inline:auto;
  color:var(--hx-white);
  text-align:left;
}

/* Título y subtítulo */
#hero-hs221 .hx-title{
  margin:0 0 10px;
  font-weight:900;
  line-height:1.05;
  font-size:clamp(1.9rem,4.5vw,3rem);
  color:var(--hx-white);
}
#hero-hs221 .hx-lead{
  margin:0 0 18px;
  max-width:62ch;
  font-size:clamp(1rem,2.1vw,1.125rem);
  line-height:1.6;
  color:rgba(255,255,255,.9);
}

/* Botonera */
#hero-hs221 .hx-btns{
  display:flex; flex-wrap:wrap; gap:12px;
}
#hero-hs221 .hx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none; font-weight:800; line-height:1; white-space:nowrap;
  border:2px solid transparent;
  transition:transform .12s ease, filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
#hero-hs221 .hx-btn:focus{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.18)}
#hero-hs221 .hx-btn:hover{transform:translateY(-2px)}

/* Variantes de botón */
#hero-hs221 .hx-btn-primary{ background:var(--hx-red); color:#fff; }
#hero-hs221 .hx-btn-primary:hover{ filter:saturate(108%) brightness(1.02); }

#hero-hs221 .hx-btn-neutral{ background:var(--hx-blue); color:var(--hx-ink); }
#hero-hs221 .hx-btn-neutral:hover{ filter:saturate(112%); }

#hero-hs221 .hx-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.64); }
#hero-hs221 .hx-btn-ghost:hover{ background:rgba(255,255,255,.08); }

/* Responsive */
@media (max-width:768px){
  #hero-hs221{ min-height:72vh; padding:56px 16px; background-position:center; }
  #hero-hs221 .hx-btn{ width:100%; }
}
/* Kicker superior (etiqueta) */
#hero-hs221 .hx-kicker{
  display:inline-block;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.72rem;
  color:rgba(255,255,255,.78);
  margin:0 0 6px;
}

/* Sello dorado (rayita) bajo el H1 */
#hero-hs221 .hx-pill{
  height:8px;
  width:140px;
  border-radius:999px;
  background:#efce8c; /* Dorado HumiX */
  margin:8px 0 14px;
}

/* Opcional: ajusta márgenes si quieres el bloque más compacto */
@media (max-width:768px){
  #hero-hs221 .hx-kicker{ margin-bottom:4px; }
  #hero-hs221 .hx-pill{ margin:6px 0 12px; width:120px; }
}
/* ——— HS-221 · Ajustes finos del hero ——— */

/* 1) Separar del header fijo (ajusta --header-h si tu menú cambia de alto) */
#hero-hs221{
  --header-h:84px;
  padding-top:calc(var(--header-h) + 24px);
}
#hero-hs221 .hx-inner{ text-align:center; }
#hero-hs221 .hx-lead{ margin-inline:auto; }
#hero-hs221 .hx-btns{ justify-content:center; }

/* 2) Overlay más inteligente: oscuro a la izquierda, deja ver el diagrama a la derecha */
#hero-hs221 .hx-overlay{
  background:
    radial-gradient(80% 120% at 20% 50%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.22) 85%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.32) 50%, rgba(0,0,0,.10) 100%);
}

/* 3) Máxima legibilidad del H1 y lead */
#hero-hs221 .hx-title{
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
#hero-hs221 .hx-lead{
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.28);
}

/* 4) Botón ghost: más contraste en fondo oscuro */
#hero-hs221 .hx-btn-ghost{
  color:#fff; 
  border-color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.02);
}
#hero-hs221 .hx-btn-ghost:hover{
  background:rgba(255,255,255,.10);
  border-color:#fff;
}

/* 5) Botón azul: tacto premium */
#hero-hs221 .hx-btn-neutral{
  background:#9dbbe5; color:#0f172a;
  box-shadow:0 6px 20px rgba(157,187,229,.22);
}
#hero-hs221 .hx-btn-neutral:hover{
  filter:saturate(112%);
}

/* 6) Espaciado y wrap de botones en pantallas medianas */
@media (max-width:1024px){
  #hero-hs221 .hx-btns{gap:10px}
}
@media (max-width:768px){
  #hero-hs221{padding-top:calc(var(--header-h) + 14px)}
  #hero-hs221 .hx-btn{width:100%}
}

/* 7) Si ves un “bloque negro” detrás del texto y no lo quieres: fuerza transparente */
#hero-hs221 .hx-inner{
  background:transparent !important;
}
#hero-hs221 .hx-kicker{ color:rgba(255,255,255,.85); }
/* ===== Refinos HS-221 ===== */

/* Mejor legibilidad: overlay un pelín más oscuro a la izquierda y limpio a la derecha */
#hero-hs221 .hx-overlay{
  background:linear-gradient(90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.46) 42%,
    rgba(0,0,0,.22) 72%,
    rgba(0,0,0,.10) 100%);
}

/* Ancho cómodo del bloque de texto en desktop */
#hero-hs221 .hx-inner{
  max-width:1100px;             /* antes 1200; da más aire a la derecha */
  padding-inline:24px;
}

/* Título un pelín más compacto y con micro-shadow para contraste */
#hero-hs221 .hx-title{
  font-size:clamp(2rem,4.2vw,3rem);
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* Subtítulo más legible sobre fondo oscuro */
#hero-hs221 .hx-lead{
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 6px rgba(0,0,0,.3);
}

/* Botonera: altura uniforme y anillos sutiles */
#hero-hs221 .hx-btn{
  padding:14px 20px;            /* un poco más alto para look “pro” */
  box-shadow:0 4px 20px rgba(0,0,0,.18);
}
#hero-hs221 .hx-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(0,0,0,.22);
}
#hero-hs221 .hx-btn-ghost{
  color:#fff;
  border-color:rgba(255,255,255,.7);   /* mejor contraste que gris oscuro */
  background:rgba(0,0,0,.15);
}
#hero-hs221 .hx-btn-ghost:hover{
  background:rgba(255,255,255,.10);
}

/* Pastilla dorada más corta y gruesa (sello HumiX) */
#hero-hs221 .hx-pill{
  width:120px; height:9px; border-radius:999px; background:#efce8c;
}

/* Evitar que el header fijo tape el ancla al hacer scroll */
#como-funciona, #ventajas, #contacto{
  scroll-margin-top:100px;      /* ajusta a la altura real de tu cabecera */
}

/* Responsive: botones a 100% y textos con respiración */
@media (max-width:768px){
  #hero-hs221{ padding:64px 16px; }
  #hero-hs221 .hx-btn{ width:100%; }
  #hero-hs221 .hx-title{ font-size:clamp(1.7rem,7vw,2.3rem); }
  #hero-hs221 .hx-lead{ font-size:1rem; }
}
/* Si tu columna/inner tiene fondo negro, neutralízalo */
#hero-hs221 .hx-inner, 
#hero-hs221 .elementor-container .elementor-column .elementor-widget-wrap{
  background:transparent !important;
}
#hero-hs221 .hx-btn-neutral{
  background:#9dbbe5; color:#0f172a; border:2px solid rgba(255,255,255,.22);
}
#hero-hs221 .hx-btn-neutral:hover{ filter:saturate(112%); }
/* ========== HS-221 · HOTFIX con alta especificidad ========== */
html body .elementor section#hero-hs221,
html body .elementor .elementor-section#hero-hs221,
html body #hero-hs221{
  /* Reemplaza la URL por tu imagen */
  background-image: url("YOUR_IMAGE_URL_HERE") !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  min-height: 68vh !important;
  padding: 64px 16px !important;
  isolation: isolate !important;
}

html body #hero-hs221 .hx-overlay{
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.46) 42%,
    rgba(0,0,0,.22) 72%,
    rgba(0,0,0,.10) 100%) !important;
  z-index: 0 !important;
}

html body #hero-hs221 .hx-inner{
  position: relative !important;
  z-index: 1 !important;
  max-width: 1100px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
  color: #fff !important;
}

html body #hero-hs221 .hx-title{
  margin: 0 0 10px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  font-size: clamp(2rem,4.2vw,3rem) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
  color: #fff !important;
}

html body #hero-hs221 .hx-lead{
  margin: 0 0 18px !important;
  max-width: 62ch !important;
  font-size: clamp(1rem,2.1vw,1.125rem) !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.92) !important;
}

/* Botones */
html body #hero-hs221 .hx-btns{ display:flex !important; flex-wrap:wrap !important; gap:12px !important; }
html body #hero-hs221 .hx-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
  padding:14px 20px !important; border-radius:999px !important; text-decoration:none !important; font-weight:800 !important;
  line-height:1 !important; white-space:nowrap !important; border:2px solid transparent !important;
  box-shadow:0 4px 20px rgba(0,0,0,.18) !important;
  transition:transform .12s ease, filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease !important;
}
html body #hero-hs221 .hx-btn:hover{ transform:translateY(-2px) !important; box-shadow:0 8px 26px rgba(0,0,0,.22) !important; }

html body #hero-hs221 .hx-btn-primary{ background:#fa1f02 !important; color:#fff !important; }
html body #hero-hs221 .hx-btn-neutral{ background:#9dbbe5 !important; color:#0f172a !important; }
html body #hero-hs221 .hx-btn-ghost{ background:rgba(0,0,0,.15) !important; color:#fff !important; border-color:rgba(255,255,255,.7) !important; }
html body #hero-hs221 .hx-btn-ghost:hover{ background:rgba(255,255,255,.10) !important; }

/* Pastilla dorada (si la usas) */
html body #hero-hs221 .hx-pill{ width:120px !important; height:9px !important; border-radius:999px !important; background:#efce8c !important; margin:8px 0 14px !important; }

/* Evitar que el header fijo tape anclas */
#como-funciona, #ventajas, #contacto{ scroll-margin-top: 100px !important; }

/* Quitar “caja negra” si la columna de Elementor trae fondo */
#hero-hs221 .elementor-widget-wrap{ background: transparent !important; }

/* Responsive */
@media (max-width:768px){
  html body #hero-hs221{ min-height:72vh !important; padding:56px 16px !important; background-position:center !important; }
  html body #hero-hs221 .hx-btn{ width:100% !important; }
  html body #hero-hs221 .hx-title{ font-size:clamp(1.7rem,7vw,2.3rem) !important; }
  html body #hero-hs221 .hx-lead{ font-size:1rem !important; }
}
/* ========== HS-221 · HOTFIX con alta especificidad ========== */
html body .elementor section#hero-hs221,
html body .elementor .elementor-section#hero-hs221,
html body #hero-hs221{
  /* Reemplaza la URL por tu imagen */
  background-image: url("https://www.humedadenmadrid.com//wp-content/uploads/sites/45/2025/10/hs-221-hero.webp") !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  min-height: 68vh !important;
  padding: 64px 16px !important;
  isolation: isolate !important;
}

html body #hero-hs221 .hx-overlay{
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.46) 42%,
    rgba(0,0,0,.22) 72%,
    rgba(0,0,0,.10) 100%) !important;
  z-index: 0 !important;
}

html body #hero-hs221 .hx-inner{
  position: relative !important;
  z-index: 1 !important;
  max-width: 1100px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
  color: #fff !important;
}

html body #hero-hs221 .hx-title{
  margin: 0 0 10px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  font-size: clamp(2rem,4.2vw,3rem) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
  color: #fff !important;
}

html body #hero-hs221 .hx-lead{
  margin: 0 0 18px !important;
  max-width: 62ch !important;
  font-size: clamp(1rem,2.1vw,1.125rem) !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.92) !important;
}

/* Botones */
html body #hero-hs221 .hx-btns{ display:flex !important; flex-wrap:wrap !important; gap:12px !important; }
html body #hero-hs221 .hx-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
  padding:14px 20px !important; border-radius:999px !important; text-decoration:none !important; font-weight:800 !important;
  line-height:1 !important; white-space:nowrap !important; border:2px solid transparent !important;
  box-shadow:0 4px 20px rgba(0,0,0,.18) !important;
  transition:transform .12s ease, filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease !important;
}
html body #hero-hs221 .hx-btn:hover{ transform:translateY(-2px) !important; box-shadow:0 8px 26px rgba(0,0,0,.22) !important; }

html body #hero-hs221 .hx-btn-primary{ background:#fa1f02 !important; color:#fff !important; }
html body #hero-hs221 .hx-btn-neutral{ background:#9dbbe5 !important; color:#0f172a !important; }
html body #hero-hs221 .hx-btn-ghost{ background:rgba(0,0,0,.15) !important; color:#fff !important; border-color:rgba(255,255,255,.7) !important; }
html body #hero-hs221 .hx-btn-ghost:hover{ background:rgba(255,255,255,.10) !important; }

/* Pastilla dorada (si la usas) */
html body #hero-hs221 .hx-pill{ width:120px !important; height:9px !important; border-radius:999px !important; background:#efce8c !important; margin:8px 0 14px !important; }

/* Evitar que el header fijo tape anclas */
#como-funciona, #ventajas, #contacto{ scroll-margin-top: 100px !important; }

/* Quitar “caja negra” si la columna de Elementor trae fondo */
#hero-hs221 .elementor-widget-wrap{ background: transparent !important; }

/* Responsive */
@media (max-width:768px){
  html body #hero-hs221{ min-height:72vh !important; padding:56px 16px !important; background-position:center !important; }
  html body #hero-hs221 .hx-btn{ width:100% !important; }
  html body #hero-hs221 .hx-title{ font-size:clamp(1.7rem,7vw,2.3rem) !important; }
  html body #hero-hs221 .hx-lead{ font-size:1rem !important; }
}
/* ===== HumiX · Separador dorado ancho completo ===== */
#hx-gold-sep{
  --hx-gold:#efce8c;
  --hx-bg:transparent;      /* deja transparente para integrarlo con el hero */
  --hx-line-h:3px;          /* grosor de la línea */
  --hx-dot:22px;            /* tamaño de la bolita */
  --hx-shadow:0 6px 20px rgba(239,206,140,.35);
  position:relative;
  z-index:2;
  /* Truco full-bleed dentro de contenedores Elementor */
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw; max-width:100vw;
  background:var(--hx-bg);
  padding:18px 0 28px;      /* espacio arriba/abajo */
  display:flex; align-items:center; justify-content:center;
}

/* Línea dorada a ancho completo */
#hx-gold-sep .hx-line{
  position:relative;
  width:100%;
  height:var(--hx-line-h);
  background:linear-gradient(90deg, transparent 0%, var(--hx-gold) 10%, var(--hx-gold) 90%, transparent 100%);
  opacity:.95;
}

/* ===== HumiX · Separador dorado ancho completo (centrado + chevron) ===== */
#hx-gold-sep{
  --hx-gold:#efce8c;
  --hx-line-h:3px;         /* grosor de la línea */
  --hx-dot:26px;           /* tamaño de la bolita */
  --hx-shadow:0 6px 20px rgba(239,206,140,.35);

  position:relative;
  z-index:2;

  /* Full-bleed incluso dentro de contenedores Elementor */
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw; max-width:100vw;

  background:transparent;
  padding:18px 0 28px;
  display:flex; align-items:center; justify-content:center;
}

/* Área clicable: ocupa todo el ancho */
#hx-gold-sep .hx-skip{
  position:relative;
  display:block;
  width:100%;
  text-decoration:none;
  outline:none;
}

/* Línea dorada visible a ancho completo */
#hx-gold-sep .hx-line{
  display:block;
  width:100%;
  height:var(--hx-line-h);
  background:linear-gradient(90deg, transparent 0%, var(--hx-gold) 10%, var(--hx-gold) 90%, transparent 100%);
  opacity:.95;
  position:relative;
  z-index:1;
}

/* Bolita dorada centrada EXACTA */
#hx-gold-sep .hx-dot{
  position:absolute;
  top:50%;
  left:50%;                         /* <-- centra horizontalmente */
  transform:translate(-50%, -50%);  /* centra vertical + horizontal */
  width:var(--hx-dot);
  height:var(--hx-dot);
  background:var(--hx-gold);
  border-radius:999px;
  box-shadow:var(--hx-shadow);
  border:2px solid rgba(255,255,255,.85); /* aro para fondos oscuros */
  z-index:2;
}

/* Chevron interno (flecha) hecho con bordes */
#hx-gold-sep .hx-dot::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:8px; height:8px;
  border-right:3px solid rgba(0,0,0,.55);
  border-bottom:3px solid rgba(0,0,0,.55);
  transform:translate(-50%, -40%) rotate(45deg); /* ↘ rota = flecha abajo */
  border-radius:1px;
}

/* Interacciones */
#hx-gold-sep .hx-skip:hover .hx-dot{ transform:translate(-50%, -50%) scale(1.06); }
#hx-gold-sep .hx-skip:focus .hx-dot{ outline:3px solid rgba(239,206,140,.45); outline-offset:4px; }

/* Pulse sutil invitando a scroll */
@keyframes hxPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(239,206,140,.45); }
  50%      { box-shadow:0 0 0 12px rgba(239,206,140,0); }
}
#hx-gold-sep .hx-dot{ animation:hxPulse 2.2s ease-in-out infinite; }

/* Scroll suave + anclas con header fijo */
html{ scroll-behavior:smooth; }
#como-funciona{ scroll-margin-top:100px; }  /* ajusta a la altura de tu cabecera */
/* ===== Hero EcoPair Plus · CSS ===== */

/* Tokens HumiX */
#hero-ecopair{
  --hx-blue:#9dbbe5;
  --hx-red:#fa1f02;
  --hx-gold:#efce8c;
  --hx-ink:#0f172a;
  --hx-white:#ffffff;
  --hx-max:1200px;

  position:relative;
  /* 🔁 Sustituye por la URL de tu imagen de hero EcoPair */
  background-image:url("https://www.humedadenmadrid.com/wp-content/uploads/sites/45/2025/10/ecopair-hero.webp");
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;

  min-height:68vh;
  display:flex; align-items:center; justify-content:center;
  isolation:isolate;
}

/* Overlay para legibilidad */
#hero-ecopair .hx-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.46) 42%,
    rgba(0,0,0,.22) 72%,
    rgba(0,0,0,.10) 100%);
  z-index:0;
}

/* Contenido */
#hero-ecopair .hx-inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--hx-max);
  margin-inline:auto; padding-inline:24px;
  color:var(--hx-white);
  text-align:left;
}

/* Kicker y sello dorado */
#hero-ecopair .hx-kicker{
  display:inline-block;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-size:.72rem; color:rgba(255,255,255,.78);
  margin:0 0 6px;
}
#hero-ecopair .hx-pill{
  height:8px; width:140px; border-radius:999px;
  background:var(--hx-gold);
  margin:8px 0 14px;
}

/* Título y subtítulo */
#hero-ecopair .hx-title{
  margin: 0 10px; font-weight:900; line-height:1.05;
  font-size:clamp(2rem,4.2vw,3rem); color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
#hero-ecopair .hx-lead{
  margin:0 0 18px; max-width:62ch;
  font-size:clamp(1rem,2.1vw,1.125rem); line-height:1.6;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 6px rgba(0,0,0,.3);
}

/* Botonera */
#hero-ecopair .hx-btns{ display:flex; flex-wrap:wrap; gap:12px; }
#hero-ecopair .hx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 20px; border-radius:999px;
  text-decoration:none; font-weight:800; line-height:1; white-space:nowrap;
  border:2px solid transparent;
  box-shadow:0 4px 20px rgba(0,0,0,.18);
  transition:transform .12s ease, filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
#hero-ecopair .hx-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.22); }

#hero-ecopair .hx-btn-primary{ background:var(--hx-red); color:#fff; }
#hero-ecopair .hx-btn-neutral{ background:var(--hx-blue); color:var(--hx-ink); }
#hero-ecopair .hx-btn-ghost{ background:rgba(0,0,0,.15); color:#fff; border-color:rgba(255,255,255,.7); }
#hero-ecopair .hx-btn-ghost:hover{ background:rgba(255,255,255,.10); }

/* Anclas con header fijo */
#como-funciona-ecopair, #ventajas-ecopair, #contacto{ scroll-margin-top:100px; }

/* Responsive */
@media (max-width:768px){
  #hero-ecopair{ min-height:72vh; padding:56px 16px; background-position:center; }
  #hero-ecopair .hx-btn{ width:100%; }
  #hero-ecopair .hx-title{ font-size:clamp(1.7rem,7vw,2.3rem); }
  #hero-ecopair .hx-lead{ font-size:1rem; }
}
/* ===== Separador dorado (EcoPair) ancho completo ===== */
#hx-gold-sep-ecopair{
  --hx-gold:#efce8c;
  --hx-line-h:3px;
  --hx-dot:26px;
  --hx-shadow:0 6px 20px rgba(239,206,140,.35);
  position:relative; z-index:2;
  left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  width:100vw; max-width:100vw; background:transparent;
  padding:18px 0 28px; display:flex; align-items:center; justify-content:center;
}
#hx-gold-sep-ecopair .hx-skip{ position:relative; display:block; width:100%; text-decoration:none; outline:none; }
#hx-gold-sep-ecopair .hx-line{
  display:block; width:100%; height:var(--hx-line-h);
  background:linear-gradient(90deg, transparent 0%, var(--hx-gold) 10%, var(--hx-gold) 90%, transparent 100%);
  opacity:.95; position:relative; z-index:1;
}
#hx-gold-sep-ecopair .hx-dot{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:var(--hx-dot); height:var(--hx-dot); background:var(--hx-gold); border-radius:999px;
  border:2px solid rgba(255,255,255,.85); box-shadow:var(--hx-shadow); z-index:2;
}
#hx-gold-sep-ecopair .hx-dot::after{
  content:""; position:absolute; top:50%; left:50%; width:8px; height:8px;
  border-right:3px solid rgba(0,0,0,.55); border-bottom:3px solid rgba(0,0,0,.55);
  transform:translate(-50%,-40%) rotate(45deg); border-radius:1px;  /* chevron ↓ */
}
#hx-gold-sep-ecopair .hx-skip:hover .hx-dot{ transform:translate(-50%,-50%) scale(1.06); }
@keyframes hxPulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,206,140,.45);} 50%{box-shadow:0 0 0 12px rgba(239,206,140,0);} }
#hx-gold-sep-ecopair .hx-dot{ animation:hxPulse 2.2s ease-in-out infinite; }
html{ scroll-behavior:smooth; }
#como-funciona-ecopair{ scroll-margin-top:100px; } /* ajusta a la altura de tu header fijo */
/* ===== ECOPAIR = HS-221 · ALTURA Y ESPACIADO ===== */
html body .elementor section#hero-ecopair,
html body .elementor .elementor-section#hero-ecopair,
html body #hero-ecopair{
  min-height:68vh !important;          /* = HS-221 */
  padding:64px 16px !important;         /* = HS-221 (base) */
  background-size:cover !important;
  background-position:center right !important;
  background-repeat:no-repeat !important;
  position:relative !important;
  isolation:isolate !important;
}

/* Si tienes header fijo, añade el mismo “respiro” que en HS-221 */
#hero-ecopair{
  --header-h:84px;
  padding-top:calc(var(--header-h) + 24px) !important;
}

/* Mismo layout visual que HS-221 */
#hero-ecopair .hx-inner{ 
  max-width:1100px !important; 
  margin-inline:auto !important; 
  padding-inline:24px !important; 
  color:#fff !important; 
  text-align:center !important;        /* centrado como HS-221 */
}
#hero-ecopair .hx-btns{ justify-content:center !important; }

/* Overlay igual que HS-221 (legibilidad) */
#hero-ecopair .hx-overlay{
  position:absolute !important; inset:0 !important;
  background:linear-gradient(90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.46) 42%,
    rgba(0,0,0,.22) 72%,
    rgba(0,0,0,.10) 100%) !important;
  z-index:0 !important;
}/* End custom CSS */