/* =========================================================
  inicio.css
========================================================= */

.hero {
  position: relative;
  min-height: 780px;
  padding: calc(var(--header-height) + 72px) 0 90px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(149,183,52,.12),
      transparent 26%
    ),
    linear-gradient(135deg,#f7faff 0%,#ffffff 48%,#edf4fb 100%);
}

.hero-grid {
  position:relative;
  z-index:2;
  display:grid;
  align-items:center;
  gap:clamp(52px,6vw,88px);
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
}

.hero-copy h1 {
  max-width:760px;
  margin-bottom:24px;
  color:var(--sea-blue-800);
  font-size:clamp(2.7rem,5vw,4.9rem);
  letter-spacing:-.045em;
}

.hero-copy h1 span {
  display:block;
  color:var(--sea-green-600);
}

.hero-lead {
  max-width:680px;
  margin-bottom:32px;
  color:var(--sea-muted);
  font-size:clamp(1.05rem,1.8vw,1.24rem);
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.trust-list {
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
  margin-top:36px;
  color:var(--sea-muted);
  font-size:.92rem;
  font-weight:650;
}

.trust-list li {
  display:flex;
  align-items:center;
  gap:9px;
}

.trust-icon {
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  color:var(--sea-blue-950);
  background:var(--sea-green-100);
  border-radius:50%;
  font-size:.78rem;
  font-weight:900;
}

.hero-visual {
  position:relative;
  width:100%;
  min-height:650px;
  margin-left:auto;
}

.hero-image-main {
  position:absolute;
  top:10px;
  right:0;
  width:min(100%,620px);
  height:640px;
  overflow:hidden;
  border:10px solid rgba(255,255,255,.9);
  border-radius:150px 28px 150px 28px;
  box-shadow:var(--shadow-lg);
}

.hero-image-main::after {
  position:absolute;
  inset:0;
  content:"";
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      transparent 58%,
      rgba(12,36,72,.16)
    );
}

.hero-image-main img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.hero-floating-card {
  position:absolute;
  right:26px;
  bottom:62px;
  z-index:4;
  width:min(270px,45%);
  padding:20px 22px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.78);
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);
}

.floating-label {
  display:block;
  margin-bottom:5px;
  color:var(--sea-blue-800);
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-floating-card strong {
  color:var(--sea-blue-950);
  font-size:1rem;
}

.hero-mini-image {
  position:absolute;
  left:-34px;
  bottom:88px;
  z-index:3;
  width:245px;
  height:172px;
  overflow:hidden;
  border:8px solid var(--sea-white);
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  transform:rotate(-2.5deg);
}

.hero-mini-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}


/* =========================================================
   FRANJA REGIONAL
========================================================= */

.regional-strip {
  color:var(--sea-white);
  background:var(--sea-blue-800);
}

.regional-inner {
  display:flex;
  min-height:96px;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.regional-inner p {
  max-width:520px;
  margin:0;
  font-weight:700;
}

.countries {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.countries span {
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  color:rgba(255,255,255,.82);
  font-size:0.95rem;
}


/* =========================================================
   CUATRO SOLUCIONES
========================================================= */

.solutions-section {
  background:var(--sea-white);
}

.solutions-section .section-heading {
  width:100%;
  max-width:none;
}

.solutions-section .section-heading h2 {
  max-width:760px;
  margin:14px 0 0;
  color:var(--sea-blue-950);
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:1.08;
  letter-spacing:-.045em;
}

.solutions-section .section-heading > p {
  max-width:560px;
  margin:0 0 8px;
  color:var(--sea-muted);
  line-height:1.72;
}

.solutions-grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.solution-card {
  position:relative;
  min-height:430px;
  overflow:hidden;
  border-radius:var(--radius-md);
  isolation:isolate;
}

.solution-card img {
  position:absolute;
  z-index:-2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s ease;
}

.solution-overlay {
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(8,24,49,.04),
      rgba(8,24,49,.9)
    ),
    linear-gradient(
      90deg,
      rgba(8,24,49,.35),
      transparent
    );
}

.solution-card:hover img {
  transform:scale(1.045);
}

.solution-content {
  position:absolute;
  inset:auto 0 0;
  padding:34px;
  color:var(--sea-white);
}

.solution-number {
  display:inline-block;
  margin-bottom:26px;
  color:rgba(255,255,255,.72);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.12em;
}

.solution-content h3 {
  margin-bottom:12px;
  font-size:clamp(1.45rem,2.5vw,2rem);
}

.solution-content p {
  max-width:530px;
  margin-bottom:20px;
  color:rgba(255,255,255,.82);
}

.solution-card:hover .text-link b {
  transform:translateX(4px);
}


/* =========================================================
   CÓMO TRABAJAMOS
========================================================= */

.work-section {
  background:var(--sea-surface);
}

.work-section .section-heading {
  max-width:840px;
  margin-right:auto;
  margin-bottom:46px;
  margin-left:auto;
}

.work-section .section-heading h2,
.work-section .section-heading p {
  max-width:760px;
  margin-right:auto;
  margin-left:auto;
}

.work-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.work-card {
  position:relative;
  display:flex;
  min-width:0;
  min-height:500px;
  flex-direction:column;
  padding:28px;
  overflow:hidden;
  background:var(--sea-white);
  border:1px solid var(--sea-line);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(18,56,109,.045);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.work-card:hover {
  border-color:rgba(24,70,135,.22);
  box-shadow:0 18px 42px rgba(18,56,109,.1);
  transform:translateY(-5px);
}

/* ==========================================================
   CÓMO TRABAJAMOS - CONTINUACIÓN
========================================================== */

.work-card::before {
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:3px;
  content:"";
  background:
    linear-gradient(
      90deg,
      var(--sea-green-600),
      var(--sea-blue-800)
    );
  opacity:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.work-card:hover::before {
  opacity:1;
  transform:scaleX(1);
}

.work-card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.work-number {
  color:#b2becd;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
}

.work-icon {
  display:grid;
  width:48px;
  height:48px;
  flex:0 0 48px;
  color:var(--sea-green-800);
  background:var(--sea-green-100);
  border-radius:13px;
  place-items:center;
}

.work-icon svg {
  width:23px;
  height:23px;
  fill:currentColor;
}

.work-card-content {
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column;
}

.work-card h3 {
  margin:0 0 12px;
  color:var(--sea-blue-950);
  font-size:1.28rem;
  line-height:1.25;
  letter-spacing:-.02em;
}

.work-card-summary {
  min-height:92px;
  margin:0 0 24px;
  color:var(--sea-muted);
  font-size:.9rem;
  line-height:1.65;
}

.work-card-detail {
  padding-top:20px;
  border-top:1px solid var(--sea-line);
}

.work-card-detail > span {
  display:block;
  margin-bottom:13px;
  color:var(--sea-blue-950);
  font-size:.73rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.work-card-detail ul {
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}

.work-card-detail li {
  position:relative;
  padding-left:18px;
  color:var(--sea-muted);
  font-size:.82rem;
  line-height:1.45;
}

.work-card-detail li::before {
  position:absolute;
  top:.57em;
  left:0;
  width:7px;
  height:7px;
  content:"";
  background:var(--sea-green-600);
  border-radius:50%;
}

.work-card-link {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:8px;
  margin-top:28px;
  color:var(--sea-blue-800);
  font-size:.84rem;
  font-weight:850;
  line-height:1.4;
  transition:
    color .2s ease,
    gap .2s ease;
}

.work-card-link:hover {
  gap:12px;
  color:var(--sea-blue-950);
}

.work-card-link span {
  font-size:1rem;
}


/* ==========================================================
   BENEFICIOS
========================================================== */

.benefits-section {
  background:var(--sea-white);
}

.benefits-header {
  display:grid;
  grid-template-columns:
    minmax(0,1.05fr)
    minmax(320px,.65fr);
  gap:clamp(38px,7vw,90px);
  align-items:end;
  margin-bottom:48px;
}

.benefits-header h2 {
  max-width:760px;
  margin:14px 0 0;
  color:var(--sea-blue-950);
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:1.08;
  letter-spacing:-.045em;
}

.benefits-header > p {
  max-width:560px;
  margin:0;
  color:var(--sea-muted);
  line-height:1.72;
}

.benefits-layout {
  display:grid;
  grid-template-columns:
    minmax(300px,.78fr)
    minmax(0,1.22fr);
  gap:24px;
  align-items:stretch;
}

.benefit-feature {
  position:relative;
  display:flex;
  min-height:100%;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(30px,4vw,44px);
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(149,183,52,.22),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      var(--sea-blue-950),
      var(--sea-blue-800)
    );
  border-radius:22px;
}


.benefit-feature-label {
  position:relative;
  z-index:1;
  display:inline-flex;
  align-self:flex-start;
  margin-bottom:auto;
  padding:8px 11px;
  color:var(--sea-blue-950);
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--sea-green-600);
  border-radius:999px;
}

.benefit-feature h3 {
  position:relative;
  z-index:1;
  max-width:420px;
  margin:80px 0 16px;
  color:#fff;
  font-size:clamp(1.8rem,3vw,2.7rem);
  line-height:1.08;
  letter-spacing:-.04em;
}

.benefit-feature > p {
  position:relative;
  z-index:1;
  max-width:470px;
  margin:0;
  color:rgba(255,255,255,.72);
  line-height:1.7;
}

.benefit-feature strong {
  color:#fff;
}

.benefit-feature-points {
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}

.benefit-feature-points span {
  padding:8px 11px;
  color:rgba(255,255,255,.82);
  font-size:.7rem;
  font-weight:750;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
}

.benefits-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  overflow:hidden;
  background:var(--sea-surface);
  border:1px solid var(--sea-line);
  border-radius:22px;
}

.benefit-item {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:17px;
  padding:27px;
  background:#fff;
}

.benefit-item:nth-child(odd) {
  border-right:1px solid var(--sea-line);
}

.benefit-item:nth-child(n+3) {
  border-top:1px solid var(--sea-line);
}

.benefit-number {
  display:grid;
  width:35px;
  height:35px;
  color:var(--sea-blue-800);
  font-size:.68rem;
  font-weight:900;
  background:var(--sea-green-100);
  border-radius:10px;
  place-items:center;
}

.benefit-item h3 {
  margin:1px 0 8px;
  color:var(--sea-blue-950);
  font-size:1rem;
  line-height:1.3;
}

.benefit-item p {
  margin:0;
  color:var(--sea-muted);
  font-size:.79rem;
  line-height:1.6;
}




/* =========================================================
   INDUSTRIAS / EXPERIENCIA MULTISECTORIAL
========================================================= */

.clients-industries {
  display:grid;
  align-items:start;
  gap:60px;
  padding-top:50px;
  border-top:1px solid var(--sea-line);
  grid-template-columns:.8fr 1.2fr;
}

.clients-industries-label {
  display:block;
  margin-bottom:14px;
  color:var(--sea-green-800);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.clients-industries-heading h3 {
  margin-bottom:18px;
  color:var(--sea-blue-950);
  font-size:clamp(1.8rem,3vw,2.5rem);
  line-height:1.15;
  letter-spacing:-.035em;
}

.clients-industries-heading p {
  margin:0;
  color:var(--sea-muted);
  line-height:1.75;
}

.clients-industries-list {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.clients-industries-list li {
  position:relative;
  padding:9px 16px 9px 28px;
  color:var(--sea-muted);
  background:var(--sea-white);
  border:1px solid var(--sea-line);
  border-radius:999px;
  font-size:.80rem;
  font-weight:600;
}

.clients-industries-list li::before {
  position:absolute;
  top:50%;
  left:14px;
  width:6px;
  height:6px;
  content:"";
  background:var(--sea-green-600);
  border-radius:50%;
  transform:translateY(-50%);
}

/* =========================================================
   CLIENTES Y EXPERIENCIA
========================================================= */

.clients-section{
  background:var(--sea-surface);
}

.clients-section .section-heading{
  max-width:760px;
  margin:0 auto 70px;
  text-align:center;
}

.clients-section .section-heading h2{
  max-width:760px;
  margin:14px auto 18px;
}

.clients-section .section-heading p{
  max-width:620px;
  margin:0 auto;
}


/* =========================================================
   CARRUSEL DE CLIENTES
========================================================= */

.clients-carousel {
  margin-top: 50px;
  position:relative;
  display:grid;
  align-items:center;
  gap:18px;
  grid-template-columns:46px minmax(0,1fr) 46px;
}

.clients-carousel-viewport {
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
}

.clients-carousel-viewport::-webkit-scrollbar {
  display:none;
}

.clients-carousel-track {
  display:grid;
  width:max-content;
  gap:16px;
  padding:10px 2px 18px;
  grid-auto-columns:190px;
  grid-auto-flow:column;
}

.client-logo-card {
  display:flex;
  height:126px;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--sea-line);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(18,56,109,.05);
  scroll-snap-align:start;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.client-logo-card:hover {
  border-color:rgba(24,70,135,.2);
  box-shadow:0 14px 34px rgba(18,56,109,.09);
  transform:translateY(-4px);
}

.client-logo-card img {
  display:block;
  width:100%;
  max-width:150px;
  height:78px;
  object-fit:contain;
  object-position:center;
  filter:grayscale(1);
  opacity:.76;
  transition:
    filter .25s ease,
    opacity .25s ease,
    transform .25s ease;
}

.client-logo-card:hover img {
  filter:grayscale(0);
  opacity:1;
  transform:scale(1.04);
}


/* =========================================================
   CONTROLES CARRUSEL
========================================================= */

.clients-carousel-control {
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  color:var(--sea-blue-900);
  background:#fff;
  border:1px solid var(--sea-line);
  border-radius:50%;
  box-shadow:0 7px 20px rgba(18,56,109,.07);
  cursor:pointer;
  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.clients-carousel-control:hover {
  color:#fff;
  background:var(--sea-blue-900);
  border-color:var(--sea-blue-900);
  transform:translateY(-2px);
}

.clients-carousel-control span {
  display:block;
  margin-top:-3px;
  font-size:2rem;
  line-height:1;
}


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

.cta-section {
  padding:84px 0;
  color:var(--sea-white);
  background:
    linear-gradient(
      120deg,
      var(--sea-green-900),
      #dff0bf99
    ),
    url("../img/hero-EHSI.webp") center / cover no-repeat;
}

.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}

.cta-inner h2 {
  max-width:700px;
  margin-bottom:14px;
  font-size:clamp(2rem,4vw,3.2rem);
  letter-spacing:-.035em;
}

.cta-inner p {
  max-width:670px;
  margin-bottom:0;
  color:rgba(255,255,255,.78);
}

.cta-actions {
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  gap:12px;
}


/* =========================================================
   LINKS TARJETAS DE SOLUCIONES
   ========================================================= */

.solution-content .text-link{
  color:var(--sea-white);
}

.solution-content .text-link:hover{
  color:var(--sea-green-600);
}

.solution-content .text-link b{
  color:inherit;
}


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

@media(max-width:980px){

  .work-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


@media(max-width:900px){

  .solutions-grid,
  .benefits-layout  {
    grid-template-columns:1fr;
  }


  .benefits-header{
    grid-template-columns:1fr;
  }


  .benefit-feature{
    min-height:430px;
  }


  .clients-industries{
    grid-template-columns:1fr;
    gap:35px;
  }

}


@media(max-width:820px){

  .hero{
    min-height:auto;
    padding-top:calc(var(--header-height) + 52px);
  }


  .hero-grid{
    grid-template-columns:1fr;
    gap:50px;
  }


  .hero-visual{
    min-height:500px;
  }


  .hero-image-main{
    left:8%;
    width:84%;
    height:470px;
  }


  .hero-mini-image{
    left:2%;
  }


  .regional-inner,
  .cta-inner{
    align-items:flex-start;
    flex-direction:column;
    padding-top:24px;
    padding-bottom:24px;
  }


  .countries{
    justify-content:flex-start;
  }


  .cta-actions{
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
  }

}


@media(max-width:720px){

  .clients-carousel{
    display:block;
    margin-top: 25px;
  }


  .clients-carousel-track{
    gap:13px;
    grid-auto-columns:165px;
  }


  .client-logo-card{
    height:112px;
    padding:17px;
  }


  .client-logo-card img{
    max-width:135px;
    height:68px;
  }


  .clients-carousel-control{
    display:none;
  }


  .benefits-list{
    grid-template-columns:1fr;
  }


  .benefit-item:nth-child(odd){
    border-right:0;
  }


  .benefit-item + .benefit-item{
    border-top:1px solid var(--sea-line);
  }


  .work-grid{
    grid-template-columns:1fr;
  }

}


@media(max-width:580px){

  .hero-copy h1{
    font-size:clamp(2.35rem,12vw,3.3rem);
  }


  .hero-actions,
  .hero-actions .button{
    width:100%;
  }


  .trust-list{
    display:grid;
    gap:12px;
  }


  .hero-visual{
    min-height:410px;
  }


  .hero-image-main{
    left:3%;
    width:94%;
    height:390px;
    border-radius:110px 22px 110px 22px;
  }


  .hero-mini-image{
    display:none;
  }


  .hero-floating-card{
    right:0;
    bottom:-4px;
    width:230px;
  }


  .solution-card{
    min-height:410px;
  }


  .solution-content{
    padding:26px;
  }

  .clients-industries-heading{
    max-width:100%;
    text-align:center;
  }

  .clients-industries-label{
    justify-content:center;
  }

  .clients-industries-heading h3{
    text-align:center;
  }

  .clients-industries-heading p{
    text-align:center;
  }

  .cta-actions,
  .cta-actions .button{
    width:100%;
  }

}


@media(prefers-reduced-motion:reduce){

  .clients-carousel-viewport{
    scroll-behavior:auto;
  }


  .client-logo-card,
  .client-logo-card img{
    transition:none;
  }

}