.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-88b457e:#9DBBE5;--e-global-color-9d5d7be:#FA1F02;--e-global-color-e133d5e:#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-kit-3 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 */:root{ --ink:#0f172a; --text:#334155; --smoke:#e8edf3; --red:#FA1F02; --gold:#EFCE8C; --blue:#9DBBE5; --max:1320px; } .hx-inner{ max-width:var(--max); margin:auto; padding:0 22px } /* ================= HEADER ================= */ #hx-header{ background: rgba(15,23,42,.98); position: sticky; top:0; z-index:1000; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 6px 18px rgba(0,0,0,.12); } #hx-header .hx-inner, #hx-header .row{ height:72px; display:flex; align-items:center; justify-content:space-between; } #hx-header .logo img{ height:75px; width:auto } #hx-header .logo span{ display:none } /* oculta texto en desktop */ #hx-header .main-nav .menu{ display:flex; gap:22px; list-style:none; margin:0; padding:0; align-items:center; } #hx-header .main-nav a{ color:#e6edf7; text-decoration:none; font-weight:700; line-height:1; padding:8px 0 } #hx-header .main-nav a:hover{ color:#fff; text-decoration:underline } #hx-header .main-nav .cta{ padding:8px 14px; border-radius:12px; border:2px solid #fff; color:#fff } /* Toggle real oculto siempre */ .nav-toggle{ position:absolute; opacity:0; pointer-events:none } /* Botón hamburguesa (escritorio oculto) */ .nav-toggle-btn{ display:none; width:30px; height:22px; cursor:pointer; position:relative; z-index:1001; } .nav-toggle-btn span{ position:absolute; left:0; right:0; height:2.5px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .nav-toggle-btn span:nth-child(1){ top:0 } .nav-toggle-btn span:nth-child(2){ top:9px } .nav-toggle-btn span:nth-child(3){ bottom:0 } /* Desktop: nav en línea */ @media (min-width:901px){ #hx-main-nav{ position:static !important; display:flex !important; background:transparent !important; border:0 !important; box-shadow:none !important; max-height:none !important; padding:0 !important; } .nav-toggle-btn{ display:none !important } } /* Móvil: panel desplegable */ @media (max-width:900px){ #hx-header .row{ height:56px } #hx-header .logo img{ height:30px } .nav-toggle-btn{ display:block } #hx-header .main-nav{ position:absolute; left:0; right:0; top:56px; display:none; background:#0f172a; border-top:1px solid rgba(255,255,255,.08); box-shadow:0 12px 30px rgba(0,0,0,.25); max-height:70vh; overflow:auto; -webkit-overflow-scrolling:touch; padding:6px 0; z-index:1000; } #hx-header .main-nav .menu{ flex-direction:column; gap:0; padding:0; margin:0 } #hx-header .main-nav .menu li{ list-style:none; border-bottom:1px solid rgba(255,255,255,.06) } #hx-header .main-nav .menu a{ display:block; padding:12px 16px; font-size:15.5px } #hx-header .main-nav .cta{ display:block; margin:8px 16px 12px; padding:10px 14px; text-align:center; border:2px solid #fff; border-radius:10px } /* Mostrar panel cuando el checkbox está marcado */ #hx-nav-toggle:checked ~ #hx-main-nav{ display:block } /* Fallback por si el orden fuera input + label + nav */ #hx-nav-toggle:checked + .nav-toggle-btn + #hx-main-nav{ display:block } /* Animación a X */ #hx-nav-toggle:checked ~ .nav-toggle-btn span:nth-child(1){ transform:translateY(9px) rotate(45deg) } #hx-nav-toggle:checked ~ .nav-toggle-btn span:nth-child(2){ opacity:0 } #hx-nav-toggle:checked ~ .nav-toggle-btn span:nth-child(3){ transform:translateY(-9px) rotate(-45deg) } } /* ================================= HERO ================================= */ #hx-gua-hero{ position:relative; min-height:86vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; padding:120px 0; background: linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.62)), url('https://guadalajara.humixlanding.com/wp-content/uploads/sites/65/2025/10/contro_de_humedades_en_guadalajara_hero.webp') center/cover no-repeat; } #hx-gua-hero .hx-inner{ position:relative; z-index:1 } #hx-gua-hero .hx-hero-title{ color:#fff!important; font-weight:900; font-size:clamp(2.4rem,6vw,4.2rem); line-height:1.05; margin:0 0 .6rem; text-shadow:0 10px 30px rgba(0,0,0,.35); } #hx-gua-hero .hx-hero-lead{ color:#f1f5f9!important; font-size:clamp(1rem,1.6vw,1.2rem); margin:0 auto 18px; max-width:860px; } /* === 3 BOTONES del hero (limpio, sin duplicados) === */ #hx-gua-hero .elementor-widget-text-editor p{ margin-top:12px } #hx-gua-hero .elementor-widget-text-editor p a{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; margin:6px 6px 0 0; line-height:1; border-radius:9999px; border:2px solid var(--red); background:var(--red); color:#fff !important; font-weight:800; text-decoration:none !important; } #hx-gua-hero .elementor-widget-text-editor p a[href*="solucion"], #hx-gua-hero .elementor-widget-text-editor p a[href*="soluciones"]{ background:transparent; color:var(--red) !important; } #hx-gua-hero .elementor-widget-text-editor p a[href*="wa.me"], #hx-gua-hero .elementor-widget-text-editor p a[href*="whatsapp"]{ border-color:#25D366; background:#25D366; color:#fff !important; } #hx-gua-hero .elementor-widget-text-editor p a:hover{ transform:translateY(-1px) } /* Importante: NO convertir otros enlaces/iconos del hero (bolita de scroll, etc.) */ #hx-gua-hero .elementor-widget-icon a, #hx-gua-hero a.elementor-icon, #hx-gua-hero .elementor-icon-wrapper a, #hx-gua-hero a[class*="scroll"], #hx-gua-hero a[class*="down"], #hx-gua-hero .elementor-widget-button a.elementor-button-link{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; border-radius:0 !important; color:inherit !important; box-shadow:none !important; } /* Flecha “siguiente sección” (bolita) */ .hx-next{ --size:48px; position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); width:var(--size); height:var(--size); display:grid; place-items:center; background:#fff; border:2px solid var(--gold); border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.12); text-decoration:none; z-index:5; transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .hx-next-icon{ width:18px; height:18px; display:inline-block; border-right:3px solid var(--gold); border-bottom:3px solid var(--gold); transform:rotate(45deg); margin-top:-2px; } .hx-next:hover{ transform:translateX(-50%) translateY(-3px); background:var(--gold); border-color:var(--gold) } .hx-next:hover .hx-next-icon{ border-color:#0f172a } /* ===================== SECCIONES BASE ===================== */ .section{ padding:56px 0; position:relative } .section h2{ color:var(--ink); margin:0 0 .6rem } .section p{ color:var(--text) } /* ===================== FRANJA DE EQUIPOS ===================== */ #hx-equipo-band{ background:#0f172a0a; padding:56px 0 } #hx-equipo-band .hx-inner{ text-align:center } #hx-equipo-band .eyebrow{ letter-spacing:.14em; font-weight:800; color:var(--gold); margin:0 0 8px } #hx-equipo-band .section-title{ margin:0 0 8px; color:var(--ink) } #hx-equipo-band .section-subtitle{ margin:0 0 22px; color:var(--text) } /* Rejilla fluida: coloca 5/4/3/2/1 por fila según ancho */ #hx-equipo-band .equip-grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } #hx-equipo-band .equip-card{ background:#fff; border:1px solid var(--smoke); border-radius:14px; padding:16px; text-align:left; box-shadow:0 12px 30px rgba(6,20,33,.08); text-decoration:none; transition:transform .15s ease, box-shadow .2s ease; } #hx-equipo-band .equip-card:hover{ transform:translateY(-3px); box-shadow:0 18px 42px rgba(6,20,33,.12) } #hx-equipo-band img{ width:100%; height:auto; display:block; border-radius:10px; margin-bottom:10px } #hx-equipo-band h3{ margin:.2rem 0 .25rem; color:var(--ink) } #hx-equipo-band p{ margin:0; color:#475569; font-size:.95rem; line-height:1.35 } /* ===================== FAQS (con imagen lateral) ===================== */ #hx-faqs-hero{ padding:56px 0 } #hx-faqs-hero .hx-inner{ max-width:1100px; margin:auto; padding:0 22px } #hx-faqs-hero .eyebrow{ letter-spacing:.14em; font-weight:800; color:var(--gold); margin:0 0 8px } #hx-faqs-hero .section-title{ margin:0 0 8px; color:var(--ink) } #hx-faqs-hero .section-subtitle{ margin:0 0 20px; color:var(--text) } #hx-faqs-hero .faq-wrap{ display:grid; gap:28px; grid-template-columns:1.25fr 1fr; align-items:stretch; } #hx-faqs-hero .faq-col{ background:#fff; border:1px solid var(--smoke); border-radius:14px; padding:18px; box-shadow:0 12px 30px rgba(6,20,33,.08); } #hx-faqs-hero .faq-art{ border-radius:14px; overflow:hidden; position:relative; min-height:360px; box-shadow:0 16px 40px rgba(6,20,33,.16); background-image: linear-gradient(180deg,rgba(15,23,42,.45),rgba(15,23,42,.25)), url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' opacity='.16'%3E%3Cpath d='M100 10c15 30-10 35-10 60s25 30 10 60c-15-30 10-35 10-60s-25-30-10-60z' fill='%23ffffff'/%3E%3Cpath d='M40 70c10 20-7 24-7 41s18 21 7 41c-11-20 7-24 7-41S50 90 40 70z' fill='%23ffffff'/%3E%3Cpath d='M160 90c12 24-8 28-8 49s20 25 8 49c-12-24 8-28 8-49s-20-25-8-49z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E"), url('https://guadalajara.humixlanding.com/wp-content/uploads/sites/65/2025/10/faqs_preguntas_frecuentes.webp'); background-size:cover, 320px 320px, cover; background-position:center, right top, center; background-repeat:no-repeat; } @media (max-width:1024px){ #hx-faqs-hero .faq-wrap{ grid-template-columns:1fr } #hx-faqs-hero .faq-art{ min-height:260px; margin-top:8px } } /* Acordeón de Elementor (títulos visibles) */ #hx-faqs-hero .elementor-accordion .elementor-tab-title{ background:#fff; border:1px solid var(--smoke); border-radius:12px; margin-top:12px; padding:14px 16px; color:var(--ink); font-weight:700; } #hx-faqs-hero .elementor-accordion .elementor-tab-title a{ color:inherit !important; display:block } #hx-faqs-hero .elementor-accordion .elementor-tab-content{ background:#fff; border:1px solid var(--smoke); border-top:0; border-radius:0 0 12px 12px; padding:14px 16px; color:#334155; } /* ===================== FOOTER (sin cambios de look) ===================== */ /* ... (tu bloque actual del footer ya está bien, no lo repito para no alargar) ... */ /* === HÉROE · Botones consistentes para los 3 enlaces === */ /* Espacio sobre la fila de CTAs si están en el mismo párrafo */ #hx-gua-hero .elementor-widget-text-editor p{ margin-top:12px; } /* 1) Base: TODOS los enlaces directos del párrafo -> botón rojo */ #hx-gua-hero .elementor-widget-text-editor p > a{ display:inline-flex !important; align-items:center !important; gap:10px !important; padding:12px 16px !important; margin:6px 6px 0 0 !important; line-height:1 !important; border-radius:9999px !important; border:2px solid #FA1F02 !important; background:#FA1F02 !important; color:#fff !important; font-weight:800 !important; text-decoration:none !important; box-shadow:none !important; vertical-align:middle; } /* 2) “Ver soluciones” => ghost rojo (detecta varias rutas) */ #hx-gua-hero .elementor-widget-text-editor p > a[href*="solucion"], #hx-gua-hero .elementor-widget-text-editor p > a[href*="soluciones"], #hx-gua-hero .elementor-widget-text-editor p > a[href*="humedad-por"], #hx-gua-hero .elementor-widget-text-editor p > a[href*="/filtraciones"]{ background:transparent !important; color:#FA1F02 !important; } /* 3) WhatsApp => verde oficial */ #hx-gua-hero .elementor-widget-text-editor p > a[href*="wa.me"], #hx-gua-hero .elementor-widget-text-editor p > a[href*="whatsapp"]{ border-color:#25D366 !important; background:#25D366 !important; color:#fff !important; } /* 4) Hover sutil */ #hx-gua-hero .elementor-widget-text-editor p > a:hover{ transform:translateY(-1px); } /* 5) NO convertir en botón iconos/chevron/scroll/otros elementos */ #hx-gua-hero .elementor-widget-icon a, #hx-gua-hero a.elementor-icon, #hx-gua-hero .elementor-icon-wrapper a, #hx-gua-hero a[class*="scroll"], #hx-gua-hero a[class*="down"], #hx-gua-hero .elementor-widget-button a.elementor-button-link{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; border-radius:0 !important; color:inherit !important; box-shadow:none !important; } /* Responsive: un poco menos de padding en móvil */ @media (max-width:900px){ #hx-gua-hero .elementor-widget-text-editor p > a{ padding:10px 14px !important; } } /* ====== BASE DE CONTENEDOR Y SECCIONES ====== */ :root{ --max:1320px; } .section{ padding:56px 0; position:relative; } .section > .hx-inner{ max-width:var(--max); margin:0 auto; padding:0 22px; } /* Por si alguna inner pierde el ancho centrado */ .hx-inner{ max-width:var(--max); margin:0 auto; padding:0 22px; } /* ====== REJILLAS UTILITARIAS (colapsan en móvil) ====== */ .grid-3{ display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); } .grid-2{ display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); } @media (max-width:980px){ .grid-3, .grid-2{ grid-template-columns:1fr; } } /* ====== TARJETAS Y MEDIOS ====== */ .card{ background:#fff; border:1px solid #e8edf3; border-radius:18px; padding:16px; box-shadow:0 10px 30px rgba(6,20,33,.08); } .media{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:18px; background:#f1f4f8; } .media img{ width:100%; height:100%; object-fit:cover; display:block; } /* Limitar cualquier imagen “suelta” dentro de secciones para que no desborde */ .section img{ max-width:100%; height:auto; display:block; } /* ====== QUIÉNES SOMOS (2 columnas en desktop) ====== */ #hx-gua-quienes .grid{ display:grid; gap:18px; grid-template-columns:1.4fr 1fr; } @media (max-width:980px){ #hx-gua-quienes .grid{ grid-template-columns:1fr; } } #hx-gua-quienes .card{ padding:24px; } /* ====== SERVICIOS (3 columnas en desktop) ====== */ #hx-gua-servicios .grid{ display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:980px){ #hx-gua-servicios .grid{ grid-template-columns:1fr; } } #hx-gua-servicios .card{ padding:22px; border-radius:22px; } #hx-gua-servicios .media{ margin:10px 0 14px; box-shadow:0 10px 30px rgba(6,20,33,.08); } /* ====== ANTES / DESPUÉS ====== */ #hx-gua-antes .frame{ border-radius:24px; border:1px solid rgba(20,31,46,.06); box-shadow:0 18px 45px rgba(6,20,33,.10); overflow:hidden; } #hx-gua-antes .frame .media{ aspect-ratio:4/3; } #hx-gua-antes .frame figcaption{ position:absolute; left:14px; top:12px; padding:6px 10px; border-radius:999px; font-weight:700; background:rgba(15,23,42,.75); color:#fff; } /* ====== CONTACTO (por si perdió rejilla) ====== */ #hx-gua-contacto .elementor-container{ gap:22px; } #hx-gua-contacto .card, #hx-gua-contacto .elementor-widget-image img{ border-radius:14px; box-shadow:0 10px 30px rgba(6,20,33,.08); } #hx-gua-contacto .elementor-form .e-form__fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; } @media (max-width:767px){ #hx-gua-contacto .elementor-form .e-form__fields{ display:block; } } /* ====== “Por si acaso” de Elementor: evitar desbordes ====== */ .elementor img{ max-width:100%; height:auto; } /* ===== Footer HumiX – RESCATE COMPLETO ===== */ #hx-footer{ position:relative; background:#0f172a; color:#e5edf6; padding:44px 0 26px; overflow:visible; /* para que la flecha sobresalga */ } /* Línea dorada superior de ancho completo */ #hx-footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,#EFCE8C 0%,#f3deb1 50%,#EFCE8C 100%); box-shadow:0 1px 0 rgba(0,0,0,.08); } /* Contenedor interno */ #hx-footer .hx-inner{ max-width:var(--max,1320px); margin:auto; padding:0 22px; } /* Rejilla principal: Marca | Enlaces | Contacto */ #hx-footer .f-grid{ display:grid; gap:24px; grid-template-columns:1.2fr 1fr 1fr; align-items:start; } /* Marca */ #hx-footer .brand img{ height:44px; width:auto; display:block; margin:0 0 10px; } #hx-footer .brand .claim{ margin:6px 0 4px; color:#cfd8e3; } #hx-footer .brand .hours{ margin:0 0 14px; color:#9fb0c5; font-size:.95rem; } #hx-footer .brand .cta{ display:inline-block; background:#FA1F02; color:#fff; text-decoration:none; padding:12px 18px; border-radius:12px; font-weight:800; box-shadow:0 10px 24px rgba(250,31,2,.25); transition:filter .2s, transform .15s; } #hx-footer .brand .cta:hover{ filter:brightness(1.05); transform:translateY(-1px); } /* Enlaces / Contacto */ #hx-footer h4{ color:#fff; margin:0 0 10px; font-weight:800; } #hx-footer .links ul, #hx-footer .contact .list{ margin:0; padding:0; list-style:none; } #hx-footer .links a, #hx-footer .contact a{ color:#e5edf6; text-decoration:none; } #hx-footer .links a:hover, #hx-footer .contact a:hover{ text-decoration:underline; } /* Legal */ #hx-footer .legal{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:26px; color:#9fb0c5; font-size:.95rem; text-align:center; } #hx-footer .legal a{ color:#cfd8e3; text-decoration:none; } #hx-footer .legal a:hover{ text-decoration:underline; } #hx-footer .legal .sep{ color:#42536a; } /* Botón “volver arriba” */ #hx-footer .hx-backtop{ --size:48px; position:absolute; left:50%; top:-24px; transform:translateX(-50%); width:var(--size); height:var(--size); display:grid; place-items:center; background:#fff; border:2px solid #EFCE8C; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.12); text-decoration:none; z-index:5; transition:transform .18s, background .18s, border-color .18s, box-shadow .18s; } #hx-footer .hx-backtop-icon{ width:18px; height:18px; display:inline-block; border-right:3px solid #EFCE8C; border-bottom:3px solid #EFCE8C; transform:rotate(-135deg); /* chevron hacia arriba */ } #hx-footer .hx-backtop:hover{ transform:translateX(-50%) translateY(-3px); background:#EFCE8C; border-color:#EFCE8C; box-shadow:0 12px 28px rgba(0,0,0,.16); } #hx-footer .hx-backtop:hover .hx-backtop-icon{ border-color:#0f172a; } /* Responsive footer */ @media (max-width:980px){ #hx-footer .f-grid{ grid-template-columns:1fr; } #hx-footer .brand img{ height:40px; } #hx-footer .legal{ padding:0 12px; flex-wrap:wrap; } } /* Por si el tema intenta forzar colores/espacios dentro del footer */ #hx-footer a{ color:inherit; } #hx-footer p{ margin:0; } #hx-footer, #hx-footer .elementor-widget-container, #hx-footer .e-con { background:#0f172a !important; } /* ===== HumiX · 3 BOTONES en el HERO (rescate) ===== */ /* Un poco de aire antes de la fila de CTAs */ #hx-gua-hero .elementor-widget-text-editor p{ margin-top: 14px !important; } /* 1) Cualquier enlace en el párrafo de texto del hero → botón rojo */ #hx-gua-hero .elementor-widget-text-editor p a{ display:inline-flex !important; align-items:center !important; gap:10px !important; padding:12px 16px !important; margin:6px 6px 0 0 !important; line-height:1 !important; border-radius:9999px !important; border:2px solid #FA1F02 !important; background:#FA1F02 !important; color:#fff !important; font-weight:800 !important; text-decoration:none !important; box-shadow:none !important; vertical-align:middle !important; } /* 2) “Ver soluciones” → estilo ghost (rojo contorno) */ #hx-gua-hero .elementor-widget-text-editor p a[href*="solucion" i], #hx-gua-hero .elementor-widget-text-editor p a[href*="soluciones" i]{ background:transparent !important; color:#FA1F02 !important; } /* 3) WhatsApp → verde oficial */ #hx-gua-hero .elementor-widget-text-editor p a[href*="wa.me" i], #hx-gua-hero .elementor-widget-text-editor p a[href*="whatsapp" i]{ border-color:#25D366 !important; background:#25D366 !important; color:#fff !important; } /* 4) Hover sutil */ #hx-gua-hero .elementor-widget-text-editor p a:hover{ transform:translateY(-1px) !important; } /* 5) MUY IMPORTANTE: no toques los iconos/chevron del hero */ #hx-gua-hero .elementor-widget-icon a, #hx-gua-hero a.elementor-icon, #hx-gua-hero .elementor-icon-wrapper a, #hx-gua-hero a[class*="scroll"], #hx-gua-hero a[class*="down"]{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; border-radius:0 !important; color:inherit !important; box-shadow:none !important; } /* ===== BOTONES DEL HERO (con tus clases) ===== */ #hx-gua-hero .hx-hero-cta{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; } /* Base para TODOS los botones del bloque */ #hx-gua-hero .hx-hero-cta a{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; line-height:1; border-radius:9999px; font-weight:800; text-decoration:none; margin:6px 6px 0 0; transition:transform .15s ease, filter .2s ease; } /* 1) Rojo sólido: Solicitar diagnóstico */ #hx-gua-hero .hx-hero-cta .btn-primary{ border:2px solid #FA1F02; background:#FA1F02; color:#fff; box-shadow:0 10px 24px rgba(250,31,2,.25); } #hx-gua-hero .hx-hero-cta .btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05); } /* 2) Rojo “ghost”: Ver soluciones */ #hx-gua-hero .hx-hero-cta .btn-ghost{ border:2px solid #FA1F02; background:transparent; color:#FA1F02; } #hx-gua-hero .hx-hero-cta .btn-ghost:hover{ background:rgba(250,31,2,.10); } /* 3) WhatsApp verde oficial */ #hx-gua-hero .hx-hero-cta .btn-wa{ border:2px solid #25D366; background:#25D366; color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.25); } #hx-gua-hero .hx-hero-cta .btn-wa:hover{ transform:translateY(-1px); filter:brightness(1.05); } /* Seguridad: no tocar la bolita/chevron ni otros iconos del hero */ #hx-gua-hero .elementor-widget-icon a, #hx-gua-hero a.elementor-icon, #hx-gua-hero .elementor-icon-wrapper a, #hx-gua-hero a[class*="scroll"], #hx-gua-hero a[class*="down"]{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; border-radius:0 !important; color:inherit !important; box-shadow:none !important; } /* ===== Chips bajo el H1 del hero ===== */ #hx-gua-hero .hx-chips-hero{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px auto 8px; /* espacio entre título y párrafo */ } #hx-gua-hero .hx-chips-hero .chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; line-height:1; font-weight:700; font-size:.95rem; color:#fff; /* “glass” */ border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.18); -webkit-backdrop-filter:saturate(140%) blur(6px); backdrop-filter:saturate(140%) blur(6px); border-radius:999px; white-space:nowrap; } #hx-gua-hero .hx-chips-hero .chip .dot{ width:10px; height:10px; border-radius:999px; background:linear-gradient(90deg,#9DBBE5,#EFCE8C,#FA1F02); box-shadow:0 0 0 2px rgba(255,255,255,.25) inset; flex:0 0 10px; } @media (max-width:600px){ #hx-gua-hero .hx-chips-hero .chip{ font-size:.9rem; } } /* ====== FAQs — grid 2 col + estilo tarjeta e imagen ====== */ #hx-faqs-hero{ padding:56px 0; } #hx-faqs-hero .hx-inner{ max-width: var(--max, 1320px); margin:auto; padding:0 22px; } /* Encabezado consistente con el resto */ #hx-faqs-hero .eyebrow{ letter-spacing:.14em; font-weight:800; color:#EFCE8C; margin:0 0 8px; } #hx-faqs-hero .section-title{ margin:0 0 8px; color:#0f172a; } #hx-faqs-hero .section-subtitle{ margin:0 0 20px; color:#334155; } /* Rejilla dos columnas (FAQ / figura) */ #hx-faqs-hero .faq-wrap{ display:grid; gap:28px; align-items:stretch; grid-template-columns: 1.25fr 1fr; } /* Columna izquierda como tarjeta */ #hx-faqs-hero .faq-col{ background:#fff; border:1px solid #e8edf3; border-radius:14px; padding:18px; box-shadow:0 12px 30px rgba(6,20,33,.08); } /* Si usas acordeón de Elementor */ #hx-faqs-hero .elementor-accordion .elementor-tab-title{ background:#fff; border:1px solid #e8edf3; border-radius:12px; margin-top:12px; padding:14px 16px; color:#0f172a; font-weight:700; } #hx-faqs-hero .elementor-accordion .elementor-tab-title a{ color:inherit !important; display:block; } #hx-faqs-hero .elementor-accordion .elementor-tab-content{ background:#fff; border:1px solid #e8edf3; border-top:0; border-radius:0 0 12px 12px; padding:14px 16px; color:#334155; } /* Si mantienes el