/* ============================================================
   ABOUT — sección sobre María, con foto flush-bottom
   ============================================================ */

.about { background: var(--photo-bg); padding-bottom: 0; overflow: hidden }

.about-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 3rem;
  align-items: end;
}

.about-text { padding: 5rem 0 }

.about-photo { align-self: end; display: flex; justify-content: center }
.about-photo img { width: 100%; max-width: 400px; height: auto; display: block; vertical-align: bottom }

.about h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 600; color: var(--ink) }
.about h2 em { font-style: normal; color: var(--gold-600) }

.about p { color: var(--slate); font-size: 1.06rem; margin-top: 1.1rem }

.about .sig {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  color: var(--ink);
  margin-top: 1.4rem;
}
.about .sig span {
  display: block;
  font-family: 'Inter';
  font-size: .85rem;
  color: var(--gold-600);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

.guarantee {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--mist);
  border: 1px solid var(--line);
  padding: .7rem 1.2rem;
  border-radius: 999px;
  font-size: .9rem;
  color: var(--ink);
  margin-top: 1.6rem;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; text-align: center }
  .about-text { padding: 4rem 0 1.5rem }
  .about-photo img { max-width: 300px; margin: 0 auto }
}