.elementor-3567 .elementor-element.elementor-element-a568ac9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3567 .elementor-element.elementor-element-3bee42b{width:100%;max-width:100%;}.elementor-3567 .elementor-element.elementor-element-3bee42b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3567 .elementor-element.elementor-element-cb5b187{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3567 .elementor-element.elementor-element-cb5b187:not(.elementor-motion-effects-element-type-background), .elementor-3567 .elementor-element.elementor-element-cb5b187 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3567 .elementor-element.elementor-element-6d6d20f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3567 .elementor-element.elementor-element-651fc24{width:100%;max-width:100%;}.elementor-3567 .elementor-element.elementor-element-651fc24 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3567 .elementor-element.elementor-element-e5c2687{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3567 .elementor-element.elementor-element-6175ec4{width:100%;max-width:100%;}.elementor-3567 .elementor-element.elementor-element-6175ec4 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3567 .elementor-element.elementor-element-b89e1b5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3567 .elementor-element.elementor-element-859543f{width:100%;max-width:100%;}.elementor-3567 .elementor-element.elementor-element-859543f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3567 .elementor-element.elementor-element-1343b66{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3567 .elementor-element.elementor-element-1343b66:not(.elementor-motion-effects-element-type-background), .elementor-3567 .elementor-element.elementor-element-1343b66 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3567 .elementor-element.elementor-element-d70e54d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3567 .elementor-element.elementor-element-0e3ec8e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3567 .elementor-element.elementor-element-cbade59{width:100%;max-width:100%;}.elementor-3567 .elementor-element.elementor-element-cbade59 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-3567 .elementor-element.elementor-element-d592c44{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3567 .elementor-element.elementor-element-60045ec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3567 .elementor-element.elementor-element-81b9d49{width:100%;max-width:100%;}.elementor-3567 .elementor-element.elementor-element-81b9d49 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-3bee42b *//* =====================================================
   JACEO – ENGINEERED HERO FRAME
===================================================== */

#jaceo{
  --blue:#193886;
  --yellow:#feb42f;
  --white:#ffffff;
  --dark:#0c1222;
}

/* Reset */
#jaceo *{ box-sizing:border-box; }

/* ================= HERO ================= */

#jaceo .hero-frame{
  position:relative;
  min-height:100vh;
  padding:0 5%;
  display:flex;
  align-items:center;
  background:
    url("http://topmetalsupplier.com/wp-content/uploads/2024/02/Banner-Top-Metal-Tp3-04.png")
    center/cover no-repeat;
  color:var(--white);
  overflow:hidden;
}

/* ================= GRID (BLUEPRINT) ================= */

#jaceo .hero-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
}

/* ================= LOGO STRUCTURE ================= */

#jaceo .hero-logo-structure{
  position:absolute;
  right:-15%;
  top:50%;
  transform:translateY(-50%);
  width:900px;
  height:900px;
  background:
    url("http://topmetalsupplier.com/wp-content/uploads/2025/11/Topmetal_logos_2025-08-3-scaled.png")
    center/contain no-repeat;
  opacity:0.035;
  filter:grayscale(100%);
  pointer-events:none;
}

/* ================= FRAME BOX ================= */

#jaceo .hero-frame-box{
  position:relative;
  max-width:1100px;
  padding:90px 110px;
  border:3px solid var(--blue);
  background:
    linear-gradient(180deg,
      rgba(25,56,134,.08),
      rgba(25,56,134,.02)
    );
}

/* yellow engineering corner */
#jaceo .hero-frame-box::before{
  content:"";
  position:absolute;
  top:-3px;
  left:-3px;
  width:140px;
  height:140px;
  border-top:6px solid var(--yellow);
  border-left:6px solid var(--yellow);
}

/* ================= CONTENT ================= */

#jaceo .hero-content h1{
  font-size:clamp(60px,6vw,96px);
  font-weight:900;
  line-height:1.02;
  margin-bottom:28px;
}

#jaceo .hero-content p{
  max-width:720px;
  font-size:20px;
  line-height:1.7;
  margin-bottom:56px;
  color:rgba(255,255,255,.9);
}

/* ================= BUTTONS ================= */

#jaceo .hero-actions{
  display:flex;
  gap:22px;
}

#jaceo .btn-primary{
  background:var(--blue);
  color:#fff;
  padding:18px 48px;
  font-weight:900;
  letter-spacing:.12em;
  text-decoration:none;
}

#jaceo .btn-secondary{
  background:var(--yellow);
  color:#000;
  padding:18px 48px;
  font-weight:900;
  letter-spacing:.12em;
  text-decoration:none;
}

/* =====================================================
   HERO MOBILE FIX: NO SE VE LA SIGUIENTE SECCIÓN
   (mantiene el hero en 100% viewport y compacta contenido)
===================================================== */

@media (max-width: 900px){

  /* el hero vuelve a ocupar todo el alto visible del móvil */
  #jaceo .hero-frame{
    min-height: 100svh;       /* 🔥 mejor que 100vh en móviles */
    padding: 78px 7% 78px;    /* 🔥 top/bottom reales */
    align-items: center;      /* centra el bloque */
  }

  /* el frame ya no puede ser gigante */
  #jaceo .hero-frame-box{
    width: 100%;
    max-width: 100%;
    padding: 34px 24px;       /* 🔥 compacto */
    border-width: 2px;
  }

  #jaceo .hero-frame-box::before{
    width: 72px;
    height: 72px;
    border-width: 4px;
  }

  /* tipografía y espacios compactos para que no “empuje” */
  #jaceo .hero-content h1{
    font-size: clamp(38px, 9vw, 56px);
    margin-bottom: 16px;
    line-height: 1.02;
  }

  #jaceo .hero-content p{
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 24px;
  }

  /* botones full-width para que no rompa el layout */
  #jaceo .hero-actions{
    flex-direction: column;
    gap: 12px;
  }

  #jaceo .btn-primary,
  #jaceo .btn-secondary{
    width: 100%;
    text-align: center;
    padding: 14px 18px;
  }
}

@media (max-width: 600px){

  #jaceo .hero-frame{
    min-height: 100svh;
    padding: 68px 6% 68px;
  }

  #jaceo .hero-frame-box{
    padding: 28px 18px;
  }

  #jaceo .hero-content h1{
    font-size: clamp(34px, 10vw, 48px);
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-651fc24 *//* =====================================================
   INTRO PRO — DARK BLUE → WHITE (FINOLIS)
   FIX: 5% REAL ALWAYS + RIGHT PANEL CONTROLLED
===================================================== */

#tmServiceIntroDarkPro{
  --blue:#193886;
  --blue-deep:#0f2356;
  --navy:#050b20;
  --navy-2:#0b1536;
  --yellow:#feb42f;

  position:relative;
  width:100%;
  padding:170px 0 0;
  overflow:hidden;

  background:
    radial-gradient(900px 420px at 16% 22%, rgba(25,56,134,.52), transparent 62%),
    radial-gradient(760px 520px at 86% 72%, rgba(254,180,47,.12), transparent 64%),
    linear-gradient(
      180deg,
      var(--navy) 0%,
      var(--navy-2) 30%,
      var(--blue) 58%,
      rgba(25,56,134,.42) 74%,
      rgba(255,255,255,0) 92%
    );

  font-family:"Montserrat",system-ui,sans-serif;
  color:#ffffff;
}

#tmServiceIntroDarkPro *{ box-sizing:border-box; }

/* =====================================================
   ✅ WRAP — 5% REAL ALWAYS
===================================================== */
#tmServiceIntroDarkPro .intro-wrap{
  width:100%;
  margin:0;
  padding-left:5%;
  padding-right:5%;
  position:relative;
  z-index:3;
}

/* =====================================================
   ✅ GRID — CONTROL PREMIUM (NO FR STRETCH WEIRD)
   - Left column has a "reading width"
   - Right panel stays tight and aligned to the right
===================================================== */
#tmServiceIntroDarkPro .intro-grid{
  display:grid;
  grid-template-columns: minmax(0, 980px) minmax(0, 620px);
  justify-content:space-between;
  gap:86px;
  align-items:center;
  padding-bottom:155px;
}

/* ---------- COPY (LEFT) ---------- */
#tmServiceIntroDarkPro .intro-copy{
  max-width:980px;
}

#tmServiceIntroDarkPro .intro-kicker{
  display:inline-block;
  font-family:"Poppins",sans-serif;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--yellow);
  margin-bottom:18px;
}

#tmServiceIntroDarkPro .intro-title{
  font-family:"Poppins",sans-serif;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.06;
  font-size:clamp(42px,4.8vw,66px);
  margin:0 0 18px;
  text-shadow:0 20px 60px rgba(0,0,0,.35);
}

#tmServiceIntroDarkPro .intro-lead{
  font-size:18.5px;
  line-height:1.9;
  color:rgba(255,255,255,.88);
  max-width:780px;
  margin:0 0 22px;
}

#tmServiceIntroDarkPro .intro-divider{
  width:160px;
  height:2px;
  background:linear-gradient(90deg, rgba(254,180,47,.95), rgba(254,180,47,0));
  margin:22px 0;
  border-radius:999px;
  box-shadow:0 18px 40px rgba(254,180,47,.12);
}

#tmServiceIntroDarkPro .intro-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 26px;
  margin-bottom:22px;
}

#tmServiceIntroDarkPro .intro-columns p{
  margin:0;
  font-size:15.8px;
  line-height:1.85;
  color:rgba(255,255,255,.84);
}

#tmServiceIntroDarkPro .intro-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

#tmServiceIntroDarkPro .intro-tag{
  padding:10px 12px;
  border-radius:999px;
  font-family:"Poppins",sans-serif;
  font-weight:900;
  font-size:11.5px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}

/* ---------- PANEL (RIGHT) — FIX REAL ---------- */
#tmServiceIntroDarkPro .intro-panel{
  /* 👇 esto arregla el “derecho”: ancho controlado + pegado a la derecha */
  width:clamp(320px, 32vw, 620px);
  justify-self:end;

  border-radius:30px;
  padding:34px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    linear-gradient(180deg, #0a1b44, #071332);

  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 36px 110px rgba(0,0,0,.36);
  position:relative;
  isolation:isolate;
}

/* thin blue outline */
#tmServiceIntroDarkPro .intro-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(127,166,229,.22);
  pointer-events:none;
}

/* (si tu HTML tiene estos elementos, se quedan igual) */
#tmServiceIntroDarkPro .panel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
#tmServiceIntroDarkPro .panel-badge{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  font-family:"Poppins",sans-serif;
  font-weight:900;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}
#tmServiceIntroDarkPro .panel-hairline{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.18), transparent);
}
#tmServiceIntroDarkPro .panel-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:14px;
}
#tmServiceIntroDarkPro .panel-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
#tmServiceIntroDarkPro .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:7px;
  background:var(--yellow);
  box-shadow:0 0 0 6px rgba(254,180,47,.16);
  flex:0 0 auto;
}
#tmServiceIntroDarkPro .t{
  font-family:"Poppins",sans-serif;
  font-weight:900;
  font-size:13.5px;
  color:#fff;
  margin-bottom:3px;
}
#tmServiceIntroDarkPro .s{
  font-size:13.5px;
  line-height:1.65;
  color:rgba(255,255,255,.78);
}
#tmServiceIntroDarkPro .panel-spec{
  margin-top:18px;
  display:grid;
  gap:10px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);
}
#tmServiceIntroDarkPro .spec{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
#tmServiceIntroDarkPro .spec .k{
  font-family:"Poppins",sans-serif;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(255,255,255,.74);
}
#tmServiceIntroDarkPro .spec .v{
  font-family:"Poppins",sans-serif;
  font-weight:900;
  font-size:12.5px;
  color:#fff;
  text-align:right;
}

/* ---------- WHITE END ---------- */
#tmServiceIntroDarkPro .intro-fade{
  position:absolute;
  left:0; right:0; bottom:0;
  height:280px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.62) 55%,
    #ffffff 100%
  );
  pointer-events:none;
  z-index:1;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:1100px){
  #tmServiceIntroDarkPro{ padding:140px 0 0; }

  #tmServiceIntroDarkPro .intro-grid{
    grid-template-columns:1fr;
    justify-content:start;
    gap:54px;
    padding-bottom:135px;
  }

  #tmServiceIntroDarkPro .intro-columns{ grid-template-columns:1fr; }

  /* panel full width on mobile/tablet */
  #tmServiceIntroDarkPro .intro-panel{
    width:100%;
    justify-self:stretch;
  }
}

@media(max-width:640px){
  #tmServiceIntroDarkPro{ padding:120px 0 0; }

  #tmServiceIntroDarkPro .intro-wrap{
    padding-left:7%;
    padding-right:7%;
  }

  #tmServiceIntroDarkPro .intro-title{ font-size:36px; }
  #tmServiceIntroDarkPro .intro-lead{ font-size:17px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6175ec4 *//* =====================================================
   TM SERVICE BODY PRO — FINAL FIX
   - Background no más blanco plano (FORCED)
   - Text justified
   - NO layout changes
===================================================== */

#tmServiceBodyPro h2{ color:#0f2356; }
#tmServiceBodyPro h3,
#tmServiceBodyPro h4{ color:#193886; }

#tmServiceBodyPro{
  background:
    radial-gradient(
      1400px 720px at 6% 10%,
      rgba(25,56,134,.12),
      transparent 60%
    ),
    radial-gradient(
      1100px 640px at 94% 82%,
      rgba(25,56,134,.10),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f1f4fb 28%,
      #ffffff 60%,
      #eef2fa 100%
    ) !important;

  padding:140px 0;
  font-family:"Montserrat",system-ui,sans-serif;
  color:#0b1020;
}


#tmServiceBodyPro *{ box-sizing:border-box; }

/* ✅ JUSTIFY TEXT (solo contenido, no títulos) */
#tmServiceBodyPro p,
#tmServiceBodyPro li{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

/* WRAP 5% REAL */
#tmServiceBodyPro .svc-wrap{
  width:100%;
  margin:0;
  padding-left:5%;
  padding-right:5%;
}

/* TITLE */
#tmServiceBodyPro .svc-title{
  max-width:1100px;
  margin-bottom:100px;
}

#tmServiceBodyPro h2{
  font-family:"Poppins",sans-serif;
  font-size:clamp(42px,4.8vw,64px);
  font-weight:900;
  margin-bottom:20px;
}

#tmServiceBodyPro .svc-subtitle{
  font-size:20px;
  line-height:1.9;
  color:#374151;
}

/* BLOCKS */
#tmServiceBodyPro .svc-block{
  margin-bottom:120px;
}

#tmServiceBodyPro h3{
  font-family:"Poppins",sans-serif;
  font-size:30px;
  font-weight:900;
  margin-bottom:36px;
}

/* OVERVIEW */
#tmServiceBodyPro .svc-overview{
  display:grid;
  grid-template-columns:minmax(0, 980px) minmax(0, 620px);
  justify-content:space-between;
  gap:70px;
  align-items:center;
}

#tmServiceBodyPro .svc-overview-media{
  justify-self:end;
  width:100%;
  min-height:420px;
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.15)),
    url("http://topmetalsupplier.com/wp-content/uploads/2026/01/construction-scaled.jpg") center/cover no-repeat;
  box-shadow:0 30px 80px rgba(0,0,0,.18);
}

/* CARDS */
#tmServiceBodyPro .svc-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}

#tmServiceBodyPro .svc-card{
  padding:36px;
  border-radius:26px;
  background:linear-gradient(180deg,#ffffff,#f7f8fc);
  border:1px solid rgba(25,56,134,.14);
  box-shadow:0 20px 55px rgba(0,0,0,.10);
}

#tmServiceBodyPro .svc-card h4{
  font-family:"Poppins",sans-serif;
  font-weight:900;
  font-size:20px;
  margin-bottom:12px;
}

/* MATERIALS */
#tmServiceBodyPro .svc-material-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}

#tmServiceBodyPro .svc-material{
  padding:30px;
  border-radius:22px;
  border:1px solid rgba(25,56,134,.16);
  background:#fff;
}

#tmServiceBodyPro .svc-material span{
  font-family:"Poppins",sans-serif;
  font-weight:900;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#193886;
  display:block;
  margin-bottom:12px;
}

/* COMPONENTS */
#tmServiceBodyPro .svc-components-list{
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px 30px;
}

#tmServiceBodyPro .svc-components-list li{
  position:relative;
  padding-left:18px;
}

#tmServiceBodyPro .svc-components-list li::before{
  content:"■";
  position:absolute;
  left:0;
  top:4px;
  color:#feb42f;
  font-size:12px;
}

/* NOTES */
#tmServiceBodyPro .svc-notes{
  padding:46px;
  border-radius:32px;
  background:linear-gradient(180deg,#f5f7fc,#ffffff);
  border:1px solid rgba(25,56,134,.14);
}

/* APPLICATIONS */
#tmServiceBodyPro .svc-app-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

#tmServiceBodyPro .svc-app-grid div{
  padding:22px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(25,56,134,.14);
  font-family:"Poppins",sans-serif;
  font-weight:900;
}

/* RESPONSIVE */
@media(max-width:1100px){

  #tmServiceBodyPro .svc-overview{
    grid-template-columns:1fr;
    justify-content:start;
  }

  #tmServiceBodyPro .svc-overview-media{
    justify-self:stretch;
  }

  #tmServiceBodyPro .svc-cards,
  #tmServiceBodyPro .svc-material-grid,
  #tmServiceBodyPro .svc-app-grid{
    grid-template-columns:1fr;
  }

  #tmServiceBodyPro .svc-components-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  #tmServiceBodyPro{
    padding:100px 0;
  }

  #tmServiceBodyPro .svc-wrap{
    padding-left:7%;
    padding-right:7%;
  }

  #tmServiceBodyPro h2{ font-size:36px; }
  #tmServiceBodyPro h3{ font-size:26px; }

  #tmServiceBodyPro .svc-overview-media{
    min-height:280px;
  }

  /* Justify en móvil puede verse feo por ríos de texto:
     si lo quieres mantener, borra estas 2 líneas. */
  #tmServiceBodyPro p,
  #tmServiceBodyPro li{
    text-align:left;
    hyphens:manual;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-859543f *//* =====================================================
   JACEO – TRUST & CERTIFICATIONS (ENHANCED)
===================================================== */

#jaceo{
  --blue:#193886;
  --yellow:#feb42f;
  --navy:#070f28;
  --navy-soft:#0b1536;
  --navy-deep:#050b20;
  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --line:rgba(255,255,255,.12);
}

/* Reset */
#jaceo *{
  box-sizing:border-box;
}

/* ================= SECTION ================= */

#jaceo .trust-100vh{
  width:100%;
  min-height:100vh;
  background:
    radial-gradient(1200px 60px at 10% 20%, rgba(25,56,134,.18), transparent 60%),
    radial-gradient(800px 500px at 90% 80%, rgba(254,180,47,.08), transparent 60%),
    linear-gradient(180deg,var(--navy-deep),var(--navy-soft));
  padding:120px 0;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}

/* ================= WRAP ================= */

#jaceo .trust-100vh .wrap{
  width:100%;
  max-width:1900px;
  margin:auto;
  padding:0 5%;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:120px;
  align-items:center;
}

/* ================= LEFT COPY ================= */

#jaceo .trust-copy{
  max-width:740px;
}

#jaceo .trust-copy .line{
  width:84px;
  height:3px;
  background:linear-gradient(90deg,var(--yellow),transparent);
  margin-bottom:22px;
}

#jaceo .trust-copy h2{
  font-size:clamp(44px,5vw,66px);
  font-weight:900;
  line-height:1.08;
  margin-bottom:22px;
  color:var(--text);
  letter-spacing:-.02em;
}

#jaceo .trust-copy p{
  font-size:20px;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:40px;
  max-width:680px;
}

#jaceo .trust-copy .divider{
  width:160px;
  height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}

/* ================= CERTS GRID ================= */

#jaceo .trust-certs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:42px;
  align-items:center;
}

/* ================= CERT CARD ================= */





/* ================= CERT CARD – CONTROL TOTAL ================= */

#jaceo .cert{
  width:380px;          /* TODOS IGUALES */
  height:300px;         /* PROPORCIÓN LIMPIA (NO LARGOS) */

  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01)),
    linear-gradient(180deg,#0e1d4d,#091437);

  border:1px solid rgba(255,255,255,.14);
  padding:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* IMAGEN */
#jaceo .cert img{
  max-width:240px;
  max-height:180px;
  width:auto;
  height:auto;
  object-fit:contain;
}






#jaceo .cert{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01)),
    linear-gradient(180deg,#0e1d4d,#091437);
  border:1px solid rgba(255,255,255,.14);
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .35s ease, box-shadow .35s ease;
}

/* subtle glow edge */
#jaceo .cert::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent,rgba(254,180,47,.18),transparent);
  opacity:0;
  transition:opacity .35s ease;
}

/* Desktop hover only */
@media (hover:hover){
  #jaceo .cert:hover{
    transform:translateY(-6px);
    box-shadow:0 32px 80px rgba(0,0,0,.55);
  }
  #jaceo .cert:hover::before{
    opacity:1;
  }
}

#jaceo .cert img{
  width:100%;
  max-width:320px;
  height:auto;
  display:block;
  filter:brightness(1.08) contrast(1.05);
}

/* Center last cert */
#jaceo .cert:nth-child(3){
  grid-column:1 / -1;
  justify-self:center;
  max-width:380px;
}

/* =========================================
   FIX RESPONSIVE CERTS: 1 x 1 (stack vertical)
   Pegar al FINAL del CSS
========================================= */

/* Tablet y abajo: SIEMPRE 1 columna */
@media (max-width:1200px){
  #jaceo .trust-certs{
    grid-template-columns:1fr !important;
  }

  /* Para que no queden cortados si usas width fijo */
  #jaceo .cert{
    width:100% !important;
    max-width:520px !important; /* ajusta si quieres más grande */
    height:auto !important;     /* evita “bloques raros” */
    margin:0 auto !important;
  }

  #jaceo .cert img{
    max-width:320px !important;
    height:auto !important;
  }

  /* Quita cualquier “centrado especial” del 3ro */
  #jaceo .cert:nth-child(3){
    grid-column:auto !important;
    justify-self:stretch !important;
    max-width:520px !important;
  }
}
/* =========================================
   FIX MOBILE: CERTS DEBAJO DEL TEXTO
========================================= */

@media (max-width:600px){

  /* Quitar centrado vertical que los “desaparece” */
  #jaceo .trust-100vh{
    min-height:auto !important;
    display:block !important;
    padding:80px 0 !important;
  }

  /* Stack natural: texto arriba, certs abajo */
  #jaceo .trust-100vh .wrap{
    display:block !important;
  }

  /* Separación clara entre texto y certs */
  #jaceo .trust-copy{
    margin-bottom:48px;
  }

  /* Certificados en columna, visibles */
  #jaceo .trust-certs{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  /* Cards fluidas en mobile */
  #jaceo .cert{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 auto !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-383dd5a */#TM_IndustriesServed_State{
      --tm-blue:#193886;
      --tm-blue2:#132c68;
      --tm-yellow:#FEB42F;
      --tm-white:#ffffff;

      --ink: rgba(12,15,20,.92);
      --muted: #000000;
      --line: rgba(12,15,20,.12);

      --paper:#ffffff;
      --soft:#f3f6fb;

      --radius: 22px;
      --radius2: 28px;

      --shadow: 0 28px 90px rgba(19,44,104,.18);
      --shadow2: 0 18px 55px rgba(12,15,20,.14);

      font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size: 1.06rem;
      width: 100%;
      padding: clamp(30px, 4.8vw, 70px) 5vw;
      background:
        radial-gradient(1200px 520px at 10% 12%, rgba(25,56,134,.10), transparent 55%),
        radial-gradient(900px 520px at 88% 22%, rgba(254,180,47,.12), transparent 56%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 56%, #fbfcff 100%);
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      isolation: isolate;
    }
    #TM_IndustriesServed_State *{ box-sizing: border-box; }
    #TM_IndustriesServed_State img{ max-width:100%; display:block; }

    /* Ambient layer */
    #TM_IndustriesServed_State .tm-amb{
      position:absolute; inset:-2px;
      pointer-events:none;
      z-index:0;
      opacity:.9;
      filter: saturate(1.05);
    }
    #TM_IndustriesServed_State .tm-amb:before,
    #TM_IndustriesServed_State .tm-amb:after{
      content:"";
      position:absolute;
      inset:-20%;
      background:
        radial-gradient(900px 560px at 14% 12%, rgba(25,56,134,.16), transparent 58%),
        radial-gradient(720px 520px at 86% 16%, rgba(254,180,47,.18), transparent 60%),
        radial-gradient(820px 520px at 82% 78%, rgba(25,56,134,.12), transparent 62%),
        linear-gradient(115deg, rgba(19,44,104,.06), rgba(255,255,255,0) 48%, rgba(254,180,47,.08));
      transform: rotate(-2deg);
      filter: blur(18px);
      animation: TMambFloat 10s ease-in-out infinite;
    }
    #TM_IndustriesServed_State .tm-amb:after{
      inset:-26%;
      transform: rotate(3deg);
      opacity:.72;
      filter: blur(26px);
      animation-duration: 12.5s;
    }
    @keyframes TMambFloat{
      0%,100%{ transform: translate3d(0,0,0) rotate(-2deg) scale(1); }
      50%{ transform: translate3d(0,-10px,0) rotate(-1deg) scale(1.03); }
    }

    /* Header */
    #TM_IndustriesServed_State .head{
      position: relative;
      z-index: 1;
      max-width: 100%;
      margin: 0 auto clamp(16px, 2vw, 26px);
      display: grid;
      gap: 10px;
    }
    #TM_IndustriesServed_State .eyebrow{
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: rgba(25,56,134,.88);
      font-size: .92rem;
    }
    #TM_IndustriesServed_State h2{
      margin: 0;
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 900;
      font-size: clamp(1.75rem, 2.4vw, 2.35rem);
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    #TM_IndustriesServed_State .sub{
      margin: 0;

      color: var(--muted);
      line-height: 1.7;
      font-size: 1.06rem;
    }

    /* Layout */
    #TM_IndustriesServed_State .wrap{
      position: relative;
      z-index: 1;
      max-width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
      gap: clamp(16px, 2.4vw, 26px);
      align-items: stretch;
    }

    /* Main media card (height controlled) */
  #TM_IndustriesServed_State .mediaCard{
  display: flex;
  flex-direction: column;
  height: 100%;
}

    #TM_IndustriesServed_State .mediaFrame{
  margin: 14px;
  border-radius: calc(var(--radius2) - 10px);
  overflow: hidden;
  background: #0b0f16;
  box-shadow: 0 18px 55px rgba(0,0,0,.16);

  /* REEMPLAZA lo anterior del aspect-ratio/max-height por esto */
  flex: 1;
  height: 100%;
   /*min-height: clamp(360px, 44vw, 560px);*/
  max-height: none;
  aspect-ratio: auto;
}
   #TM_IndustriesServed_State .mainImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    #TM_IndustriesServed_State .mainImg.is-swapping{
      opacity: 0;
      transform: scale(1.04);
    }

    /* Right rail */
    #TM_IndustriesServed_State .rail{
      display: grid;
      grid-template-rows: auto 1fr;
      gap: clamp(14px, 1.8vw, 18px);
      min-width: 0;
    }

    /* Thumbnails (uniform size) */
    #TM_IndustriesServed_State .thumbs{
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(25,56,134,.14);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      padding: 12px;
      display: grid;
      gap: 10px;
      align-content: start;
      position: relative;
       overflow:hidden;
    }
    #TM_IndustriesServed_State .thumbs:before{
      content:"";
      position:absolute; inset:-1px;
      background: linear-gradient(135deg, rgba(25,56,134,.12), rgba(254,180,47,.12), rgba(25,56,134,.10));
      opacity:.35;
      filter: blur(16px);
      pointer-events:none;
      
       pointer-events:none;
  max-width:100%;
    }
    #TM_IndustriesServed_State .thumbBtn{
      position: relative;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      border-radius: 16px;
      outline: none;
      text-align: left;
    }
    #TM_IndustriesServed_State .thumb{
      width: 100%;
      /* Same size always */
      height: 86px;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(12,15,20,.16);
      box-shadow: 0 10px 26px rgba(12,15,20,.10);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      background: #0b0f16;
      display: grid;
      grid-template-columns: 120px 1fr;
    }
    #TM_IndustriesServed_State .thumbMedia{
      width: 120px;
      height: 100%;
      overflow: hidden;
      background: #0b0f16;
    }
    #TM_IndustriesServed_State .thumbMedia img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .92;
      transform: scale(1.02);
      transition: opacity .25s ease, transform .35s ease;
    }
    #TM_IndustriesServed_State .thumbMeta{
      padding: 10px 12px;
      display: grid;
      align-content: center;
      gap: 4px;
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
    }
    #TM_IndustriesServed_State .thumbTitle{
      margin: 0;
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 900;
      font-size: 1.02rem;
      line-height: 1.12;
      color: rgba(12,15,20,.92);
      letter-spacing: -0.01em;
    }
    #TM_IndustriesServed_State .thumbHint{
      margin: 0;
      font-size: .98rem;
      color: rgba(12,15,20,.62);
      line-height: 1.25;
    }

    #TM_IndustriesServed_State .thumbBtn:hover .thumb{
      transform: translateY(-2px);
      box-shadow: 0 16px 40px rgba(12,15,20,.14);
      border-color: rgba(25,56,134,.26);
    }
    #TM_IndustriesServed_State .thumbBtn:hover .thumbMedia img{
      opacity: 1;
      transform: scale(1.06);
    }
    #TM_IndustriesServed_State .thumbBtn.is-active .thumb{
      border-color: rgba(254,180,47,.78);
      box-shadow: 0 18px 50px rgba(254,180,47,.14), 0 16px 42px rgba(12,15,20,.12);
      transform: translateY(-1px);
    }
    #TM_IndustriesServed_State .thumbBtn.is-active .thumbMedia img{
      opacity: 1;
      transform: scale(1.07);
    }
    #TM_IndustriesServed_State .thumbBtn:focus-visible .thumb{
      outline: 3px solid rgba(127,166,229,.65);
      outline-offset: 2px;
    }

    /* Copy card (dynamic content) */
    #TM_IndustriesServed_State .copy{
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(25,56,134,.14);
      border-radius: var(--radius2);
      box-shadow: var(--shadow2);
      padding: clamp(16px, 2.1vw, 22px);
      display: grid;
      align-content: start;
      gap: 10px;
      position: relative;
      overflow: hidden;
      min-height: 220px;
    }
    #TM_IndustriesServed_State .copy:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(700px 460px at 18% 14%, rgba(25,56,134,.12), transparent 62%),
        radial-gradient(620px 420px at 86% 18%, rgba(254,180,47,.14), transparent 62%);
      filter: blur(14px);
      opacity: .9;
      pointer-events:none;
    }
    #TM_IndustriesServed_State .kicker{
      position: relative;
      z-index: 1;
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: rgba(25,56,134,.88);
      font-size: .92rem;
    }
    #TM_IndustriesServed_State .indTitle{
      position: relative;
      z-index: 1;
      margin: 0;
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 900;
      font-size: clamp(1.25rem, 1.6vw, 1.55rem);
      line-height: 1.14;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    #TM_IndustriesServed_State .indSub{
      position: relative;
      z-index: 1;
      margin: 0;
      color: rgba(12,15,20,.72);
      line-height: 1.65;
      font-size: 1.06rem;
    }
    #TM_IndustriesServed_State .indBody{
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--muted);
      line-height: 1.68;
      font-size: 1.06rem;
    }

    #TM_IndustriesServed_State .ctaRow{
      position: relative;
      z-index: 1;
      margin-top: 8px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    #TM_IndustriesServed_State .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 16px;
      border-radius: 0px;
      text-decoration: none;
      font-weight: 900;
      letter-spacing: .01em;
      border: 1px solid rgba(25,56,134,.22);
      transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size: 1.06rem;
      line-height: 1;
      will-change: transform;
    }
    #TM_IndustriesServed_State .btnPrimary{
      background: linear-gradient(135deg, var(--tm-blue), var(--tm-blue2));
      color: var(--tm-white);
      box-shadow: 0 16px 44px rgba(25,56,134,.22);
      border-color: rgba(25,56,134,.18);
    }
    #TM_IndustriesServed_State .btnPrimary:hover{
      transform: translateY(-2px);
      box-shadow: 0 22px 60px rgba(25,56,134,.28);
    }
    #TM_IndustriesServed_State .btnOutline{
      background: rgba(255,255,255,.88);
      color: rgba(19,44,104,.92);
      border-color: rgba(254,180,47,.68);
      box-shadow: 0 14px 40px rgba(12,15,20,.10);
    }
    #TM_IndustriesServed_State .btnOutline:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 52px rgba(12,15,20,.14);
      border-color: rgba(254,180,47,.90);
    }

    /* Text swap animation */
    #TM_IndustriesServed_State .swap{
      transition: opacity .22s ease, transform .22s ease;
      will-change: opacity, transform;
    }
    #TM_IndustriesServed_State .swap.is-fading{
      opacity: 0;
      transform: translateY(6px);
    }

    /* Entrance reveal */
    #TM_IndustriesServed_State .reveal{
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .7s ease, transform .7s ease;
    }
    #TM_IndustriesServed_State.is-inview .reveal{
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 980px){
      #TM_IndustriesServed_State .wrap{
        grid-template-columns: 1fr;
      }
      #TM_IndustriesServed_State .thumbs{
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(270px, 1fr);
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      #TM_IndustriesServed_State .thumbBtn{
        scroll-snap-align: start;
      }
      #TM_IndustriesServed_State .thumb{
        height: 92px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      #TM_IndustriesServed_State .tm-amb:before,
      #TM_IndustriesServed_State .tm-amb:after{ animation: none; }
      #TM_IndustriesServed_State .mainImg,
      #TM_IndustriesServed_State .reveal,
      #TM_IndustriesServed_State .btn,
      #TM_IndustriesServed_State .thumb,
      #TM_IndustriesServed_State .thumbMedia img,
      #TM_IndustriesServed_State .swap{ transition: none !important; }
    }
    
   







/* =========================
   FIX DESKTOP ONLY (>= 981px)
   - Aquí sí queremos botones full width en la columna derecha
========================= */
@media (min-width: 981px){
  #TM_IndustriesServed_State .thumbBtn{ display:block; width:100%; }
  #TM_IndustriesServed_State .thumb{ width:100%; }
  #TM_IndustriesServed_State .thumbMeta{ width:100%; }
}

/* =========================
   FIX MOBILE / TABLET (<= 980px)
   - Carrusel real sin cortes
   - Cada card ocupa casi todo el viewport
   - Texto no se recorta raro
========================= */
@media (max-width: 980px){

  #TM_IndustriesServed_State .thumbs{
    grid-auto-columns: 88%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px;
    scroll-padding-left: 12px;
  }

  /* Cada slide debe llenar SU columna (no 100% del contenedor total) */
  #TM_IndustriesServed_State .thumbBtn{
    width: 100%;
  }

  /* Ajuste interno para que el texto tenga espacio */
  #TM_IndustriesServed_State .thumb{
    grid-template-columns: 104px 1fr;
  }
  #TM_IndustriesServed_State .thumbMedia{
    width: 104px;
  }

  /* Clave: permite que el texto haga ellipsis correcto */
  #TM_IndustriesServed_State .thumbMeta{
    min-width: 0;
  }
  #TM_IndustriesServed_State .thumbTitle,
  #TM_IndustriesServed_State .thumbHint{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Extra para móviles muy pequeños */
@media (max-width: 520px){
  #TM_IndustriesServed_State .thumbs{ grid-auto-columns: 92%; }
  #TM_IndustriesServed_State .thumb{ grid-template-columns: 96px 1fr; }
  #TM_IndustriesServed_State .thumbMedia{ width: 96px; }
}



/* =========================
   FIX: Right rail must stretch (desktop/tablet)
   - Elimina el espacio vacío a la derecha
   - Fuerza ancho completo en rail / thumbs / buttons
========================= */
#TM_IndustriesServed_State .wrap{
  justify-items: stretch;
}

#TM_IndustriesServed_State .rail,
#TM_IndustriesServed_State .thumbs,
#TM_IndustriesServed_State .copy{
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}

#TM_IndustriesServed_State .thumbBtn{
  display: block;
  width: 100%;
  justify-self: stretch;
}

/* =========================
   FIX: Right thumbnails image always same size
   - La mini imagen NO cambia con el archivo
   - El contenedor manda, la imagen se adapta
========================= */
#TM_IndustriesServed_State .thumb{
  width: 100%;
  height: 86px; /* tu tamaño fijo (déjalo así o ajústalo) */
  grid-template-columns: 120px 1fr;
}

#TM_IndustriesServed_State .thumbMedia{
  width: 120px;
  height: 100%;
  overflow: hidden;
}

#TM_IndustriesServed_State .thumbMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* clave: adapta sin deformar */
  object-position: center;
  display: block;
}
/* =========================
   FIX DEFINITIVO – 981px a 1200px
   Mini cards uniformes
   Imagen NO define altura
========================= */
@media (min-width: 981px) and (max-width: 1200px){

  /* TODAS las minicards del mismo alto */
  #TM_IndustriesServed_State .thumb{
    height: 96px;                 /* altura fija y uniforme */
    grid-template-columns: 120px 1fr;
    align-items: stretch;
  }

  /* Contenedor de imagen fijo */
  #TM_IndustriesServed_State .thumbMedia{
    width: 120px;
    height: 100%;
    overflow: hidden;
  }

  /* La imagen se adapta al contenedor */
  #TM_IndustriesServed_State .thumbMedia img{
    width: 100%;
    height: 100%;
    object-fit: cover;            /* CLAVE */
    object-position: center;
  }

  /* Texto NO empuja altura */
  #TM_IndustriesServed_State .thumbMeta{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  /* Evita saltos por textos largos */
  #TM_IndustriesServed_State .thumbTitle,
  #TM_IndustriesServed_State .thumbHint{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* =========================
   FIX: Columna izquierda igual altura que la derecha
   - La izquierda NO depende de la imagen
   - La izquierda estira a la altura total de .rail (thumbs + copy)
   - La imagen se adapta al contenedor
========================= */

/* 1) Grid: ambas columnas estiran igual */
#TM_IndustriesServed_State .wrap{
  align-items: stretch;
}

/* 2) La derecha define altura (thumbs + copy) */
#TM_IndustriesServed_State .rail{
  height: 100%;
}

/* 3) La izquierda se estira a la misma altura que la derecha */
#TM_IndustriesServed_State .mediaCard{
  height: 100%;
}

/* 4) El frame de la imagen llena toda la altura disponible
      (IMPORTANTE: quitamos min-height por clamp en desktop) */
#TM_IndustriesServed_State .mediaFrame{
  margin: 14px;
  height: 100%;
  min-height: 0;     /* clave: no forzar altura por clamp */
  max-height: none;
  display: block;
}

/* 5) La imagen SIEMPRE se adapta al frame */
#TM_IndustriesServed_State .mainImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 6) Solo en mobile/tablet (< 980px) permitimos que la izquierda tenga altura propia */
@media (max-width: 980px){
  #TM_IndustriesServed_State .mediaFrame{
    min-height: clamp(320px, 56vw, 520px); /* aquí sí puede crecer */
    height: auto;
  }
  #TM_IndustriesServed_State .mainImg{
    height: 100%;
  }
}


/* =========================
   FIX DEFINITIVO (DESKTOP): IZQUIERDA MISMA ALTURA QUE DERECHA
   - La altura NO depende de la imagen
   - La imagen se adapta al contenedor
   - IMPORTANTE: anula el min-height clamp en desktop
========================= */

/* 1) El grid estira ambos items a la misma fila */
#TM_IndustriesServed_State .wrap{
  align-items: stretch;
}

/* 2) Mueve el "margen" a padding del contenedor para que el frame pueda medir 100% real */
#TM_IndustriesServed_State .mediaCard{
  padding: 14px;              /* antes lo tenías como margin en .mediaFrame */
  height: 100%;
  align-self: stretch;
  display: flex;
}

/* 3) El frame ahora llena toda la altura disponible de la columna */
#TM_IndustriesServed_State .mediaFrame{
  margin: 0 !important;       /* anula tu margin:14px anterior */
  width: 100%;
  height: 100%;
  min-height: 0 !important;   /* clave: mata el clamp en desktop */
  flex: 1;
  border-radius: calc(var(--radius2) - 10px);
  overflow: hidden;
  background: #0b0f16;
  box-shadow: 0 18px 55px rgba(0,0,0,.16);
}

/* 4) La imagen siempre se adapta */
#TM_IndustriesServed_State .mainImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* =========================
   FIX 981px–1200px
   - Mini cards TODAS iguales
   - Imagen mini SIEMPRE mismo tamaño
   - Texto NO se corta: clamp de líneas
========================= */
@media (min-width: 981px) and (max-width: 1200px){

  /* Ajusta un poco la proporción de columnas para que el rail no quede tan apretado */
  #TM_IndustriesServed_State .wrap{
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  }

  /* Mini card uniforme */
  #TM_IndustriesServed_State .thumb{
    height: 96px;                 /* fija para que ninguna crezca más que otra */
    width: 100%;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr); /* minmax(0,1fr) evita cortes raros */
    align-items: stretch;
  }

  /* Contenedor de mini imagen fijo */
  #TM_IndustriesServed_State .thumbMedia{
    width: 120px;
    height: 100%;
    overflow: hidden;
    flex: 0 0 120px;
  }

  /* La mini imagen se adapta, no define el tamaño */
  #TM_IndustriesServed_State .thumbMedia img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Texto centrado y SIN cortar feo */
  #TM_IndustriesServed_State .thumbMeta{
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  /* Título: 1 línea (si es largo, se recorta bonito) */
  #TM_IndustriesServed_State .thumbTitle{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hint: 2 líneas máximo (no “se corta” a media frase, se clampa) */
  #TM_IndustriesServed_State .thumbHint{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal; /* importante: quita nowrap */
    line-height: 1.2;
    max-height: calc(1.2em * 2);
  }
}


/* =========================
   MOBILE/TABLET: aquí sí dejamos altura propia para la imagen izquierda
   (porque ya no existe columna derecha al lado)
========================= */
@media (max-width: 980px){

  /* El padding lateral vuelve a ser el 5% real */
  #TM_IndustriesServed_State .wrap{
    padding-left: 5%;
    padding-right: 5%;
  }

  /* La card NO mete margen lateral */
  #TM_IndustriesServed_State .mediaCard{
    padding: 0;
  }

  /* El frame ocupa el ancho correcto */
  #TM_IndustriesServed_State .mediaFrame{
    margin: 14px 0 !important;   /* solo vertical */
    width: 100%;
    height: auto;
    max-height: clamp(260px, 52vw, 420px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* =========================
   FIX ÚNICO Y LIMPIO
   - >=981px: izquierda igual altura total de la derecha
   - <=980px: imagen con altura controlada (NO gigante)
========================= */

/* DESKTOP: 2 columnas reales */
@media (min-width: 981px){

  #TM_IndustriesServed_State .wrap{
    align-items: stretch;
  }

  /* La izquierda se estira igual que la derecha */
  #TM_IndustriesServed_State .mediaCard{
    padding: 14px;
    height: 100%;
    align-self: stretch;
    display: flex;
  }

  #TM_IndustriesServed_State .mediaFrame{
    margin: 0 !important;
    width: 100%;
    height: 100%;
    min-height: 0 !important;  /* mata el clamp en desktop */
    flex: 1;
    overflow: hidden;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* MOBILE/TABLET: 1 columna (aquí NO queremos que ocupe media página) */
@media (max-width: 980px){

  #TM_IndustriesServed_State .mediaCard{
    padding: 0;
    display: block;
    height: auto;
  }

  /* Altura controlada + ratio consistente */
  #TM_IndustriesServed_State .mediaFrame{
    margin: 14px !important;
    height: auto;
    min-height: 0 !important;
    max-height: clamp(260px, 52vw, 420px); /* BAJA el tamaño */
    aspect-ratio: 16 / 10;                /* evita “poster gigante” */
    overflow: hidden;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}
/* =========================
   FIX DEFINITIVO: 5vw REAL EN MOBILE
   - La sección ya tiene padding 5vw
   - Quitamos margen lateral del frame (14px) que rompe el 5%
========================= */
@media (max-width: 980px){

  /* NO metas padding extra aquí, la sección ya tiene 5vw */
  #TM_IndustriesServed_State .wrap{
    padding: 0 !important;
  }

  /* La card no agrega nada lateral */
  #TM_IndustriesServed_State .mediaCard{
    padding: 0 !important;
    margin: 0 !important;
  }

  /* CLAVE: elimina el margin lateral de 14px */
  #TM_IndustriesServed_State .mediaFrame{
    margin: 14px 0 !important;   /* solo arriba/abajo */
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    max-height: clamp(260px, 52vw, 420px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}
/* =========================
   FINAL FIX (>=1200px también)
   - 2 columnas misma altura
   - contenedor manda, imagen se adapta
   - elimina cualquier min-height clamp en desktop
========================= */

/* Desktop (2 columnas) */
@media (min-width: 981px){

  /* La fila del grid estira ambos lados igual */
  #TM_IndustriesServed_State .wrap{
    align-items: stretch !important;
  }

  /* Derecha se estira */
  #TM_IndustriesServed_State .rail{
    height: 100%;
    align-self: stretch;
  }

  /* Izquierda se estira igual */
  #TM_IndustriesServed_State .mediaCard{
    height: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  /* El frame ocupa TODA la altura disponible y NO depende de la imagen */
  #TM_IndustriesServed_State .mediaFrame{
    margin: 14px !important;
    flex: 1;
    height: auto !important;
    min-height: 0 !important;     /* mata tu clamp */
    max-height: none !important;
    aspect-ratio: auto !important;
    display: block;
  }

  /* Imagen siempre se adapta al frame */
  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* Mobile/Tablet: altura controlada (1 columna) */
@media (max-width: 980px){

  #TM_IndustriesServed_State .mediaCard{
    height: auto;
    display: block;
  }

  #TM_IndustriesServed_State .mediaFrame{
    margin: 14px 0 !important; /* respeta el 5vw real */
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: clamp(260px, 52vw, 420px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}
/* =========================
   FINAL FIX REAL (DESKTOP)
   - El alto NO lo manda la imagen
   - La fila del grid la manda el rail (derecha)
   - Copy estira y rellena, sin huecos
========================= */

@media (min-width: 981px){

  #TM_IndustriesServed_State .wrap{
    align-items: stretch !important;
  }

  /* Derecha: que tenga altura completa de la fila */
  #TM_IndustriesServed_State .rail{
    height: 100% !important;
    align-self: stretch !important;
  }

  /* El 1fr del rail debe poder estirarse sin límites raros */
  #TM_IndustriesServed_State .copy{
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Izquierda: se estira a la altura de la fila (la manda la derecha) */
  #TM_IndustriesServed_State .mediaCard{
    height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Frame: NO usar clamp en desktop */
  #TM_IndustriesServed_State .mediaFrame{
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;          /* clave */
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  /* Imagen se adapta al contenedor */
  #TM_IndustriesServed_State .mainImg{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}

/* =========================
   FIX: Elimina el hueco visual debajo del botón
   - La card .copy se estira (por el 1fr del rail)
   - Convertimos .copy a flex column
   - Empujamos la CTA al fondo
========================= */

@media (min-width: 981px){

  #TM_IndustriesServed_State .copy{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Empuja el bloque del botón hacia abajo y “consume” el espacio */
  #TM_IndustriesServed_State .ctaRow{
    margin-top: auto !important;
    padding-top: 12px; /* separación elegante */
  }
}

/* =========================
   FIX ÚNICO Y CORRECTO
   - Desktop: izquierda = derecha
   - El contenedor manda, la imagen se adapta
========================= */

@media (min-width: 981px){

  /* 1) El grid manda la altura */
  #TM_IndustriesServed_State .wrap{
    align-items: stretch;
  }

  /* 2) La derecha define el alto real */
  #TM_IndustriesServed_State .rail{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* 3) La copy rellena el espacio */
  #TM_IndustriesServed_State .copy{
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  #TM_IndustriesServed_State .ctaRow{
    margin-top: auto;
  }

  /* 4) Izquierda se estira igual */
  #TM_IndustriesServed_State .mediaCard{
    display: flex;
    padding: 14px;     /* el espacio va AQUÍ */
    height: 100%;
  }

  /* 5) El frame llena TODO el alto */
  #TM_IndustriesServed_State .mediaFrame{
    margin: 0;         /* CLAVE */
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* 6) La imagen NUNCA manda el tamaño */
  #TM_IndustriesServed_State .mainImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* =========================
   FIX >1200px (DESKTOP REAL)
   - Quita el estiramiento que crea el hueco
   - Controla la altura de la imagen (la imagen ya NO manda la fila)
========================= */
@media (min-width: 1201px){

  /* 1) NO estirar a la fuerza (esto es lo que genera el “hueco”) */
  #TM_IndustriesServed_State .wrap{
    align-items: start !important;            /* clave */
  }

  #TM_IndustriesServed_State .rail{
    height: auto !important;                 /* deja altura natural */
    align-self: start !important;
    display: grid !important;
    grid-template-rows: auto auto !important;/* thumbs + copy en auto */
  }

  #TM_IndustriesServed_State .copy{
    height: auto !important;                 /* NO se estira */
    min-height: 0 !important;                /* anula el 220 si estorba */
    display: grid !important;                /* como estaba originalmente */
  }

  /* 2) La imagen queda “premium” pero con altura controlada */
  #TM_IndustriesServed_State .mediaCard{
    padding: 14px !important;                /* el espacio va aquí */
    height: auto !important;
    align-self: start !important;
  }

  #TM_IndustriesServed_State .mediaFrame{
    margin: 0 !important;                    /* evita romper el 100% */
    width: 100% !important;
    max-height: clamp(520px, 42vw, 680px) !important; /* controla alto */
    aspect-ratio: 16 / 10 !important;        /* consistente */
    overflow: hidden !important;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}
/* =========================
   >1200px: LEFT = RIGHT (tope exacto)
   - Usa la variable --TMrailH que ya calculas en JS
   - La izquierda termina EXACTO donde termina la derecha
========================= */
@media (min-width: 1201px){

  /* La fila NO debe estirar por la imagen */
  #TM_IndustriesServed_State .wrap{
    align-items: start !important;
  }

  /* La derecha se queda con altura natural (thumbs + copy) */
  #TM_IndustriesServed_State .rail{
    height: auto !important;
    align-self: start !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
  }

  #TM_IndustriesServed_State .copy{
    height: auto !important;
    min-height: 220px !important; /* conserva tu base */
    display: grid !important;
  }

  /* Mueve el “espacio” a padding (NO margin) para medir exacto */
  #TM_IndustriesServed_State .mediaCard{
    padding: 14px !important;
    margin: 0 !important;
    height: var(--TMrailH, auto) !important;  /* CLAVE */
    align-self: start !important;
    display: flex !important;
  }

  #TM_IndustriesServed_State .mediaFrame{
    margin: 0 !important;          /* CLAVE */
    width: 100% !important;
    height: 100% !important;       /* llena el alto del mediaCard */
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  #TM_IndustriesServed_State .mainImg{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cbade59 *//* =====================================================
   JACEO – PREMIUM CTA (OFFICIAL COLORS)
   Yellow: #feb42f
   Blue:   #193886
===================================================== */

#jaceo{
  --blue:#193886;
  --yellow:#feb42f;
  --ink:#0b0b0b;
  --muted:#6b7280;
  --paper:#ffffff;
  --soft:#f4f6f9;
  --radius:16px;
}

/* Reset interno */
#jaceo *,
#jaceo *::before,
#jaceo *::after{
  box-sizing:border-box;
}

/* ================= CTA SECTION ================= */

#jaceo .cta-premium{
  width:100%;
  padding:110px 5%;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f7f9ff 60%,
    #ffffff 100%
  );
}

/* Layout */
#jaceo .cta-premium .wrap{
  max-width:1600px;
  margin:auto;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:70px;
  align-items:center;
}

/* ================= COLLAGE ================= */

#jaceo .collage{
  position:relative;
  min-height:520px;
}

#jaceo .img-card{
  position:absolute;
  overflow:hidden;
  border-radius:var(--radius);
  background:#ddd;
  box-shadow:0 22px 60px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.08);
}

#jaceo .img-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
}

/* Image placements */
#jaceo .img-1{
  left:0;
  top:0;
  width:58%;
  height:62%;
}

#jaceo .img-2{
  right:0;
  bottom:0;
  width:56%;
  height:60%;
}

/* Decorative accents */
#jaceo .accent{
  position:absolute;
  width:26px;
  height:26px;
  background:var(--yellow);
}

#jaceo .accent.a1{ top:-10px; left:48%; }
#jaceo .accent.a2{ bottom:44%; left:-10px; background:var(--blue); }
#jaceo .accent.a3{ top:52%; right:-10px; background:var(--blue); }


#jaceo .stat.s1 .label,
#jaceo .stat.s2 .label{
  color:#0b0b0b;
}



/* Stats cards */
#jaceo .stat{
  position:absolute;
  background:var(--paper);
  border-radius:14px;
  padding:18px 20px;
  min-width:230px;
  box-shadow:0 20px 55px rgba(0,0,0,.14);
  border:1px solid rgba(0,0,0,.08);
}

#jaceo .stat .big{
  font-size:34px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--blue);
  line-height:1.05;
}

#jaceo .stat .label{
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}

#jaceo .stat.s1{ left:18px; bottom:44px; }
#jaceo .stat.s2{ right:26px; top:44px; }

/* Chips */
#jaceo .chip{
  position:absolute;
  width:14px;
  height:14px;
  top:-7px;
  right:16px;
  background:var(--yellow);
}

#jaceo .stat.s2 .chip{
  background:var(--blue);
}

/* ================= CONTENT ================= */

#jaceo .content{
  background:var(--paper);
  border-radius:var(--radius);
  padding:54px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 20px 55px rgba(0,0,0,.08);
}

#jaceo .kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
  font-size:12px;
  margin-bottom:18px;
}

#jaceo .kicker::before{
  content:"";
  width:54px;
  height:4px;
  background:var(--yellow);
}

#jaceo .content h2{
  font-size:42px;
  line-height:1.15;
  margin-bottom:16px;
  font-weight:900;
  color:#0f172a;
}

#jaceo .sub{
  font-size:18px;
  line-height:1.7;
  color:#374151;
  margin-bottom:26px;
  max-width:560px;
}

/* Bullets */
#jaceo .bullets{
  display:grid;
  gap:12px;
  margin-bottom:34px;
}

#jaceo .bullets div{
  display:flex;
  gap:12px;
  color:#374151;
  font-size:16px;
  line-height:1.55;
}

#jaceo .bullets div::before{
  content:"■";
  color:var(--yellow);
  font-size:12px;
  margin-top:2px;
}

/* Buttons */
#jaceo .actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

#jaceo .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 34px;
  font-weight:900;
  letter-spacing:.03em;
  text-decoration:none;
  border:3px solid;
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    background .32s ease,
    color .32s ease;
}

#jaceo .btn.call{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

#jaceo .btn.quote{
  background:var(--yellow);
  border-color:var(--yellow);
  color:#0b0b0b;
}

#jaceo .btn:hover{
  transform:scale(1.08);
  box-shadow:0 22px 50px rgba(0,0,0,.18);
}


/* ================= RESPONSIVE ================= */

@media(max-width:1100px){
  #jaceo .cta-premium .wrap{
    grid-template-columns:1fr;
    gap:48px;
  }
}

@media(max-width:640px){
  #jaceo .cta-premium{
    padding:90px 7%;
  }

  #jaceo .content{
    padding:40px 26px;
  }

  #jaceo .content h2{
    font-size:34px;
  }

  #jaceo .stat{
    min-width:200px;
  }

  #jaceo .img-1,
  #jaceo .img-2{
    width:100%;
    left:0;
    right:auto;
  }

  #jaceo .img-1{ top:0; height:260px; }
  #jaceo .img-2{ bottom:0; height:240px; }

  #jaceo .stat.s2{ right:18px; top:18px; }
  #jaceo .stat.s1{ left:18px; bottom:18px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-81b9d49 *//* =====================================================
   JACEO – FAQ FINAL RESTRUCTURED
===================================================== */

#jaceo{
  --blue:#193886;
  --yellow:#feb42f;
  --bg1:#0b1536;
  --bg2:#070f28;
  --text:#ffffff;
  --muted:#cbd3e6;
  --line:rgba(255,255,255,.1);
}

/* Reset */
#jaceo *{ box-sizing:border-box; }

/* ================= SECTION ================= */

#jaceo .faq-section{
  min-height:100vh;
  padding:90px 5%;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  display:flex;
  align-items:center;
}

#jaceo .faq-container{
  width:100%;
  max-width:1800px;
  margin:auto;
}

/* ================= HEADER ================= */

#jaceo .faq-head{
  max-width:900px;
  margin-bottom:70px;
}

#jaceo .faq-head .line{
  display:block;
  width:90px;
  height:4px;
  background:var(--yellow);
  margin-bottom:26px;
}

#jaceo .faq-head h2{
  font-size:56px;
  font-weight:900;
  margin-bottom:18px;
}

#jaceo .faq-head p{
  font-size:20px;
  line-height:1.7;
  color:var(--muted);
}

/* ================= BODY ================= */

#jaceo .faq-body{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:80px;
}

/* ================= QUESTIONS ================= */

#jaceo .faq-questions{
  border-top:1px solid var(--line);
}

#jaceo .faq-q{
  all:unset;
  display:block;
  width:100%;
  padding:26px 0 26px 22px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  font-size:17px;
  color:var(--muted);
  position:relative;
  transition:.25s ease;
}

#jaceo .faq-q::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:transparent;
  transition:.25s ease;
}

#jaceo .faq-q:hover{
  color:#fff;
}

#jaceo .faq-q.active{
  color:#fff;
  font-weight:700;
}

#jaceo .faq-q.active::before{
  background:var(--yellow);
}

/* ================= ANSWER ================= */

#jaceo .faq-answer{
  background:linear-gradient(180deg,#0f255f,#0b1c45);
  border-left:4px solid var(--yellow);
  padding:0;
  display:flex;
}

#jaceo .faq-answer-inner{
  padding:64px 72px;
  max-width:900px;
  transition:opacity .25s ease;
}

#jaceo .faq-answer-inner h3{
  font-size:32px;
  font-weight:900;
  margin-bottom:26px;
}

#jaceo .faq-answer-inner p{
  font-size:18px;
  line-height:1.85;
  color:var(--muted);
}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){
  #jaceo .faq-body{
    grid-template-columns:1fr;
    gap:50px;
  }

  #jaceo .faq-answer-inner{
    padding:48px 36px;
  }
}/* End custom CSS */