.elementor-2067 .elementor-element.elementor-element-64186a7{--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-2067 .elementor-element.elementor-element-e5c5922{width:100%;max-width:100%;}.elementor-2067 .elementor-element.elementor-element-e5c5922 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2067 .elementor-element.elementor-element-2f2da55{--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-2067 .elementor-element.elementor-element-52aacd3{--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-2067 .elementor-element.elementor-element-7fc6f87{--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-2067 .elementor-element.elementor-element-3ebd938{--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-2067 .elementor-element.elementor-element-ec2d8cd{--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-2067 .elementor-element.elementor-element-42f4237{--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-2067 .elementor-element.elementor-element-42f4237:not(.elementor-motion-effects-element-type-background), .elementor-2067 .elementor-element.elementor-element-42f4237 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}/* Start custom CSS for html, class: .elementor-element-e5c5922 */#jaceo{
      --blue:#193886;
      --yellow:#feb42f;
      --white:#ffffff;
      --dark:#0c1222;
      font-size: 1.06rem;
    }

    #jaceo *{ box-sizing:border-box; }
    #jaceo a{ color: inherit; }

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

    #jaceo .hero-frame{
      position:relative;
      min-height:100svh;
      padding: 0 5%;
      display:flex;
      align-items:center;
      color:var(--white);
      overflow:hidden;
      background:
        url("http://topmetalsupplier.com/wp-content/uploads/2026/01/Media_Portada_Top_Metal-5-scaled.png")
        center/cover no-repeat;
      isolation: isolate;
    }

    /* Dark overlay to keep text readable */
    #jaceo .hero-frame::before{
      content:"";
      position:absolute;
      inset:0;
    
      z-index:0;
      pointer-events:none;
    }

    /* ================= 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;
      z-index: 1;
      opacity: .9;
    }

    /* ================= 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;
      z-index: 1;
    }

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

#jaceo .hero-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;

  display: grid;

  /* ✅ la izquierda se vuelve flexible y empuja el filtro a la derecha */
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);

  column-gap: clamp(18px, 3vw, 46px);
  row-gap: 18px;
  align-items: center;

  /* ✅ asegura que el grid use todo el ancho disponible */
  justify-content: stretch;
}



    /* ================= FRAMED CONTENT (ONLY TEXT + BUTTONS) ================= */

    #jaceo .hero-framed-content{
      position: relative;
      width: 100%;
      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-framed-content::before{
      content:"";
      position:absolute;
      top:-3px;
      left:-3px;
      width:140px;
      height:140px;
      border-top:6px solid var(--yellow);
      border-left:6px solid var(--yellow);
      pointer-events:none;
    }

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

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

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

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

    #jaceo .hero-actions{
      display:flex;
      gap: 22px;
      flex-wrap: wrap;
      align-items: center;
    }

    #jaceo .btn-primary,
    #jaceo .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height: 56px;
      padding: 18px 48px;
      font-weight: 900;
      letter-spacing: .12em;
      text-decoration:none;
      text-transform: uppercase;
      transition: transform .18s ease, filter .18s ease;
      border: 0;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }

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

    #jaceo .btn-secondary{
      background: var(--yellow);
      color: #000;
    }

    #jaceo .btn-primary:hover,
    #jaceo .btn-secondary:hover{
      transform: translateY(-1px);
      filter: saturate(1.05);
    }

    /* =====================================================
       LOCATOR FILTER – PANEL (RIGHT COLUMN, OUTSIDE BORDER)
    ===================================================== */

    #jaceo #CEOJA_Locator_Filter{
      width: 100%;
      justify-self: end;
    }

    #jaceo #CEOJA_Locator_Filter .locator-panel{
      width: 100%;
      background: #ffffff;
      border-radius: 18px;
      border: 1px solid rgba(254,180,47,.85);
      padding: 16px;
      box-shadow: 0 22px 58px rgba(0,0,0,.30);
    }

    #jaceo #CEOJA_Locator_Filter .locator-group{ margin-bottom: 12px; }

    #jaceo #CEOJA_Locator_Filter label{
      font-size: 12.5px;
      font-weight: 800;
      color: #193886;
      margin-bottom: 7px;
      display: block;
      letter-spacing: .02em;
    }

    #jaceo #CEOJA_Locator_Filter select{
      width: 100%;
      height: 46px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.14);
      padding: 0 12px;
      font-weight: 700;
      background: #ffffff;
      outline: none;
      font-size: 1.06rem;
    }

    #jaceo #CEOJA_Locator_Filter select:focus{
      border-color: #7fa6e5;
      box-shadow: 0 0 0 3px rgba(127,166,229,.30);
    }

    #jaceo #CEOJA_Locator_Filter .locator-go{
      width: 100%;
      height: 50px;
      border-radius: 12px;
      background: #193886;
      color: #ffffff;
      font-weight: 900;
      border: none;
      cursor: pointer;
      margin-top: 8px;
      transition: transform .15s ease, filter .15s ease;
      font-size: 1.06rem;
      letter-spacing: .04em;
    }

    #jaceo #CEOJA_Locator_Filter .locator-go:hover{
      transform: translateY(-1px);
      filter: saturate(1.05);
    }

    #jaceo #CEOJA_Locator_Filter .locator-hint{
      margin: 10px 2px 0;
      font-size: 12px;
      font-weight: 700;
      color: rgba(25,56,134,.86);
      line-height: 1.35;
    }

    /* =====================================================
       RESPONSIVE (ONE SET ONLY)
    ===================================================== */

    /* Tablet and below: stack cleanly */
    @media (max-width: 1200px){
  #jaceo .hero-frame{
    padding: 72px 5%;
    align-items: flex-start;
  }

  #jaceo .hero-inner{
    grid-template-columns: 1fr;
    align-items: start;
  }

  /* el filtro queda centrado cuando baja debajo del contenido */
  #jaceo #CEOJA_Locator_Filter{
    justify-self: center;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

    /* Mobile */
    @media (max-width: 900px){
      #jaceo .hero-frame{
        min-height: 100svh;
        padding: 78px 7% 78px;
        align-items: center;
      }

      #jaceo .hero-framed-content{
        padding: 34px 24px;
        border-width: 2px;
      }

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

      #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;
      }

      #jaceo .hero-actions{
        flex-direction: column;
        gap: 12px;
      }

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

    @media (max-width: 600px){
      #jaceo .hero-frame{
        min-height: 100svh;
        padding: 68px 6% 68px;
      }

      #jaceo .hero-framed-content{
        padding: 28px 18px;
      }

      #jaceo #CEOJA_Locator_Filter{
        max-width: 100%;
      }
    }
    

/* =====================================================
   DESKTOP: FILTRO PEGADO A LA DERECHA CON 5% REAL
   (el 5% lo da .hero-frame)
===================================================== */
@media (min-width: 1201px){
  #jaceo #CEOJA_Locator_Filter{
    justify-self: end;          /* se pega al lado derecho del grid */
    width: 100%;
    display: flex;
    justify-content: flex-end;  /* panel hacia la derecha */
    padding: 0;                 /* importante: sin padding extra */
    margin: 0;                  /* limpio */
  }

  #jaceo #CEOJA_Locator_Filter .locator-panel{
    width: min(520px, 100%);    /* mantiene tu ancho sin overflow */
  }
}

@media (min-width: 1201px){
  #jaceo #CEOJA_Locator_Filter{
    justify-self: end;
  }
}



@media (min-width: 1201px) and (max-width: 1355px){

  /* 1) grid: dale más oxígeno al layout */
  #jaceo .hero-inner{
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    column-gap: clamp(14px, 2vw, 26px);
    align-items: center;
  }

  /* 2) el bloque enmarcado NO puede tener padding fijo gigante aquí */
  #jaceo .hero-framed-content{
    padding: clamp(34px, 3.2vw, 58px) clamp(22px, 2.6vw, 54px);
  }

  /* 3) tipografías: controla el salto del H1 + párrafo */
  #jaceo .hero-content h1{
    font-size: clamp(46px, 4.6vw, 74px);
    margin-bottom: 18px;
  }

  #jaceo .hero-content p{
    font-size: clamp(16px, 1.35vw, 18px);
    margin-bottom: 28px;
    max-width: 62ch;
  }

  /* 4) botones: reduce gap para que no fuerce ancho */
  #jaceo .hero-actions{
    gap: 14px;
  }

  #jaceo .btn-primary,
  #jaceo .btn-secondary{
    padding: 16px 34px;
    min-height: 54px;
  }

  /* 5) panel derecho: que respete el nuevo ancho */
  #jaceo #CEOJA_Locator_Filter .locator-panel{
    width: 100%;
  }
}

/* =====================================================
   Limpieza: evita duplicados y micro-overflows
===================================================== */
#jaceo .hero-frame{ overflow: hidden; } /* ya lo tienes, lo refuerzo */

/* opcional: baja un poco la intensidad de la grilla para que no “corte” visualmente */
#jaceo .hero-grid{
  opacity: .55;
  background-size: 88px 88px;
}/* End custom CSS */