/* On Instance | Sobre nosotros
   Guardar en public/css/about.css
   Reutiliza la paleta y los componentes existentes de styles.css. */

.about-hero { padding-bottom: 70px; }
.about-hero-label { margin: 40px 0 30px; }
.about-hero .display { max-width: 1150px; }
.about-hero-description { max-width: 835px !important; }
.about-hero-actions { margin-top: 30px; }
.about-hero-actions .btn-outline { border-color: #898f97; color: #fff; }
.about-hero-actions .btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.about-hero-facts {
    margin-top: 75px; padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.25);
    display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 25px;
}
.about-hero-facts div { display: flex; flex-direction: column; gap: 10px; }
.about-hero-facts .mono { color: #b0b7c0; }
.about-hero-facts strong { font-size: clamp(1.15rem, 2.2vw, 2rem); line-height: 1.3; letter-spacing: -.04em; }
.about-hero-facts div:first-child strong { color: var(--gold); }
.about-story-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(35px, 6vw, 95px); }
.about-story-grid .heading { margin-bottom: 32px; }
.about-story-grid .muted { margin-top: 20px; }
.about-history-mark {
    align-self: start; position: sticky; top: 120px;
    background: var(--charcoal); color: #fff; min-height: 320px;
    padding: 36px; display: flex; flex-direction: column; justify-content: space-between;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                      linear-gradient(90deg,rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 36px 36px;
}
.about-history-mark > .mono { color: #bdc3c9; }
.about-history-mark strong { display: block; font-size: clamp(4.5rem, 10vw, 9rem); letter-spacing: -.095em; line-height: 1; }
.about-history-rule { width: 100%; height: 1px; background: #6c737d; }
.about-timeline-card { padding: 32px; min-height: 270px; border-top: 3px solid var(--gold); }
.about-timeline-card .mono { color: #9c7517; }
.about-timeline-card h3 { font-size: 1.35rem; line-height: 1.25; margin: 38px 0 14px; letter-spacing: -.025em; }
.about-timeline-card p { color: var(--gray); line-height: 1.7; margin: 0; }
.about-belief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px, 6vw, 95px); }
.about-belief-grid p { line-height: 1.8; color: #c3c7cc; }
.about-belief-grid .about-belief-lede { color: #fff; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.55; margin-top: 0; }
.about-belief-grid .heading { max-width: 625px; }
.about-principle .mono { color: #a0710e; }
.about-principle h3 { margin-top: 30px; }
.about-service-card { padding: 29px; position: relative; min-height: 270px; display: flex; flex-direction: column; }
.about-service-card .mono { color: #9a741a; }
.about-service-card h3 { font-size: 1.35rem; line-height: 1.3; margin: 35px 0 12px; letter-spacing: -.03em; }
.about-service-card p { color: var(--gray); line-height: 1.65; margin: 0 0 32px; }
.about-service-arrow { display: block; margin-top: auto; align-self: flex-end; font-size: 1.6rem; font-weight: 700; }
.about-service-card:hover .about-service-arrow { color: #9a741a; }
.about-work-flow p { color: #c3c7cc; line-height: 1.65; margin: 10px 0 0; }
.about-work-flow .flow-item { min-height: 200px; }
.about-final { border-top: 1px solid #50545a; }
.about-final .cta p:last-child { line-height: 1.8; max-width: 680px; }
@media (max-width: 900px) {
    .about-story-grid, .about-belief-grid { grid-template-columns: 1fr; }
    .about-history-mark { position: static; min-height: 240px; }
    .about-hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .about-hero { padding-bottom: 55px; }
    .about-hero-label { margin-top: 30px; }
    .about-hero-facts { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
    .about-hero-facts div { padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.13); }
    .about-hero-facts strong { font-size: 1.35rem; }
    .about-history-mark { padding: 26px; }
    .about-timeline-card { min-height: auto; }
}