/* ==========================================================
   V8 · Sobre nosotros (15-10) — se carga después de v8.css y unidad.css.
   Página corporativa: fondo azul de la portada; --u blanco (en <html>) = acento del hero y banda de cifras.
   ========================================================== */

/* Acento blanco en las secciones azules (en la portada lo pone v8.js; aquí no hay JS de acento):
   sin esto, kicker, número en trazo y botones quedaban del mismo azul del fondo.
   Las secciones claras (.tono-claro) vuelven al azul en v8.css. */
:root { --c-accent: var(--u, #FFFFFF); --on-accent: #0956F5; --accent-ink: #FFFFFF; }

/* Historia: año grande sobre cada etapa (en la portada era la línea de tiempo horizontal) */
.era-f__year { margin: 0 0 .5rem; font: 600 clamp(2.6rem, 1.6rem + 3vw, 4.6rem)/.9 var(--ff-title); text-transform: uppercase; color: var(--fg); }
/* Fotos sin la franja blanca del borde izquierdo (15-10, pedido del usuario) */
.feature__media::after { display: none; }

/* Presencia: mapa con las dos oficinas + fichas al lado */
.pres { display: grid; gap: 1.25rem; }
.pres__map { position: relative; min-height: 420px; border-radius: 20px; overflow: hidden; border: 1px solid var(--rule); background: var(--map-bg); }
.pres__map .map, .pres__map .map.maplibregl-map { position: absolute; inset: 0; background: var(--map-bg); }
.pres__map .map__fallback { color: var(--map-ink-2); }
.pres__map .map__legend { color: var(--map-ink-3); }
.pres__map .map__hint { color: var(--map-ink-2); }
.pres__sites { display: grid; gap: 1rem; align-content: start; }
.pres__site { padding: 1.5rem; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--rule); border-left: 3px solid var(--c-accent); transition: box-shadow .3s var(--ease, ease), border-color .3s; }
.pres__site.is-active { box-shadow: 0 0 0 2px var(--c-accent); }
.pres__n { margin: 0 0 .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.pres__site h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); text-transform: uppercase; margin-bottom: .6rem; }
.pres__site p:not(.pres__n) { color: var(--fg-2); font-size: .97rem; }
.pres__site address { font-style: normal; font-weight: 600; color: var(--fg); margin: .25rem 0 1rem; }
.pres__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.pres__acts .btn { min-height: 42px; font-size: .9rem; }
.pres__link { font-weight: 600; color: var(--c-accent); text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .pres { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .pres__map { min-height: 560px; }
}

/* Pilares: título intermedio + 4 tarjetas */
.pilares__title { margin: clamp(3rem, 7vw, 5rem) 0 1.5rem; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); text-transform: uppercase; }
@media (min-width: 700px) { #pilares .pillars__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { #pilares .pillars__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }