/* =========================================================
HERO — INTELLIGENCE & EXPANSION ADVISORY
------------------------------------------------------------
Objetivo visual:
- B2B premium / executive
- Amplio aire lateral
- Texto dominante sin pegarse al borde
- Imagen con espacio controlado a la derecha
- Separación editorial entre texto e imagen

Referencias:
- Desktop: 1440 × 900
- Laptop: 1366 × 768
- Tablet: 768 × 1024
- Mobile: 390 × 844
========================================================= */


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

.hero{
  position:relative;

  min-height:650px;

  display:flex;
  align-items:flex-start;

  padding:60px 0 0;

  color:#ffffff;

  background:
    linear-gradient(
      180deg,
      #0a2230 0%,
      #0c2a3a 100%
    );

  overflow:hidden;
}


/* =========================================================
TEXTURA SUTIL
========================================================= */

.hero::after{
  content:"";

  position:absolute;
  inset:0;

  background:url('/assets/images/noise.webp');

  opacity:.02;

  pointer-events:none;
}


/* =========================================================
GRID PRINCIPAL
------------------------------------------------------------
El ancho grande permite:
- margen exterior elegante
- texto amplio
- espacio central
- imagen sin pegarse al borde
========================================================= */

.hero-grid{
  position:relative;
  z-index:1;

  width:100%;
  max-width:1400px;

  margin:0 auto;

  padding-left:70px;
  padding-right:70px;

  display:grid;

  grid-template-columns:
    minmax(0, 720px)
    minmax(380px, 480px);

  column-gap:60px;

  justify-content:space-between;
  align-items:start;
}

/* =========================================================
CONTENIDO IZQUIERDO
========================================================= */

.hero-content{
  width:100%;
  max-width:720px;

  margin-top:-10px;
}

/* =========================================================
EYEBROW
========================================================= */

.hero-label{
  display:block;

  margin-bottom:18px;

  font-size:10px;
  font-weight:500;

  letter-spacing:3px;

  text-transform:uppercase;

  color:#7fa7c7;
}


/* =========================================================
HEADLINE
========================================================= */

.hero h1{


  font-size:48px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-0.4px;

  font-family:'Cormorant Garamond', serif;

  color:#ffffff;

  max-width:760px;

  margin-top:0;
  margin-bottom:24px;
}


/* =========================================================
TEXTO PRINCIPAL
========================================================= */

.hero-sub{
  max-width:700px;

  margin:16px 0 20px;

  font-size:15.5px;
  line-height:1.7;

  color:#aebfd1;
}


/* =========================================================
TEXTO SECUNDARIO
========================================================= */

.hero-sub-secondary{
  max-width:700px;

  margin-top:18px;
  
  line-height:1.9;

  color:rgba(215,228,242,.72);
}


.hero-emphasis{
  white-space:nowrap;

  color:rgba(215,228,242,.78);
}


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

.hero-actions{
  display:flex;
  align-items:center;

  gap:16px;

  margin-top:18px;
}

/* =========================================================
BOTÓN PRINCIPAL
========================================================= */

.btn-primary{
  display:inline-block;

  padding:13px 24px;

  background:transparent;

  border:1px solid rgba(255,255,255,.25);
  border-radius:3px;

  color:#e6eef8;

  font-size:11px;
  font-weight:500;

  letter-spacing:1.4px;

  text-transform:uppercase;

  text-decoration:none;

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}


.btn-primary:hover{
  background:rgba(255,255,255,.06);

  border-color:rgba(255,255,255,.4);
}


/* =========================================================
TELÉFONO
========================================================= */

.hero-contact{
  margin-top:10px;

  font-size:12.5px;

  color:#8096aa;
}


.hero-contact a{
  margin-left:6px;

  color:#cfe3ff;

  text-decoration:none;
}


/* =========================================================
IMAGEN
------------------------------------------------------------
Ya NO usamos margin-right negativo.
La fotografía respeta el margen premium derecho.
========================================================= */

.hero-image-wrapper{
  position:relative;

  display:flex;

  justify-content:flex-end;
  align-items:flex-start;

  width:100%;
  min-width:0;

  padding:0;

  margin-top:-20px;
}

/* =========================================================
GLOW
========================================================= */

.hero-image-wrapper::before{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:0;
  bottom:25px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.05) 0%,
      transparent 70%
    );

  pointer-events:none;
}


/* =========================================================
FOTOGRAFÍA
========================================================= */

.hero-image-wrapper img{
  position:relative;
  z-index:1;

  display:block;

  width:auto;
  max-width:100%;
  max-height:650px;

  object-fit:contain;

  transform:none;

  filter:
    contrast(1.08)
    brightness(1.03)
    saturate(1.02)
    drop-shadow(0 60px 100px rgba(0,0,0,.55));
}


/* =========================================================
HERO SECTORS
========================================================= */
/* =========================================================
HERO — EXPERIENCE AREAS
========================================================= */

.hero-sectors{
  margin-top:18px;
  margin-bottom:18px;
}


.hero-sectors-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:6px 0;

  max-width:720px;
}


.hero-sectors-line span{
  display:flex;
  align-items:center;

  font-size:12.5px;
  line-height:1.4;

  color:rgba(215,228,242,.82);

  white-space:nowrap;
}


/* Separador editorial */

.hero-sectors-line span:not(:last-child)::after{
  content:"";

  width:3px;
  height:3px;

  margin:0 12px;

  border-radius:50%;

  background:#7fa7c7;

  opacity:.65;
}


.hero-sector-icon{
  display:inline-block;
  margin-right:5px;

  font-size:13px;
  line-height:1;

  vertical-align:-1px;
}

/* =========================================================
CLARITY BEFORE COMMITMENT
========================================================= */

.hero-clarity{
  margin-top:0;
  max-width:620px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
}


.hero-clarity h2{

  margin:0 0 6px;

  font-family:'Cormorant Garamond', serif;

  font-size:30px;
  line-height:1.2;
  font-weight:500;

  color:#ffffff;
}


.hero-clarity p{
  margin:0;

  max-width:580px;

  font-size:13.5px;
  line-height:1.6;

  color:rgba(215,228,242,.75);
}

/* =========================================================
DESKTOP GRANDE
> 1440
------------------------------------------------------------
Mantiene amplitud sin separar excesivamente
texto e imagen en monitores grandes.
========================================================= */

@media (min-width:1600px){

  .hero-grid{
    padding-left:70px;
    padding-right:70px;

    column-gap:100px;
  }


  .hero-content{
    max-width:780px;
  }


  .hero h1{
    max-width:780px;
  }

}



/* =========================================================
LAPTOP
1366 × 768
========================================================= */

@media (max-width:1366px){

  /* Reducimos espacio superior del Hero */
  .hero{
    min-height:0;
    padding-top:42px;
  }


  /* Eyebrow */
  .hero-label{
    margin-bottom:12px;
  }


  /* Título */
  .hero h1{
    font-size:54px;
    line-height:1.03;
    margin-bottom:18px;
  }


  /* Primer texto */
  .hero-sub{
    margin-top:12px;
    margin-bottom:14px;
    line-height:1.6;
  }


  /* Segundo texto */
  .hero-sub-secondary{
    margin-top:12px;
    margin-bottom:0;
    line-height:1.65;
    max-width:650px;
  }


  /* Clarity */
  .hero-clarity{
    margin-top:0;
    margin-top:14px;
    padding-top:14px;
  }


  .hero-clarity h2{
  margin-bottom:5px;
  font-size:27px;
  }


  .hero-clarity p{
    line-height:1.5;
  }


  /* Experience Across */
  .hero-sectors{
margin-top:14px;
  margin-bottom:14px;
  }


  /* Botón */
  .hero-actions{
    margin-top:14px;
  }


  /* Teléfono */
  .hero-contact{
    margin-top:7px;
    margin-bottom:20px;
  }


  /* Carlos conserva presencia visual */
  .hero-image-wrapper{
    margin-top:-10px;
  }


  .hero-image-wrapper img{
    max-height:600px;
  }



  .hero-grid{
    padding-left:44px;
    padding-right:44px;

    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(340px, .75fr);

    column-gap:50px;
  }


  .hero-content{
    max-width:680px;
  }

  .hero-image-wrapper{
    padding-right:6px;
  }


  .hero-image-wrapper img{
    max-height:590px;
  }

}



/* =========================================================
TABLET
<= 1024
------------------------------------------------------------
Cambio a flujo vertical.
========================================================= */

@media (max-width:1024px){

  .hero{
    min-height:auto;

    padding:70px 0 0;
  }


  .hero-grid{
    grid-template-columns:1fr;

    padding-left:32px;
    padding-right:32px;

    gap:28px;
  }


  .hero-content{
    width:100%;

    max-width:680px;

    margin:0 auto;
  }


  .hero h1{
    max-width:680px;

    font-size:46px;
  }


  .hero-sub,
  .hero-sub-secondary{
    max-width:650px;
  }


  .hero-emphasis{
    white-space:normal;
  }


  .hero-image-wrapper{
    justify-content:center;

    width:100%;

    margin-top:-10px;

    padding-right:0;
  }


  .hero-image-wrapper img{
    max-height:460px;

    transform:none;
  }

}

/* =========================================================
TABLET VERTICAL
768 × 1024 aprox.
========================================================= */

@media (min-width:601px) and (max-width:900px){

  .hero{
    min-height:auto;
    padding:54px 0 0;
  }

  .hero-grid{
    grid-template-columns:1fr;

    padding-left:42px;
    padding-right:42px;

    gap:24px;
  }

  .hero-content{
    width:100%;
    max-width:640px;

    margin:0 auto;
  }

  .hero-label{
    margin-bottom:14px;

    font-size:9.5px;
    letter-spacing:2.5px;
  }

  .hero h1{
    max-width:640px;

    font-size:42px;
    line-height:1.08;

    margin-bottom:18px;
  }

  .hero-sub{
    max-width:620px;

    font-size:14px;
    line-height:1.6;

    margin-top:12px;
    margin-bottom:14px;
  }

  .hero-sub-secondary{
    max-width:620px;
    
    line-height:1.65;

    margin-top:12px;
  }

  .hero-clarity{
      margin-top:0;
    max-width:620px;
  
    padding-top:14px;
  }

  .hero-clarity h2{
    font-size:26px;
  }

  .hero-clarity p{
    font-size:13px;
    line-height:1.55;
  }

  .hero-sectors{
      margin-top:18px;
  margin-bottom:18px;
  }

    .hero-sectors-line{
    display:flex;
    flex-direction:column;
    align-items:flex-start;   
    gap:8px;
  }

  .hero-sectors-line > span{
    display:flex;
    align-items:center;

    width:100%;
  }

  .hero-sector-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:22px;
    margin-right:7px;

    font-size:13px;
    line-height:1;
  }

  .hero-actions{
    margin-top:16px;
  }

  .hero-image-wrapper{
    width:100%;

    justify-content:center;

    margin-top:6px;
  }

  .hero-image-wrapper img{
    max-height:400px;
  }

}

/* =========================================================
TABLET HORIZONTAL
1024 × 768 aprox.
========================================================= */

@media (min-width:901px) and (max-width:1100px) and (max-height:800px){

  .hero{
    min-height:auto;
    padding:42px 0 0;
  }

  .hero-grid{
    grid-template-columns:1fr;

    padding-left:70px;
    padding-right:70px;

    gap:16px;
  }

  .hero-content{
    max-width:720px;

    margin:0 auto;
  }

  .hero h1{
    max-width:720px;

    font-size:44px;
    line-height:1.06;

    margin-bottom:14px;
  }

  .hero-sub{
    font-size:13.5px;
    line-height:1.55;

    margin-top:10px;
    margin-bottom:12px;
  }

  .hero-sub-secondary{  
    line-height:1.55;

    margin-top:10px;
  }

  .hero-clarity{
    margin-top:0;    
    padding-top:12px;
  }

  .hero-clarity h2{
    font-size:25px;
  }

  .hero-sectors{    
    margin-top:12px;
    margin-bottom:12px;
  }

  .hero-actions{
    margin-top:12px;
  }

  .hero-image-wrapper{
    justify-content:center;

    margin-top:0;
  }

  .hero-image-wrapper img{
    max-height:310px;
  }

}

/* =========================================================
TABLET SMALL
<= 900
========================================================= */

@media (max-width:900px){

  .hero{
    padding-top:65px;
  }


  .hero-grid{
    padding-left:28px;
    padding-right:28px;

    gap:24px;
  }


  .hero-content{
    max-width:600px;
  }


  .hero h1{
    max-width:600px;
      font-size:40px;
    line-height:1.1;
  }


  .hero-image-wrapper{
    margin-top:-10px;

    transform:none;
  }


  .hero-image-wrapper img{
    max-height:380px;
  }

}



/* =========================================================
MOBILE
390 × 844
========================================================= */

@media (max-width:600px){

  .hero{
    min-height:auto;

    padding:58px 0 0;
  }


  .hero-grid{
    grid-template-columns:1fr;

    padding-left:22px;
    padding-right:22px;

    gap:22px;
  }


  .hero-content{
    position:relative;
    z-index:5;

    width:100%;

    max-width:none;

    margin:0;

    padding:0;
  }


  .hero-label{
    margin-bottom:16px;

    font-size:9px;

    letter-spacing:2.4px;
  }


  .hero h1{
    max-width:100%;
    
    margin-bottom:20px;

    font-size:34px;
    line-height:1.1;
    letter-spacing:-0.3px;

  }


  .hero-sub{
    max-width:100%;

    margin-top:14px;
    margin-bottom:20px;

    font-size:14px;
    line-height:1.65;
  }


  .hero-sub-secondary{
    max-width:100%;

    margin-top:16px;

    line-height:1.75;
  }


  .hero-emphasis{
    white-space:normal;
  }


  .hero-actions{
    flex-direction:column;

    align-items:flex-start;

    margin-top:20px;

    gap:12px;
  }


  .btn-primary{
    padding:12px 18px;

    font-size:10px;

    letter-spacing:1.2px;
  }


  .hero-contact{
    margin-top:9px;

    font-size:11.5px;
  }


  .hero-image-wrapper{
    position:relative;
    z-index:1;

    display:flex;

    justify-content:center;

    width:100%;

    margin-top:12px;

    padding:0;
  }


  .hero-image-wrapper::before{
    width:280px;
    height:280px;

    right:50%;

    transform:translateX(50%);
  }


  .hero-image-wrapper img{
    display:block;

    max-height:300px;

    margin-bottom:-5px;

    transform:none;
  }

  .hero-sectors{
      margin-top:16px;
  margin-bottom:16px;
  }

   .hero-sectors-line{
    gap:7px;
       flex-direction:column;
    align-items:flex-start;
  }

  .hero-sectors-line > span{
    line-height:1.4;
  }

  .hero-sectors-list{
    grid-template-columns:1fr;

    gap:8px;

    max-width:100%;
  }


  .hero-sectors-list li{
    font-size:13px;
  }

   .hero-clarity{
     margin-top:0;    
    padding-top:18px;
  }

  .hero-clarity h2{
    font-size:24px;
  }

  .hero-clarity p{
    font-size:13px;
    line-height:1.6;
  }


}



/* =========================================================
MOBILE PEQUEÑO
<= 390
========================================================= */

@media (max-width:390px){

  .hero-grid{
    padding-left:20px;
    padding-right:20px;
  }


  .hero h1{
    font-size:32px;
  }


  .hero-sub{
    font-size:13.5px;
  }


  .hero-sub-secondary{
        
  }

}

/* =========================================================
EXPERIENCE ACROSS
TABLET + MOBILE — LISTA VERTICAL DEFINITIVA
========================================================= */

@media (max-width:900px){

  .hero-sectors-line{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;

    width:100%;
    max-width:100%;

    gap:8px !important;
  }


  .hero-sectors-line > span{
    display:flex !important;
    align-items:center !important;

    width:100%;

    margin:0 !important;

    white-space:normal;
  }


  /* quitar los puntos separadores del desktop */
  .hero-sectors-line > span::after{
    display:none !important;
    content:none !important;
  }


  .hero-sector-icon{
    display:inline-flex;

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

    width:22px;
    min-width:22px;

    margin-right:7px;

    font-size:13px;
    line-height:1;
  }

}