/**
 * Página Fabricación (pages/manufacturing.php).
 * Origen: manufacturing.html (valores exactos). Se carga solo en esa plantilla.
 * Las tarjetas (.about-card) y la rejilla (.feature-cards) están en style.css.
 *
 * @package silomasters
 */

/* =====================================================
   CIFRAS DE LA PLANTA (tarjetas con contador: js/counters.js)
   ===================================================== */
.stat-card{text-align:left;}
.stat-card-num{font-family:var(--display); font-weight:900; font-size:clamp(40px,4.5vw,56px); line-height:1; color:var(--orange); margin-bottom:12px;}
.stat-card h3{font-size:16px; text-transform:none;}

/* =====================================================
   PROCESO
   El margin-top:48px del mockup va anulado en línea: aquí no se declara.
   ===================================================== */
/* reset explícito de la lista: sin JS no hay preflight de Tailwind CDN */
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; list-style:none; margin:0; padding:0;}
@media(max-width:1000px){ .process-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .process-grid{grid-template-columns:1fr;} }
.process-step{background:var(--white); border:1px solid var(--border); border-radius:10px; padding:26px 22px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.process-step:hover{transform:translateY(-6px); border-color:var(--orange); box-shadow:0 24px 40px -16px rgba(22,22,22,.22);}
.process-step-num{font-family:var(--display); font-weight:900; font-size:34px; line-height:1; color:var(--orange);}
.process-step h3{font-size:18px; margin-top:14px;}
.process-step p{font-size:13.5px; line-height:1.55; margin-top:8px;}

/* =====================================================
   VÍDEO CORPORATIVO (fachada de YouTube: js/youtube-facade.js)
   ===================================================== */
.video-frame{position:relative; border-radius:10px; overflow:hidden; background:var(--graphite); aspect-ratio:16/9; margin-top:48px;}

.video-facade{position:absolute; inset:0; display:block; color:var(--white); text-decoration:none;}
.video-facade img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.video-facade-play{
  position:absolute; left:50%; top:50%; width:84px; height:84px; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--orange); color:var(--white);
  box-shadow:0 18px 36px -12px rgba(0,0,0,.55);
  transition:transform .25s ease, background .25s ease;
}
.video-facade-play .material-symbols-outlined{font-size:46px;}
.video-facade:hover .video-facade-play,
.video-facade:focus-visible .video-facade-play{background:var(--orange-dark); transform:translate(-50%,-50%) scale(1.08);}
/* foco dentro del marco (overflow:hidden recorta lo que sobresale) */
.video-facade:focus-visible{outline:3px solid var(--orange); outline-offset:-3px;}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
@media(max-width:560px){
  .video-facade-play{width:64px; height:64px;}
  .video-facade-play .material-symbols-outlined{font-size:36px;}
}

@media(prefers-reduced-motion: reduce){
  .process-step,
  .video-facade-play{transition:none;}
  .process-step:hover{transform:none;}
  .video-facade:hover .video-facade-play,
  .video-facade:focus-visible .video-facade-play{transform:translate(-50%,-50%);}
}