/**
 * Ficha de producto (single-producto.php).
 * Origen: #s-product y #s-tabs de silo.html (valores exactos). Se carga solo
 * con is_singular( 'producto' ).
 * Globales usados aquí (style.css): .product-media, .btn-outline,
 * .spec-table, .product-cta-row, .section--flush-top y .sr-only.
 *
 * @package silomasters
 */

/* =====================================================
   FICHA
   Hueco del header fijo: los cortes de 1040px del mockup pasan al
   breakpoint del header (1199.98px), como en el Hero interior.
   ===================================================== */
.product-fiche{padding-top:164px;}
@media(max-width:1199.98px){ .product-fiche{padding-top:132px;} }
@media(max-width:720px){ .product-fiche{padding-top:112px;} }

/* migas de pan (Yoast) */
.product-breadcrumb{font-family:var(--label); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:28px;}
.product-breadcrumb a{color:var(--text-secondary); text-decoration:none; transition:color .2s ease;}
.product-breadcrumb a:hover{color:var(--orange);}
.product-breadcrumb a:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

.product-category{
  font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--orange); margin-top:10px;
}
.product-copy .lede{margin-top:14px; max-width:520px;}

/* datos clave (<dl>): el icono va dentro del <dt> (un <div> de <dl> solo admite dt/dd)
   y se coloca a la izquierda de etiqueta y valor, centrado, como el flex del mockup */
.product-facts{display:flex; flex-direction:column; gap:16px; margin:28px 0 0;}
.product-fact{position:relative; display:flex; flex-direction:column; justify-content:center; min-height:34px; padding-left:46px;}
.product-fact .material-symbols-outlined{position:absolute; left:0; top:50%; transform:translateY(-50%); color:var(--orange); font-size:34px;}
.product-fact-label{font-family:var(--label); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary);}
.product-fact-value{font-size:14.5px; font-weight:600; color:var(--text); margin:2px 0 0;}

/* .product-cta-row: global (style.css), también en la ficha de caso de éxito */

/* =====================================================
   PESTAÑAS (js/tabs.js)
   Sin JS: .tabs-nav oculta (hidden) y los tres paneles seguidos.
   Con JS: .tabs.is-enhanced, nav visible y paneles inactivos con hidden.
   ===================================================== */
.tabs-nav{display:flex; gap:0; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:40px;}
.tabs-nav[hidden]{display:none;}
.tabs-nav button{
  background:none; border:none; padding:14px 0; margin-right:32px;
  font-family:var(--sans); font-weight:700; font-size:15px; color:var(--text-secondary);
  border-bottom:2px solid transparent; cursor:pointer; transition:color .2s ease, border-color .2s ease;
}
.tabs-nav button:hover{color:var(--text);}
.tabs-nav button.active{color:var(--text); border-bottom-color:var(--orange);}
.tabs-nav button:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

.tabs-panel:focus-visible{outline:2px solid var(--orange); outline-offset:6px;}
/* sin JS: separación entre paneles consecutivos */
.tabs:not(.is-enhanced) .tabs-panel + .tabs-panel{margin-top:56px;}

.tabs-panel h2{font-size:26px;}
.tabs-panel h3{font-size:16px; text-transform:none; margin-top:28px;}
.tabs-panel .lede{margin-top:14px; max-width:none;}
.tabs-panel p{margin-top:14px; font-size:15px; line-height:1.7;}
/* párrafo pegado a su h3 (estilo en línea en el mockup) */
.tabs-panel .tabs-text-tight{margin-top:8px;}

/* reset explícito de las listas: sin JS no hay preflight de Tailwind CDN */
.tabs-list,
.doc-list{margin-bottom:0; padding:0; list-style:none;}
.tabs-list{margin-top:14px;}
.tabs-list li{font-size:14.5px; color:var(--text-secondary); padding:9px 0; border-bottom:1px solid var(--border);}
.tabs-list li:last-child{border-bottom:none;}

/* .spec-table: global (style.css), también en la ficha de caso de éxito */

/* documentos */
.doc-list{margin-top:8px;}
.doc-list li{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--border);
}
.doc-list li:first-child{border-top:1px solid var(--border);}
.doc-item{display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--text); font-weight:600;}
.doc-item .material-symbols-outlined{color:var(--orange); flex-shrink:0;}
.doc-link{
  font-family:var(--label); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-secondary); display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  text-decoration:none; transition:color .2s ease;
}
.doc-link .material-symbols-outlined{font-size:15px;}
.doc-link:hover{color:var(--orange);}
.doc-link:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

@media(prefers-reduced-motion: reduce){
  .product-breadcrumb a,
  .tabs-nav button,
  .doc-link{transition:none;}
}