/* ==========================================================================
   nosotros.html — estilos exclusivos de esta página.
   Reutiliza tokens.css, fonts.css, hero.css (Header, botones, tipografías)
   y home.css (.ks-container, .eyebrow, .section-title, .section-text,
   .reveal, .card-hover, .metodologia-*, .diferenciales-*, .cta-*,
   .site-footer, .service-points). Aquí solo se agregan los layouts nuevos:
   Hero de interior, Quiénes somos, Esencia (bento) y Enfoque comparativo.
   ========================================================================== */

/* ---------- Hero de interior (Acerca de Nosotros) ---------- */
.about-hero{position:relative;min-height:clamp(640px,78vh,760px);display:flex;align-items:center;padding-top:calc(88px + 4vw);padding-bottom:clamp(48px,6vw,72px)}
.about-hero .bg-texture-overlay{background:rgba(250,249,245,0.92)}

.about-hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}

.about-hero-content .eyebrow{margin-bottom:18px}
.about-hero-content h1.section-title{font-size:clamp(34px,4.4vw,54px);margin-bottom:20px}
.about-hero-content .section-text{max-width:520px;margin-bottom:28px;font-size:clamp(15.5px,1.1vw,18px)}

.about-hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px}

.founded-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:0.02em;color:var(--ks-graphite);background:var(--ks-white);border:1px solid var(--ks-line);border-radius:999px;padding:9px 18px 9px 14px}
.founded-badge-dot{width:7px;height:7px;border-radius:999px;background:var(--ks-red);flex-shrink:0}

.about-hero-visual{position:relative}
.about-hero-shape{position:absolute;width:82%;height:82%;border-radius:32px;z-index:0;top:-20px;left:-20px;background:var(--ks-yellow)}
.about-hero-frame{position:relative;z-index:1;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/5}
.about-hero-frame img{width:100%;height:100%;object-fit:cover;display:block}

@media (min-width:768px){
  .about-hero-grid{grid-template-columns:0.96fr 1.08fr;gap:56px}
  .about-hero-content{order:1}
  .about-hero-visual{order:2}
}

/* ---------- Quiénes somos ---------- */
.quienes-somos{background:var(--ks-white)}
.quienes-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}

.quienes-visual{position:relative}
.quienes-frame{position:relative;z-index:1;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/5}
.quienes-frame img{width:100%;height:100%;object-fit:cover;display:block}
.quienes-dot{position:absolute;width:16px;height:16px;border-radius:999px;background:var(--ks-yellow);top:-10px;right:28px;z-index:2}
.quienes-line{position:absolute;bottom:-18px;left:24px;width:60px;height:3px;background:var(--ks-red);border-radius:999px;z-index:2}

.quienes-content .section-text + .section-text{margin-top:14px;color:var(--ks-graphite)}

.mini-blocks{margin-top:28px;display:flex;flex-direction:column;gap:22px}
.mini-block{padding-left:18px;border-left:3px solid var(--ks-red)}
.mini-block:nth-child(2){border-left-color:var(--ks-orange)}
.mini-block h3{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ks-black);margin:0 0 6px;letter-spacing:-0.005em}
.mini-block p{font-family:var(--font-body);font-size:14.5px;line-height:1.6;color:var(--text-secondary);margin:0}

.quienes-content .service-link{margin-top:28px}

@media (min-width:768px){
  .quienes-grid{grid-template-columns:1fr 1fr;gap:56px}
}

/* ---------- Esencia: propósito, visión y principios ---------- */
.esencia{background:var(--ks-ivory)}
.esencia .bg-texture-overlay{background:rgba(250,249,245,0.94)}

.esencia-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}
.esencia-card{background:var(--ks-white);border:1px solid var(--ks-line);border-radius:26px;box-shadow:var(--shadow-sm);padding:clamp(24px,3vw,36px)}
.esencia-card .eyebrow{margin-bottom:12px}
.esencia-card h3{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2vw,26px);color:var(--ks-black);margin:0 0 12px;letter-spacing:-0.005em}
.esencia-card p{font-family:var(--font-body);font-size:15px;line-height:1.65;color:var(--text-secondary);margin:0}

.principios-grid{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:14px}
.principio{display:flex;align-items:flex-start;gap:12px;background:var(--ks-white);border:1px solid var(--ks-line);border-radius:18px;padding:18px 20px}
.principio-dot{width:9px;height:9px;border-radius:999px;flex-shrink:0;margin-top:6px}
.principio p{font-family:var(--font-body);font-weight:500;font-size:14.5px;line-height:1.5;color:var(--ks-graphite);margin:0}

@media (min-width:768px){
  .esencia-grid{grid-template-columns:1.4fr 1fr}
  .principios-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .principios-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Nuestro enfoque ---------- */
.enfoque{background:var(--ks-white)}
.enfoque-intro{max-width:680px;margin:0 0 48px}

.enfoque-grid{display:grid;grid-template-columns:1fr;gap:40px}
.enfoque-col.is-secondary{padding-top:32px;border-top:1px solid var(--ks-line)}
.enfoque-col .service-tag{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ks-red);margin-bottom:12px}
.enfoque-col.is-secondary .service-tag{color:var(--ks-orange)}
.enfoque-col h3{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.4vw,30px);color:var(--ks-black);margin:0 0 18px;letter-spacing:-0.01em}
.enfoque-col.is-secondary h3{font-size:clamp(19px,1.9vw,24px)}

@media (min-width:768px){
  .enfoque-grid{grid-template-columns:1.3fr 1fr}
  .enfoque-col.is-secondary{padding-top:0;padding-left:40px;border-top:none;border-left:1px solid var(--ks-line)}
}

/* ---------- Compromisos de trabajo ---------- */
.compromisos{background:var(--ks-surface)}

/* ---------- Footer: estado activo ---------- */
.footer-nav a[aria-current="page"]{color:var(--ks-red)}