/* =========================================
   NOSOTROS — Sección 1: Nuestro Propósito
   Requiere variables en global.css:
   --celeste, --verde, --azul, --amarillo, --naranjo, --font-sans, --shadow
   ========================================= */

.nosotros-hero{
  background:#fff;
  font-family: var(--font-sans); /* Poppins */
}

.nosotros-hero__inner{
  width:min(1200px, 92%);
  margin-inline:auto;
  min-height: clamp(260px, 36vw, 420px);
  display:grid;
  /* tres columnas: texto | cuña | imagen */
  grid-template-columns: 1.05fr auto 1.25fr;
  align-items:center;
  gap: 0;
  position:relative;
  padding: clamp(16px, 3vw, 26px) 0;
}

/* Bloque de texto */
.hero-copy{
  padding: 0 clamp(10px, 1.6vw, 20px) 0 clamp(8px, 1.2vw, 16px);
}

.sec-subtitle{
  margin: 0 0 18px;
  font-size: clamp(22px, 2.6vw, 32px);
}

.chip{
  background: var(--celeste);
  color:#fff;
  padding: 10px 18px;
  border-radius: 999px;
  display:inline-block;
}

/* Título y texto */
.hero-title{
  color:#223;
  font-weight:700;
  font-size: clamp(18px, 2.6vw, 30px);
  line-height:1.25;
  margin:0 0 8px 0;
}
.hero-text{
  margin:0;
  color:#2a2f3a;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height:1.6;
  max-width: 54ch;
}

/* ===== CUÑA BLANCA (overlay) ===== */
.hero-wedge{
  --w: clamp(36px, 6vw, 110px);   /* ancho de la cuña */
  --skew: 18%;                    /* inclinación (más % = más diagonal) */

  position: relative;
  width: var(--w);
  height: 100%;
  z-index: 2;                     /* sobre la imagen */
  pointer-events: none;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%);
  box-shadow: -2px 0 0 rgba(0,0,0,0.02);
}

/* Imagen fija (sin movimiento en hover) */
.hero-media{
  position:relative;
  height:100%;
  z-index: 1;
}
.hero-media img{
  width:100%;
  height:100%;
  max-height: clamp(240px, 36vw, 420px);
  object-fit: cover;
  display:block;
  box-shadow: var(--shadow);
  transform: translateX(-4px);  /* pegada a la cuña */
  transition: none;             /* sin animación */
  border-radius: 14px;
}
/* Asegura que NO cambie en hover */
.hero-media img:hover{
  transform: translateX(-4px);
  transition: none;
}

/* ====== Responsive ====== */
@media (min-width:1280px){
  .hero-wedge{ --w: 120px; --skew: 22%; }
}

@media (max-width: 960px){
  .nosotros-hero__inner{
    grid-template-columns: 1fr;  /* vertical */
    gap: 16px;
    min-height: unset;
    padding: 18px 0;
  }
  .hero-wedge{ display:none; }    /* en móvil, sin cuña */
  .hero-media img{
    max-height: 260px;
    transform:none;
    border-radius: 14px;
  }

}

/* ===== MÓDULO: COMPROMISO & EXPERIENCIA ===== */
.modulo-experiencia{
  background:#fff;
  border-top: 6px solid var(--verde);
}

.modulo-experiencia .mx-inner{
  width:min(1200px, 92%);     /* centrado y no al borde */
  margin-inline:auto;
  padding: clamp(28px, 5vw, 56px) 0;
  font-family: var(--font-sans);
}

/* títulos reusando estilo del hero */
.modulo-experiencia .hero-title{
  margin: 6px 0 8px;
}
.modulo-experiencia .hero-text{
  margin: 0 0 18px;
}

/* lista con bullets bonitos, strong en negrita y resto normal */
.compromiso-lista{
  list-style:none;
  padding:0;
  margin: 10px 0 28px;
  display:grid;
  gap: 10px;
  max-width: 70ch;            /* ancho legible como el hero */
}
.compromiso-lista li{
  position:relative;
  padding-left: 28px;
  font-size: clamp(14px, 1.5vw, 18px); /* igual que .hero-text */
  line-height: 1.6;
  color:#2a2f3a;
}
.compromiso-lista li strong{
  font-weight:700;            /* negrita visible */
}
.compromiso-lista li::before{
  content:"";
  position:absolute; left:0; top: .55em;
  width:10px; height:10px; border-radius:50%;
  background: var(--celeste); /* paleta de la marca */
  box-shadow: 0 0 0 3px rgba(68,164,220,.15);
}

/* grid de experiencia tipo "servicios" */
.experiencia-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
  margin-top: 14px;
}
.item-exp{
  background:#fff;
  border-radius: 16px;
  padding: clamp(16px, 2.6vw, 22px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  text-align:center;
  transition: transform .18s ease, box-shadow .18s ease;
  border:1px solid rgba(0,0,0,.04);
}
.item-exp:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.09);
}
.icon-exp{
  width: clamp(56px, 7vw, 86px);
  height: auto;
  display:block;
  margin: 6px auto 12px auto;
  filter: contrast(0) brightness(0); /* negros planos estilo servicios */
}
.exp-title{
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight:700;
  color:#223;
  margin: 2px 0 8px;
}
.exp-text{
  font-size: clamp(14px, 1.5vw, 18px); /* mismo tamaño que hero-text */
  color:#2a2f3a;
  line-height:1.6;
  margin:0;
}

/* responsive */
@media (max-width: 960px){
  .experiencia-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .exp-title{ font-size: 16px; }
  .experiencia-grid{ grid-template-columns: 1fr; }
  .compromiso-lista{ max-width: 100%; }
}

/* ===== Fondo bicolor que termina en blanco (para el módulo) ===== */
.fondo-bicolor{
  /* Colores suaves por defecto (puedes cambiarlos aquí o desde global.css) */
  --celeste-claro: #c6e7f8;
  --verde-claro:  #d3f3b2;

  /* Permite sobreescribir con tu paleta global si existe */
  --izq: var(--verde-claro, #d3f3b2);
  --der: var(--celeste-claro, #c6e7f8);

  /* Alto visual (auto si el contenido es más grande) */
  --alto: 95vh;

  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;
}

/* Asegura que el contenido siga centrado y con buen ancho */
.fondo-bicolor .mx-inner{
  width: min(1200px, 92%);
  margin-inline: auto;
}

/* Responsive: baja el alto visual en móviles */
@media (max-width: 640px){
  .fondo-bicolor{ --alto: 520px; }
}