/* =============================================================================
   Mento Agency · sobre-nosotros.css (solo /sobre-nosotros/)
   Se carga después de sitio.css. Clases propias con prefijo .sn-
   Bloques de color de la página: durazno (héroe) · crema (banda de nombres) ·
   navy (expertise) · crema (equipo) · amarillo (por qué Mento) · navy (clientes) ·
   azul (contacto).

   01 Héroe: durazno, foto del equipo en arco, sello y caras que llevan al equipo
   02 Banda de nombres (cruza del durazno al navy)
   03 Expertise: filas editoriales con icono en arco
   04 Equipo: Miguel destacado + siete tarjetas (.person de sitio.css)
   05 Por qué Mento: garantía + tres pilares + cifras
   06 Movimiento
   07 Responsive
   ========================================================================== */


/* ---------- 01 Héroe ----------------------------------------------------- */
/* --sn-medio = distancia del borde superior de .band-wrap a la mitad de la banda:
   el héroe crece esa altura por abajo y la banda sube lo mismo, así su eje cae justo
   en el cambio de color durazno -> navy. */
.sn-hero,.sn-band{--sn-band-fs:clamp(1.4rem,3vw,2.6rem);--sn-medio:calc(1.75rem + 1rem + 2px + .6 * var(--sn-band-fs))}
.sn-hero{padding-bottom:calc(clamp(2.75rem,4.5vw,4.25rem) + var(--sn-medio))}
.sn-hero .page-hero-m{fill:var(--amarillo);width:min(70vw,1020px);right:-19%;top:6%}
.sn-hero .kicker{margin-top:1.5rem}
.sn-hero .display-2 .thin{letter-spacing:-.04em}
/* El subrayado de "digital." en crema: el durazno de .hl no se vería sobre durazno */
.sn-hero .hl::after{background:var(--crema)}
.sn-hero .lead{max-width:31em}
.sn-hero .actions{gap:1rem 1.75rem}

/* Caras del equipo: enlace a #equipo con los ocho retratos en miniatura */
.sn-caras{display:inline-flex;align-items:center;gap:.9rem;min-height:48px;color:var(--navy);text-decoration:none;font-weight:600;border-radius:var(--r-pill)}
.sn-caras-fotos{display:flex;padding-left:3px}
.cara{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--crema-200);box-shadow:0 0 0 2.5px var(--durazno);flex:none}
.cara + .cara{margin-left:-13px}
/* Recorte al rostro: el retrato es horizontal (417×311) con la cabeza arriba al centro */
.cara img{position:absolute;max-width:none;width:230%;height:auto;left:-65%;top:-8%}
.sn-caras-txt{display:inline-flex;align-items:center;gap:.35rem;border-bottom:2px solid currentColor;padding-bottom:.1rem;line-height:1.3}
.sn-caras-txt .ico{width:18px;height:18px;transition:transform .2s}
.sn-caras:hover .sn-caras-txt .ico{transform:translateY(3px)}

/* Foto del equipo: arco grande con sombra navy, sello encima y pie de foto */
.sn-foto{max-width:520px}
.sn-foto .arch{--off:20px}
.sn-foto .arch img{object-position:50% 70%}
.sn-foto figcaption{margin-top:calc(20px + .9rem);font-size:var(--fs-xs);font-weight:500;color:var(--navy);text-align:right;padding-right:20px}
.sn-foto .sticker{left:-11%;top:auto;bottom:15%;width:clamp(112px,11.5vw,156px)}
.sn-st-num{fill:#fff;font:800 54px var(--font);letter-spacing:-.04em}
/* Tableta (una columna): la m vive dentro de la figura y asoma a la derecha de la foto */
.sn-foto{isolation:isolate}
.sn-foto-m{display:none;position:absolute;z-index:-1;left:52%;top:6%;width:112%;aspect-ratio:277/188;fill:var(--amarillo);pointer-events:none}


/* ---------- 02 Banda de nombres ------------------------------------------ */
.sn-band{margin-top:calc(-1 * var(--sn-medio));background:linear-gradient(to bottom,transparent 0,transparent var(--sn-medio),var(--navy) 0);--focus:var(--amarillo)}
.sn-band .band{background:var(--crema)}
/* El control queda sobre navy: blanco */
.sn-band .motion-toggle{color:#fff;border-color:rgba(255,255,255,.8)}
.sn-band .motion-toggle:hover{background:rgba(255,255,255,.12)}


/* ---------- 03 Expertise ------------------------------------------------- */
.sn-expertise{overflow:hidden;padding-top:clamp(2.5rem,5vw,4.5rem)}
.sn-expertise .wrap{position:relative}
.sn-exp-m{position:absolute;left:-14%;bottom:-24%;width:min(78vw,1000px);aspect-ratio:277/188;fill:rgba(255,255,255,.045);pointer-events:none}
.sn-exp{margin-top:clamp(2.5rem,5vw,4rem);border-bottom:1.5px solid rgba(255,255,255,.22)}
.sn-exp li{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,19rem);align-items:center;gap:.75rem clamp(1.25rem,3vw,3rem);padding:clamp(1.1rem,2vw,1.6rem) 0;border-top:1.5px solid rgba(255,255,255,.22)}
.sn-exp-ico{width:62px;height:76px;border-radius:var(--r-arch);display:grid;place-items:center;background:var(--x);color:var(--x-ink);flex:none}
.sn-exp-ico .ico{width:28px;height:28px}
.sn-exp h3{font-size:clamp(1.85rem,4.8vw,4.5rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:#fff}
.sn-exp p{font-size:1.0625rem;line-height:1.5;color:var(--crema)}
.x-amarillo{--x:var(--amarillo);--x-ink:var(--navy)}
.x-durazno{--x:var(--durazno);--x-ink:var(--navy)}
.x-azul{--x:var(--azul);--x-ink:#fff}
.x-crema{--x:var(--crema);--x-ink:var(--navy)}


/* ---------- 04 Equipo ---------------------------------------------------- */
/* Diez columnas: Miguel ocupa cuatro y tres tarjetas completan la primera fila; las otras cuatro van centradas debajo */
.sn-team{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3.25rem clamp(1rem,1.8vw,1.75rem)}
.sn-team > .person:nth-child(n){grid-column:span 2}
.sn-team > .person:nth-child(5){grid-column:2 / span 2}
.sn-team .p-arch{aspect-ratio:4/5}

/* Tarjeta destacada: bloque navy (el color del área CEO) con el retrato en arco */
.sn-team > .person.sn-lider{grid-column:span 4;position:relative;overflow:hidden;isolation:isolate;--ac:var(--amarillo);background:var(--navy);color:#fff;border-radius:var(--r-card);padding:1.25rem;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto auto;column-gap:1.25rem;align-items:end}
.sn-lider-m{position:absolute;z-index:-1;right:-30%;top:-6%;width:105%;aspect-ratio:277/188;fill:var(--azul);opacity:.5;pointer-events:none}
.sn-lider .p-arch{grid-column:1;grid-row:1 / -1;align-self:end;aspect-ratio:4/5;margin-right:10px}
.sn-lider > .area,.sn-lider > h3,.sn-lider > .role,.sn-lider > .bio{grid-column:2}
.sn-lider > .area{grid-row:2;justify-self:start;background:transparent;color:#fff;border-color:#fff}
.sn-lider > h3{grid-row:3;color:#fff;font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.sn-lider > .role{grid-row:4;color:var(--amarillo);min-height:0}
.sn-lider > .bio{grid-row:5;color:var(--crema)}
.sn-lider:hover .p-arch{box-shadow:12px 16px 0 var(--ac)}


/* ---------- 05 Por qué Mento --------------------------------------------- */
/* La garantía es la razón principal (bloque navy grande); los tres pilares a su lado */
.sn-razones{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(.9rem,1.6vw,1.4rem)}
.sn-garantia{grid-row:span 3;position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-card);padding:clamp(1.75rem,3.5vw,3.25rem);display:flex;flex-direction:column;align-items:flex-start;container-type:inline-size}
.sn-garantia-m{position:absolute;z-index:-1;right:-34%;bottom:-30%;width:110%;aspect-ratio:277/188;fill:rgba(255,255,255,.06);pointer-events:none}
.sn-garantia-h{color:#fff;line-height:.8;padding-right:clamp(5rem,30cqi,10rem)}
.sn-garantia .giant{font-size:clamp(4.25rem,27cqi,10rem)}
.sn-garantia .giant-sub{font-size:clamp(1.75rem,8.5cqi,3.4rem);color:var(--amarillo)}
.sn-garantia .sticker{position:absolute;right:clamp(1rem,4cqi,2.25rem);top:clamp(1rem,4cqi,2.25rem);width:clamp(96px,24cqi,160px);transform:rotate(12deg)}
.sn-promesa{font-size:clamp(1.3rem,5.4cqi,2rem);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:auto 0 1.75rem;padding-top:2.5rem;max-width:16em}
.sn-pilar{border-radius:var(--r-card);padding:clamp(1.35rem,2.4vw,2rem);display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.1rem;align-items:start;align-content:center}
.sn-pilar .p-ico{grid-row:span 2}
.sn-pilar h3{font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--titulo,var(--navy))}
.sn-pilar p{font-size:var(--fs-sm);line-height:1.5}

/* Cifras: números grandes con filete superior, sin moneda en 300M+ (pendiente de Mento) */
.sn-cifras{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem clamp(1rem,2.5vw,2.5rem)}
.sn-cifras li{border-top:2px solid var(--navy);padding-top:1.1rem;display:flex;flex-direction:column;container-type:inline-size;min-width:0}
.sn-cifras strong{font-size:clamp(2.6rem,29cqi,6rem);font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--navy)}
.sn-cifras span{font-size:var(--fs-sm);font-weight:600;line-height:1.3;margin-top:.55rem}


/* ---------- 06 Movimiento ------------------------------------------------ */
/* Todo parte de un estado visible; con movimiento reducido no hay nada de esto. */
@media (prefers-reduced-motion: no-preference){
  .sn-foto .arch{animation:rise 1s cubic-bezier(.2,.8,.2,1) .15s both;--from:28px}
  .sn-foto .sticker{animation:stamp 1.1s cubic-bezier(.3,1.3,.5,1) .6s both}
  .cara{animation:pop .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.55s + var(--n, 0) * 60ms)}
}


/* ---------- 07 Responsive ------------------------------------------------ */
@media (max-width:1180px){
  /* Miguel pasa a una franja a todo el ancho; las otras siete en filas de 4 + 3 (la de tres, centrada) */
  .sn-team{grid-template-columns:repeat(8,minmax(0,1fr))}
  .sn-team > .person:nth-child(5){grid-column:auto / span 2}
  .sn-team > .person:nth-child(6){grid-column:2 / span 2}
  .sn-team > .person.sn-lider{grid-column:1 / -1;grid-template-columns:minmax(0,15rem) minmax(0,1fr);padding:clamp(1.25rem,3vw,2.25rem)}
  .sn-lider > h3{font-size:clamp(1.9rem,4vw,2.75rem)}
  .sn-lider > .bio{max-width:26em;font-size:1rem}
  /* La m queda a la derecha de la columna de texto: el nombre y la bio no cruzan sus patas */
  .sn-lider-m{width:46%;right:-14%;top:-8%}
}
@media (max-width:1099px){
  .sn-razones{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .sn-hero .page-hero-m{display:none}
  .sn-foto-m{display:block}
  .sn-foto{margin-top:.5rem;max-width:420px}
  .sn-foto .sticker{left:-4%}
  .sn-exp li{grid-template-columns:auto minmax(0,1fr);row-gap:.35rem}
  .sn-exp p{grid-column:2}
  /* Tres tarjetas por fila, como el equipo del inicio; la última (una persona) va centrada */
  .sn-team{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sn-team > .person:not(.sn-lider),.sn-team > .person:nth-child(5),.sn-team > .person:nth-child(6){grid-column:auto / span 2}
  .sn-team > .person:nth-child(8){grid-column:3 / span 2}
  .sn-razones{grid-template-columns:1fr}
  .sn-garantia{grid-row:auto}
  .sn-cifras{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.25rem}
}
@media (max-width:640px){
  /* El equipo sube justo debajo del H1, como en el inicio: personas en el primer pantallazo */
  .sn-hero .page-hero-grid{gap:0}
  .sn-hero-copy{display:contents}
  .sn-hero .migas{order:1}
  .sn-hero .kicker{order:2;justify-self:start;font-size:.6875rem;letter-spacing:.06em}
  .sn-hero .display-2{order:3}
  .sn-foto{order:4;justify-self:start;width:calc(100% - 20px);max-width:400px;margin:.5rem 20px 2.25rem 0}
  .sn-hero .lead{order:5}
  .sn-hero .actions{order:6;flex-direction:column;align-items:stretch}
  .sn-caras{flex-wrap:wrap;justify-content:center;row-gap:.5rem;padding-block:.25rem}
  .sn-foto .sticker{left:auto;right:-14px;top:-26px;bottom:auto;width:104px}
  .sn-foto-m{display:none}
  .sn-foto figcaption{text-align:left;padding-right:0}
  .sn-exp-ico{width:50px;height:62px}
  .sn-exp-ico .ico{width:24px;height:24px}
  .sn-exp li{column-gap:1rem}
  /* Una columna: tarjetas horizontales (sitio.css); la de Miguel en su bloque navy */
  .sn-team{grid-template-columns:1fr;gap:2.25rem}
  .sn-team > .person:nth-child(n){grid-column:auto}
  .sn-team > .person.sn-lider{grid-column:1 / -1;grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto;column-gap:1.25rem;padding:1.25rem 1.25rem 1.5rem;align-items:start}
  .sn-lider .p-arch{grid-row:1 / span 4;align-self:start;aspect-ratio:4/5;margin-right:8px}
  .sn-lider > .area{grid-row:1;margin-top:.25rem}
  .sn-lider > h3{grid-row:2;font-size:1.375rem}
  .sn-lider > .role{grid-row:3}
  .sn-lider > .bio{grid-row:4;font-size:.90625rem}
  /* La m, pequeña en la esquina superior derecha: no cruza el nombre ni la bio */
  .sn-lider-m{width:clamp(110px,30%,170px);right:1rem;top:-1rem;bottom:auto}
  .sn-garantia .sticker{width:88px}
  .sn-garantia-h{padding-right:0}
  .sn-garantia .giant{font-size:clamp(3.6rem,22cqi,5rem)}
  .sn-garantia .giant-sub{font-size:clamp(1.6rem,9cqi,2.2rem)}
  .sn-garantia .btn{width:100%}
  .sn-cifras strong{font-size:clamp(2.4rem,27cqi,3.5rem)}
}
/* Teléfonos estrechos: la tarjeta de Miguel se apila (foto arriba, texto a todo el ancho) */
@media (max-width:400px){
  .sn-team > .person.sn-lider{grid-template-columns:minmax(0,1fr)}
  .sn-lider .p-arch{grid-row:auto;width:150px;margin-bottom:1.1rem}
  .sn-lider > .area,.sn-lider > h3,.sn-lider > .role,.sn-lider > .bio{grid-column:1;grid-row:auto}
  /* La m llena el hueco a la derecha de la foto y no pasa por detrás del texto */
  .sn-lider-m{width:110%;right:-62%;top:-4%;bottom:auto;opacity:.45}
}
@media (max-width:360px){
  .cara{width:34px;height:34px}
  .cara + .cara{margin-left:-12px}
  .sn-garantia .sticker{width:78px}
}