/* Mahanse — About us (Plan 3, P2, 10-10). Va DESPUÉS de mahanse.css, que pone tokens, cabecera, pie, botones,
   Cielo, Chispa, Olas, Lienzo, equipo (.team .mate) y reseñas (.rev). Aquí solo lo propio de la About.
   Capas: @pagina:about. Orden aprobado por Fransie (W15): familia y caras → nombre → principios → medicina → biografías
   → reseñas → cierre. Sin imágenes a sangre: todo en tarjetas (K29). */
  /* @pagina:about */
  :root{color-scheme:dark}

  /* ===== cabecera de página: Cielo · Estrellas, píldora, H1 centrado y la frase de la familia (K08) ===== */
  .a-hero{padding-top:clamp(132px,15vw,196px);padding-bottom:clamp(72px,9vw,128px);text-align:center;isolation:isolate}
  .a-hero>.cielo{-webkit-mask-image:radial-gradient(ellipse 72% 56% at 50% 30%,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);
    mask-image:radial-gradient(ellipse 72% 56% at 50% 30%,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%)}
  .a-hero .in{max-width:880px;margin:0 auto}
  .a-hero .kick{display:table;margin:0 auto var(--s4)}
  .a-hero h1{font-size:clamp(36px,5.6vw,72px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
  .a-hero .lead{margin:var(--s4) auto 0;max-width:54ch;text-wrap:pretty}

  /* ===== las cuatro caras: la pieza del equipo de la home, pero cada una es un enlace a su biografía (W15) ===== */
  .a-caras{margin-top:clamp(56px,7vw,96px);text-align:left}
  .a-caras .mate{display:block;color:inherit;border-radius:18px;outline-offset:6px}
  .a-caras .mate .pic img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s ease}
  .a-caras .mate:hover .pic img{transform:scale(1.04)}
  .a-caras .mate .ver{display:inline-flex;align-items:center;gap:7px;margin-top:12px;color:var(--senal)}
  .a-caras .mate .ver svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .3s ease}
  .a-caras .mate:hover .ver svg{transform:translateY(3px)}
  /* en el móvil, las cuatro caras en dos columnas: la familia se ve de un vistazo */
  @media (max-width:680px){.a-caras .team{grid-template-columns:repeat(2,1fr);gap:14px 12px}.a-caras .mate p{display:none}.a-caras .mate b{font-size:17px}}
  .a-ayuda{display:block;margin-top:var(--s4);color:var(--niebla);text-align:center}

  /* ===== el nombre ===== */
  .a-nombre .mid{margin-bottom:0}
  .a-nombre p{font-size:clamp(15.5px,1.4vw,18px);line-height:1.72}

  /* ===== cuatro principios: tarjetas de cristal con Olas por detrás, a la altura del texto (K33) ===== */
  .a-prin{position:relative}
  .a-prin .olas{top:50%}
  .principios{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
  .principio{border-radius:20px;padding:clamp(26px,2.6vw,34px) clamp(22px,2.2vw,28px) clamp(30px,3vw,38px);
    background:linear-gradient(150deg,rgba(21,28,38,.74) 0%,rgba(10,14,20,.86) 100%);
    -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.04)}
  .principio .mn{display:block;color:var(--senal);margin-bottom:var(--s4)}
  .principio h3{font-size:clamp(21px,1.9vw,25px);margin-bottom:12px}
  .principio p{font-size:14.5px;line-height:1.66;margin:0}
  .a-cita{max-width:760px;margin:clamp(56px,7vw,96px) auto 0;text-align:center}
  .a-cita blockquote{margin:0;font-family:var(--disp);font-style:italic;font-size:clamp(21px,2.4vw,30px);line-height:1.4;color:#fff;text-wrap:balance}
  .a-cita figcaption{margin-top:var(--s3);color:var(--soft)}
  @media (max-width:1080px){.principios{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:600px){.principios{grid-template-columns:1fr}.a-prin .olas{display:none}}

  /* ===== la medicina: Lienzo con el linaje y, al lado, la respuesta de Fransie ===== */
  .a-medicina .lienzo{aspect-ratio:auto;min-height:clamp(520px,52vw,640px)}
  .a-medicina .panel-c li{grid-template-columns:20px 1fr}
  /* la respuesta de Fransie: Lienzo con las nubes detrás (como las tarjetas del CTA de la home); la pregunta en burbuja
     y la respuesta debajo, en el mismo cristal */
  .respuesta{min-height:clamp(520px,52vw,640px);aspect-ratio:auto}
  .respuesta .panel-c{width:min(100%,430px);margin-top:clamp(12px,3vw,32px)}
  .respuesta .contesta{margin:0;padding:16px 18px;border-radius:14px;background:rgba(7,9,12,.42);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:14px;line-height:1.62;color:rgba(255,255,255,.9);max-width:none}
  @media (max-width:820px){.a-medicina .duo{grid-template-columns:1fr}.a-medicina .lienzo{min-height:560px}}

  /* Cielo en cada biografía (una capa de Estrellas por persona) y en la sección del nombre, la Aurora suave */
  .bio{position:relative;isolation:isolate}
  .bio>.cielo{inset:-12% -8%}
  .a-nombre{isolation:isolate}
  .a-nombre>.cielo--suave{inset:-10% 0}

  /* ===== biografías: foto grande y texto, alternando lados. El ancla deja sitio a la cabecera fija ===== */
  .bios{display:grid;gap:clamp(72px,9vw,140px)}
  .bio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center;scroll-margin-top:112px}
  .bio:nth-child(even) .foto{order:2}
  .bio .foto{margin:0;position:relative}
  .bio .foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:20px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.8)}
  .bio .mn{display:block;color:var(--senal);margin-bottom:var(--s2)}
  .bio h3{font-size:clamp(30px,3.6vw,46px);line-height:1.08;margin-bottom:var(--s3)}
  .bio p{font-size:16px;line-height:1.72;max-width:58ch}
  .bio p.fuerte{font-family:var(--disp);font-style:italic;font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:#fff;margin-top:var(--s3)}
  .bio .subir{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s3);color:var(--niebla);transition:color .25s ease}
  .bio .subir:hover{color:#fff}
  .bio .subir svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  /* al llegar desde una cara, la foto se enciende un instante (K12: sutil) */
  @media (prefers-reduced-motion: no-preference){
    .bio:target .foto img{animation:llega 1.8s ease-out 1}
    @keyframes llega{0%{box-shadow:0 0 0 1px rgba(143,197,214,.9),0 0 60px 6px rgba(143,197,214,.35)}100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.8)}}
  }
  @media (max-width:820px){
    .bio{grid-template-columns:1fr;gap:var(--s4)}
    .bio:nth-child(even) .foto{order:0}
    .bio .foto img{aspect-ratio:1/1}
  }

  /* ===== reseñas: tres, en fila ===== */
  .a-resenas .wall{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);align-items:stretch}
  .a-resenas .rev{display:flex;flex-direction:column;margin:0}
  .a-resenas .rev .who{margin-top:auto}
  @media (max-width:980px){.a-resenas .wall{grid-template-columns:1fr;max-width:620px;margin:0 auto}}
  @media (max-width:680px){.a-resenas .wall .rev:nth-child(n+4){display:block}}

  /* ===== cierre ===== */
  .a-final{text-align:center;isolation:isolate}
  .a-final .mid{margin-bottom:0}
  .a-final .btn{margin-top:var(--s4)}

  @media (prefers-reduced-motion: no-preference){
    @supports (animation-timeline: view()){
      .a-medicina .panel-c li:nth-child(4){animation-range:entry 90% cover 52%}
      .principio,.bio .foto,.bio .txt,.a-medicina .lienzo{animation:cardIn linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
    }
  }