/* =====================================================
   HOME.CSS
   Inicio corporativo Grupo Sanbosi
===================================================== */

:root{
  --home-hero-height-desktop: clamp(470px, 48vw, 620px);
  --home-hero-height-mobile: clamp(520px, 120vw, 720px);

  --home-hero-blue: #061b45;
  --home-hero-blue-opacity: 0.94;
  --home-hero-white: #ffffff;

  --home-hero-radius: 0px;

  --home-hero-padding-x-desktop: clamp(40px, 6vw, 90px);
  --home-hero-padding-x-mobile: clamp(22px, 6vw, 34px);

  --home-hero-title-size-desktop: clamp(42px, 5vw, 78px);
  --home-hero-title-size-mobile: clamp(34px, 11vw, 52px);

  --home-title-mobile-size: clamp(34px, 10vw, 46px);
--home-title-mobile-top: -50px;
--home-title-mobile-left: 0px;
--home-title-mobile-width: 100%;

  --home-title-white-color:#ffffff;
--home-title-blue-color:#0072ff;
--home-title-weight:900;
--home-title-line-height:0.95;
--home-title-letter-spacing:-1px;
--home-title-gap:0px;

--home-subtitle-size-desktop: clamp(18px, 1.6vw, 26px);
--home-subtitle-size-mobile: clamp(16px, 4.3vw, 19px);

--home-subtitle-color:#ffffff;
--home-subtitle-line-height:1.45;
--home-subtitle-weight:600;

--home-subtitle-width-desktop:520px;
--home-subtitle-width-mobile:100%;

--home-subtitle-top-desktop:0px;
--home-subtitle-left-desktop:0px;

--home-subtitle-top-mobile:-35px;
--home-subtitle-left-mobile:0px;

--home-subtitle-padding:0px;
--home-subtitle-border-width:0px;
--home-subtitle-border-color:transparent;
--home-subtitle-border-radius:0px;

  --home-hero-text-size-desktop: clamp(18px, 1.6vw, 26px);
  --home-hero-text-size-mobile: clamp(16px, 4.5vw, 20px);

  --home-hero-content-width: min(90%, 560px);

  --home-hero-top-space-desktop: 150px;
  --home-hero-top-space-mobile: 120px;

  /* BOTÓN HERO - ESCRITORIO */
--home-btn-top-desktop: 28px;
--home-btn-left-desktop: 0px;
--home-btn-width-desktop: auto;
--home-btn-height-desktop: clamp(44px, 4vw, 52px);
--home-btn-padding-x-desktop: clamp(18px, 2.2vw, 28px);
--home-btn-font-size-desktop: clamp(12px, 1.2vw, 15px);
--home-btn-icon-size-desktop: 20px;

/* BOTÓN HERO - MÓVIL */
--home-btn-top-mobile: -12px;
--home-btn-left-mobile: 0px;
--home-btn-width-mobile: clamp(160px, 52vw, 210px);
--home-btn-height-mobile: clamp(44px, 11vw, 52px);
--home-btn-padding-x-mobile: 24px;
--home-btn-font-size-mobile: clamp(12px, 3.6vw, 15px);
--home-btn-icon-size-mobile: 19px;

/* BOTÓN HERO - ESTILO */
--home-btn-bg:#0072ff;
--home-btn-color:#ffffff;
--home-btn-radius:7px;
--home-btn-border-width:0px;
--home-btn-border-color:transparent;
--home-btn-shadow:0 12px 28px rgba(0,114,255,0.35);
--home-btn-gap:12px;
--home-btn-font-weight:800;

/* BOTÓN NUESTRAS EMPRESAS - ESCRITORIO */
--home-btn2-width-desktop:auto;
--home-btn2-height-desktop: clamp(44px, 4vw, 52px);
--home-btn2-padding-x-desktop: clamp(18px, 2.2vw, 28px);
--home-btn2-font-size-desktop: clamp(12px, 1.2vw, 15px);

/* BOTÓN NUESTRAS EMPRESAS - MÓVIL */
--home-btn2-width-mobile: clamp(160px, 52vw, 210px);
--home-btn2-height-mobile: clamp(44px, 11vw, 52px);
--home-btn2-padding-x-mobile:24px;
--home-btn2-font-size-mobile: clamp(12px, 3.6vw, 15px);

/* ESTILO */
--home-btn2-bg:transparent;
--home-btn2-color-desktop:#ffffff;
--home-btn2-color-mobile:#071a44;
--home-btn2-border-width:1px;
--home-btn2-border-color:#ffffff;
--home-btn2-radius:7px;

/* MENU HOME */
--home-menu-top-desktop:45px;
--home-menu-left-desktop:55%;
--home-menu-gap-desktop:clamp(22px, 3vw, 42px);

--home-menu-font-size-desktop:13px;
--home-menu-color:#071a44;
--home-menu-active-color:#0072ff;
--home-menu-weight:800;

--home-menu-line-width-desktop:28px;
--home-menu-line-height-desktop:3px;
--home-menu-line-bottom-desktop:-10px;
--home-menu-line-color:#0072ff;

/* HAMBURGUESA MOVIL */
--home-hamburger-top-mobile:35px;
--home-hamburger-right-mobile:28px;
--home-hamburger-size-mobile:54px;

--home-mobile-menu-top:82px;
--home-mobile-menu-right:22px;
--home-mobile-menu-width:210px;
--home-mobile-menu-bg:#ffffff;
--home-mobile-menu-radius:14px;
--home-mobile-menu-shadow:0 18px 45px rgba(0,0,0,.18);

--home-menu-font-size-mobile:13px;
--home-mobile-menu-gap:18px;
--home-mobile-menu-padding:22px;

/* BOTÓN AGENDAR REUNIÓN */
--home-meeting-width-desktop:clamp(200px, 12vw, 250px);
--home-meeting-height-desktop:42px;
--home-meeting-bg-desktop:#071a44;
--home-meeting-border-color-desktop:#071a44;
--home-meeting-radius-desktop:6px;

--home-meeting-icon-width-desktop:40px;
--home-meeting-icon-left-desktop:0px;
--home-meeting-icon-top-desktop:0px;

--home-meeting-text-size-desktop:clamp(11px, .9vw, 12px);
--home-meeting-text-color-desktop:#ffffff;
--home-meeting-text-left-desktop:0px;
--home-meeting-text-top-desktop:0px;

--home-meeting-width-mobile:100%;
--home-meeting-height-mobile:42px;
--home-meeting-bg-mobile:#071a44;
--home-meeting-border-color-mobile:#071a44;
--home-meeting-radius-mobile:8px;

--home-meeting-icon-width-mobile:35px;
--home-meeting-icon-left-mobile:0px;
--home-meeting-icon-top-mobile:0px;

--home-meeting-text-size-mobile:12px;
--home-meeting-text-color-mobile:#ffffff;
--home-meeting-text-left-mobile:0px;
--home-meeting-text-top-mobile:0px;

--home-meeting-gap:8px;
--home-meeting-font-weight:800;

/* IMAGEN GRUPO TRABAJO - ESCRITORIO */
--home-work-img-width-desktop: clamp(340px, 38vw, 620px);
--home-work-img-top-desktop: clamp(145px, 14vw, 175px);
--home-work-img-right-desktop: clamp(20px, 6vw, 90px);

/* IMAGEN GRUPO TRABAJO - MÓVIL */
--home-work-img-width-mobile: clamp(140px, 40vw, 190px);
--home-work-img-top-mobile: clamp(360px, 54vw, 400px);
--home-work-img-right-mobile: clamp(4px, 4vw, 18px);

/* FRANJA ICONOS HOME */
--home-features-band-padding-desktop:24px 6vw;
--home-features-band-padding-mobile:26px 28px;
--home-features-band-bg:#ffffff;
--home-features-band-min-height-desktop:130px;

/* ICONOS ESCRITORIO */
--home-feature-icon-1-width-desktop:44px;
--home-feature-icon-2-width-desktop:44px;
--home-feature-icon-3-width-desktop:44px;
--home-feature-icon-4-width-desktop:84px;
--home-feature-icon-5-width-desktop:64px;

/* ICONOS MÓVIL */
--home-feature-icon-1-width-mobile:38px;
--home-feature-icon-2-width-mobile:38px;
--home-feature-icon-3-width-mobile:38px;
--home-feature-icon-4-width-mobile:78px;
--home-feature-icon-5-width-mobile:58px;

/* TÍTULOS */
--home-feature-title-color:#071a44;
--home-feature-title-size-desktop:13px;
--home-feature-title-size-mobile:14px;

/* TEXTOS */
--home-feature-text-color:#344054;
--home-feature-text-size-desktop:11px;
--home-feature-text-size-mobile:12px;

}

/* FRANJA PRINCIPAL */
.home-hero{
  position:relative;
  width:100%;
  height:var(--home-hero-height-desktop);
  padding-top:var(--home-hero-top-space-desktop);

  display:flex;
  align-items:center;

  padding-left:var(--home-hero-padding-x-desktop);
  padding-right:var(--home-hero-padding-x-desktop);

  box-sizing:border-box;
  overflow:hidden;

background:
  linear-gradient(#ffffff, #ffffff) top / 100% var(--home-hero-top-space-desktop) no-repeat,
  linear-gradient(
    90deg,
    rgba(6,27,69,var(--home-hero-blue-opacity)) 0%,
    rgba(6,27,69,0.86) 35%,
    rgba(6,27,69,0.42) 62%,
    rgba(255,255,255,0.92) 86%,
    #ffffff 100%
  ) bottom / 100% calc(100% - var(--home-hero-top-space-desktop)) no-repeat;

  border-radius:var(--home-hero-radius);
}

.home-menu-toggle{
  display:none;
}

.home-hamburger-btn{
  display:none;
}

.home-main-menu{
  position:absolute;
  top:var(--home-menu-top-desktop);
  left:var(--home-menu-left-desktop);
  transform:translateX(-50%);

  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--home-menu-gap-desktop);

  z-index:20;
}

.home-menu-item{
  position:relative;

  border:none;
  background:transparent;
  padding:0;

  cursor:pointer;

  color:var(--home-menu-color);
  font-size:var(--home-menu-font-size-desktop);
  font-weight:var(--home-menu-weight);
  text-transform:uppercase;
}

.home-menu-item.active{
  color:var(--home-menu-active-color);
}

.home-menu-item.active::after{
  content:"";
  position:absolute;

  left:50%;
  bottom:var(--home-menu-line-bottom-desktop);

  width:var(--home-menu-line-width-desktop);
  height:var(--home-menu-line-height-desktop);

  transform:translateX(-50%);

  background:var(--home-menu-line-color);
  border-radius:20px;
}

.home-meeting-btn{
  width:var(--home-meeting-width-desktop);
  height:var(--home-meeting-height-desktop);

  border:1px solid var(--home-meeting-border-color-desktop);
  border-radius:var(--home-meeting-radius-desktop);

  background:var(--home-meeting-bg-desktop);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--home-meeting-gap);

  cursor:pointer;
}

.home-meeting-icon{
  position:relative;
  width:var(--home-meeting-icon-width-desktop);
  height:auto;

  left:var(--home-meeting-icon-left-desktop);
  top:var(--home-meeting-icon-top-desktop);
}

.home-meeting-text{
  position:relative;

  left:var(--home-meeting-text-left-desktop);
  top:var(--home-meeting-text-top-desktop);

  color:var(--home-meeting-text-color-desktop);
  font-size:var(--home-meeting-text-size-desktop);
  font-weight:var(--home-meeting-font-weight);
  white-space:nowrap;
}

/* TEXTO */
.home-hero-content{
  position:relative;
  z-index:2;
  width:var(--home-hero-content-width);
}

.home-hero-title{
  margin:0 0 22px;
  font-size:var(--home-hero-title-size-desktop);
  line-height:var(--home-title-line-height);
  text-transform:uppercase;
  font-weight:var(--home-title-weight);
  letter-spacing:var(--home-title-letter-spacing);
}

.home-title-line{
  display:block;
}

.home-title-white{
  color:var(--home-title-white-color);
}

.home-title-blue{
  color:var(--home-title-blue-color);
  margin-top:var(--home-title-gap);
}

.home-hero p{
  position:relative;

  margin:0;
  top:var(--home-subtitle-top-desktop);
  left:var(--home-subtitle-left-desktop);

  max-width:var(--home-subtitle-width-desktop);

  padding:var(--home-subtitle-padding);

  font-size:var(--home-subtitle-size-desktop);
  line-height:var(--home-subtitle-line-height);
  font-weight:var(--home-subtitle-weight);
  color:var(--home-subtitle-color);

  border:var(--home-subtitle-border-width) solid var(--home-subtitle-border-color);
  border-radius:var(--home-subtitle-border-radius);

  box-sizing:border-box;
}

.home-hero-work-img{
  position:absolute;

  top:var(--home-work-img-top-desktop);
  right:var(--home-work-img-right-desktop);

  width:var(--home-work-img-width-desktop);
  height:auto;

  z-index:3;
  object-fit:contain;
   pointer-events:none;
}

/* =========================
   BOTÓN HERO
========================= */

.home-hero-actions{
  position:relative;
  top:var(--home-btn-top-desktop);
  left:var(--home-btn-left-desktop);
  margin-top:0;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.home-btn{
  width:var(--home-btn-width-desktop);
  height:var(--home-btn-height-desktop);
  padding:0 var(--home-btn-padding-x-desktop);

  border:var(--home-btn-border-width) solid var(--home-btn-border-color);
  border-radius:var(--home-btn-radius);

  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--home-btn-gap);

  background:var(--home-btn-bg);
  color:var(--home-btn-color);

  font-size:var(--home-btn-font-size-desktop);
  font-weight:var(--home-btn-font-weight);
  text-transform:uppercase;

  box-shadow:var(--home-btn-shadow);
}

.home-btn-secondary{

  width:var(--home-btn2-width-desktop);
  height:var(--home-btn2-height-desktop);

  padding:0 var(--home-btn2-padding-x-desktop);

  background:var(--home-btn2-bg);

  color:var(--home-btn2-color-desktop);

  border:
  var(--home-btn2-border-width)
  solid
  var(--home-btn2-border-color);

  border-radius:var(--home-btn2-radius);

  font-size:var(--home-btn2-font-size-desktop);

}

.home-btn span{
  font-size:var(--home-btn-icon-size-desktop);
  line-height:1;
}

.home-features-band{
  width:100%;
  min-height:var(--home-features-band-min-height-desktop);
  background:var(--home-features-band-bg);
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  align-items:center;
  gap:0;
  padding:var(--home-features-band-padding-desktop);
  box-sizing:border-box;
}

.home-feature{
  text-align:center;
  padding:0 18px;
  border-right:1px solid rgba(7,26,68,.12);
}

.home-feature-5{
  border-right:none;
}

.home-feature-icon{
  height:auto;
  margin-bottom:10px;
}

.home-feature-icon-1{ width:var(--home-feature-icon-1-width-desktop); }
.home-feature-icon-2{ width:var(--home-feature-icon-2-width-desktop); }
.home-feature-icon-3{ width:var(--home-feature-icon-3-width-desktop); }
.home-feature-icon-4{ width:var(--home-feature-icon-4-width-desktop); }
.home-feature-icon-5{ width:var(--home-feature-icon-5-width-desktop); }

.home-feature-title{
  margin:0 0 8px;
color:var(--home-feature-title-color);
font-size:var(--home-feature-title-size-desktop);
  font-weight:900;
}

.home-feature-text{
  margin:0;
color:var(--home-feature-text-color);
font-size:var(--home-feature-text-size-desktop);
  line-height:1.35;
}

/* MÓVIL */
@media (max-width:768px){

  .home-hero{
    height:var(--home-hero-height-mobile);
    padding-top:calc(90px + var(--home-hero-top-space-mobile));

    align-items:flex-start;

    padding-left:var(--home-hero-padding-x-mobile);
    padding-right:var(--home-hero-padding-x-mobile);

background:
  linear-gradient(#ffffff, #ffffff) top / 100% var(--home-hero-top-space-mobile) no-repeat,
  linear-gradient(
    180deg,
    rgba(6,27,69,var(--home-hero-blue-opacity)) 0%,
    rgba(6,27,69,0.88) 45%,
    rgba(6,27,69,0.45) 72%,
    #ffffff 100%
  ) bottom / 100% calc(100% - var(--home-hero-top-space-mobile)) no-repeat;
  }

  .home-hero-content{
    width:100%;
  }

.home-hero-title{
  position:relative;
  top:var(--home-title-mobile-top);
  left:var(--home-title-mobile-left);
  width:var(--home-title-mobile-width);
  font-size:var(--home-title-mobile-size);
}

.home-hero p{
  top:var(--home-subtitle-top-mobile);
  left:var(--home-subtitle-left-mobile);
  max-width:var(--home-subtitle-width-mobile);
  font-size:var(--home-subtitle-size-mobile);
}

.home-hero-actions{
    top:var(--home-btn-top-mobile);
    left:var(--home-btn-left-mobile);
  }

  .home-btn{
    width:var(--home-btn-width-mobile);
    height:var(--home-btn-height-mobile);
    padding:0 var(--home-btn-padding-x-mobile);
    font-size:var(--home-btn-font-size-mobile);
  }

  .home-btn-secondary{

  width:var(--home-btn2-width-mobile);

  height:var(--home-btn2-height-mobile);

  padding:0 var(--home-btn2-padding-x-mobile);

  font-size:var(--home-btn2-font-size-mobile);
  color:var(--home-btn2-color-mobile);

}

  .home-btn span{
    font-size:var(--home-btn-icon-size-mobile);
  }

  .home-hamburger-btn{
  position:absolute;
  top:var(--home-hamburger-top-mobile);
  right:var(--home-hamburger-right-mobile);

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

  width:var(--home-hamburger-size-mobile);
  height:var(--home-hamburger-size-mobile);

  z-index:40;
  cursor:pointer;
}

.home-hamburger-icon{
  width:100%;
  height:100%;
  object-fit:contain;
}

.home-main-menu{
  top:var(--home-mobile-menu-top);
  right:var(--home-mobile-menu-right);
  left:auto;
  transform:none;

  width:var(--home-mobile-menu-width);

  display:none;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--home-mobile-menu-gap);

  padding:var(--home-mobile-menu-padding);

  background:var(--home-mobile-menu-bg);
  border-radius:var(--home-mobile-menu-radius);
  box-shadow:var(--home-mobile-menu-shadow);

  z-index:39;
}

.home-menu-toggle:checked ~ .home-main-menu{
  display:flex;
}

.home-menu-item{
  font-size:var(--home-menu-font-size-mobile);
}

.home-menu-item.active::after{
  display:none;
}

.home-meeting-btn{
  width:var(--home-meeting-width-mobile);
  height:var(--home-meeting-height-mobile);

  border-color:var(--home-meeting-border-color-mobile);
  border-radius:var(--home-meeting-radius-mobile);

  background:var(--home-meeting-bg-mobile);
}

.home-meeting-icon{
  width:var(--home-meeting-icon-width-mobile);
  left:var(--home-meeting-icon-left-mobile);
  top:var(--home-meeting-icon-top-mobile);
}

.home-meeting-text{
  left:var(--home-meeting-text-left-mobile);
  top:var(--home-meeting-text-top-mobile);

  color:var(--home-meeting-text-color-mobile);
  font-size:var(--home-meeting-text-size-mobile);
}

.home-hero-work-img{
  top:var(--home-work-img-top-mobile);
  right:var(--home-work-img-right-mobile);
  width:var(--home-work-img-width-mobile);
}

.home-features-band{
  grid-template-columns:1fr;
  gap:18px;
  padding:var(--home-features-band-padding-mobile);
}

.home-feature{
  border-right:none;
  padding:0;
}

.home-feature-icon-1{ width:var(--home-feature-icon-1-width-mobile); }
.home-feature-icon-2{ width:var(--home-feature-icon-2-width-mobile); }
.home-feature-icon-3{ width:var(--home-feature-icon-3-width-mobile); }
.home-feature-icon-4{ width:var(--home-feature-icon-4-width-mobile); }
.home-feature-icon-5{ width:var(--home-feature-icon-5-width-mobile); }

.home-feature-title{
  font-size:var(--home-feature-title-size-mobile);
}

.home-feature-text{
  font-size:var(--home-feature-text-size-mobile);
}

}

.home-legal-footer{
  width:100%;
  padding:18px 6vw;
  background:#061b45;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  box-sizing:border-box;
}

.home-legal-footer-link{
  border:none;
  background:transparent;
  color:#0072ff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.home-legal-footer-link:hover{
  text-decoration:underline;
}

.home-legal-footer-separator{
  color:#ffffff;
  opacity:.8;
}

@media(max-width:768px){
  .home-legal-footer{
    flex-direction:column;
    gap:8px;
    padding:18px 24px;
  }

  .home-legal-footer-separator{
    display:none;
  }

  .home-legal-footer-link{
    font-size:13px;
  }
}