/* ==========================================================================
   Nosotros
   ========================================================================== */

/* ---- Historia ---------------------------------------------------------- */

.df-historia-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(40px, 6vw, 96px);
}
.df-historia-lado { position: sticky; top: calc(var(--header-h) + 40px); }
.df-historia-lado h2 { max-width: 15ch; margin-top: 18px; font-size: clamp(2.05rem, 3.7vw, 3rem); }
.df-historia-dato {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding: 22px 26px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--paper);
}
.df-historia-dato .n { color: var(--navy); font-family: var(--font-serif); font-size: 3.1rem; font-weight: 600; line-height: 1; }
.df-historia-dato .t { max-width: 28ch; color: var(--muted); font-size: .93rem; font-weight: 600; line-height: 1.45; }
.df-historia-texto p { color: var(--muted); font-size: 1.12rem; line-height: 1.78; }
.df-historia-texto p + p { margin-top: 22px; }
.df-historia-texto p:first-child { color: var(--ink); font-size: 1.3rem; line-height: 1.62; }

/* ---- Trayectoria (notch-cards con el año en la pestaña) ---------------- */

.df-hitos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.df-hito-card { --radius: 22px; }
.df-hito-cuerpo {
    position: relative;
    height: 100%;
    padding: 64px 28px 30px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(42, 47, 99, .04), 0 22px 44px -34px rgba(18, 21, 58, .5);
    transition: box-shadow .3s;
}
.df-hito-card:hover .df-hito-cuerpo { box-shadow: var(--shadow-sm); }
.df-hito-num { position: absolute; top: 20px; right: 24px; color: var(--c3); font-family: var(--font-serif); font-size: .95rem; font-weight: 600; }
.df-hito-cuerpo h3 { color: var(--navy); font-size: 1.4rem; }
.df-hito-cuerpo p { margin-top: 10px; color: var(--muted); font-size: .97rem; }
.df-hito-card .df-pill { font-size: .82rem; letter-spacing: .06em; }
.js .df-hito-card {
    opacity: 0;
    translate: 0 20px;
    transition: opacity .7s ease, translate .7s var(--ease-out);
    transition-delay: calc(var(--i, 0) * .1s);
}
.js .df-hitos.in .df-hito-card { opacity: 1; translate: none; }

/* ---- Agentes ----------------------------------------------------------- */

.df-agentes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.df-agente {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding: 36px 34px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, #fff, var(--paper));
    transition: box-shadow .3s, transform .3s var(--ease-out);
}
.df-agente:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.df-monograma-xl { width: 84px; height: 84px; border-radius: 24px; font-size: 1.85rem; box-shadow: var(--glow-navy); }
.df-agente-rol { color: var(--c4); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.df-agente h3 { margin-top: 8px; color: var(--navy); font-size: 1.6rem; }
.df-agente-cuerpo > p { margin-top: 12px; color: var(--muted); }
.df-agente-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px dashed var(--line-strong);
}
.df-agente-datos dt { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.df-agente-datos dd { margin: 4px 0 0; color: var(--navy); font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; }

/* ---- Calidad ----------------------------------------------------------- */

.df-calidad-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(40px, 6vw, 88px);
}
.df-calidad-sello {
    position: relative;
    display: grid;
    place-items: center;
    gap: 26px;
    padding: 52px 32px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 30px;
    background: #fff;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.df-calidad-sello::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: -1;
    background: repeating-radial-gradient(circle at 50% 45%, transparent 0 34px, rgba(95, 176, 201, .12) 34px 35px);
}
.df-calidad-sello img { width: 185px; height: auto; }
.df-calidad-desde { color: var(--muted); font-size: .9rem; font-weight: 600; }
.df-calidad-desde strong { display: block; color: var(--navy); font-family: var(--font-serif); font-size: 2.7rem; line-height: 1.05; }
.df-calidad-texto h2 { margin-top: 18px; font-size: clamp(2rem, 3.6vw, 2.8rem); }
.df-calidad-texto > p { margin-top: 18px; color: var(--muted); font-size: 1.06rem; }
.df-calidad-texto .df-lista-check { margin-top: 26px; }