/* ================== VARIABLES GLOBALES ================== */
:root{
  --verde:#72BB3A;
  --azul:#2B4DA3;

  /* Hero (¿Quiénes Somos?) */
  --hero-h:52vh;
  --gutter: clamp(16px, 2.4vw, 32px);

  /* Cinta / líneas */
  --fat-h: 52px;
  --thin-h: 6px;      /* grosor estándar de líneas */
  --thin-w: 12px;

  /* “Por qué Nosotros” */
  --side-pad: clamp(16px, 3vw, 40px);
  --col-ratio: 1.15fr 0.85fr;

  /* Ancho máximo del contenido */
  --container: 1080px;
}

/* ================== NORMALIZACIONES ================== */
html, body{ overflow-x:hidden; }
.hero-somos,
.hs-top,
.hs-split,
.hs-ribbon,
.why-fw{ width:100%; }

/* ================== HERO (¿QUIÉNES SOMOS?) ================== */
.hero-somos{ background:#fff; overflow:hidden; }

.hs-split{
  min-height: var(--hero-h);
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;

  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(10px, 2vw, 16px);
}

.hs-media{ position:relative; overflow:visible; }
.hs-media img{
  display:block; width:100%; height:auto;
  object-fit:cover; object-position:center;
  border-radius: 10px;
}

.hs-copy{
  background:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--gutter);
}
.hs-copy h1{
  margin:0 0 12px;
  color:var(--azul);
  font-weight:900; letter-spacing:.6px;
  font-size: clamp(28px, 3vw, 40px);
  line-height:1.06;
}
.hs-copy p{
  margin:0; color:#333;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height:1.75; max-width: 42ch;
}

/* ===== CINTA: chip + línea a la MISMA ALTURA ===== */
.hs-ribbon{
  display:grid;
  grid-template-columns: auto 1fr;               /* col 1: chip | col 2: línea */
  align-items:center;                            /* centra verticalmente ambos */
  gap: clamp(12px, 2.6vw, 28px);

  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(6px, 1.6vw, 10px) clamp(10px, 2vw, 16px);
}

.sec-subtitle{
  margin: 0;
  font-size: clamp(20px, 2.6vw, 28px);
}
.chip{
  background: var(--celeste);
  color:#fff;
  padding: 10px 18px;
  border-radius: 999px;
  display:inline-block;
}

/* La línea verde que se alinea a la altura del chip */
.accent-line{
  height: var(--thin-h);
  background: var(--verde);
  border-radius: 999px;
  margin-left: clamp(8px, 1.6vw, 16px);

  grid-column: 2;                 /* va en la segunda columna (a la derecha) */
  justify-self: end;              /* pegada al borde derecho del contenedor */
  align-self: center;             /* misma altura vertical del chip */
  width: clamp(80px, 16vw, 200px);
}

/* ================== POR QUÉ NOSOTROS ================== */

/* ===== sección 1: fondo bicolor que termina en blanco ===== */
.hero-list{
  /* puedes ajustar estos dos colores “claros” si quieres otro matiz */
  --celeste-claro:#c6e7f8;

  --verde:#7cb928;
  --verde-claro:#d3f3b2;
  --alto: 95vh;
  --der: #c6e7f8;

  --izq:#d3f3b2;
  min-height: var(--alto);
  padding: clamp(28px, 6vw, 56px) 0;

  /* Capa 1: cortina vertical a blanco (suave) */
  /* Capa 2: gradiente diagonal izq→der (paleta) */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 25%,
      rgba(255,255,255,.25) 50%,
      rgba(255,255,255,.55) 75%,
      #ffffff 100%
    ),
    linear-gradient(80deg, var(--izq) 0%, var(--der) 100%);
  background-repeat: no-repeat;

  border-top: 6px solid var(--verde);
}


@media (max-width:640px){
  .hero-list{ --alto: 520px; }
}



.why-fw{
  position:relative;
  background:#fff;
  padding-top:0; padding-bottom:0;
  margin-top: clamp(8px, 1.4vw, 16px);
}
.why-fw::before, .why-fw::after{ content:none; }

.why-fw__grid{
  width:100%;
  display:grid; gap:0;
  grid-template-columns: var(--col-ratio);

  max-width: var(--container);
  margin-inline:auto;
  padding-inline: clamp(10px, 2vw, 16px);
}

.why-fw__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--side-pad);
}
.why-fw__copy h2{
  margin:0 0 12px; color:var(--azul); font-weight:900;
  letter-spacing:.6px; font-size: clamp(26px, 2.8vw, 36px);
  line-height:1.06;
}
.why-fw__copy ul{
  margin:0; color:#333; font-size: clamp(15px, 1.2vw, 18px);
  line-height:1.7; max-width:56ch;
}

.why-fw__media{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(8px, 1.6vw, 16px);
  overflow: visible;
}
.why-fw__media img{
  display:block;
  width:100%; height:auto; object-fit:cover;
  max-width: 780px;
  max-height: 460px;
  border-radius: 10px;
}

/* ================== RESPONSIVO ================== */
@media (max-width: 980px){
  .hs-split{ grid-template-columns:1fr; min-height:auto; }
  .hs-copy{ padding: clamp(14px, 4vw, 22px); }

  .hs-ribbon{
    grid-template-columns: 1fr;   /* chip arriba, línea debajo */
    gap: 10px;
  }
  .accent-line{
    grid-column: 1;
    justify-self: start;          /* que empiece a la izquierda en móvil */
    width: clamp(120px, 48vw, 220px);
  }

  .why-fw__grid{ grid-template-columns:1fr; }
  .why-fw__media{ order:-1; }
  .why-fw__media img{
    max-width: 92%;
    max-height: 340px;
  }
}

/* Seguridad */
.hs-media img, .why-fw__media img{ max-width:100%; object-position:center; }