/* ============================================================
   EJE INTELIGENTE - nosotros.css (pagina /nosotros)
   Se carga despues de premium.css.
   ============================================================ */

/* ---------- Hero de subpagina (mismo patron que servicios) ---------- */
.hero--sub{padding-bottom:clamp(56px,7vw,88px)}
.hero--sub .hero__sub{margin-top:26px}

/* ---------- 01 La historia ---------- */
.story{padding-block:clamp(88px,10.5vw,140px)}
.story__grid{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,80px);align-items:start;
}

/* foto/monograma del fundador */
.story__fig{position:relative;margin:0;max-width:340px}
.story__fig-tile{
  position:relative;aspect-ratio:4/5;border-radius:24px;
  overflow:hidden;
  border-color:transparent;
  background:
    radial-gradient(120% 100% at 15% 0%,rgba(47,164,83,.22),transparent 60%) padding-box,
    linear-gradient(165deg,rgba(74,222,128,.4),rgba(242,244,239,.09) 45%,rgba(242,244,239,.05)) border-box;
}
.story__fig-tile img{
  width:100%;height:100%;object-fit:cover;object-position:50% 14%;
  display:block;
}
.story__fig-tile::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 55% at 78% 88%,rgba(74,222,128,.16),transparent 70%);
  pointer-events:none;
}
.story__fig figcaption{
  margin-top:16px;font-size:10.5px;letter-spacing:.18em;
  color:var(--muted);line-height:2;
}
.story__fig figcaption b{color:var(--ink);font-weight:400}

/* el relato */
.story__k{display:block}
.story__title{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.04;
  margin-top:14px;
}
.story__title em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;color:#9BDFB6;
}
.story__body{margin-top:28px;max-width:56ch}
.story__body p{
  color:rgba(242,244,239,.74);font-size:1.04rem;line-height:1.82;
  margin-top:18px;
}
.story__body p:first-of-type::first-letter{
  font-family:var(--serif);font-style:italic;
  float:left;font-size:3.4em;line-height:.78;
  padding:6px 10px 0 0;color:var(--green-bright);
}
.story__body strong{color:var(--ink);font-weight:600}

/* definicion editorial del nombre */
.def{
  margin-top:42px;padding:28px 0 8px;
  border-top:1px solid var(--line);
}
.def__k{letter-spacing:.2em;color:var(--green-bright)}
.def__q{
  margin-top:12px;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.28rem,2.3vw,1.62rem);line-height:1.42;
  color:rgba(242,244,239,.92);max-width:44ch;
}
.def__q b{font-style:normal;font-family:var(--f-mono);font-size:.62em;
  letter-spacing:.12em;color:var(--green-bright);font-weight:400}

/* linea de tiempo: 3 momentos */
.story__tl{
  margin-top:clamp(48px,6vw,76px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,36px);
}
.story__tl li{
  border-top:1px solid var(--line);padding-top:22px;
}
.story__tl b{
  font-family:var(--f-mono);font-weight:400;font-size:10px;
  letter-spacing:.2em;color:var(--green-bright);
}
.story__tl h3{
  margin-top:10px;font-family:var(--f-display);font-weight:600;
  font-size:1.14rem;letter-spacing:-.01em;
}
.story__tl span{
  display:block;margin-top:8px;
  color:rgba(242,244,239,.66);font-size:.94rem;line-height:1.6;
}

/* ---------- 02 Como trabajamos (valores) ---------- */
.vals{padding-block:clamp(88px,10.5vw,140px)}
.vals__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,24px);margin-top:clamp(40px,5vw,56px);
}
.val{
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(26px,3vw,34px);
  background:rgba(242,244,239,.02);
  transition:border-color .3s,background .3s,transform .4s var(--ease);
}
.val:hover{
  border-color:rgba(74,222,128,.4);background:rgba(47,164,83,.06);
  transform:translateY(-4px);
}
.val__ico{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid rgba(74,222,128,.3);
  background:linear-gradient(180deg,rgba(47,164,83,.16),rgba(47,164,83,.05));
}
.val__ico svg{width:23px;height:23px;stroke:var(--green-bright);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.val h3{
  margin-top:18px;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.14rem,1.9vw,1.34rem);letter-spacing:-.01em;
}
.val.sheen::before{border-radius:20px}
.val p{margin-top:8px;color:rgba(242,244,239,.66);font-size:.94rem;line-height:1.6}
.val p strong{color:var(--ink);font-weight:600}

/* ---------- 03 Credenciales (reusa .why__card) ---------- */
.creds{padding-block:clamp(88px,10.5vw,140px)}
.creds .why__certs{margin-top:clamp(40px,5vw,56px)}
.creds__note{margin-top:30px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .story__grid{grid-template-columns:1fr;gap:clamp(36px,9vw,56px)}
  .story__fig{max-width:260px;margin-inline:auto}
  .story__fig figcaption{text-align:center}
  .vals__grid{grid-template-columns:1fr;gap:14px}
}
@media (max-width:700px){
  .story{padding-block:clamp(64px,15vw,96px)}
  .vals{padding-block:clamp(64px,15vw,96px)}
  .creds{padding-block:clamp(64px,15vw,96px)}
  .story__fig{max-width:230px}
  .story__fig figcaption{margin-top:14px;font-size:10px;letter-spacing:.14em}
  .story__title{font-size:clamp(1.9rem,8.4vw,2.4rem);margin-top:12px}
  .story__body{margin-top:22px}
  .story__body p{font-size:1rem;line-height:1.76;margin-top:14px}
  .story__body p:first-of-type::first-letter{font-size:2.9em;padding:3px 8px 0 0}
  .def{margin-top:34px;padding:22px 0 4px}
  .def__q{font-size:clamp(1.22rem,5vw,1.5rem)}
  .story__tl{grid-template-columns:1fr;gap:0;margin-top:40px}
  .story__tl li{padding:18px 0}
  .story__tl li:last-child{border-bottom:1px solid var(--line)}
  .val{padding:24px 20px;border-radius:18px}
  .val__ico{width:44px;height:44px;border-radius:13px}
  .val h3{margin-top:14px}
}