/* About — SOLO about.html (Figma 532:100)
   Reutiliza header/menú/footer de styles.css. */

/* ---- Hero About (banda rosa) ---- */
.about-hero{
  background:var(--pink-solid);
  /* Figma: banda pt 56 / pb 120 / px 80. La columna de texto añade pt 72 propio. */
  padding:56px var(--gutter) 120px;
}
.about-hero__inner{
  max-width:var(--maxw);margin:0 auto;
  /* DOM = [media, text]; row-reverse -> texto izquierda, foto derecha (como .project) */
  display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;
  gap:40px;
}

/* Columna de texto (Figma 561px, centrada, con pt 72 propio) */
.about-hero__text{
  flex:0 1 561px;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:28px;
  padding-top:72px;text-align:center;
}
.about-hero__lead{
  font-family:var(--serif);font-weight:400;
  font-size:36px;line-height:1.25;letter-spacing:1.44px;color:var(--ink);
}
.about-hero__lead .muted{color:#bdbdbd}
.about-hero__p{
  font-family:var(--grotesk);font-weight:400;
  font-size:19px;line-height:1.45;color:var(--ink);
  max-width:521px;
}
.about-hero__link{
  font-family:var(--grotesk);font-weight:700;font-size:20px;
  text-decoration:underline;text-underline-position:from-font;color:var(--ink);
}
/* Convención del sitio: link subrayado -> hover Bold Italic (aquí ya es Bold) */
.about-hero__link:hover{font-style:italic}

/* Columna imagen (Figma 585px). La foto ya viene recortada en arco con transparencia. */
.about-hero__media{
  /* encoge proporcionalmente en anchos intermedios (tablet) en vez de aplastar el texto */
  flex:0 1 585px;max-width:585px;min-width:0;
  position:relative;
}
.about-hero__photo{display:block;width:100%;height:auto}
/* Sello animado sobre la esquina superior izquierda del arco (Figma 212×194) */
.about-hero__badge{
  position:absolute;top:3%;left:-9%;
  width:212px;height:auto;pointer-events:none;
}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .about-hero{padding:48px var(--gutter) 80px}
  .about-hero__lead{font-size:30px}
  .about-hero__badge{width:180px}
}
@media (max-width:768px){
  /* Apila: foto arriba (primer hijo del DOM), texto debajo */
  .about-hero{padding:48px var(--gutter) 64px}
  .about-hero__inner{flex-direction:column;align-items:center;gap:40px}
  .about-hero__text{
    flex:none;width:100%;max-width:521px;
    padding-top:0;gap:24px;
  }
  .about-hero__media{flex:none;width:78%;max-width:340px}
  .about-hero__lead{font-size:26px;line-height:1.3;letter-spacing:1px}
  .about-hero__p{font-size:18px}
  .about-hero__badge{width:120px;top:2%;left:-6%}
}