/* ============ SOBRE NOSOTROS (página María Esther) ============ */

.pe-about {
    color: var(--color-text);
}

/* ===== HERO ===== */
.pe-about__hero {
    padding-top: clamp(3rem, 1.5rem + 4vw, 6rem);
    padding-bottom: clamp(3rem, 1.5rem + 4vw, 5rem);
    background: linear-gradient(180deg, #FCEBE7 0%, #FFF7F4 60%, var(--color-bg) 100%);
    text-align: center;
}
.pe-about__eyebrow {
    font-size: var(--fs-xs);
    color: var(--color-accent-deep);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-4);
}
.pe-about__title {
    font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: var(--tracking-tighter);
    margin: 0 auto var(--space-6);
    max-width: 16ch;
}
.pe-about__title em {
    font-style: italic;
    font-weight: var(--fw-regular);
    color: var(--color-accent-deep);
}
.pe-about__lede {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
    color: var(--color-text-soft);
    line-height: 1.65;
    max-width: 62ch;
    margin: 0 auto;
}
.pe-about__lede strong {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

/* ===== SECCIONES SPLIT (foto + texto) ===== */
.pe-about__section {
    padding-top: clamp(2.5rem, 1.5rem + 3vw, 5rem);
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}
.pe-about__section--soft {
    background: var(--color-bg-soft);
}

.pe-about__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 1rem + 3vw, 5rem);
    align-items: center;
}
.pe-about__section--reverse .pe-about__split {
    grid-template-columns: 1fr 1fr;
}
.pe-about__section--reverse .pe-about__media { order: 2; }
.pe-about__section--reverse .pe-about__text  { order: 1; }

@media (max-width: 880px) {
    .pe-about__split { grid-template-columns: 1fr; gap: var(--space-8); }
    .pe-about__section--reverse .pe-about__media { order: 1; }
    .pe-about__section--reverse .pe-about__text  { order: 2; }
}

/* Bloque media (foto o placeholder) */
.pe-about__media {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: var(--color-bg-soft);
    aspect-ratio: 4/5;
}
.pe-about__media--square { aspect-ratio: 1 / 1; }
.pe-about__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pe-about__media-tag {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    background: rgba(31, 26, 24, 0.72);
    color: var(--color-bg);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--fw-medium);
}

/* Bloque texto */
.pe-about__text { max-width: 50ch; }
.pe-about__small-eyebrow {
    font-size: var(--fs-xs);
    color: var(--color-accent-deep);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-3);
}
.pe-about__h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-5);
}
.pe-about__text p,
.pe-about__narrow p {
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
    line-height: 1.75;
    color: var(--color-text-soft);
    margin: 0 0 var(--space-4);
}
.pe-about__text p:last-child,
.pe-about__narrow p:last-child { margin-bottom: 0; }

/* ===== SECCIÓN NARROW (texto centrado) ===== */
.pe-about__narrow {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.pe-about__narrow .pe-about__h2 { margin-left: auto; margin-right: auto; max-width: 18ch; }
.pe-about__narrow .pe-about__small-eyebrow { text-align: center; }
.pe-about__narrow p { text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }

/* ===== PULL QUOTE ===== */
.pe-about__quote {
    padding-top: clamp(3rem, 2rem + 3vw, 5rem);
    padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
    background: linear-gradient(180deg, var(--color-bg) 0%, #EFF7F4 100%);
}
.pe-about__quote-figure {
    margin: 0 auto;
    max-width: 820px;
    text-align: center;
    position: relative;
    padding: var(--space-6) var(--space-4);
}
.pe-about__quote-mark {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(5rem, 3rem + 6vw, 9rem);
    line-height: 0.6;
    color: var(--color-brand-mint-deep);
    margin-bottom: var(--space-2);
    opacity: 0.85;
}
.pe-about__quote-text {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    font-weight: var(--fw-medium);
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-5);
}
.pe-about__quote-text em {
    font-style: italic;
    color: var(--color-brand-mint-deep);
    font-weight: var(--fw-semibold);
}
.pe-about__quote-author {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--fw-medium);
}

/* ===== CIERRE ===== */
.pe-about__closing {
    padding-top: clamp(3rem, 2rem + 3vw, 5rem);
    padding-bottom: clamp(3rem, 2rem + 3vw, 6rem);
    text-align: center;
}
.pe-about__heart {
    font-size: 2rem;
    color: var(--color-accent-deep);
    line-height: 1;
    margin: 0 0 var(--space-4);
    animation: pe-heart-beat 2.4s ease-in-out infinite;
}
@keyframes pe-heart-beat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.pe-about__closing-text {
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
    font-weight: var(--fw-regular);
    color: var(--color-text);
    line-height: 1.35;
    max-width: 28ch;
    margin: 0 auto var(--space-4);
}
.pe-about__closing-text em {
    font-style: italic;
    color: var(--color-accent-deep);
    font-weight: var(--fw-medium);
}
.pe-about__sign {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    font-weight: var(--fw-medium);
    margin: 0 0 var(--space-8);
}
.pe-about__ctas {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}