.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-9fdd681:#9DBBE5;--e-global-color-f887379:#FA1F02;--e-global-color-bb2c413:#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-7 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 *//* ================== TOKENS GLOBALES ================== */
:root{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155;
  --radius:16px;
  --shadow-soft:0 6px 18px rgba(15,23,42,.05);
  --shadow-hover:0 12px 28px rgba(15,23,42,.08);
}

/* ================== HERO FRANQUICIAS ================== */
/* La imagen del hero la gestiona Elementor (en la sección #hx-fran-hero). */
#hx-fran-hero{
  position:relative; min-height:86svh; display:grid; place-items:center; overflow:hidden;
  color:var(--hx-ink);
  background-position:center 10% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* Si usas un DIV interior como capa de fondo, usa este en su lugar y comenta el de arriba */
/*
#hx-fran-hero .hx-hero-bg{
  position:absolute; inset:0;
  background:none !important;
  background-position:center 10% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
*/

/* Velo claro (legible pero no oscuro) */
#hx-fran-hero .hx-hero-bg::before,
#hx-fran-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.16));
}

/* Contenido por encima del velo */
#hx-fran-hero .hx-hero-inner{ position:relative; z-index:1; width:100%;
  max-width:1320px; padding:clamp(40px,6vw,80px) 22px;
  display:flex; align-items:center; justify-content:flex-start;
}
#hx-fran-hero .hx-hero-copy{ max-width:880px }

/* Tipos y botones del hero */
#hx-fran-hero .kicker{
  display:inline-block; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#e5e7eb; font-size:13px; margin-bottom:6px;
}
#hx-fran-hero h1{
  margin:.1rem 0 .4rem; font-weight:900; line-height:1.06;
  font-size:clamp(2rem,4.6vw,3.4rem); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.32);
}
#hx-fran-hero .hx-pill{ width:120px; height:6px; border-radius:999px; background:var(--hx-gold); margin:8px 0 12px }
#hx-fran-hero .lead{ color:#f8fafc; text-shadow:0 1px 6px rgba(0,0,0,.22); max-width:64ch; font-size:clamp(1rem,1.2vw,1.125rem); margin:0 0 18px }
#hx-fran-hero .hx-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 18px }
#hx-fran-hero .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.15rem; border-radius:var(--radius); font-weight:800; text-decoration:none }
#hx-fran-hero .btn.primary{ background:var(--hx-red); color:#fff }
#hx-fran-hero .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12) }
#hx-fran-hero .btn.ghost{ background:#fff; color:var(--hx-ink); border:1px solid #e5e7eb }
#hx-fran-hero .btn.ghost:hover{ border-color:#d1d5db }

/* Stats */
#hx-fran-hero .hx-hero-stats{ display:flex; gap:22px; padding:0; margin:6px 0 0; list-style:none; flex-wrap:wrap }
#hx-fran-hero .hx-hero-stats li{
  display:flex; flex-direction:column; align-items:flex-start;
  background:#fff; border:1px solid #eef1f4; border-radius:16px; padding:10px 14px; box-shadow:var(--shadow-soft)
}
#hx-fran-hero .hx-hero-stats strong{ font-size:1.15rem; line-height:1; color:var(--hx-ink) }
#hx-fran-hero .hx-hero-stats span{ font-size:.85rem; color:#475569 }

/* Responsive hero */
@media (max-width:1024px){
  #hx-fran-hero{ min-height:74svh }
  #hx-fran-hero .hx-hero-inner{ padding:56px 18px }
}
@media (max-width:640px){
  #hx-fran-hero{ min-height:68svh; background-position:center 6% !important }
  #hx-fran-hero .hx-hero-stats{ gap:12px }
  #hx-fran-hero .hx-hero-stats li{ padding:8px 12px }
}

/* Utilidades globales */
a.btn:focus-visible{ outline:2px solid var(--hx-red); outline-offset:2px }
#portafolio .thumb{ aspect-ratio:16/9 }
#modelo,#ventajas,#resultados,#portafolio,#soporte,#inversion,#perfil,#proceso,#faqs,#contacto{ scroll-margin-top:90px }


/* ===== Sección MODELO (Por qué HumiX) ===== */
#modelo{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#fff;
}

#modelo .hx-mod-inner{
  max-width:1320px; margin:auto; padding:clamp(40px,6vw,84px) 22px;
}

#modelo .hx-mod-head h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#modelo .hx-pill{width:120px;height:6px;border-radius:999px;background:var(--hx-gold);margin:8px 0 12px}
#modelo .lead{color:var(--hx-muted);max-width:74ch;margin:0 0 22px;font-size:clamp(1rem,1.1vw,1.125rem)}

#modelo .hx-mod-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1100px){
  #modelo .hx-mod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  #modelo .hx-mod-grid{grid-template-columns:1fr}
}

#modelo .hx-card{
  background:#fff; border:1px solid #eef1f4; border-radius:20px; padding:20px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#modelo .hx-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  border-color:#e6ebf0;
}

#modelo .hx-card .icon{
  width:42px;height:42px;display:grid;place-items:center;
  font-size:22px;border-radius:12px;background:#fff;border:1px solid #eef1f4;margin-bottom:10px;
}
#modelo .hx-card h3{
  margin:.2rem 0 .3rem; font-size:1.1rem; font-weight:800; color:var(--hx-ink);
}
#modelo .hx-card p{margin:0 0 .6rem; color:#475569}
#modelo .hx-card ul.mini{margin:0;padding-left:18px;color:#586477}
#modelo .hx-card ul.mini li{margin:.2rem 0}

#modelo .hx-mod-cta{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:22px
}
#modelo .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.15rem; border-radius:var(--radius); font-weight:800; text-decoration:none
}
#modelo .btn.primary{ background:var(--hx-red); color:#fff }
#modelo .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12) }
#modelo .btn.ghost{ background:#fff; color:var(--hx-ink); border:1px solid #e5e7eb }
#modelo .btn.ghost:hover{ border-color:#d1d5db }
/* ===== Sección VENTAJAS ===== */
#ventajas{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#f8fafc; /* suave contraste con #modelo */
}
#ventajas .hx-ven-inner{
  max-width:1320px; margin:auto;
  padding:clamp(42px,6vw,88px) 22px;
}
#ventajas .hx-ven-head h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#ventajas .hx-pill{
  width:120px;height:6px;border-radius:999px;background:var(--hx-gold);
  margin:8px 0 12px;
}
#ventajas .lead{
  color:var(--hx-muted); max-width:74ch;
  margin:0 0 22px; font-size:clamp(1rem,1.1vw,1.125rem);
}

/* Grid de ventajas */
#ventajas .hx-ven-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1100px){
  #ventajas .hx-ven-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  #ventajas .hx-ven-grid{grid-template-columns:1fr}
}

/* Cards */
#ventajas .hx-card{
  background:#fff; border:1px solid #eaf0f6; border-radius:20px; padding:20px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#ventajas .hx-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  border-color:#e2e8f0;
}
#ventajas .hx-card .icon{
  width:44px;height:44px;display:grid;place-items:center;
  font-size:22px;border-radius:12px;background:#fff;border:1px solid #eef1f4;margin-bottom:10px;
}
#ventajas .hx-card h3{
  margin:.2rem 0 .3rem; font-size:1.08rem; font-weight:800; color:var(--hx-ink);
}
#ventajas .hx-card p{margin:0; color:#475569}

/* CTAs */
#ventajas .hx-ven-cta{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:22px
}
#ventajas .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.15rem; border-radius:var(--radius); font-weight:800; text-decoration:none
}
#ventajas .btn.primary{ background:var(--hx-red); color:#fff }
#ventajas .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12) }
#ventajas .btn.ghost{ background:#fff; color:var(--hx-ink); border:1px solid #e5e7eb }
#ventajas .btn.ghost:hover{ border-color:#d1d5db }
/* ===== Sección RESULTADOS ===== */
/* ===== Sección RESULTADOS ===== */
#resultados{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#fff;
}
#resultados .hx-res-inner{
  max-width:1320px; margin:auto; padding:clamp(42px,6vw,88px) 22px;
}
#resultados .hx-res-head h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#resultados .hx-pill{width:120px;height:6px;border-radius:999px;background:var(--hx-gold);margin:8px 0 12px}
#resultados .lead{color:var(--hx-muted);max-width:74ch;margin:0 0 22px;font-size:clamp(1rem,1.1vw,1.125rem)}

/* KPIs */
#resultados .hx-res-kpis{
  display:grid; gap:18px; margin-bottom:22px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){#resultados .hx-res-kpis{grid-template-columns:1fr}}
#resultados .kpi{
  text-align:center;
}
#resultados .kpi .val{
  font-weight:900; font-size:clamp(1.6rem,4vw,2.2rem); line-height:1; color:var(--hx-ink);
}
#resultados .kpi .val span{font-size:.7em;opacity:.8}
#resultados .kpi p{margin:.4rem 0 0; color:#475569}

/* Mini-casos */
#resultados .hx-res-cases{
  display:grid; gap:18px; margin-top:6px;
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:1100px){#resultados .hx-res-cases{grid-template-columns:1fr}}
#resultados .case{display:grid; gap:16px; grid-template-columns:1.2fr .8fr}
@media (max-width:800px){#resultados .case{grid-template-columns:1fr}}
#resultados .case .media{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;
}
#resultados .case figure{margin:0;background:#fff;border:1px solid #eef1f4;border-radius:14px;overflow:hidden}
#resultados .case img{display:block;width:100%;height:auto}
#resultados .case figcaption{font-size:.8rem;color:#64748b;padding:6px 10px}
#resultados .case .copy h3{margin:.2rem 0 .3rem;font-size:1.05rem;font-weight:800;color:var(--hx-ink)}
#resultados .case .copy ul{margin:.2rem 0 0;padding-left:18px;color:#586477}
#resultados .case .copy li{margin:.18rem 0}

/* Nota y CTAs */
#resultados .hx-res-note{margin:12px 0 0;color:#64748b;font-size:.9rem}
#resultados .hx-res-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
#resultados .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.15rem;border-radius:var(--radius);font-weight:800;text-decoration:none}
#resultados .btn.primary{background:var(--hx-red);color:#fff}
#resultados .btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.12)}
#resultados .btn.ghost{background:#fff;color:var(--hx-ink);border:1px solid #e5e7eb}
#resultados .btn.ghost:hover{border-color:#d1d5db}
/* ===== Sección PORTAFOLIO ===== */
#portafolio{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#fff;
}
#portafolio .hx-port-inner{
  max-width:1320px; margin:auto;
  padding:clamp(42px,6vw,88px) 22px;
}
#portafolio .hx-port-head h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#portafolio .hx-pill{
  width:120px;height:6px;border-radius:999px;background:var(--hx-gold);
  margin:8px 0 12px;
}
#portafolio .lead{
  color:var(--hx-muted); max-width:74ch;
  margin:0 0 22px; font-size:clamp(1rem,1.1vw,1.125rem);
}

/* Grid */
#portafolio .hx-port-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:1100px){
  #portafolio .hx-port-grid{grid-template-columns:1fr}
}

/* Card solución */
#portafolio .sol{
  display:grid; grid-template-columns:1.2fr .8fr; gap:16px;
  background:#fff; border:1px solid #eef1f4; border-radius:20px; padding:18px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#portafolio .sol:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  border-color:#e6ebf0;
}
@media (max-width:900px){
  #portafolio .sol{grid-template-columns:1fr}
}

/* Media */
#portafolio .thumb{
  margin:0; border-radius:14px; overflow:hidden;
  background:#f8fafc; border:1px solid #eef1f4;
}
#portafolio .thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* Copy */
#portafolio .copy h3{
  margin:.2rem 0 .3rem; font-size:1.15rem; font-weight:800; color:var(--hx-ink);
}
#portafolio .copy p{margin:0 0 .5rem; color:#475569}
#portafolio .bullets{margin:.2rem 0 .6rem; padding-left:18px; color:#586477}
#portafolio .bullets li{margin:.22rem 0}

/* CTA */
#portafolio .act{margin-top:.4rem}
#portafolio .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.15rem; border-radius:var(--radius); font-weight:800; text-decoration:none
}
#portafolio .btn.primary{ background:var(--hx-red); color:#fff }
#portafolio .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12) }
#portafolio .btn.ghost{ background:#fff; color:var(--hx-ink); border:1px solid #e5e7eb }
#portafolio .btn.ghost:hover{ border-color:#d1d5db }
/* ===== Sección SOPORTE ===== */
#soporte{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#f8fafc;
}
#soporte .hx-sop-inner{
  max-width:1320px; margin:auto; padding:clamp(42px,6vw,88px) 22px;
}
#soporte .hx-sop-head h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#soporte .hx-pill{
  width:120px; height:6px; border-radius:999px; background:var(--hx-gold);
  margin:8px 0 12px;
}
#soporte .lead{
  color:var(--hx-muted); max-width:74ch; margin:0 0 22px;
  font-size:clamp(1rem,1.1vw,1.125rem);
}

/* Accordions sin JS (details/summary) */
#soporte .hx-sop-accordions{
  display:grid; gap:16px;
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:1024px){
  #soporte .hx-sop-accordions{grid-template-columns:1fr}
}
#soporte .hx-acc{
  background:#fff; border:1px solid #eaf0f6; border-radius:16px;
  overflow:hidden; box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:border-color .2s ease, box-shadow .2s ease;
}
#soporte .hx-acc[open]{border-color:#e2e8f0; box-shadow:0 12px 28px rgba(15,23,42,.08)}
#soporte .hx-acc summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:16px 18px; display:flex; flex-direction:column; gap:2px;
}
#soporte .hx-acc summary::-webkit-details-marker{display:none}
#soporte .hx-acc .title{font-weight:800; color:var(--hx-ink)}
#soporte .hx-acc .hint{font-size:.92rem; color:#64748b}

/* Indicador +/– accesible */
#soporte .hx-acc summary{ position:relative; padding-right:48px }
#soporte .hx-acc summary::after{
  content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-weight:900; color:#94a3b8; font-size:1.2rem;
}
#soporte .hx-acc[open] summary::after{ content:"–"; color:#0f172a }

#soporte .hx-acc .content{
  padding:0 18px 16px 18px; border-top:1px dashed #e5e7eb;
}
#soporte .bullets{ margin:.6rem 0 0; padding-left:18px; color:#586477 }
#soporte .bullets li{ margin:.24rem 0 }

/* CTAs */
#soporte .hx-sop-cta{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:22px
}
#soporte .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.15rem; border-radius:var(--radius); font-weight:800; text-decoration:none
}
#soporte .btn.primary{ background:var(--hx-red); color:#fff }
#soporte .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12) }
#soporte .btn.ghost{ background:#fff; color:var(--hx-ink); border:1px solid #e5e7eb }
#soporte .btn.ghost:hover{ border-color:#d1d5db }
/* ===== Sección INVERSION ===== */
#inversion{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#fff;
}
#inversion .hx-inv-inner{
  max-width:1320px; margin:auto; padding:clamp(42px,6vw,88px) 22px;
}
#inversion .hx-inv-head h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#inversion .hx-pill{
  width:120px;height:6px;border-radius:999px;background:var(--hx-gold);
  margin:8px 0 12px;
}
#inversion .lead{
  color:var(--hx-muted); max-width:74ch;
  margin:0 0 22px; font-size:clamp(1rem,1.1vw,1.125rem);
}

/* Grid cifras */
#inversion .hx-inv-grid{
  display:grid; gap:18px; margin-bottom:22px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1100px){
  #inversion .hx-inv-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  #inversion .hx-inv-grid{grid-template-columns:1fr}
}
#inversion .inv{
  background:#fff; border:1px solid #eef1f4; border-radius:20px; padding:20px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#inversion .inv:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  border-color:#e6ebf0;
}
#inversion .inv h3{
  margin:.2rem 0 .3rem; font-size:1.08rem; font-weight:800; color:var(--hx-ink);
}
#inversion .inv .big{
  margin:.2rem 0 .4rem; font-size:1.5rem; font-weight:900; color:var(--hx-ink);
}
#inversion .inv .mini{margin:.2rem 0 0; padding-left:18px; color:#586477}
#inversion .inv .mini li{margin:.2rem 0}

/* Retorno */
#inversion .hx-inv-return{
  margin-top:6px;
}
#inversion .hx-inv-return h3{
  margin:.2rem 0 .2rem; font-size:1.12rem; font-weight:900; color:var(--hx-ink);
}
#inversion .hx-inv-return p{margin:0 0 .6rem; color:#475569}

/* Timeline visual simple (sin JS) */
#inversion .timeline{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  margin:.2rem 0 .6rem;
}
#inversion .timeline .t-label{font-size:.9rem; color:#64748b}
#inversion .timeline .t-bar{
  height:10px; background:#f1f5f9; border-radius:999px; position:relative; overflow:hidden;
  border:1px solid #e5e7eb;
}
#inversion .timeline .t-fill{
  --pct:60%;
  position:absolute; left:0; top:0; bottom:0; width:var(--pct);
  background:linear-gradient(90deg, var(--hx-red), #ff7b29);
  border-radius:999px;
}
#inversion .ticks{
  display:grid; gap:6px; grid-template-columns:repeat(3,1fr);
  margin:0; padding:0; list-style:none; color:#586477;
}
@media (max-width:900px){ #inversion .ticks{grid-template-columns:1fr} }
#inversion .ticks li{display:flex; gap:8px; align-items:flex-start}
#inversion .ticks li span{
  display:inline-block; font-weight:800; color:var(--hx-ink); min-width:42px;
}

/* Nota + CTAs */
#inversion .hx-inv-note{margin:12px 0 0;color:#64748b;font-size:.9rem}
#inversion .hx-inv-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
#inversion .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.15rem; border-radius:var(--radius); font-weight:800; text-decoration:none
}
#inversion .btn.primary{ background:var(--hx-red); color:#fff }
#inversion .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12) }
#inversion .btn.ghost{ background:#fff; color:var(--hx-ink); border:1px solid #e5e7eb }
#inversion .btn.ghost:hover{ border-color:#d1d5db }
/* ===== Sección PERFIL ===== */
#perfil{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#fff;
}
#perfil .hx-per-inner{
  max-width:1320px; margin:auto; padding:clamp(42px,6vw,88px) 22px;
}
#perfil .hx-per-head h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#perfil .hx-pill{
  width:120px;height:6px;border-radius:999px;background:var(--hx-gold);
  margin:8px 0 12px;
}
#perfil .lead{
  color:var(--hx-muted); max-width:74ch;
  margin:0 0 22px; font-size:clamp(1rem,1.1vw,1.125rem);
}

/* Grid 2 columnas */
#perfil .hx-per-grid{
  display:grid; gap:18px;
  grid-template-columns:1.1fr .9fr;
}
@media(max-width:900px){
  #perfil .hx-per-grid{grid-template-columns:1fr}
}
#perfil .about h3{
  margin:.2rem 0 .4rem; font-size:1.15rem; font-weight:900; color:var(--hx-ink);
}
#perfil .about p{margin:0 0 .6rem; color:#475569}

/* Checklist */
#perfil .checklist{
  background:#fff; border:1px solid #eef1f4; border-radius:20px; padding:20px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}
#perfil .checklist ul{margin:0;padding-left:0;list-style:none;color:#2b333f}
#perfil .checklist li{margin:.32rem 0;font-weight:700}
#perfil .checklist .hint{margin-top:.6rem;color:#64748b;font-size:.92rem}

/* CTAs */
#perfil .hx-per-cta{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:22px
}
#perfil .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.15rem; border-radius:var(--radius); font-weight:800; text-decoration:none
}
#perfil .btn.primary{ background:var(--hx-red); color:#fff }
#perfil .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12) }
#perfil .btn.ghost{ background:#fff; color:var(--hx-ink); border:1px solid #e5e7eb }
#perfil .btn.ghost:hover{ border-color:#d1d5db }
/* ===== Sección PROCESO ===== */
#proceso{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#f8fafc;
}
#proceso .hx-pro-inner{
  max-width:1320px; margin:auto; padding:clamp(42px,6vw,88px) 22px;
}
#proceso .hx-pro-head h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#proceso .hx-pill{
  width:120px;height:6px;border-radius:999px;background:var(--hx-gold);
  margin:8px 0 12px;
}
#proceso .lead{
  color:var(--hx-muted); max-width:74ch;
  margin:0 0 22px; font-size:clamp(1rem,1.1vw,1.125rem);
}

/* Timeline en rejilla */
#proceso .hx-pro-steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:18px;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:1100px){
  #proceso .hx-pro-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  #proceso .hx-pro-steps{grid-template-columns:1fr}
}

/* Paso */
#proceso .step{
  position:relative; padding:18px 18px 18px 62px;
  background:#fff; border:1px solid #eaf0f6; border-radius:20px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#proceso .step:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  border-color:#e2e8f0;
}

/* Badge numerado */
#proceso .badge{
  position:absolute; left:18px; top:18px;
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center; font-weight:900;
  color:#fff; background:var(--hx-red);
  box-shadow:0 6px 18px rgba(250,31,2,.25);
}

/* Contenido del paso */
#proceso .copy h3{
  margin:.1rem 0 .2rem; font-size:1.08rem; font-weight:900; color:var(--hx-ink);
}
#proceso .copy p{margin:0; color:#475569}

/* Conectores visuales (línea) opcionales */
#proceso .step::after{
  content:""; position:absolute; left:35px; top:52px; bottom:-18px; width:2px;
  background:linear-gradient(#e5e7eb, transparent);
}
#proceso .step:last-child::after{display:none}

/* CTA */
#proceso .hx-pro-cta{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:22px
}
#proceso .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.15rem; border-radius:var(--radius); font-weight:800; text-decoration:none
}
#proceso .btn.primary{ background:var(--hx-red); color:#fff }
#proceso .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12) }
#proceso .btn.ghost{ background:#fff; color:var(--hx-ink); border:1px solid #e5e7eb }
#proceso .btn.ghost:hover{ border-color:#d1d5db }
/* ===== Sección FAQS ===== */
#faqs{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#fff;
}
#faqs .hx-faqs-inner{
  max-width:1320px; margin:auto; padding:clamp(42px,6vw,88px) 22px;
}
#faqs .hx-faqs-head h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#faqs .hx-pill{
  width:120px;height:6px;border-radius:999px;background:var(--hx-gold);
  margin:8px 0 12px;
}
#faqs .lead{
  color:var(--hx-muted); max-width:74ch;
  margin:0 0 22px; font-size:clamp(1rem,1.1vw,1.125rem);
}

/* Accordions accesibles con <details> */
#faqs .hx-faqs-accordions{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:1024px){
  #faqs .hx-faqs-accordions{grid-template-columns:1fr}
}
#faqs .hx-faq{
  background:#fff; border:1px solid #eaf0f6; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:border-color .2s ease, box-shadow .2s ease;
}
#faqs .hx-faq[open]{border-color:#e2e8f0; box-shadow:0 12px 28px rgba(15,23,42,.08)}
#faqs .hx-faq summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:16px 18px; position:relative; font-weight:800; color:var(--hx-ink);
}
#faqs .hx-faq summary::-webkit-details-marker{display:none}

/* Indicador +/– */
#faqs .hx-faq summary::after{
  content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-weight:900; color:#94a3b8; font-size:1.2rem;
}
#faqs .hx-faq[open] summary::after{ content:"–"; color:#0f172a }

#faqs .hx-faq .a{
  padding:0 18px 16px 18px; border-top:1px dashed #e5e7eb; color:#475569;
}

/* CTAs */
#faqs .hx-faqs-cta{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:22px
}
#faqs .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.15rem; border-radius:var(--radius); font-weight:800; text-decoration:none
}
#faqs .btn.primary{ background:var(--hx-red); color:#fff }
#faqs .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12) }
#faqs .btn.ghost{ background:#fff; color:var(--hx-ink); border:1px solid #e5e7eb }
#faqs .btn.ghost:hover{ border-color:#d1d5db }
/* ===== Sección CONTACTO ===== */
#contacto{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#f8fafc;
}
#contacto .hx-con-inner{
  max-width:1320px; margin:auto;
  padding:clamp(42px,6vw,88px) 22px;
  display:grid; gap:18px; grid-template-columns:1.1fr .9fr;
}
@media (max-width:900px){
  #contacto .hx-con-inner{ grid-template-columns:1fr }
}
#contacto h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#contacto .hx-pill{
  width:120px;height:6px;border-radius:999px;background:var(--hx-gold);
  margin:8px 0 12px;
}
#contacto .lead{ color:var(--hx-muted); max-width:60ch; margin:0 0 18px }
#contacto .bullets{ margin:0 0 10px; padding-left:18px; color:#586477 }
#contacto .bullets li{ margin:.24rem 0 }

#contacto .hx-card{
  background:#fff; border:1px solid #eef1f4; border-radius:20px; padding:22px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}
#contacto .mini-legal{ margin-top:12px; font-size:.9rem; color:#64748b }

/* Ayudas visuales para el placeholder mientras insertas el form */
#contacto .placeholder{
  border:1px dashed #cbd5e1; padding:18px; border-radius:12px; color:#475569; background:#fff;
}
#hx-fran-hero h1, #hx-fran-hero .kicker, #hx-fran-hero .lead{
  color:#fff !important; text-shadow:0 2px 8px rgba(0,0,0,.35);
}
#hx-fran-hero .hx-hero-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12));
  z-index:0;
}
#hx-fran-hero h1, #hx-fran-hero .kicker, #hx-fran-hero .lead{
  color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,.22);
}
#hx-fran-hero .hx-hero-bg::before{
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.16));
}
/* y encuadre */
#hx-fran-hero.hx-hero-bg{ background-position:center 10%!important }
@media (max-width:1366px){
  #hx-fran-hero h1{ text-shadow:0 2px 10px rgba(0,0,0,.32) }
}
a.btn:focus-visible{ outline:2px solid #fa1f02; outline-offset:2px }
.btn.ghost:hover{ border-color:#d1d5db; transform:translateY(-1px) }
#portafolio .thumb{ aspect-ratio: 16/9 }
<link rel="preload" as="image" href="/wp-content/uploads/hero-franquicia-humix.webp" fetchpriority="high">
/* TOP (antes de hacer scroll) = transparente y texto claro */
.hx-header:not(.elementor-sticky--effects):not(.elementor-sticky--active):not(.e-con--sticky),
.hx-header:not(.elementor-sticky--effects):not(.elementor-sticky--active):not(.e-con--sticky).e-con,
.hx-header:not(.elementor-sticky--effects):not(.elementor-sticky--active):not(.e-con--sticky) .e-con-inner,
.hx-header:not(.elementor-sticky--effects):not(.elementor-sticky--active):not(.e-con--sticky) .elementor-container{
  background: transparent !important;
  border-bottom: 1px solid transparent;
  box-shadow: none !important;
}

/* Color de items / enlaces / iconos en modo transparente */
.hx-header:not(.elementor-sticky--effects):not(.elementor-sticky--active):not(.e-con--sticky) a,
.hx-header:not(.elementor-sticky--effects):not(.elementor-sticky--active):not(.e-con--sticky) .elementor-item,
.hx-header:not(.elementor-sticky--effects):not(.elementor-sticky--active):not(.e-con--sticky) .elementor-icon,
.hx-header:not(.elementor-sticky--effects):not(.elementor-sticky--active):not(.e-con--sticky) .elementor-menu-toggle{
  color:#fff !important; fill:#fff !important;
}

/* Estado STICKY (al hacer scroll) = fondo blanco y colores oscuros */
.elementor-sticky--effects.hx-header,
.elementor-sticky--active.hx-header,
.e-con--sticky.hx-header{
  background:#fff !important;
  border-bottom-color:#eef1f4 !important;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.elementor-sticky--effects.hx-header a,
.elementor-sticky--effects.hx-header .elementor-item,
.elementor-sticky--effects.hx-header .elementor-icon,
.elementor-sticky--effects.hx-header .elementor-menu-toggle{
  color:#0f172a !important; fill:#0f172a !important;
}

/* Asegura superposición por encima del hero */
.hx-header{ z-index: 10000 !important; }

/* Menú móvil: dropdown ancho y por encima */
.hx-header .elementor-menu-toggle{ z-index: 10001; }
.hx-header .elementor-nav-menu--dropdown{
  left:0; right:0; top:100%;
  background:#fff; border:1px solid #eef1f4; border-radius:16px;
  box-shadow:0 18px 36px rgba(15,23,42,.12);
}
/* --- Estado sobre el hero (transparente y texto blanco) --- */
.hx-header{
  background: transparent !important;
  border-bottom:1px solid transparent;
  transition: background-color .25s, box-shadow .25s, border-color .25s, color .2s;
  z-index: 999; /* asegúrate de estar por encima del hero */
}

/* El widget "WordPress Menu" usa estas clases */
.hx-header .menu a,
.hx-header .menu > li > a,
.hx-header .e-n-menu a { 
  color:#fff !important;
}

/* Color de icono hamburguesa */
.hx-header .elementor-menu-toggle,
.hx-header .elementor-menu-toggle i,
.hx-header .eicon-menu-bar{
  color:#fff !important;
  fill:#fff !important;
}

/* Botones del header (si los tienes) */
.hx-header .hx-btn.primary{ background:#fa1f02; color:#fff }
.hx-header .hx-btn.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6) }

/* --- Al aplicar sticky (Elementor añade esta clase al header) --- */
.elementor-sticky--effects.hx-header{
  background:#fff !important;
  border-bottom-color:#eef1f4 !important;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.elementor-sticky--effects.hx-header .menu a,
.elementor-sticky--effects.hx-header .e-n-menu a{
  color:#0f172a !important;
}
.elementor-sticky--effects.hx-header .elementor-menu-toggle,
.elementor-sticky--effects.hx-header .eicon-menu-bar{
  color:#0f172a !important;
  fill:#0f172a !important;
}
.elementor-sticky--effects.hx-header .hx-btn.ghost{
  background:#fff; color:#0f172a; border:1px solid #e5e7eb;
}

/* Dropdown del widget WordPress Menu */
.hx-header .elementor-nav-menu--dropdown,
.hx-header .e-n-menu__dropdown{
  background:#fff;
  border:1px solid #eef1f4;
  border-radius:16px;
  box-shadow:0 18px 36px rgba(15,23,42,.12);
}
.hx-header .elementor-nav-menu--dropdown a,
.hx-header .e-n-menu__dropdown a{
  color:#0f172a !important;
}

/* Logo */
.hx-header img{ max-height:56px; height:auto; width:auto }
@media (max-width:768px){ .hx-header img{ max-height:48px } }

/* Anclas: que no queden tapadas por el sticky */
#inicio,#modelo,#ventajas,#resultados,#portafolio,#soporte,#inversion,#perfil,#proceso,#faqs,#contacto{
  scroll-margin-top:90px;
}
html{ scroll-behavior:smooth; }
/* ===== Footer ===== */
#footer.hx-footer{
  --hx-ink:#0f172a; --hx-muted:#475569; --hx-gold:#efce8c; --hx-red:#fa1f02;
  background:#0b1220; color:#e6eaf2;
}

#footer .hx-foot-inner{
  max-width:1320px; margin:auto; padding:clamp(34px,5vw,60px) 22px;
  display:grid; gap:22px; grid-template-columns:2fr 1.2fr 1.2fr 1.2fr;
}
@media (max-width:1024px){ #footer .hx-foot-inner{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){  #footer .hx-foot-inner{ grid-template-columns:1fr } }

#footer .foot-col h3{ margin:.2rem 0 .6rem; font-weight:900; font-size:1rem; letter-spacing:.02em }
#footer .foot-col .tagline{ color:#b8c1d1; margin:.4rem 0 .8rem }

#footer .brand img{ display:block; margin-bottom:8px }
#footer .social{ display:flex; gap:10px; margin-top:6px }
#footer .social a{ display:inline-grid; place-items:center; width:32px; height:32px; border:1px solid #2a3447; border-radius:10px; color:#e6eaf2; text-decoration:none; font-weight:800 }
#footer .social a:hover{ background:#162033; border-color:#334155 }

#footer a{ color:#e6eaf2; text-decoration:none }
#footer a:hover{ color:#efce8c }

#footer ul{ list-style:none; padding:0; margin:0 }
#footer li{ margin:.28rem 0; color:#c7cfdb }

#footer .contact-list a{ color:#e6eaf2 }
#footer .hx-btn.whatsapp{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; background:#22c55e; color:#0b1220; border-radius:12px; font-weight:900; margin-top:10px; text-decoration:none
}
#footer .hx-btn.whatsapp:hover{ filter:brightness(1.05) }

#footer .hx-foot-bottom{
  border-top:1px solid #1f2a3d; text-align:center; padding:14px 22px; color:#9aa6b8
}
#footer .hx-foot-bottom .mini{ font-size:.85rem; margin:.2rem 0 0 }
#hx-fran-hero .hx-hero-bg::before{
  background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.18));
}
html { scroll-behavior: smooth; }
/* ===== Header transparente sobre hero (HOME) ===== */

/* 0) El wrapper global que crean muchos temas/Elementor para la cabecera */
.elementor-location-header { 
  background: transparent !important; 
  border: none !important;
  box-shadow: none !important;
}

/* 1) Tu contenedor sticky con clase hx-header: transparente cuando NO está sticky */
body.home .hx-header:not(.elementor-sticky--effects){
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 2) Por si algún hijo trae fondo: vuelve todo transparente mientras no está sticky */
body.home .hx-header:not(.elementor-sticky--effects) .e-con,
body.home .hx-header:not(.elementor-sticky--effects) .elementor-container {
  background: transparent !important;
}

/* 3) Estado sticky: blanco con sombra fino */
.hx-header.elementor-sticky--effects{
  background: #ffffff !important;
  border-bottom: 1px solid #eef1f4 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* 4) Menú/links: claros sobre hero y oscuros en sticky */
body.home .hx-header:not(.elementor-sticky--effects) .elementor-item,
body.home .hx-header:not(.elementor-sticky--effects) a {
  color: #ffffff !important;
}
.hx-header.elementor-sticky--effects .elementor-item,
.hx-header.elementor-sticky--effects a{
  color: #0f172a !important;
}
body.home .hx-header:not(.elementor-sticky--effects) .elementor-item:hover,
body.home .hx-header:not(.elementor-sticky--effects) .elementor-item.elementor-item-active{
  color:#fa1f02 !important;
}

/* 5) Botones del header */
body.home .hx-header:not(.elementor-sticky--effects) .hx-btn.ghost{
  background: transparent; 
  color:#fff; 
  border:1px solid rgba(255,255,255,.6);
}
.hx-header.elementor-sticky--effects .hx-btn.ghost{
  background:#fff; color:#0f172a; border:1px solid #e5e7eb;
}

/* 6) Asegura jerarquía por encima del hero */
.hx-header{ z-index: 999 !important; }

/* 7) Suavizado de desplazamiento a anclas */
html { scroll-behavior: smooth; }

/* 8) Si alguna vez el menú desplegable trae fondo heredado raro */
.hx-header .elementor-nav-menu--dropdown{
  background:#ffffff; border:1px solid #eef1f4; border-radius:16px;
  box-shadow:0 18px 36px rgba(15,23,42,.12);
}
.hx-header .elementor-nav-menu--dropdown a{ color:#0f172a !important; }
/* ===== Formulario contacto ===== */
#contacto .elementor-form.hx-form,
#contacto .hx-form{
  --radius:14px;
}
#contacto .elementor-form input,
#contacto .elementor-form textarea,
#contacto .elementor-form select{
  border:1px solid #e5e7eb; border-radius:var(--radius); padding:.8rem .9rem;
  background:#fff; color:#0f172a;
}
#contacto .elementor-form textarea{ min-height:130px; resize:vertical }
#contacto .elementor-field-group .elementor-field-label{ font-weight:800; color:#334155 }

#contacto .elementor-button{ 
  background:#fa1f02; color:#fff; border-radius:14px; font-weight:900; padding:.9rem 1.15rem
}
#contacto .elementor-button:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(250,31,2,.18) }

#contacto .elementor-message{ border-radius:12px }
/* ===== CONTACTO · Layout base ===== */
#contacto{
  --hx-blue:#9dbbe5; --hx-red:#fa1f02; --hx-gold:#efce8c;
  --hx-ink:#0f172a; --hx-muted:#334155; --radius:16px;
  background:#f8fafc;
  scroll-margin-top:90px; /* para header sticky */
}

/* INNER centrado y con max-width */
#contacto .hx-con-inner{
  max-width:1320px; margin:auto;
  padding:clamp(42px,6vw,88px) 22px;
  display:flex; gap:18px; align-items:flex-start; justify-content:stretch;
}

/* Dos columnas en desktop */
#contacto .col{ flex:1 1 0 }
#contacto .copy{ flex-basis: 54% }
#contacto .form{ flex-basis: 46% }

/* Móvil: columnas apiladas */
@media (max-width:900px){
  #contacto .hx-con-inner{ flex-direction:column }
  #contacto .copy, #contacto .form{ flex-basis: 100% }
}

/* Tipografías y elementos */
#contacto h2{
  margin:0 0 .4rem; font-weight:900; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--hx-ink);
}
#contacto .hx-pill{
  width:120px;height:6px;border-radius:999px;background:var(--hx-gold);
  margin:8px 0 12px;
}
#contacto .lead{ color:var(--hx-muted); max-width:60ch; margin:0 0 18px }
#contacto .bullets{ margin:0 0 10px; padding-left:18px; color:#586477 }
#contacto .bullets li{ margin:.24rem 0 }
#contacto .mini-legal{ margin-top:12px; font-size:.9rem; color:#64748b }

/* Tarjeta del formulario */
#contacto .hx-card{
  background:#fff; border:1px solid #eef1f4; border-radius:20px; padding:22px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}

/* Placeholder (quítalo cuando insertes el Form de Elementor) */
#contacto .placeholder{
  border:1px dashed #cbd5e1; padding:18px; border-radius:12px; color:#475569; background:#fff;
}

/* ===== (Opcional) Estilo del Form de Elementor dentro de #contacto ===== */
#contacto .elementor-form{
  --hx-ink:#0f172a; --hx-muted:#334155; --hx-red:#fa1f02;
}
#contacto .elementor-field-group{ margin-bottom:14px }
#contacto .elementor-field-label{ font-weight:800; color:var(--hx-ink); margin-bottom:6px }
#contacto .elementor-field,
#contacto .elementor-field-textual{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:12px 14px; color:var(--hx-ink);
}
#contacto .elementor-field:focus{
  border-color:#9dbbe5; box-shadow:0 0 0 4px rgba(157,187,229,.20);
}
#contacto .elementor-button{
  background:var(--hx-red); color:#fff; font-weight:900; border-radius:16px; padding:14px 22px;
  box-shadow:0 12px 28px rgba(250,31,2,.18); border:0;
}
#contacto .elementor-button:hover{
  transform:translateY(-2px); box-shadow:0 18px 36px rgba(250,31,2,.22);
}
/* Quita margenes extra si el widget añade relleno por defecto */
#contacto .elementor-widget-form{ margin:0 }
#contacto{
  --hx-gold:#efce8c; --hx-ink:#0f172a; --hx-muted:#334155; --hx-red:#fa1f02;
  background:#f8fafc; scroll-margin-top:90px;
}
#contacto .hx-con-inner{
  max-width:1320px; margin:auto; padding:clamp(42px,6vw,88px) 22px;
  display:flex; gap:18px; align-items:flex-start;
}
#contacto .copy{ flex:1 1 0 }
#contacto .form{ flex:1 1 0 }

/* Tarjeta */
#contacto .hx-card{
  background:#fff; border:1px solid #eef1f4; border-radius:20px; padding:22px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}

/* Tipos y elementos */
#contacto h2{ margin:0 0 .4rem; font-weight:900; line-height:1.08; color:var(--hx-ink) }
#contacto .hx-pill{ width:120px;height:6px;border-radius:999px;background:var(--hx-gold);margin:8px 0 12px }
#contacto .lead{ color:var(--hx-muted); max-width:60ch; margin:0 0 18px }
#contacto .bullets{ margin:0 0 10px; padding-left:18px; color:#586477 }
#contacto .bullets li{ margin:.24rem 0 }
#contacto .mini-legal{ margin-top:12px; font-size:.9rem; color:#64748b }

/* Form Elementor (derecha) */
#contacto .elementor-widget-form{ margin:0 }
#contacto .elementor-field, #contacto .elementor-field-textual{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:12px 14px; color:#0f172a;
}
#contacto .elementor-field:focus{
  border-color:#9dbbe5; box-shadow:0 0 0 4px rgba(157,187,229,.20);
}
#contacto .elementor-button{
  background:#fa1f02; color:#fff; font-weight:900; border-radius:16px; padding:14px 22px; border:0;
  box-shadow:0 12px 28px rgba(250,31,2,.18);
}
#contacto .elementor-button:hover{
  transform:translateY(-2px); box-shadow:0 18px 36px rgba(250,31,2,.22);
}

/* Responsive: apilar en móvil */
@media (max-width:900px){
  #contacto .hx-con-inner{ flex-direction:column }
}
/* Tarjeta con imagen en la columna izquierda */
#contacto .hx-imgcard{
  margin:0 0 16px 0;
  background:#f8fafc;
  border:1px solid #eef1f4;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}
#contacto .hx-imgcard img{
  display:block; width:100%; height:auto; object-fit:cover;
  aspect-ratio: 16/9; /* controla la altura visual */
}
#contacto .hx-imgcard figcaption{
  font-size:.9rem; color:#475569; padding:8px 12px; background:#fff;
  border-top:1px solid #eef1f4;
}
/* ====== FOOTER HUMIX FRANQUICIAS ====== */

.hx-footer{
  background: radial-gradient(circle at top left, #1f2937 0, #020617 55%);
  color:#e5e7eb;
  padding:48px 20px 22px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  border-top:1px solid rgba(148,163,184,0.35);
}
.hx-footer-wrap{
  max-width:1150px;
  margin:0 auto;
}
.hx-footer-top{
  display:grid;
  grid-template-columns: minmax(0,2fr) repeat(3, minmax(0,1.3fr));
  gap:30px;
  padding-bottom:26px;
  border-bottom:1px solid rgba(148,163,184,0.4);
}
.hx-footer-col h3{
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9ca3af;
  margin:0 0 10px;
}
.hx-footer-desc{
  margin:10px 0 0;
  font-size:14px;
  color:#cbd5f5;
  max-width:360px;
}

/* Logo / marca */
.hx-footer-logo{
  display:flex;
  align-items:center;
  gap:8px;
}
.hx-footer-logo-mark{
  width:30px;
  height:30px;
  border-radius:10px;
  background:linear-gradient(135deg,#fa1f02,#efce8c);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:17px;
  color:#0b1120;
}
.hx-footer-logo-text{
  font-weight:600;
  font-size:16px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#e5e7eb;
}

/* Listas */
.hx-footer-links,
.hx-footer-list{
  list-style:none;
  padding:0;
  margin:0;
}
.hx-footer-links li,
.hx-footer-list li{
  margin-bottom:6px;
  font-size:14px;
}
.hx-footer-links a,
.hx-footer-list a{
  color:#e5e7eb;
  text-decoration:none;
  opacity:.9;
  transition:opacity .2s, color .2s, transform .1s;
}
.hx-footer-links a:hover,
.hx-footer-list a:hover{
  opacity:1;
  color:#efce8c;
  transform:translateX(1px);
}

.hx-footer-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#9ca3af;
}

.hx-footer-note{
  margin-top:10px;
  font-size:12px;
  color:#9ca3af;
}

/* Bottom */
.hx-footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top:16px;
  font-size:12px;
  color:#9ca3af;
}
.hx-footer-copy span{
  color:#e5e7eb;
}
.hx-footer-madeby{
  text-align:right;
}

/* Responsive */
@media (max-width:900px){
  .hx-footer-top{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:640px){
  .hx-footer{
    padding:40px 16px 20px;
  }
  .hx-footer-top{
    grid-template-columns:1fr;
  }
  .hx-footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .hx-footer-madeby{
    text-align:left;
  }
}
/* ====== CABECERA HUMIX FRANQUICIAS ====== */

/* Cabecera base (sobre el hero, transparente tipo cristal) */
#hx-franq-header{
  position:sticky;
  top:0;
  z-index:999;
  width:100%;
  background:linear-gradient(to bottom, rgba(15,23,42,0.78), rgba(15,23,42,0.02));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(148,163,184,0.35);
}

/* Contenido interior más recogido */
#hx-franq-header .elementor-container,
#hx-franq-header .e-con{
  max-width:1150px;
  margin:0 auto;
}

/* Logo más limpio */
#hx-franq-header img{
  max-height:42px;
  width:auto;
}

#hx-franq-header .elementor-nav-menu--main .elementor-item{
  font-size:15px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:none;          /* deja de gritar en mayúsculas */
  color:#e5e7eb;
  padding:8px 14px;
  position:relative;
  transition:color .2s, opacity .2s;
  opacity:.9;
}


/* Rayita dorada al pasar el ratón */
#hx-franq-header .elementor-nav-menu--main .elementor-item:after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:2px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(to right,#efce8c,#fa1f02);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease-out;
}
#hx-franq-header .elementor-nav-menu--main .elementor-item:hover:after,
#hx-franq-header .elementor-nav-menu--main .elementor-item.elementor-item-active:after{
  transform:scaleX(1);
}
#hx-franq-header .elementor-nav-menu--main .elementor-item:hover,
#hx-franq-header .elementor-nav-menu--main .elementor-item.elementor-item-active{
  color:#ffffff;
  opacity:1;
}

/* Botón del menú si tienes uno tipo CTA */
#hx-franq-header .elementor-nav-menu--main .elementor-item.hx-cta{
  padding:9px 18px;
  border-radius:999px;
  background:#fa1f02;
  color:#ffffff !important;
  box-shadow:0 10px 26px rgba(250,31,2,0.35);
}
#hx-franq-header .elementor-nav-menu--main .elementor-item.hx-cta:after{
  display:none;
}
#hx-franq-header .elementor-nav-menu--main .elementor-item.hx-cta:hover{
  background:#d91900;
}

/* Estado cuando la cabecera ya está sticky (scroll abajo) */
.elementor-sticky--effects #hx-franq-header{
  background:linear-gradient(to right,#020617,#0b1120);
  border-bottom:1px solid rgba(148,163,184,0.5);
}

/* Menú hamburguesa móvil */
#hx-franq-header .elementor-menu-toggle{
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.7);
  padding:6px;
}
#hx-franq-header .elementor-menu-toggle__icon{
  color:#e5e7eb;
}/* End custom CSS */