/* ================== VARIABLES Y BASE ================== */
:root {
  --color_violet: #29305e;
  --color_violet_opacity: #29305eb3;
  --color_yellow: #b39944;
  --color_white: #ffffff;
  --color_black: #000000;
  --color_grey: #b3b3b3;
  --color_grey_dark: #444444;
}

*{font-family:Arial,Helvetica,sans-serif!important;padding:0;margin:0;box-sizing:border-box!important}
html{scroll-behavior:smooth}
body{margin:0;padding:0;padding-top:185px}
h1{font-size:2.6rem;font-weight:lighter}
h2{font-size:2.4rem;font-weight:lighter}
h3{font-weight:lighter}

/* ================== WHATSAPP ================== */
.whatsapp_btn{width:56px;height:56px;position:fixed;bottom:10px;right:10px;background:var(--color_white);border-radius:100px;z-index:300;transition:ease-out .4s}
.whatsapp_btn_icon{width:100%;height:100%}
@media(hover:hover){.whatsapp_btn:hover{opacity:.7}}

/* ================== HEADER ================== */
.menu_btn_container{width:100%;height:80px;position:fixed;top:0;left:0;padding:0 10%;background:var(--color_violet);z-index:500;display:none;justify-content:space-between;align-items:center}
.menu_btn_logo_container{width:auto;height:90%}
.menu_btn_logo_icon{width:100%;height:100%}
.menu_btn{width:48px;height:48px;cursor:pointer;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column}
.menu_line{width:100%;height:4px;background:var(--color_white);border-radius:10px;transition:ease-out .4s}
.menu_btn_close{width:48px;height:48px;cursor:pointer;position:absolute;top:16px;right:10%;display:none}
.menu_line_close{width:100%;height:4px;background:var(--color_white);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.menu_line_close:first-child{transform:translate(-50%,-50%) rotate(-45deg)}
.menu_line_close:last-child{transform:translate(-50%,-50%) rotate(45deg)}

.header{width:100%;height:80px;background:var(--color_violet);padding:0 10%;transition:ease-out .4s;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;z-index:400}
.header.active_opacity{opacity:1}
.header.active_z_index{z-index:600}
.logo_container{width:auto;height:90%}
.logo_icon{width:auto;height:100%}

.nav{width:60%;height:auto}
.menu{width:100%;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.menu_item{position:relative;cursor:pointer}
.menu_link{height:40px;color:var(--color_white);text-decoration:none;transition:ease-out .4s;position:relative;display:flex;justify-content:center;align-items:center}
.menu_link::before{content:'';width:0;height:3px;background:var(--color_yellow);position:absolute;bottom:0;left:50%;transform:translateX(-50%);transition:ease-out .4s}

.group_exicorp{width:100%;height:105px;padding:10px 10%;list-style:none;background:var(--color_white);z-index:300;position:fixed;top:80px;left:0;display:flex;justify-content:space-between;align-items:center}
.eximin_brands_item{height:100%;filter:grayscale(100%);transition:ease-out .4s}
.eximin_brands_item:nth-child(3){height:70%}
.eximin_brands_link{height:100%;display:inline-block}
.eximin_brands_icon{width:100%;height:100%;object-fit:contain}

@media(hover:hover){
  .menu_link:hover{color:var(--color_yellow)}
  .menu_link:hover::before{width:100%}
}

/* ================== MOBILE HEADER ================== */
@media (max-width:1050px){
  .menu_btn_container{display:flex}
  .header{height:100vh;opacity:0;z-index:-500;padding:0;background:var(--color_violet_opacity);justify-content:space-evenly;flex-direction:column}
  .logo_container{display:none}
  .nav{width:100%;height:100%}
  .menu{height:100%;justify-content:center;flex-direction:column;gap:40px}
  .menu_link{font-size:1.6rem}
  .menu_btn_close{display:block}
}

/* ================== MAIN ================== */
.main{width:100%;background:var(--color_white)}

/* ===== Banner ===== */
.section_banner{width:100%;height:100vh;min-height:500px;position:relative;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;gap:10px}
.eximin_logo_white{width:10%;min-width:150px;height:auto;margin-left:10%;z-index:100}
.title_line{width:10%;min-width:150px;height:4px;background:var(--color_yellow);margin-left:10%;z-index:100}
.title{width:60%;color:var(--color_white);margin-left:10%;z-index:100}
.banner_background{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;filter:brightness(40%);opacity:0;transition:opacity ease-out .4s}
.banner_background.visible{opacity:1}

/* ===== Services ===== */
.section_services{width:100%;background:var(--color_violet);padding:0 10%;display:flex;justify-content:center;align-items:center;flex-direction:column}
.services{width:100%;margin:0 auto;transform:translateY(-20%);display:flex;justify-content:space-between;align-items:center;gap:20px}
.service{width:300px;height:400px;background:var(--color_white);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;gap:4px}
.service_img{width:100%;height:50%;object-fit:cover}
.service_title_line{width:20%;height:2px;background:var(--color_yellow);margin-left:5%;margin-top:20px}
.service_title{font-size:1.6rem;font-weight:bold}
.service_title,.service_description{width:90%;margin:4px auto 0;color:var(--color_black)}
.service_description{opacity:.7}
.services_btn{background:var(--color_yellow);color:var(--color_white);border-radius:100px;padding:14px 20px;text-decoration:none;transform:translateY(-50%);transition:ease-out .4s}

/* ===== About us ===== */
.section_about_us{width:100%;padding:60px 10%;display:flex;justify-content:center;align-items:center;flex-direction:column}
.about_us_title{margin-bottom:10px;font-size:2rem;font-weight:bold;text-align:center}
.about_us_title>span:first-child{color:var(--color_violet)}
.about_us_title>span:last-child{color:var(--color_yellow)}
.about_us_title_line{width:80px;height:4px;background:var(--color_yellow)}
.about_us{width:100%;list-style:none;margin-top:80px;display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;column-gap:80px;row-gap:60px}
.about_us_item{width:46%;min-width:360px;display:flex;justify-content:flex-start;align-items:flex-start;gap:20px}
.about_us_icon{width:64px;height:64px;background:#d6cfa1;border-radius:6px;filter:invert(100%);padding:4px}
.about_us_text_container{width:80%;display:flex;justify-content:space-evenly;align-items:flex-start;flex-direction:column}
.about_us_description{opacity:.7}

/* ===== Integrated services ===== */
.section_integrated_services{width:100%;height:500px;background:var(--color_yellow);display:flex;justify-content:center;align-items:center}
.integrated_services_item{width:50%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column}
.integrated_services_item_text{width:80%}
.integrated_services_line{width:16%;height:4px;background:var(--color_white);display:block}
.integrated_services_title{color:var(--color_white);margin:10px 0;font-weight:bold}
.integrated_services_description{color:var(--color_white)}
.integrated_services{width:80%;margin-left:44px;display:flex;flex-direction:column;gap:20px;list-style-type:disc;color:white}
.integrated_service{color:var(--color_white);font-size:1.2rem}
.integrated_services_img{width:100%;height:100%;object-fit:cover}

/* ===== Target ===== */
.section_target{width:100%}
.target_container{width:100%;position:relative;padding:40px 0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px}
.target_title{font-size:2.4rem;z-index:100;color:var(--color_white);font-weight:bold}
.target_description,.target_next{width:90%;color:var(--color_white);z-index:100;text-align:center}
.target_next{opacity:.7;margin-top:20px}
.target_background{width:100%;height:100%;position:absolute;top:0;left:0;filter:brightness(30%);object-fit:cover}

/* ===== Security / quality ===== */
.section_security_quality{width:100%;padding:40px 10%;display:flex;justify-content:space-around;align-items:flex-start;flex-wrap:wrap;gap:40px}
.security_quality_title{width:100%;text-align:center;font-size:2.4rem;font-weight:bold;margin-bottom:20px}
.security_quality_item{width:40%;display:flex;flex-direction:column;gap:20px;text-align:center;align-items:center}
.security_quality_icon{width:50%;max-width:150px;height:120px;object-fit:contain}
.security_quality_description{opacity:.7}

/* ===== Companies ===== */
.section_companies{width:100%;padding:20px 10%;background:var(--color_grey);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px}
.company_container{width:16%;max-width:180px;text-decoration:none;transition:ease-out .4s;display:flex;align-items:center;justify-content:center}
.company_icon{width:100%;height:auto;object-fit:contain;fill:#444}
.company_container img.company_icon{filter:grayscale(1)}
.company_container:hover img.company_icon{filter:grayscale(0)}

/* ===== Message ===== */
.section_eximin_message{width:100%;padding:80px 10%}
.eximin_message{width:100%;text-align:center;font-size:2rem;color:var(--color_grey_dark)}
.eximin_message>span:first-child{color:var(--color_violet)}
.eximin_message>span:last-child{color:var(--color_yellow)}

/* ================== FOOTER ================== */
.footer{width:100%;padding:40px 10%;background:var(--color_violet);display:flex;justify-content:space-between;align-items:flex-start;gap:100px;flex-wrap:wrap}
.footer_item{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px}
.footer_item:first-child{width:auto}

/* ── Título del bloque de contacto */
.footer_title{width:100%;height:50px;text-align:center;color:var(--color_white);font-size:1.6rem;font-weight:bold;position:relative}
.footer_title::before{content:'';width:50%;height:4px;background:var(--color_yellow);position:absolute;bottom:0;left:50%;transform:translateX(-50%)}

/* Logo */
.footer_logo_container{width:162px}
.footer_logo_icon{width:100%;height:auto}

/* Tarjetas de cada oficina */
.footer_contact{list-style:none;flex-grow:1;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:10px;min-width:250px}
.footer_contact_item_title{color:var(--color_white);font-weight:bold;font-size:1.6rem;text-align:center}
.footer_contact_item_link{color:var(--color_yellow);transition:ease-out .4s;text-decoration:none;text-align:center}

/* ================== NUEVO: una fila con 6 columnas ================== */
.footer_item:last-child{
  /* cambiamos flex → grid sólo en este bloque */
  display:grid;
  grid-template-columns:repeat(6, minmax(180px, 1fr));
  column-gap:40px;
  row-gap:30px;
  align-items:start;
  width:100%;
}
.footer_item:last-child .footer_title{
  grid-column:1 / -1; /* el título cruza todas las columnas */
}

/* Alineación izquierda dentro de cada “columna” para lectura limpia */
.footer_item:last-child .footer_contact{
  align-items:flex-start;
  min-width:0;
}
.footer_item:last-child .footer_contact_item_title,
.footer_item:last-child .footer_contact_item_link{ text-align:left }

/* ================== HOVERS ================== */
@media(hover:hover){
  .eximin_brands_item:hover{filter:grayscale(0)}
  .services_btn:hover{background:var(--color_black)}
  .company_container:hover{opacity:.7}
  .footer_contact_item_link:hover{opacity:.7}
}

/* ================== RESPONSIVE ================== */
@media (max-width:1200px){
  .group_exicorp{height:auto;flex-wrap:wrap;justify-content:center;padding:10px 5%;top:80px}
  .eximin_brands_item{width:30%;height:70px}
  .eximin_brands_item:nth-child(3){height:70px}
  body{padding-top:250px}

  /* 3 columnas en pantallas medianas */
  .footer_item:last-child{grid-template-columns:repeat(3, minmax(220px,1fr))}
}
@media (max-width:956px){
  .service{width:80%;max-width:400px;height:auto;padding-bottom:20px}
  .section_integrated_services{height:auto;flex-direction:column}
  .integrated_services_item{width:100%;height:auto;padding:40px 0}
  .integrated_services_item:last-child{height:400px}
  .section_security_quality{flex-direction:column;align-items:center}
  .security_quality_item{width:100%;max-width:500px}
  .company_container{width:30%}
  .footer{flex-direction:column;align-items:center;gap:40px}
  .footer_item{width:100%;justify-content:center}
  .footer_title::before{width:100%}

  /* 2 columnas en tablets */
  .footer_item:last-child{grid-template-columns:repeat(2, minmax(220px,1fr))}
}
@media (max-width:650px){
  body{padding-top:340px}
  .eximin_brands_item{width:45%;height:60px}
  .eximin_brands_item:nth-child(3){height:60px}
  .company_container{width:45%}
  .about_us_item{width:100%;min-width:0}

  /* 1 columna en móviles estrechos */
  .footer_item:last-child{grid-template-columns:1fr}
}
.integrated_services_video{
  width:100%;
  height:100%;
  object-fit:cover; /* mantiene el encuadre como la imagen anterior */
  display:block;
  border:0;
  outline:0;
}