/* =========================================================
   sc-historia.css — Nuestra Historia (page-historia.php, inc/historia.php)
   Antes iba en un <style> y en atributos style del widget HTML de Elementor.
   ========================================================= */
.historia-body{font-size:16px;line-height:1.8;color:var(--slate);max-width:64ch}
.historia-body p{margin-bottom:16px}
.historia-h2{font-size:clamp(24px,5vw,38px);text-transform:uppercase;font-weight:600;color:var(--green-ink);margin:10px 0 24px}
.staff-body{font-size:15.5px;line-height:1.75;color:var(--slate);max-width:68ch}
.staff-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:24px}
.staff-photos img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.historia-fotos{background:var(--cream);padding:0 0 56px}
.historia-eq-h2{margin-bottom:28px}
.historia-btn{margin-top:24px}
.staff-closing{background:var(--green-ink);color:#fff;padding:52px 0}
.staff-closing .lead-rule{background:rgba(255,255,255,.25)}
.staff-closing p{font-size:clamp(16px,2.6vw,20px);line-height:1.65;max-width:60ch;font-style:italic;color:rgba(255,255,255,.9)}
.staff-closing .author{font-size:13px;font-weight:600;color:rgba(255,255,255,.55);margin-top:18px;text-transform:uppercase;letter-spacing:.1em}
@media(min-width:900px){
  .staff-photos{grid-template-columns:repeat(4,1fr)}
  .staff-photos--2{grid-template-columns:repeat(2,1fr)}
  .historia-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
}

/* Línea de tiempo 2007 → actualidad (07/10/2026): imagen ancha. En móvil se desliza de lado
   conservando su tamaño legible; en escritorio se ve entera. */
.his-tl{padding:8px 0 40px}
.his-tl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.his-tl-scroll:focus-visible{outline:3px solid var(--cyan-soft);outline-offset:2px}
.his-tl-scroll img{display:block;width:1400px;max-width:none;height:auto}
.his-tl-hint{display:block;margin-top:8px;font-size:12.5px;color:var(--slate);text-align:center}
@media(min-width:900px){
  .his-tl-scroll{overflow:visible}
  .his-tl-scroll img{width:100%;max-width:100%}
  .his-tl-hint{display:none}
}