/* ============================================================
   QUIÉNES SOMOS PAGE — estilos específicos de quienes-somos.html
   Reutiliza tokens/componentes de style.css, animations.css,
   responsive.css y services.css (.page-hero, .page-hero-grid,
   .split-media, .tag-pill, .cta-banner base, etc. ya existen ahí
   y no se redefinen aquí).
   ============================================================ */

/* ---------- 1. CHIPS FLOTANTES SOBRE LA IMAGEN DEL HERO ---------- */
.split-media{position:relative}
.statement-chip{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:.75rem;
  background:var(--white);border:var(--border);box-shadow:var(--shadow-md);
  padding:.85rem 1.1rem;
  animation:statementCardFloat 7s ease-in-out infinite;
}
.statement-chip b{display:block;font-family:var(--font-mono);font-size:1.15rem;color:var(--navy);line-height:1}
.statement-chip span{display:block;font-size:.72rem;color:var(--text-muted);margin-top:.2rem}
.statement-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;position:relative}
.statement-chip-dot::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid var(--green);animation:pulseDot 1.8s ease-in-out infinite;
}

.statement-chip--1{left:-1.25rem;bottom:22%;animation-delay:0s}
.statement-chip--2{right:-1rem;top:14%;animation-delay:1.2s}

@media (max-width:960px){
  .statement-chip{padding:.7rem .9rem}
  .statement-chip--1{left:.75rem;bottom:-1rem}
  .statement-chip--2{right:.75rem;top:-1rem}
}
@media (max-width:640px){
  .statement-chip b{font-size:1rem}
  .statement-chip span{font-size:.66rem}
}


/* ---------- 2. NUESTRA HISTORIA — split con letra "G" de fondo ---------- */
.about-story-section{position:relative;overflow:hidden}
.split-g{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:800;line-height:1;
  font-size:min(34vw,460px);color:var(--blue-primary);opacity:.08;
  left:-2.5rem;top:50%;transform:translateY(-50%);
}
.about-story{
  position:relative;z-index:1;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-xl);align-items:start;
}
.about-story .section-head{margin-bottom:0}
.about-story-copy{display:flex;flex-direction:column;gap:1.1rem}
.about-story-copy p{color:var(--text-muted);line-height:1.7}

@media (max-width:960px){
  .about-story{grid-template-columns:1fr;gap:var(--space-md)}
  .split-g{font-size:60vw;left:50%;top:6%;transform:translateX(-50%)}
}


/* ---------- 3. MISIÓN Y VALORES ---------- */
.about-values-grid{grid-template-columns:repeat(3,1fr)}
.about-value-card{
  background:var(--white);border:var(--border);padding:var(--space-md);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.about-value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.about-value-icon{
  width:48px;height:48px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-900);color:var(--green);
  margin-bottom:1.1rem;
}
.about-value-card h3{font-size:1.15rem;margin-bottom:.55rem;color:var(--navy)}
.about-value-card p{color:var(--text-muted);line-height:1.55;font-size:.94rem}

@media (max-width:960px){.about-values-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.about-values-grid{grid-template-columns:1fr}}


/* ---------- 4. EQUIPO ---------- */
.about-team-grid{grid-template-columns:repeat(4,1fr)}
.about-team-card{
  background:var(--grey-50);border:var(--border);padding:var(--space-md);
  text-align:center;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.about-team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);background:var(--white)}
.about-team-icon{
  width:56px;height:56px;margin:0 auto 1.1rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,102,0,.08);color:var(--blue-primary);
}
.about-team-card h3{font-size:1.05rem;margin-bottom:.5rem;color:var(--navy)}
.about-team-card p{color:var(--text-muted);line-height:1.55;font-size:.9rem}

@media (max-width:960px){.about-team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.about-team-grid{grid-template-columns:1fr}}


/* ---------- 5. TESTIMONIOS ---------- */
.testimonials-section{background:var(--grey-50)}
.testimonials-layout{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-xl);align-items:start}
.testimonials-head{position:sticky;top:110px}
.testimonials-head h2{margin-top:.5rem;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.15;color:var(--navy)}
.testimonials-underline{display:block;width:56px;height:3px;background:var(--green);margin:1.15rem 0}
.testimonials-head p{color:var(--text-muted);max-width:320px;line-height:1.6}

.testimonial-stack{display:flex;flex-direction:column;gap:1.5rem}
.testimonial-slide{background:var(--white);border:var(--border);padding:var(--space-lg)}
.testimonial-slide-quote{font-style:italic;color:var(--text-muted);line-height:1.7;font-size:1rem}
.testimonial-slide-author{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.75rem;flex-wrap:wrap}
.testimonial-slide-name{font-weight:700;color:var(--navy);margin-bottom:.15rem}
.testimonial-slide-role{color:var(--text-muted);font-size:.9rem}
.testimonial-slide-logo{height:32px;width:auto;max-width:140px;object-fit:contain;flex-shrink:0}
.testimonial-slide-logo--dark{background:var(--navy-900);padding:.5rem .75rem}

@media (max-width:960px){
  .testimonials-layout{grid-template-columns:1fr;gap:var(--space-md)}
  .testimonials-head{position:static}
}
@media (max-width:640px){
  .testimonial-slide-author{flex-direction:column;align-items:flex-start;gap:.85rem}
}


/* ---------- 6. CTA BANNER (ancho completo, con letra "G" gigante) ---------- */
.cta-banner{
  position:relative;overflow:hidden;
  background:var(--gradient-brand);
  padding-block:var(--space-2xl);
  min-height:280px;display:flex;align-items:center;
}
.cta-banner > *{position:relative;z-index:1}
.cta-banner-g{
  position:absolute;left:-1.5rem;bottom:-4rem;z-index:0;
  font-family:var(--font-display);font-weight:800;line-height:1;
  font-size:min(26vw,320px);color:var(--white);opacity:.14;
  pointer-events:none;user-select:none;
}
.cta-banner-inner{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-md);flex-wrap:wrap;color:var(--white);
}
.cta-banner-inner h2{color:var(--white)}
.cta-banner-inner p{color:rgba(255,255,255,.8)}
@media (max-width:960px){
  .cta-banner-inner{flex-direction:column;text-align:center}
}
@media (max-width:640px){
  .cta-banner-g{font-size:min(55vw,260px);left:-1rem;bottom:-2.5rem}
}


/* ---------- 7. FOOTER — variante de columnas de esta página
   (usa .footer-links-col en vez de .footer-col; se define aquí
   por si el archivo global todavía no lo cubre) ---------- */
.footer-links-col h4{color:var(--white);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1rem}
.footer-links-col a{display:block;color:rgba(255,255,255,.65);font-size:.92rem;margin-bottom:.65rem;transition:color var(--t-fast)}
.footer-links-col a:hover{color:var(--white)}


/* ---------- 8. UTILIDADES DE ESTA PÁGINA (evitar scroll horizontal) ---------- */
html,body{overflow-x:hidden;max-width:100vw}