.elementor-kit-9{--e-global-color-primary:#0F172A;--e-global-color-secondary:#64748B;--e-global-color-text:#E5E7EB;--e-global-color-accent:#22C55E;--e-global-color-915ea3e:#FA1F02;--e-global-color-d918825:#9DBBE5;--e-global-color-34c168f:#EFCE8C;--e-global-color-588f641:#020617;--e-global-color-def7a1c:#0B1220;--e-global-color-89f2fa1:#FFFFFF;--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-kit-9 e-page-transition{background-color:#FFBC7D;}.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);}@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 *//* ====== HERO ESTILO LANZAROTE · HUMIX ====== */
:root{
  --hx-blue:#9dbbe5;      /* Azul HumiX */
  --hx-red:#fa1f02;       /* Rojo HumiX */
  --hx-gold:#efce8c;      /* Dorado HumiX */
  --hx-ink:#0f172a;       /* Texto principal */
  --hx-muted:#64748b;     /* Texto suave */

  /* Fondos principales */
  --hx-bg:#050818;        /* Fondo oscuro (hero/contacto) */
  --hx-card:#0b1220;      /* Tarjetas oscuras */
  --hx-accent:#22c55e;    /* Acento verde opcional */

  /* NUEVOS COLORES ALEGRES PARA SECCIONES */
  --hx-soft:#eaf3ff;      /* Azul cielo pastel para fondos de sección */
  --hx-soft-alt:#fff7eb;  /* Crema cálido para alternar secciones */
}

.hx-hero-lz{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  padding:140px 0 100px;
}

/* Overlay oscuro SIN blur y un poco más ligero */
.hx-hero-lz::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);  /* antes .55 */
  z-index:0;
}

.hx-hero-lz .hx-wrap{
  position:relative;
  z-index:2;
}

/* Eyebrow dorado Humix */
.hx-hero-eyebrow{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--hx-gold);   /* DORADO HUMIX */
  margin-bottom:10px;
}

/* H1 sólido y muy legible */
.hx-hero-title{
  font-size:clamp(2.6rem, 4vw, 4rem);
  line-height:1.05;
  font-weight:800;
  color:#ffffff !important;
  max-width:16ch;
  text-shadow:0 6px 18px rgba(0,0,0,.85);  /* halo oscuro para que destaque */
}

/* Párrafo hero más claro y con halo */
.hx-hero-lead{
  font-size:1.1rem;
  color:#f9fafb !important;
  line-height:1.6;
  max-width:520px;
  margin-top:14px;
  text-shadow:0 4px 14px rgba(0,0,0,.85);
}

/* Botones */
.hx-btn-lz{
  display:inline-flex;
  align-items:center;
  padding:14px 26px;
  border-radius:50px;
  font-size:1rem;
  font-weight:600;
  margin-right:14px;
  text-decoration:none;
  transition:.2s ease-in-out;
}

/* Botón rojo Humix */
.hx-btn-lz--primary{
  background:var(--hx-red);  /* ROJO HUMIX */
  color:#fff;
}

.hx-btn-lz--primary:hover{
  filter:brightness(1.12);
}

/* Botón secundario */
.hx-btn-lz--ghost{
  background:rgba(255,255,255,.12);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.3);
}

.hx-btn-lz--ghost:hover{
  background:rgba(255,255,255,.22);
}

/* Tarjeta derecha opcional */
.hx-hero-box{
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  padding:32px 28px;
  border-radius:22px;
  color:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  max-width:420px;
}

/* Opcional: un poco más compacto en móvil */
@media (max-width:768px){
  .hx-hero-lz{
    padding:120px 16px 80px;
  }
  .hx-hero-title{
    font-size:clamp(2.2rem, 7vw, 2.6rem);
  }
}
.hx-hero-lz .elementor-container{
  display:flex !important;
  align-items:center !important;
}
.hx-hero-lz .elementor-column{
  margin:0 !important;
}
/* ===== Ajustes HERO móvil mejorados ===== */
@media (max-width: 768px){

  .hx-hero-lz{
    padding:90px 18px 60px;      /* un poco menos arriba y más margen lateral */
  }

  .hx-hero-lz .hx-wrap{
    max-width:480px;
    margin:0 auto;
  }

  .hx-hero-eyebrow{
    font-size:0.8rem;
    margin-bottom:6px;
  }

  .hx-hero-title{
    font-size:1.9rem;           /* antes más grande */
    line-height:1.25;           /* más aire entre líneas */
    max-width:100%;
    margin-bottom:10px;         /* separarlo del párrafo */
  }

  .hx-hero-lead{
    font-size:0.95rem;
    line-height:1.6;            /* texto más respirado */
    margin-bottom:18px;
  }

  /* Botones en columna, con aire entre ellos */
  .hx-btn-lz{
    width:100%;
    justify-content:center;
    margin-right:0;
    margin-bottom:10px;
  }

  .hx-hero-box{
    max-width:100%;
  }
}

/* HERO · forzar blanco sí o sí */
body .hx-hero-lz .hx-hero-title{
  color:#ffffff !important;
}

body .hx-hero-lz .hx-hero-lead{
  color:#f9fafb !important;
}

body .hx-hero-lz .hx-hero-eyebrow{
  color:var(--hx-gold) !important;
}


/* (opcional) Párrafo un pelín más claro también */


/* ===== SECCIONES GENERALES ===== */
.hx-section{
  width:100%;
  padding:80px 16px;
}

.hx-section--light{
  background:#ffffff;
}

.hx-wrap{
  max-width:1280px;
  margin:0 auto;
}
/* NUEVO: sección azul cielo alegre (úsala en bloques de texto, servicios, info) */
.hx-section--soft{
  background:var(--hx-soft);
}
/* NUEVO: sección crema cálida (para alternar y romper el azul) */
.hx-section--soft-alt{
  background:var(--hx-soft-alt);
}
/* Grid 2 columnas genérico */
.hx-grid-2{
  display:flex;
  gap:40px;
  align-items:center;
  justify-content:space-between;
}

@media (max-width:900px){
  .hx-grid-2{
    flex-direction:column;
  }
}

/* Titulares sección */
.hx-eyebrow{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--hx-gold);
  margin-bottom:.4rem;
}

.hx-title-section{
  font-size:clamp(2rem, 3vw, 2.4rem);
  line-height:1.1;
  font-weight:700;
  margin-bottom:.8rem;
}

.hx-lead{
  font-size:1.02rem;
  line-height:1.6;
  color:var(--hx-muted);
}
.hx-wrap{
  max-width:1280px;   /* antes 1200 */
}
@media (max-width:900px){
  .hx-grid-2 > div:last-child{
    margin-top:24px;
  }
}
/* ===== SECCIÓN SERVICIOS ===== */
/* Si quieres mantenerla oscura: */
.hx-section--dark{
  background:linear-gradient(135deg, #050818 0%, #0b1220 55%, #111827 100%);
  color:#e5e7eb;
}

/* Grid de 4 columnas */
.hx-grid-4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
  margin-top:32px;
}

@media (max-width:1024px){
  .hx-grid-4{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:640px){
  .hx-grid-4{
    grid-template-columns:1fr;
  }
}



.hx-service-tag{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--hx-gold);
  margin-bottom:6px;
}

.hx-service-title{
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:4px;
}

.hx-service-text{
  font-size:.9rem;
  color:var(--hx-muted);
}

/* Cara trasera */
.hx-flip-back{
  background:#020617;
  color:#e5e7eb;
  transform:rotateY(180deg);
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.hx-service-link{
  font-size:.9rem;
  color:var(--hx-blue);
  text-decoration:none;
  margin-top:10px;
}

.hx-service-link:hover{
  text-decoration:underline;
}
/* ====== SERVICIOS · GRID ====== */
.hx-section--dark{
  background:var(--hx-bg);
  color:#e5e7eb;
}

.hx-grid-4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
  margin-top:32px;
}

@media (max-width:1024px){
  .hx-grid-4{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:640px){
  .hx-grid-4{
    grid-template-columns:1fr;
  }
}

/* ====== TARJETAS FLIP RECTANGULARES ====== */
.hx-flip-card{
  perspective:1200px;
}

.hx-flip-inner{
  position:relative;
  width:100%;
  height:400px;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
}

.hx-flip-card:hover .hx-flip-inner{
  transform:rotateY(180deg);
}

.hx-flip-face{
  position:absolute;
  inset:0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(15,23,42,.35);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  flex-direction:column;
}

/* Cara frontal */
.hx-flip-front{
  background:#020617;
  color:#e5e7eb;
}

/* 👉 AQUÍ es donde se “ve” la imagen */
.hx-flip-img{
  height:180px;                 /* si quitas esto, la imagen desaparece */
  background-size:cover;
  background-position:center;
}

/* Texto cara frontal */
.hx-flip-body{
  flex:1;
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Cara trasera */
.hx-flip-back{
  background:#020617;
  color:#e5e7eb;
  transform:rotateY(180deg);
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Etiquetas y textos */
.hx-service-tag{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--hx-gold);
  margin-bottom:6px;
}

.hx-service-title{
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:4px;
}

.hx-service-text{
  font-size:.9rem;
  color:#cbd5f5;
}

.hx-service-link{
  font-size:.9rem;
  color:var(--hx-blue);
  text-decoration:none;
  margin-top:10px;
}

.hx-service-link:hover{
  text-decoration:underline;
}
/* ===== SECCIÓN EQUIPOS ===== */
.hx-section--equipos{
  background:#f9fafb;  /* la dejamos clarita */
  color:var(--hx-ink);
  padding:100px 16px;
}

.hx-grid-2-equipos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-top:40px;
}

@media(max-width:900px){
  .hx-grid-2-equipos{
    grid-template-columns:1fr;
  }
}

/* Tarjetas de equipos */
.hx-equipo-card{
  background:#ffffff;
  border-radius:24px;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:20px;
  box-shadow:0 16px 40px rgba(15,23,42,.14);
  border:1px solid rgba(0,0,0,.05);
}

.hx-equipo-img{
  width:100%;
  height:220px;
  border-radius:18px;
  background-size:cover;
  background-position:center;
}

.hx-equipo-title{
  font-size:1.6rem;
  font-weight:700;
}

.hx-equipo-text{
  font-size:1rem;
  color:var(--hx-muted);
  line-height:1.6;
}

.hx-equipo-link{
  display:inline-block;
  margin-top:10px;
  padding:10px 22px;
  background:var(--hx-red);
  color:#fff;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  transition:.2s ease;
}

/* ===== CONTACTO HUMIX FERROL ===== */
/* La mantenemos oscura para contraste con el formulario blanco */
.hx-section--contact{
  background:#050818;
  color:#e5e7eb;
  padding:90px 16px 80px;
}

.hx-grid-2-contact{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:36px;
  align-items:center;
}

@media (max-width:900px){
  .hx-grid-2-contact{
    grid-template-columns:1fr;
  }
}

/* Tarjeta del formulario */
.hx-contact-card{
  background:#0b1220;
  border-radius:24px;
  padding:26px 22px;
  box-shadow:0 20px 50px rgba(15,23,42,.55);
  border:1px solid rgba(148,163,184,.25);
}

/* Ajustes suaves al formulario de Elementor dentro de la tarjeta */
.hx-contact-card .elementor-form-fields-wrapper{
  row-gap:10px;
}

.hx-contact-card .elementor-field-group label{
  color:#cbd5f5;
  font-size:.9rem;
}

.hx-contact-card input,
.hx-contact-card textarea,
.hx-contact-card select{
  font-size:.9rem;
}

.hx-contact-card .elementor-button{
  border-radius:999px;
  font-weight:600;
}

.hx-contact-card .elementor-button:hover{
  filter:brightness(1.1);
}
/* FORMULARIO DENTRO DE LA TARJETA CONTACTO */
.hx-contact-card .elementor-form-fields-wrapper{
  row-gap:12px;
}

.hx-contact-card .elementor-field-group{
  margin-bottom:8px;
}

.hx-contact-card .elementor-field-group label{
  color:#cbd5f5;
  font-size:.9rem;
  margin-bottom:4px;
}

/* Inputs y textarea */
.hx-contact-card input,
.hx-contact-card textarea,
.hx-contact-card select{
  font-size:.9rem;
  background:#020617;
  border:1px solid rgba(148,163,184,.45);
  color:#e5e7eb;
  border-radius:10px;
}

.hx-contact-card input::placeholder,
.hx-contact-card textarea::placeholder{
  color:#64748b;
}

/* Estados hover / focus */
.hx-contact-card input:focus,
.hx-contact-card textarea:focus,
.hx-contact-card select:focus{
  border-color:var(--hx-gold);
  box-shadow:0 0 0 1px rgba(239,206,140,.45);
}

/* Checkbox de aceptación */
.hx-contact-card .elementor-field-type-acceptance label{
  font-size:.8rem;
  color:#9ca3af;
}

/* Botón enviar */
.hx-contact-card .elementor-button{
  background:var(--hx-red);
  color:#fff;
  border-radius:999px;
  font-weight:600;
  padding:12px 24px;
  width:100%;
  justify-content:center;
  border:none;
}

.hx-contact-card .elementor-button:hover{
  filter:brightness(1.08);
}


/* ===== SECCIÓN OSCURA FAQS HUMIX ===== */
.hx-section--faqs{
  background:linear-gradient(135deg, #050818 0%, #0b1220 45%, #1f2937 100%);
  color:#e5e7eb;
  padding:100px 16px;
}

.hx-faqs-grid{
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:40px;
  align-items:flex-start;
}

@media(max-width:900px){
  .hx-faqs-grid{
    grid-template-columns:1fr;
  }
}

/* ===== TÍTULOS ===== */
.hx-section--faqs{
  background:var(--hx-soft);  /* azul cielo pastel */
  color:#0f172a;
  padding:100px 16px;
}

.hx-section--faqs .hx-title-section{
  color:#fff;
  margin-bottom:12px;
}

.hx-section--faqs .hx-lead{
  color:#cbd5f5;
  margin-bottom:24px;
}

/* ===== FAqs estilo OSCURO ===== */
.hx-faq{
  background:#111827;
  border:1px solid rgba(255,255,255,.05);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transition:.25s ease;
}

.hx-faq summary{
  cursor:pointer;
  padding:18px 20px;
  font-size:1rem;
  font-weight:600;
  color:#fff;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.hx-faq summary::-webkit-details-marker{
  display:none;
}

/* Icono flecha */
.hx-faq-icon{
  font-size:1.1rem;
  transition:.25s ease;
  color:#9ca3af;
}

.hx-faq[open] .hx-faq-icon{
  transform:rotate(90deg);
  color:var(--hx-gold);
}

.hx-faq[open] summary{
  background:#1e293b;
}

/* Contenido */
.hx-faq .hx-faq-content{
  padding:16px 20px 20px;
  color:#cbd5f5;
  line-height:1.6;
  font-size:.95rem;
}

/* ===== IMAGEN DERECHA ===== */
.hx-faqs-image img{
  width:100%;
  border-radius:24px;
  display:block;
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}

@media(max-width:900px){
  .hx-faqs-image img{
    margin-top:30px;
  }
}
/* ===== SECCIÓN CLARA FINAL ===== */
.hx-section--light{
  background:#f9fafb;
  color:var(--hx-ink);
  padding:70px 16px 80px;
}

.hx-info-final{
  font-size:1rem;
  line-height:1.7;
  color:var(--hx-muted);
}

.hx-info-final strong{
  color:var(--hx-ink);
}

.hx-info-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.hx-info-badge{
  padding:6px 12px;
  border-radius:999px;
  background:#e5edf9;
  color:#1f2933;
  font-size:.85rem;
}
/* ===== FOOTER HUMIX FERROL ===== */
.hx-footer{
  background:#050818; /* mismo tono que contacto para coherencia */
  color:#e5e7eb;
  padding:40px 16px 24px;
  margin-top:40px;
  border-top:1px solid rgba(148,163,184,.35);
}

.hx-footer .hx-wrap{
  max-width:1200px;
  margin:0 auto;
}

.hx-footer-grid{
  display:grid;
  grid-template-columns:2fr 1.5fr 1.2fr;
  gap:32px;
  margin-bottom:24px;
}

@media (max-width:900px){
  .hx-footer-grid{
    grid-template-columns:1fr;
  }
}

.hx-footer-title{
  font-size:1rem;
  font-weight:600;
  margin-bottom:10px;
}

.hx-footer p,
.hx-footer li,
.hx-footer a{
  font-size:.9rem;
  color:#9ca3af;
  line-height:1.6;
}

.hx-footer-list{
  list-style:none;
  margin:0;
  padding:0;
}

.hx-footer a{
  text-decoration:none;
}

.hx-footer a:hover{
  color:#ffffff;
}

.hx-footer-bottom{
  max-width:1200px;
  margin:0 auto;
  border-top:1px solid rgba(148,163,184,.25);
  padding-top:10px;
  font-size:.8rem;
  color:#6b7280;
  text-align:center;
}
/* ====== CABECERA HUMIX ====== */
.hx-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: 74px;
  background: rgba(15,23,42,0.82); /* Azul oscuro translúcido */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LOGO */
.hx-header img {
  max-height: 42px;
  width: auto;
}

/* MENÚ */
.hx-header-menu .elementor-item {
  color: #e5e7eb;
  font-weight: 500;
  font-size: 1rem;
  transition: .25s ease;
  padding: 6px 14px !important;
}

/* Hover dorado elegante */
.hx-header-menu .elementor-item:hover {
  color: var(--hx-gold) !important;
}

/* Estado activo */
.hx-header-menu .elementor-item-active {
  color: var(--hx-gold) !important;
  border-bottom: 2px solid var(--hx-gold);
}

/* MÓVIL */
@media (max-width: 768px){
  .hx-header {
    height: 68px;
    padding: 0 16px;
  }

  /* Menú hamburguesa */
  .hx-header-menu .elementor-nav-menu--dropdown {
    background: #0b1220 !important;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 20px 16px;
  }

  .hx-header-menu .elementor-nav-menu--dropdown .elementor-item {
    padding: 12px 0 !important;
    font-size: 1rem;
  }
}
/* Foto dentro de la tarjeta de contacto */
.hx-contact-card .hx-contact-photo img,
.hx-contact-card img.hx-contact-photo{
  width:100%;
  height:auto;
  border-radius:18px;
  margin-bottom:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  object-fit:cover;
}
/* Placeholder más visible */
.elementor-field::placeholder {
    color: #a8b3c5 !important;
    opacity: 1 !important;
}

/* Texto que escribe el usuario */
.elementor-field {
    color: #e5e7eb !important;
}

/* Etiquetas */
.elementor-field-label {
    color: #e5e7eb !important;
}

/* Select (Tipo de humedad) */
.elementor-select-wrapper select {
    color: #e5e7eb !important;
}
/* ===== FORMULARIO HUMIX · CLARO ELEGANTE (SOLO PLACEHOLDERS) ===== */

/* Contenedor */
.hx-contact-card {
    background:#ffffff !important;
    border-radius:24px !important;
    padding:30px !important;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 12px 40px rgba(0,0,0,.08);
}

/* Ocultar labels */
.hx-contact-card .elementor-field-label {
    display:none !important;
}

/* Campos */
.hx-contact-card .elementor-field {
    background:#ffffff !important;
    border:1px solid #d1d5db !important;
    color:#1f2937 !important;
    border-radius:14px !important;
    padding:14px 18px !important;
    font-size:1rem !important;
    transition:.2s ease;
}

/* Hover */
.hx-contact-card .elementor-field:hover {
    border-color:#9ca3af !important;
}

/* Foco */
.hx-contact-card .elementor-field:focus {
    border-color:#fa1f02 !important;
    box-shadow:0 0 0 2px rgba(250,31,2,.25) !important;
}

/* Placeholder elegante */
.hx-contact-card .elementor-field::placeholder {
    color:#9ca3af !important;
    opacity:1 !important;
}

/* Select */
.hx-contact-card select {
    color:#1f2937 !important;
}

/* Textarea */
.hx-contact-card textarea {
    min-height:160px !important;
}

/* Checkbox */
.hx-contact-card .elementor-field-type-acceptance input[type="checkbox"] {
    width:18px;
    height:18px;
    border:1px solid #d1d5db !important;
    border-radius:4px !important;
}

/* Texto legal */
.hx-contact-card .elementor-field-type-acceptance label {
    color:#4b5563 !important;
    font-size:.9rem !important;
}

/* Botón */
.hx-contact-card .elementor-button {
    width:100%;
    background:#fa1f02 !important;
    color:#ffffff !important;
    border-radius:30px !important;
    padding:16px !important;
    font-size:1.1rem !important;
    font-weight:700 !important;
    box-shadow:0 12px 28px rgba(250,31,2,.25);
    transition:.2s ease-in-out;
    border:none !important;
}

.hx-contact-card .elementor-button:hover {
    background:#e91a00 !important;
    transform:translateY(-2px);
}
/* TITULOS · SECCIÓN CONTACTO (columna izquierda) */
.hx-section--contact h1,
.hx-section--contact h2 {
  color:#0f172a !important;   /* azul tinta HumiX, bien legible */
}

/* Texto normal y bullets en esa columna */
.hx-section--contact p,
.hx-section--contact li {
  color:#4b5563 !important;   /* gris elegante y legible */
}

/* Eyebrow "CONTACTO" arriba del H1 */
.hx-section--contact .hx-eyebrow,
.hx-section--contact small {
  color:#9ca3af !important;
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* ===== FLECHAS DORADAS · FAQ CUSTOM ===== */

/* Contenedor de la pregunta */
.hx-faq-q {
  position:relative;
  padding-right:40px; /* hueco para la flecha */
  cursor:pointer;
}

/* Flecha dorada */
.hx-faq-q::after {
  content:"\25B6";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  font-size:0.9rem;
  color:var(--hx-gold);
  transition:transform .25s ease, color .25s ease;
}

/* Cuando la FAQ está abierta (añade clase .is-open por JS o toggle) */

/* ===== FLECHAS DORADAS · TARJETAS ===== */

/* Flecha junto al título de la tarjeta */
.hx-flip-card .hx-card-title {
  position:relative;
  padding-right:24px;
}

/* Flecha dorada a la derecha del título */
.hx-flip-card .hx-card-title::after {
  content:"\2197";   /* ↗, queda muy “link/acción” */
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  font-size:0.85rem;
  color:var(--hx-gold);
}

/* ===== Flecha dorada en el frente de las tarjetas flip ===== */

.hx-flip-face.hx-flip-front {
  position: relative;
}

.hx-flip-face.hx-flip-front::after {
  content: "→";
  position: absolute;
  right: 22px;
  bottom: 20px;
  font-size: 24px;
  color: var(--hx-gold);
  opacity: .65;
  pointer-events: none;
  transition: .25s ease;
}

.hx-flip-card:hover .hx-flip-face.hx-flip-front::after {
  opacity: 1;
  transform: translateX(8px);
}
/* ===========================
   FOOTER HUMIX CON LOGO · AJUSTADO
   =========================== */

.hx-footer-brand{
  display:flex;
  flex-direction:column;   /* Logo arriba, texto debajo */
  align-items:flex-start;  /* alineado a la izquierda */
  gap:10px;
  margin-bottom:18px;
}

.hx-footer-logo{
  max-width:90px;         /* antes 150px, ahora más pequeño */
  height:auto;
  display:block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.hx-footer-info h4{
  font-size:1.05rem;       /* un pelín más pequeño */
  font-weight:700;
  margin:0 0 4px 0;
  color:#ffffff;
}

.hx-footer-info p{
  margin:0;
  font-size:.9rem;
  color:#cbd5e1;
  line-height:1.5;
}

/* Por si en escritorio quieres un pelín más de aire arriba */
@media (min-width:1024px){
  .hx-footer-brand{
    margin-top:8px;
  }
}

/* Versión móvil */
@media (max-width:768px){
  .hx-footer-brand{
    flex-direction:column;
    align-items:flex-start;
  }

  .hx-footer-logo{
    max-width:60px;
  }
}
/* HERO más legible */
.hx-hero-lz::before{
  background:rgba(0,0,0,.45);
}

/* Servicios - separar título en móvil */
@media (max-width: 768px){
  #servicios .hx-title-section{
    margin-top:12px;
  }
}

/* Servicios - separar tarjetas en móvil */
@media (max-width: 768px){
  .hx-grid-4 article{
    margin-top:8px;
  }
}

/* Servicios - corregir espacio del título y lead */
@media (max-width: 768px){
  #servicios{
    padding-top:40px !important;
  }
  #servicios .hx-lead{
    margin-top:6px !important;
  }
}

/* Títulos en secciones claras para móvil */
@media (max-width: 768px){
  .hx-section--soft .hx-title-section{
    padding-top:16px;
    line-height:1.2;
  }
}
/* ==== PALETA MORELLA · SOLO NARANJA ==== */
:root{
  --hx-soft:#fff3e6;        /* Naranja pastel suave para secciones claras */
  --hx-soft-alt:#ffe2c4;    /* Naranja crema un poquito más intenso */
  --hx-orange-strong:#ff7a1a;
  --hx-orange-deep:#ea580c;
}

/* Secciones claras en naranja suave (alternar) */
.hx-section--soft{
  background:var(--hx-soft);
}

.hx-section--soft-alt{
  background:var(--hx-soft-alt);
}

/* Sección naranja potente (para algún bloque clave tipo “Morella y alrededores”) */
.hx-section--orange-strong{
  background:linear-gradient(135deg,var(--hx-orange-strong),var(--hx-orange-deep));
  color:#fefce8;
}

.hx-section--orange-strong .hx-title-section,
.hx-section--orange-strong .hx-eyebrow{
  color:#ffffff;
}

.hx-section--orange-strong .hx-lead{
  color:#fefce8;
}

/* FAQs también en naranja suave en lugar del azul anterior */
.hx-section--faqs{
  background:var(--hx-soft);
  color:#0f172a;
}

.hx-section--faqs .hx-title-section{
  color:#111827;
}

.hx-section--faqs .hx-lead{
  color:#4b5563;
}
/* ===== SERVICIOS MORELLA · TEXTO PRIMERO, SOLO NARANJA ===== */

/* Altura de las tarjetas algo más baja */
#servicios .hx-flip-inner{
  height:360px;
}

/* Frente de la tarjeta: degradado naranja con texto claro */
#servicios .hx-flip-front{
  background:linear-gradient(145deg,var(--hx-orange-strong),var(--hx-orange-deep));
  color:#ffffff;
}

/* Orden: primero texto, luego imagen */
#servicios .hx-flip-front .hx-flip-body{
  order:1;
  padding:20px 20px 12px;
}

#servicios .hx-flip-front .hx-flip-img{
  order:2;
  height:110px;
  opacity:.9;
  mix-blend-mode:multiply;
}

/* Textos del frente */
#servicios .hx-flip-front .hx-service-tag{
  color:#fef3c7;
}

#servicios .hx-flip-front .hx-service-title{
  font-size:1.1rem;
  margin-bottom:6px;
}

#servicios .hx-flip-front .hx-service-text{
  color:#fefce8;
}

/* Flecha dorada en el frente integrada con el naranja */
#servicios .hx-flip-face.hx-flip-front::after{
  color:#fef3c7;
}

#servicios .hx-flip-card:hover .hx-flip-face.hx-flip-front::after{
  opacity:1;
  transform:translateX(8px);
}

/* Cara trasera oscura, texto bien legible */
#servicios .hx-flip-back{
  background:#020617;
  color:#e5e7eb;
}
/* === TARJETAS SERVICIOS MORELLA · IMAGEN REAL === */

/* Quita tinte naranja sobre la imagen */
#servicios .hx-flip-front .hx-flip-img{
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
}

/* Ajusta la altura de la imagen dentro de la tarjeta */
#servicios .hx-flip-front .hx-flip-img{
    height: 130px !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Mantener solo el degradado naranja en la parte del texto */
#servicios .hx-flip-front{
    background: linear-gradient(145deg, var(--hx-orange-strong), var(--hx-orange-deep)) !important;
}

/* Mantener texto 100% blanco */
#servicios .hx-service-title,
#servicios .hx-service-tag,
#servicios .hx-service-text{
    color: #ffffff !important;
}
#servicios .hx-flip-front .hx-flip-img{
  height: 140px !important;
}
#servicios .hx-flip-front .hx-service-text{
  margin-bottom: 10px;
}
@media (max-width:768px){
  #servicios .hx-flip-front .hx-flip-img{
    height: 110px !important;
  }
}
/* ===== AJUSTE TARJETAS SERVICIOS · MÓVIL ===== */
@media (max-width: 768px){

  /* Bajamos un poco la altura total de la tarjeta */
  #servicios .hx-flip-inner{
    height: 320px !important;
  }

  /* Imagen más bajita para que se vea más texto en pantalla */
  #servicios .hx-flip-front .hx-flip-img{
    height: 110px !important;
  }

  /* Un pelín más de aire bajo el texto antes de la imagen */
  #servicios .hx-flip-front .hx-flip-body{
    padding-bottom: 10px !important;
  }
}
/* ===== CORRECCIÓN TARJETAS SERVICIOS · MÓVIL (SIN PISARSE) ===== */
@media (max-width: 768px){

  /* Dejar que la tarjeta coja la altura que necesite */
  #servicios .hx-flip-inner{
    height: auto !important;
  }

  /* Imagen algo más compacta, pero sin forzar la tarjeta */
  #servicios .hx-flip-front .hx-flip-img{
    height: 120px !important;
  }

  /* Separación entre tarjetas */
  #servicios .hx-flip-card{
    margin-bottom: 18px !important;
  }

  /* En móvil desactivamos el giro para evitar problemas de altura */
  #servicios .hx-flip-card:hover .hx-flip-inner{
    transform: none !important;
  }
  #servicios .hx-flip-back{
    display: none !important;
  }
}
/* ===== REACTIVAR GIRO DE TARJETAS EN MÓVIL SIN QUE SE PISEN ===== */
@media (max-width: 768px){

  /* La tarjeta se adapta al contenido, no se corta */
  #servicios .hx-flip-inner{
    height: auto !important;
  }

  /* Separación entre tarjetas */
  #servicios .hx-flip-card{
    margin-bottom: 20px !important;
  }

  /* Volvemos a activar el giro en hover/tap */
  #servicios .hx-flip-card:hover .hx-flip-inner{
    transform: rotateY(180deg) !important;
  }

  /* Mostramos otra vez la cara trasera */
  #servicios .hx-flip-back{
    display: flex !important;
  }
}
/* ===== FAQS · Estilo Naranja Morella ===== */

/* Fondo de la sección */
#faqs,
.hx-section--faqs {
  background: var(--hx-soft-alt) !important; /* Naranja pastel suave */
  color: #0f172a !important;
}

/* Tarjetas FAQ */
.hx-faq {
  background: #fff6ed !important; /* crema-naranja claro */
  border: 1px solid rgba(234, 88, 12, 0.25) !important; /* borde naranja suave */
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(234, 88, 12, 0.15) !important;
  transition: .25s ease;
}

/* Encabezado del acordeón */
.hx-faq summary {
  background: #fff6ed !important;
  color: #9a4b00 !important;
  font-weight: 600 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  border-radius: 16px;
}

/* Al abrir */
.hx-faq[open] summary {
  background: #ffe8d1 !important; /* más oscuro al abrir */
  color: #ea580c !important;
  border-bottom: 1px solid rgba(234, 88, 12, 0.3) !important;
}

/* Flecha */
.hx-faq-icon {
  color: #ea580c !important;
  transition: transform .25s ease, color .25s ease;
  font-size: 1rem;
}

.hx-faq[open] .hx-faq-icon {
  transform: rotate(90deg);
  color: #d9480f !important;
}

/* Contenido interno */
.hx-faq-content {
  background: #fffdf9 !important;
  color: #4b5563 !important;
  padding: 16px 20px 20px !important;
  line-height: 1.65 !important;
  border-radius: 0 0 16px 16px;
}
/* ======================================================
   FORMULARIO HUMIX · NARANJA ELEGANTE MORELLA
   ====================================================== */

/* Contenedor del formulario */
.hx-contact-card {
    background:#fff7ed !important; /* naranja crema elegante */
    border-radius:24px !important;
    padding:32px !important;
    border:1px solid rgba(234,88,12,0.25) !important;
    box-shadow:0 14px 40px rgba(234,88,12,0.15) !important;
}

/* Títulos de la columna izquierda */
.hx-section--contact h1,
.hx-section--contact h2 {
  color:#9a4b00 !important; /* naranja oscuro elegante */
}

.hx-section--contact p,
.hx-section--contact li {
  color:#7c5b38 !important;
}

/* Ocultar labels */
.hx-contact-card .elementor-field-label {
    display:none !important;
}

/* Campos */
.hx-contact-card .elementor-field {
    background:#fffdf9 !important;
    border:1px solid #f2c9a6 !important;
    color:#7c5b38 !important;
    border-radius:14px !important;
    padding:14px 18px !important;
    font-size:1rem !important;
    transition:.2s ease;
}

/* Placeholder */
.hx-contact-card .elementor-field::placeholder {
    color:#cfa67c !important;
}

/* Hover */
.hx-contact-card .elementor-field:hover {
    border-color:#ea580c !important;
}

/* Focus */
.hx-contact-card .elementor-field:focus {
    border-color:#ea580c !important;
    box-shadow:0 0 0 2px rgba(234,88,12,0.3) !important;
}

/* Checkbox */
.hx-contact-card .elementor-field-type-acceptance input[type="checkbox"] {
    width:18px;
    height:18px;
    border:1px solid #e3b08a !important;
    border-radius:4px !important;
}

/* Texto legal */
.hx-contact-card .elementor-field-type-acceptance label {
    color:#7c5b38 !important;
    font-size:.9rem !important;
}

/* Botón */
.hx-contact-card .elementor-button {
    width:100%;
    background:#ea580c !important; /* naranja elegante principal */
    color:#ffffff !important;
    border-radius:30px !important;
    padding:16px !important;
    font-size:1.1rem !important;
    font-weight:700 !important;
    box-shadow:0 14px 28px rgba(234,88,12,.25);
    border:none !important;
    transition:.2s ease-in-out;
}

.hx-contact-card .elementor-button:hover {
    background:#d9480f !important;
    transform:translateY(-2px);
}
/* ======================================================
   FOOTER HUMIX · NARANJA ELEGANTE MORELLA
   ====================================================== */

/* Fondo suave crema-naranja */
.hx-footer {
  background: #fff4e8 !important;
  border-top: 1px solid rgba(234, 88, 12, 0.25) !important;
  padding: 50px 16px 30px !important;
  color: #7c5b38 !important;
}

/* Contenedor */
.hx-footer .hx-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

/* Títulos */
.hx-footer-title {
  font-size: 1rem;
  font-weight: 700;
  color: #9a4b00 !important;
  margin-bottom: 10px;
}

/* Texto y enlaces */
.hx-footer p,
.hx-footer li,
.hx-footer a {
  font-size: .92rem;
  color: #7c5b38 !important;
  line-height: 1.6;
}

.hx-footer a:hover {
  color: #ea580c !important;
}

/* Logo */
.hx-footer-logo {
  max-width: 90px;
  filter: drop-shadow(0 4px 10px rgba(234,88,12,0.25));
}

/* Grid */
.hx-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.2fr;
  gap: 32px;
  margin-bottom: 24px;
}

@media (max-width:900px) {
  .hx-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Línea inferior */
.hx-footer-bottom {
  border-top: 1px solid rgba(234, 88, 12, 0.25) !important;
  padding-top: 12px;
  color: #a97b50 !important;
  font-size: .85rem;
  text-align: center;
}
/* HERO CON OVERLAY NARANJA SUAVE */
.hx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 231, 209, 0.65),   /* crema cálida */
    rgba(234, 88, 12, 0.35)      /* naranja elegante */
  );
  pointer-events: none;
  z-index: 0;
}

.hx-hero > * {
  position: relative;
  z-index: 2;
}
/* OVERLAY NARANJA A TODAS LAS SECCIONES CON FONDO */
.elementor-section[data-settings*="background_overlay"]::after,
.elementor-section.elementor-has-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 230, 205, 0.55),
    rgba(234, 88, 12, 0.25)
  );
  z-index: 1;
  pointer-events: none;
}

.elementor-section[data-settings*="background_overlay"] > *,
.elementor-section.elementor-has-background > * {
  position: relative;
  z-index: 3;
}
/* ============================
   OVERLAY NARANJA SUAVE PARA HERO EN CONTAINER
   ============================ */
.hx-hero-lz::before,
.elementor-container.elementor-element::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 163, 80, 0.40),   /* naranja suave arriba */
        rgba(255, 121, 36, 0.25),  /* naranja cálido al centro */
        rgba(0, 0, 0, 0.25)        /* un toque oscuro abajo */
    );
    z-index: 1;
    pointer-events: none;
}

/* Asegura que el contenido quede por encima del overlay */
.hx-hero-lz > *,
.elementor-container.elementor-element > * {
    position: relative;
    z-index: 5;
}
/* Caja negra premium con borde + glow */
.hx-hero-box,
.elementor-element .hx-hero-box {
    border: 1px solid rgba(255, 140, 0, 0.45) !important;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(255, 140, 0, 0.28),
        0 0 12px rgba(255, 180, 90, 0.18) !important;
}
/* ===== HERO BOX · BORDE + GLOW NARANJA PREMIUM ===== */
.hx-hero-box,
.elementor-element .hx-hero-box {
  border: 1px solid rgba(255, 140, 0, 0.45) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(255, 140, 0, 0.28),
    0 0 12px rgba(255, 180, 90, 0.18) !important;
}

/* Hover sutil: un poco más de luz cálida */
.hx-hero-box:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 34px rgba(255, 140, 0, 0.35),
    0 0 16px rgba(255, 190, 110, 0.24) !important;
  transition: box-shadow .25s ease;
}
/* ===========================
   CABECERA HUMIX MORELLA
   Glow cálido + borde sutil
   =========================== */

.hx-header {
  background: rgba(15, 15, 25, 0.78); /* oscuro elegante */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(255, 140, 0, 0.25); /* borde naranja suave */
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 0 14px rgba(255, 140, 0, 0.25); /* glow naranja premium */
  transition: background .25s ease, box-shadow .25s ease;
}

/* Hover (cuando pasas por encima con el ratón) */
.hx-header:hover {
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(255, 150, 40, 0.30);
}

/* MENÚ ACTIVO y HOVER en naranja */
.hx-header-menu .elementor-item:hover,
.hx-header-menu .elementor-item.elementor-item-active {
  color: #ffa55c !important; /* naranja suave */
  border-bottom: 2px solid #ffa55c !important;
}

/* ICONO HAMBURGUESA móvil */
.elementor-menu-toggle i {
  color: #ffa55c !important;
}
/* HERO BOX FINAL OPTIMIZADA */
.hx-hero-box {
  border: 1px solid rgba(255, 140, 0, 0.45) !important;
  background: rgba(0,0,0,0.55) !important; /* más cálida */
  backdrop-filter: blur(8px);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(255, 140, 0, 0.25),
    0 0 10px rgba(255, 180, 90, 0.15) !important;
  border-radius: 20px;
}
@media (max-width: 768px) {
  .hx-hero-box {
    margin-top: 22px !important;
  }
}
/* Forzar footer ancho completo crema */
.hx-footer {
    background: #fef4ea !important; /* crema suave */
    padding: 50px 20px;
    border-top: 1px solid rgba(255, 140, 0, 0.25);
    box-shadow: 0 -4px 18px rgba(255, 150, 60, 0.1);
}
/* Eliminar fondo oscuro que rodea el footer */
.elementor-section.hx-footer,
.hx-footer-section,
footer {
    background: #fef4ea !important;
}
.hx-footer-logo {
    max-width: 70px !important;
    margin-bottom: 14px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
.hx-footer * {
    color: #7b3f00 !important; /* marrón cálido */
}
.hx-footer strong {
    color: #4b2a00 !important;
}
@media (min-width: 1024px) {
    .hx-footer-grid {
        gap: 40px !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 768px) {
    .hx-footer {
        padding: 40px 18px !important;
    }
    .hx-footer-grid > div {
        margin-bottom: 26px;
    }
}
.hx-footer-bottom {
    padding-top: 12px;
    margin-top: 22px;
    border-top: 1px solid rgba(255, 140, 0, 0.3) !important;
    text-align: center;
    color: #7b3f00 !important;
}
/* Tarjetas del blog HumiX Morella */
.hx-blog-grid .elementor-post {
  background:#ffffff;
  border-radius:18px;
  padding:18px 20px 22px;
  box-shadow:0 14px 35px rgba(15,23,42,.16);
  border:1px solid rgba(239,148,60,.22);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Hover cálido en naranja */
.hx-blog-grid .elementor-post {
  background:#ffffff;
  border-radius:18px;
  padding:18px 20px 20px;
  /* 👉 Sombra más bajita y suave */
  box-shadow:0 8px 20px rgba(15,23,42,.10);
  border:1px solid rgba(239,148,60,.20);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

/* Hover también más suave */
.hx-blog-grid .elementor-post:hover {
  transform: translateY(-1px);              /* antes -2px */
  box-shadow: 0 8px 18px rgba(239,148,60,.18); /* menos sombra y menos opacidad */
  border-color: rgba(239,148,60,.35);      /* borde más discreto */
}



/* Imagen */
.hx-blog-grid .elementor-post__thumbnail img {
  border-radius:14px;
}

/* Título */
.hx-blog-grid .elementor-post__title {
  font-weight:700;
  margin-top:12px;
}

/* Extracto */
.hx-blog-grid .elementor-post__excerpt p {
  margin-bottom:10px;
}

/* Botón "Leer más" */
.hx-blog-grid .elementor-post__read-more {
  font-weight:600;
  border-radius:999px;
  padding:8px 16px;
}
/* Caja intro del blog – escritorio */
.hx-blog-intro {
  max-width: 980px;
  margin: 0 auto 32px;
  padding: 24px 32px;
  background: #ffe7d1;          /* naranja suave */
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(239, 148, 60, 0.15);
}

/* Tipografía dentro de la intro */
.hx-blog-intro .elementor-heading-title {
  font-size: 1.4rem;
  line-height: 1.2;
  margin-bottom: 10px;
}

.hx-blog-intro p {
  font-size: 1rem;
  line-height: 1.55;
}

/* Versión móvil */
@media (max-width: 767px) {
  .hx-blog-intro {
    max-width: 92%;
    margin: 0 auto 24px;
    padding: 16px 18px 20px;
  }

  .hx-blog-intro .elementor-heading-title {
    font-size: 1.2rem;
  }

  .hx-blog-intro p {
    font-size: 0.96rem;
  }
}
/* Dejar espacio bajo la cabecera solo en las entradas del blog */
body.single-post .site-main,
body.single-post .elementor-location-single {
  padding-top: 110px;
}/* End custom CSS */