.elementor-2254 .elementor-element.elementor-element-f8c20f7{--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-2254 .elementor-element.elementor-element-ea63289{width:100%;max-width:100%;}.elementor-2254 .elementor-element.elementor-element-ea63289 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2254 .elementor-element.elementor-element-a9efeab{--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-2254 .elementor-element.elementor-element-7166322{width:100%;max-width:100%;}.elementor-2254 .elementor-element.elementor-element-7166322 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2254 .elementor-element.elementor-element-af39ea4{--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-2254 .elementor-element.elementor-element-875288a{width:100%;max-width:100%;}.elementor-2254 .elementor-element.elementor-element-875288a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2254 .elementor-element.elementor-element-a5fd5cf{--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-2254 .elementor-element.elementor-element-26684e3{width:100%;max-width:100%;}.elementor-2254 .elementor-element.elementor-element-26684e3 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2254 .elementor-element.elementor-element-7ed0998{--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-2254 .elementor-element.elementor-element-c80d9e5{width:100%;max-width:100%;}.elementor-2254 .elementor-element.elementor-element-c80d9e5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2254 .elementor-element.elementor-element-18b7b75{--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-2254 .elementor-element.elementor-element-8259ba6{width:100%;max-width:100%;}.elementor-2254 .elementor-element.elementor-element-8259ba6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2254 .elementor-element.elementor-element-9682591{--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-2254 .elementor-element.elementor-element-5a9256c{width:100%;max-width:100%;}.elementor-2254 .elementor-element.elementor-element-5a9256c > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-ea63289 *//* =====================================================
   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/2026/01/Jotafilmmakers-51-scaled.jpg")
    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-7166322 *//* =====================================================
   JACEO – WHY CORE (TOP METAL PALETTE ONLY)
   Yellow: #feb42f
   Blue:   #193886
===================================================== */

#jaceo .why-core-topmetal{
  padding:140px 0;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fdfdfd 60%,
      #ffffff 100%
    );
}

/* ===== REAL 5% MARGINS – GIANT SCREENS SAFE ===== */
#jaceo .why-core-topmetal .wrap{
  width:100%;
  padding-left:5%;
  padding-right:5%;
  margin:0 auto;
  max-width:unset;
}

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

#jaceo .why-head{
  max-width:820px;
  margin-bottom:90px;
}

#jaceo .why-head .line{
  width:84px;
  height:5px;
  background:#feb42f;
  margin-bottom:22px;
}

#jaceo .why-head h2{
  font-size:52px;
  font-weight:900;
  line-height:1.12;
  letter-spacing:-.02em;
  color:#0b0b0b;
  margin-bottom:22px;
}

#jaceo .why-head p{
  font-size:20px;
  line-height:1.75;
  color:#0b0b0b;
  max-width:720px;
}

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

#jaceo .why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:46px;
}

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

#jaceo .why-card{
  position:relative;
  background:#ffffff;
  border:3px solid #193886;
  padding:56px 42px;
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

#jaceo .why-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:6px;
  background:#feb42f;
}

#jaceo .why-card:hover{
  transform:translateY(-10px);
  box-shadow:0 28px 70px rgba(0,0,0,.18);
}

/* ================= ICON BASE (ELEGANT) ================= */

#jaceo .why-card .icon{
  width:44px;
  height:44px;
  margin-bottom:26px;
  position:relative;
  border:2px solid #193886;
}

/* Yellow accent corner */
#jaceo .why-card .icon::after{
  content:"";
  position:absolute;
  right:-6px;
  bottom:-6px;
  width:14px;
  height:14px;
  background:#feb42f;
}

/* ================= ICON 1 – SYSTEM GRID ================= */

#jaceo .why-card:nth-child(1) .icon::before{
  content:"";
  position:absolute;
  inset:6px;
  background:
    linear-gradient(#193886 0 0),
    linear-gradient(#193886 0 0),
    linear-gradient(#193886 0 0),
    linear-gradient(#193886 0 0);
  background-size:100% 2px,100% 2px,2px 100%,2px 100%;
  background-position:0 33%,0 66%,33% 0,66% 0;
  background-repeat:no-repeat;
}

/* ================= ICON 2 – FLOW / TIME ================= */

#jaceo .why-card:nth-child(2) .icon::before{
  content:"";
  position:absolute;
  inset:10px;
  border-top:2px solid #193886;
  border-bottom:2px solid #193886;
}

#jaceo .why-card:nth-child(2) .icon{
  border-left:2px solid #193886;
  border-right:2px solid #193886;
}

/* ================= ICON 3 – ORGANIZATION ================= */

#jaceo .why-card:nth-child(3) .icon::before{
  content:"";
  position:absolute;
  inset:8px;
  border:2px solid #193886;
}

#jaceo .why-card:nth-child(3) .icon{
  border:2px solid #193886;
}

/* ================= TEXT ================= */

#jaceo .why-card h3{
  font-size:22px;
  font-weight:900;
  color:#193886;
  margin-bottom:16px;
}

#jaceo .why-card p{
  font-size:16px;
  line-height:1.7;
  color:#0b0b0b;
  text-align:justify;
  text-justify:inter-word;
}

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

@media(max-width:1100px){
  #jaceo .why-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){

  #jaceo .why-core-topmetal{
    padding:100px 0;
  }

  #jaceo .why-core-topmetal .wrap{
    padding-left:7%;
    padding-right:7%;
  }

  #jaceo .why-head h2{
    font-size:38px;
  }

  #jaceo .why-grid{
    grid-template-columns:1fr;
  }

  #jaceo .why-card{
    padding:44px 32px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-875288a *//* =====================================================
   JACEO – INSTALLATION PROCESS (FINAL – 5% REAL)
   Yellow: #feb42f
   Blue:   #193886
   Deep:   #0f2356
===================================================== */

#jaceo{
  --blue:#193886;
  --blue-deep:#0f2356;
  --yellow:#feb42f;
}

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

#jaceo .install-pro{
  padding:110px 0 0;
  background:#ffffff;
}

/* ===== REAL 5% MARGINS – NO MAX WIDTH ===== */
#jaceo .install-pro .wrap{
  width:100%;
  margin:0 auto;
  padding-left:5%;
  padding-right:5%;
}

/* ================= TITLE ================= */

#jaceo .install-top{
  margin-bottom:28px;
}

#jaceo .install-top h2{
  font-size:52px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#193886;
}

/* ================= FULL WIDTH BLUE ================= */

#jaceo .install-stage{
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;

  background:linear-gradient(180deg,#0f2356,#0b1a44);
  min-height:560px;
  overflow:hidden;
}

/* LOGO TEXTURE */
#jaceo .install-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("http://topmetalsupplier.com/wp-content/uploads/2026/01/Top_Metal_Logo_Vectorizado_Blanco-scaled.png");
  background-repeat:repeat;
  background-size:220px auto;
  background-position:center;
  opacity:0.04;
  pointer-events:none;
}

/* ================= INNER GRID ================= */
/* ===== REAL 5% MARGINS INSIDE FULL WIDTH ===== */

#jaceo .install-stage-inner{
  width:100%;
  margin:0 auto;
  padding:36px 5%;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:stretch;
}

/* ================= IMAGE ================= */

#jaceo .install-photo{
  display:flex;
}

#jaceo .install-photo img{
  width:100%;
  min-height:480px;
  object-fit:cover;
  border-radius:22px;
  box-shadow:0 32px 90px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
}

/* ================= STEPS PANEL ================= */

#jaceo .install-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#ffffff;
}

/* Step */
#jaceo .step{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:20px;
  padding:18px 0;
  border-bottom:1px dashed rgba(255,255,255,.25);
}

#jaceo .step:last-child{
  border-bottom:0;
}

#jaceo .num{
  font-size:22px;
  font-weight:900;
  color:#feb42f;
}

#jaceo .step h3{
  font-size:18px;
  font-weight:900;
  margin:0 0 6px;
}

#jaceo .step p{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:rgba(255,255,255,.88);
  max-width:520px;
}

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

@media(max-width:1200px){

  #jaceo .install-stage-inner{
    grid-template-columns:1fr;
    gap:40px;
  }

  #jaceo .install-photo img{
    min-height:420px;
  }
}

@media(max-width:640px){

  #jaceo .install-pro{
    padding:90px 0 0;
  }

  #jaceo .install-top h2{
    font-size:38px;
  }

  #jaceo .install-stage-inner{
    padding-left:7%;
    padding-right:7%;
  }

  #jaceo .install-photo img{
    min-height:300px;
    border-radius:16px;
  }

  #jaceo .step{
    grid-template-columns:56px 1fr;
    gap:14px;
    padding:16px 0;
  }

  #jaceo .install-stage::before{
    background-size:160px auto;
    opacity:0.035;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-26684e3 *//* =====================================================
   JACEO – BENEFITS OF METAL ROOFING (FINAL – 5% REAL)
   Isolated – No global variables
===================================================== */

#jaceo .benefits-bg::before,
#jaceo .benefits-bg::after{
  display:none;
}

#jaceo .benefits-metal{
  position:relative;
  background:#ffffff;
  padding:100px 0 160px;
  overflow:hidden;
}

/* ================= TITLE ================= */

#jaceo .benefits-head{
  width:100%;
  padding-left:5%;
  padding-right:5%;
  margin-bottom:26px;
  position:relative;
  z-index:5;
}

#jaceo .benefits-head h2{
  font-size:56px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#193886;
  margin:0;
}

/* ================= IMAGE STRIP ================= */

#jaceo .benefits-bg{
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  height:280px;
  background-image:url("http://topmetalsupplier.com/wp-content/uploads/2026/01/Media_Portada_Top_Metal-10-scaled.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:1;
}

/* ================= RIGHT ORNAMENT ================= */

#jaceo .benefits-bg::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:140px;
  height:100%;
  background:#193886;
  z-index:3;
}

#jaceo .benefits-bg::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:48px;
  height:48px;
  background:#feb42f;
  z-index:4;
}

/* ================= CARDS ================= */
/* ===== REAL 5% MARGINS – GIANT SCREENS SAFE ===== */

#jaceo .benefits-cards{
  position:relative;
  z-index:6;
  width:100%;
  padding-left:5%;
  padding-right:5%;
  margin-top:-110px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

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

#jaceo .benefit-card{
  background:#193886;
  border-radius:22px;
  padding:48px 36px 42px;
  color:#ffffff;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}

#jaceo .benefit-card:hover{
  transform:translateY(-8px);
  box-shadow:0 40px 90px rgba(0,0,0,.35);
}

/* ================= ICON ================= */

#jaceo .benefit-card .icon{
  width:64px;
  height:64px;
  border-radius:50%;
  border:4px solid #feb42f;
  margin-bottom:26px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:#feb42f;
  font-weight:900;
}

/* Semantic icons */
#jaceo .benefit-card:nth-child(1) .icon::after{
  content:"⛨"; /* Long-Term Durability */
}

#jaceo .benefit-card:nth-child(2) .icon::after{
  content:"⚡"; /* Energy Efficiency */
}

#jaceo .benefit-card:nth-child(3) .icon::after{
  content:"🔧"; /* Low Maintenance */
}

#jaceo .benefit-card:nth-child(4) .icon::after{
  content:"▦"; /* Design Flexibility */
}

/* ================= TEXT ================= */

#jaceo .benefit-card h3{
  font-size:20px;
  font-weight:900;
  margin-bottom:14px;
}

#jaceo .benefit-card p{
  font-size:15px;
  line-height:1.65;
  color:rgba(255,255,255,.92);
  margin-bottom:28px;
  text-align:justify;
  text-justify:inter-word;
}

/* ================= ACTIONS ================= */

#jaceo .benefit-card .actions{
  margin-top:auto;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

#jaceo .benefit-card .btn{
  padding:10px 18px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  border-radius:6px;
  transition:transform .25s ease;
}

#jaceo .benefit-card .btn.primary{
  background:#feb42f;
  color:#0b0b0b;
}

#jaceo .benefit-card .btn.outline{
  border:2px solid #ffffff;
  color:#ffffff;
  background:transparent;
}

#jaceo .benefit-card .btn:hover{
  transform:translateY(-2px);
}

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

@media(max-width:1200px){
  #jaceo .benefits-cards{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){

  #jaceo .benefits-metal{
    padding:90px 0 120px;
  }

  #jaceo .benefits-head{
    padding-left:7%;
    padding-right:7%;
  }

  #jaceo .benefits-head h2{
    font-size:38px;
  }

  #jaceo .benefits-bg{
    height:220px;
  }

  #jaceo .benefits-bg::after,
  #jaceo .benefits-bg::before{
    display:none;
  }

  #jaceo .benefits-cards{
    grid-template-columns:1fr;
    margin-top:-90px;
    padding-left:7%;
    padding-right:7%;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c80d9e5 *//* =====================================================
   JACEO – WHAT WE DO (REFERENCE MATCH – 5% REAL)
   Blue:   #193886
   Yellow: #feb42f
===================================================== */

#jaceo{
  --blue:#193886;
  --yellow:#feb42f;
  overflow-x:hidden;
}

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

#jaceo .whatwedo-section{
  position:relative;
  background:#ffffff;
  padding-bottom:140px;
}

/* ================= BLUE HEADER (≈1/3 HEIGHT) ================= */

#jaceo .whatwedo-blue{
  position:relative;

  /* FULL WIDTH REAL */
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;

  height:320px;
  background:#193886;
  overflow:hidden;
}

/* LOGO TEXTURE */
#jaceo .whatwedo-blue::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("http://topmetalsupplier.com/wp-content/uploads/2026/01/Top_Metal_Logo_Vectorizado_Blanco-scaled.png");
  background-repeat:repeat;
  background-size:220px auto;
  background-position:center;
  opacity:0.06;
  pointer-events:none;
}

/* ================= TITLE ================= */

#jaceo .whatwedo-head{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  margin:auto;
  padding-left:5%;
  padding-right:5%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  bottom:50px;
}

#jaceo .whatwedo-head h2{
  font-size:56px;
  font-weight:900;
  letter-spacing:.1em;
  color:#ffffff;
  white-space:nowrap;
}

#jaceo .whatwedo-head .line{
  height:4px;
  background:#ffffff;
  flex:1;
}

/* ================= CARDS ================= */
/* ===== REAL 5% MARGINS – GIANT SCREENS SAFE ===== */

#jaceo .whatwedo-cards{
  width:100%;
  margin:-140px auto 0;
  padding-left:5%;
  padding-right:5%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px;
  position:relative;
  z-index:3;
}

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

#jaceo .wwd-card{
  background:#feb42f;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
}

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

#jaceo .wwd-content{
  padding:40px 36px 60px;
}

#jaceo .wwd-content h3{
  font-size:20px;
  font-weight:900;
  color:#193886;
  text-transform:uppercase;
  margin-bottom:16px;
}

#jaceo .wwd-content h3::before{
  content:"";
  display:block;
  width:60px;
  height:4px;
  background:#193886;
  margin-bottom:12px;
}

#jaceo .wwd-content p{
  font-size:15px;
  line-height:1.65;
  color:#0b0b0b;
  margin-bottom:10px;
}

/* ================= CURVED IMAGE ================= */

#jaceo .wwd-curve{
  position:relative;
  height:260px;
  overflow:hidden;
}

#jaceo .wwd-curve::before{
  content:"";
  position:absolute;
  top:-140px;
  left:-20%;
  width:140%;
  height:280px;
  background:#feb42f;
  border-radius:0 0 100% 100%;
  z-index:1;
}

#jaceo .wwd-curve img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ================= ACTIONS ================= */

#jaceo .wwd-actions{
  background:#ffffff;
  padding:18px;
  display:flex;
  gap:14px;
  justify-content:center;
}

#jaceo .wwd-actions .btn{
  padding:10px 18px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  border-radius:6px;
}

#jaceo .btn.primary{
  background:#193886;
  color:#ffffff;
}

#jaceo .btn.outline{
  border:2px solid #193886;
  color:#193886;
  background:transparent;
}

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

@media(max-width:1200px){
  #jaceo .whatwedo-cards{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:640px){

  #jaceo .whatwedo-blue{
    height:260px;
  }

  #jaceo .whatwedo-head{
    padding-left:7%;
    padding-right:7%;
  }

  #jaceo .whatwedo-head h2{
    font-size:38px;
  }

  #jaceo .whatwedo-cards{
    grid-template-columns:1fr;
    margin-top:-110px;
    padding-left:7%;
    padding-right:7%;
  }

  #jaceo .whatwedo-blue::before{
    background-size:160px auto;
    opacity:.04;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8259ba6 *//* =====================================================
   JACEO – WHY TOP METAL (BLUE EDITORIAL / REAL 5%)
   Base: Blue glass
   Hover: Yellow accent
===================================================== */

#jaceo{
  --blue:#193886;
  --blue-deep:#0f2356;
  --yellow:#feb42f;
  overflow-x:hidden;
}

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

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

#jaceo .tm-why-blue{
  position:relative;
  background:linear-gradient(180deg,#193886,#0f2356);
  padding:160px 0;
  color:#ffffff;
  overflow:hidden;
}

/* TEXTURE */
#jaceo .tm-bg-texture{
  position:absolute;
  inset:0;
  background-image:url("http://topmetalsupplier.com/wp-content/uploads/2026/01/Top_Metal_Logo_Vectorizado_Blanco-scaled.png");
  background-repeat:repeat;
  background-size:220px auto;
  opacity:.035;
  pointer-events:none;
}

/* ================= WRAP (REAL 5%) ================= */

#jaceo .tm-why-wrap{
  position:relative;
  z-index:2;
  width:100%;
  padding-left:5%;
  padding-right:5%;
}

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

#jaceo .tm-why-head{
  max-width:900px;
  margin-bottom:90px;
}

#jaceo .tm-kicker{
  display:inline-block;
  font-size:13px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#feb42f;
  margin-bottom:22px;
}

#jaceo .tm-why-head h2{
  font-size:52px;
  font-weight:900;
  line-height:1.15;
  margin-bottom:26px;
}

#jaceo .tm-why-head p{
  font-size:18px;
  line-height:1.75;
  color:rgba(255,255,255,.9);
}

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

#jaceo .tm-why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
}

/* ================= CARD — BASE (ALL SAME) ================= */

#jaceo .tm-why-card{
  position:relative;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  border-radius:28px;
  padding:56px 48px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 100px rgba(0,0,0,.35);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease,
    border-color .35s ease;
}

/* ================= HOVER — YELLOW STYLE FOR ALL ================= */

@media (hover:hover){
  #jaceo .tm-why-card:hover{
    transform:translateY(-8px);
    background:rgba(254,180,47,.18);
    border-color:rgba(254,180,47,.45);
    box-shadow:0 55px 140px rgba(0,0,0,.45);
  }
}

/* ================= ICON ================= */

#jaceo .tm-icon{
  width:46px;
  height:46px;
  background:#feb42f;
  margin-bottom:26px;
  position:relative;
}

#jaceo .tm-icon::after{
  content:"";
  position:absolute;
  right:-8px;
  bottom:-8px;
  width:16px;
  height:16px;
  background:#ffffff;
  opacity:.9;
}

/* ================= TEXT ================= */

#jaceo .tm-why-card h3{
  font-size:22px;
  font-weight:900;
  margin-bottom:18px;
}

#jaceo .tm-why-card p{
  font-size:16px;
  line-height:1.7;
  margin-bottom:14px;
  color:rgba(255,255,255,.92);
}

/* ================= VALUES LIST ================= */

#jaceo .tm-why-card ul{
  list-style:none;
  margin:0;
  padding:0;
}

#jaceo .tm-why-card li{
  font-size:15px;
  line-height:1.65;
  margin-bottom:10px;
  padding-left:18px;
  position:relative;
}

#jaceo .tm-why-card li::before{
  content:"■";
  position:absolute;
  left:0;
  top:2px;
  color:#feb42f;
}

/* ================= FOOT ================= */

#jaceo .tm-why-foot{
  margin-top:90px;
  display:flex;
  align-items:center;
  gap:26px;
  font-weight:800;
  color:#ffffff;
}

#jaceo .tm-why-foot span{
  flex:1;
  height:2px;
  background:rgba(255,255,255,.25);
}

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

@media(max-width:1200px){
  #jaceo .tm-why-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){

  #jaceo .tm-why-blue{
    padding:120px 0;
  }

  #jaceo .tm-why-wrap{
    padding-left:7%;
    padding-right:7%;
  }

  #jaceo .tm-why-head h2{
    font-size:38px;
  }

  #jaceo .tm-why-card{
    padding:44px 32px;
  }

  #jaceo .tm-bg-texture{
    background-size:160px auto;
    opacity:.03;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5a9256c *//* =====================================================
   JACEO – PEOPLE & ENGINEERING (FINAL REAL FIX)
   Blue:   #193886
   Yellow: #feb42f
===================================================== */

#jaceo{
  --blue:#193886;
  --yellow:#feb42f;
  overflow-x:hidden;
}

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

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

#jaceo .tm-people-100vh{
  width:100%;
  height:100vh;
  background:#ffffff;
  display:flex;
  flex-direction:column;
}

/* ================= MAIN GRID (5% REAL) ================= */

#jaceo .tm-people-main{
  flex:1;
  width:100%;
  padding-left:5%;
  padding-right:5%;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:120px;
  align-items:center; /* 🔥 CLAVE */
}

/* ================= IMAGE (CENTRADA REAL) ================= */

#jaceo .tm-people-image{
  display:flex;
  align-items:center;     /* centra vertical */
  justify-content:center; /* centra horizontal */
}

#jaceo .tm-people-image img{
  width:100%;
  max-height:520px;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 40px 110px rgba(0,0,0,.28);
  display:block;
}

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

#jaceo .tm-people-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Logo */
#jaceo .tm-people-logo{
  width:140px;
  margin-bottom:26px;
}

#jaceo .tm-people-logo img{
  width:100%;
  display:block;
}

/* Title */
#jaceo .tm-people-content h2{
  font-size:46px;
  font-weight:900;
  line-height:1.15;
  margin-bottom:22px;
  color:#0b0b0b;
}

/* Paragraph */
#jaceo .tm-people-content p{
  font-size:16px;
  line-height:1.85;
  color:#1f2937;
  text-align:justify;
  margin:0;
}

/* ================= ENGINEERING STRIP ================= */

#jaceo .tm-engineering-strip{
  width:100%;
  background:#f9fafb;
  border-top:1px solid rgba(25,56,134,.18);
  padding:26px 0;
}

#jaceo .tm-engineering-wrap{
  width:100%;
  padding-left:5%;
  padding-right:5%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
}

#jaceo .tm-eng-block{
  position:relative;
  padding-left:22px;
}

#jaceo .tm-eng-block::before{
  content:"■";
  position:absolute;
  left:0;
  top:6px;
  color:var(--yellow);
}

#jaceo .tm-eng-block h3{
  font-size:20px;
  font-weight:900;
  color:var(--blue);
  margin-bottom:6px;
}

#jaceo .tm-eng-block p{
  font-size:16px;
  color:#0b0b0b;
  margin:0;
}

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

@media(max-width:1200px){

  #jaceo .tm-people-100vh{
    height:auto;
  }

  #jaceo .tm-people-main{
    grid-template-columns:1fr;
    gap:80px;
    padding:120px 5% 60px;
  }

  #jaceo .tm-engineering-wrap{
    grid-template-columns:1fr;
    gap:28px;
  }
}

@media(max-width:640px){

  #jaceo .tm-people-main{
    padding:100px 7% 50px;
  }

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

  #jaceo .tm-people-image img{
    max-height:420px;
  }
}/* End custom CSS */