/**
 * Página Sobre nosotros (pages/about-us.php): Empresa y Cronograma.
 * Origen: about-us.html (valores exactos). Se carga solo en esa plantilla.
 *
 * @package silomasters
 */

/* =====================================================
   EMPRESA
   ===================================================== */
.empresa-copy p{margin-bottom:16px;}
.empresa-copy p:last-child{margin-bottom:0;}

/* 26px en todos los anchos (estilo en línea en el mockup) */
.empresa-subtitle{font-size:26px;}

.about-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media(max-width:900px){ .about-cards{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .about-cards{grid-template-columns:1fr;} }

/* .about-card* y su variante compacta están en style.css ("TARJETAS"). */

.check-list li{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; font-size:15px; color:var(--text-secondary); line-height:1.5;}
.check-list li .material-symbols-outlined{color:var(--orange); font-size:20px; flex-shrink:0; margin-top:1px;}
.check-list li:last-child{margin-bottom:0;}

/* =====================================================
   CRONOGRAMA (js/timeline.js)
   Sin JS: lista vertical con todos los hitos.
   Con JS (.is-enhanced): tira de años + un único panel visible, como el mockup.
   ===================================================== */
.timeline-widget{max-width:1080px; margin-left:auto; margin-right:auto;}

/* ---- tarjeta de hito (común a los dos modos) ---- */
.timeline-panel{
  display:flex; align-items:center; gap:40px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:44px 48px;
  opacity:1; transform:translateY(0); transition:opacity .28s ease, transform .28s ease;
}
.timeline-panel[hidden]{display:none;}
.timeline-panel.switching{opacity:0; transform:translateY(10px);}
.timeline-panel:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}
.timeline-panel-year{font-family:var(--display); font-weight:900; font-size:clamp(44px,6vw,72px); line-height:1; color:var(--orange); flex-shrink:0;}
.timeline-panel-divider-v{width:1px; align-self:stretch; background:var(--border); flex-shrink:0;}
.timeline-panel-count{font-family:var(--label); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:8px;}
.timeline-panel-desc{font-size:15.5px; line-height:1.65; color:var(--text-secondary); max-width:52ch;}

/* ---- sin JS: lista vertical (reset explícito: sin JS no hay preflight de Tailwind CDN) ---- */
.timeline-list{display:flex; flex-direction:column; gap:16px; list-style:none; margin:0; padding:0;}

/* ---- con JS: selector de años (valores del mockup; line-height normal del <button> del mockup,
   que el preflight de Tailwind cambia por `font:inherit`) ---- */
.timeline-widget.is-enhanced .timeline-list{display:block;}
.timeline-widget.is-enhanced .timeline-panel{margin-top:32px;}

.timeline-nav-wrap{
  position:relative; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
  mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.timeline-nav-wrap.is-dragging{cursor:grabbing;}
.timeline-nav-wrap::-webkit-scrollbar{display:none;}
.timeline-nav-line{position:absolute; left:24px; right:24px; top:24px; height:2px; background:var(--border); z-index:0;}
.timeline-nav{position:relative; z-index:1; display:flex; align-items:flex-start; gap:38px; width:max-content; padding:0 24px;}
.timeline-year-btn{
  position:relative; background:none; border:none; cursor:pointer; padding:36px 2px 0; min-width:44px;
  font-family:var(--display); font-weight:700; font-size:15px; line-height:normal; color:var(--text-secondary);
  transition:color .25s ease, font-size .25s ease;
}
.timeline-year-btn::before{
  content:''; position:absolute; left:50%; top:16px; transform:translate(-50%,0);
  width:12px; height:12px; border-radius:50%; background:var(--white); border:2px solid var(--border);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.timeline-year-btn:hover{color:var(--text);}
.timeline-year-btn:hover::before{border-color:var(--orange);}
.timeline-year-btn.active{color:var(--orange); font-size:19px;}
.timeline-year-btn.active::before{background:var(--orange); border-color:var(--orange); transform:translate(-50%,0) scale(1.15);}
/* foco dentro del botón: la tira recorta lo que sobresale */
.timeline-year-btn:focus-visible{outline:2px solid var(--orange); outline-offset:-2px; border-radius:var(--r-sm);}

@media(max-width:720px){
  .timeline-panel{flex-direction:column; align-items:flex-start; gap:16px; padding:28px 24px;}
  .timeline-panel-divider-v{width:100%; height:1px;}
  .timeline-panel-year{font-size:40px;}
  .timeline-nav-line{top:24px;}
}

/* =====================================================
   CALIDAD
   La rejilla se hace con utilidades Tailwind en la plantilla.
   ===================================================== */
/* reset explícito: sin JS no hay preflight de Tailwind CDN */
.cert-list{list-style:none; margin-left:0; margin-right:0; margin-bottom:0; padding:0;}
.cert-card{background:var(--white); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.cert-card:hover{transform:translateY(-6px); border-color:var(--orange); box-shadow:0 24px 40px -16px rgba(22,22,22,.22);}
.cert-card-media{aspect-ratio:4/3; background:var(--bg-tint); overflow:hidden;}
.cert-card-media img{width:100%; height:100%; object-fit:cover; display:block;}
.cert-card-name{padding:16px 18px 20px; font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text); text-align:center; line-height:1.5;}

/* =====================================================
   MOVIMIENTO REDUCIDO
   ===================================================== */
@media(prefers-reduced-motion: reduce){
  .timeline-panel,
  .timeline-year-btn,
  .timeline-year-btn::before,
  .cert-card{transition:none;}
  .cert-card:hover{transform:none;}
}