/*
 * Producto — CSS propio, portado LITERALMENTE del standalone aprobado
 * (MPC Producto standalone.html, <style> del <head>). No normalizar ni
 * "mejorar" valores: ante cualquier diferencia visual, el standalone gana.
 *
 * Sólo va aquí lo que el standalone de producto trae y que NO existe ya en
 * style.css (reset, tokens, topbar, header/nav, mega-menú, menú móvil, footer,
 * .btn, .wrap, .mont, .ghost, .band y las media queries de la Home): esas
 * reglas compartidas no se re-declaran, para no romper la cabecera ni el pie
 * de las otras 4 secciones.
 */

/* Afinación de la Home que este standalone cambia: el diseñador bajó los
   botones a 13px y volvió a anclar el CTA del header a 13.5px para que la
   cabecera (compartida con las 5 secciones) no cambie. */
.btn { font-size:13px; }
.nav-cta { font-size:13.5px; }

/* Galería */
.hero-grid { display:grid; grid-template-columns:1.02fr 1fr; gap:64px; align-items:start; }
#main-shot { display:block; width:100%; height:430px; background-color:#1D1D1D; background-size:cover; background-position:center; }
.thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.thumb { height:92px; border:0; cursor:pointer; padding:0; background-color:#1D1D1D; background-size:cover; background-position:center; opacity:.62; outline:1px solid #333; outline-offset:-1px; transition:opacity .2s ease; }
.thumb.on { opacity:1; outline:3px solid #CD2122; }

/* Barra de respaldo */
.assure-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.assure { display:flex; gap:13px; align-items:flex-start; padding:0 28px; border-left:1px solid rgba(255,255,255,.16); }
.assure:first-child { padding-left:0; border-left:0; }

/* Pestañas */
.detail-grid { display:grid; grid-template-columns:1fr 330px; gap:56px; align-items:start; }
.tabbar { display:flex; gap:0; border-bottom:2px solid #E6E6E6; margin-bottom:34px; flex-wrap:wrap; }
.tabbtn { padding:14px 22px; border:0; background:transparent; cursor:pointer; font-family:Montserrat,sans-serif; font-weight:700; font-size:13px; letter-spacing:.9px; text-transform:uppercase; color:#6E6E6E; border-bottom:3px solid transparent; margin-bottom:-2px; }
.tabbtn.on { color:#141414; border-bottom-color:#CD2122; }
.tabpanel { display:none; }
/* 25-oct: al abrir la ficha con el ancla de una pestaña (#donde-se-usa…), el
   JS baja hasta las pestañas o la sección del acordeón; este margen las deja
   debajo del header fijo, como .cat-sec en el catálogo. No cambia un píxel. */
.tabbar, .m-acc > div { scroll-margin-top:120px; }
.tabpanel.on { display:block; }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table tr { border-bottom:1px solid #E6E6E6; }
.spec-table tr:nth-child(odd) { background:#F5F5F5; }
.spec-table th { text-align:left; padding:15px 20px; font-family:Montserrat,sans-serif; font-weight:700; font-size:13.5px; color:#141414; width:40%; vertical-align:top; }
.spec-table td { padding:15px 20px; font-size:14.5px; color:#4A4A4A; line-height:1.55; }
.uses-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.use-card { background:#F5F5F5; padding:26px 24px; border-bottom:3px solid #E1E1E1; }
.use-card:hover { border-bottom-color:#CD2122; }
.kit-ul { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:2px 26px; }
.kit-ul li { display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-bottom:1px solid #EDEDED; font-size:14.5px; color:#3A3A3A; line-height:1.5; }
.aside { position:sticky; top:24px; display:flex; flex-direction:column; gap:18px; }

/* Panel lateral: hover del botón "WhatsApp técnico" — pasado de
   onmouseover/onmouseout en línea (como en el standalone) a CSS, mismo
   patrón que .band-cta-solid/.band-cta-ghost en style.css. El !important es
   necesario porque el color base sigue viniendo de un style="" en línea. */
.wa-tech:hover { background:#34495E !important; color:#fff !important; }

/* Tabla de códigos (23-oct) — NO viene del standalone: sección añadida para
   los productos que se piden por código. Mismos tipos y colores que
   .spec-table. Más ancha que la pantalla, se desplaza dentro de .cod-wrap y la
   primera columna se queda fija para no perder el rótulo de la fila. */
.cod-wrap { overflow-x:auto; }
.cod-table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.cod-table th, .cod-table td { padding:13px 18px; text-align:left; white-space:nowrap; }
.cod-table th { font-family:Montserrat,sans-serif; font-weight:700; font-size:13.5px; color:#141414; }
.cod-table thead th { border-bottom:2px solid #141414; }
.cod-table tbody tr { border-bottom:1px solid #E6E6E6; }
.cod-table tbody tr:nth-child(odd) { background:#F5F5F5; }
.cod-table td { font-size:14.5px; color:#4A4A4A; }
.cod-table th:first-child { position:sticky; left:0; background:#fff; }
.cod-table tbody tr:nth-child(odd) th { background:#F5F5F5; }

/* Paquetes (standalone del 1-oct) */
.pack-tabs { display:none; }
.pack-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:24px; align-items:stretch; }
.pack { background:#34495E; color:#fff; border-top:4px solid #CD2122; padding:34px 30px 36px; display:flex; flex-direction:column; }
.pack ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.pack > ul { margin-top:22px; gap:10px; font-size:14.5px; line-height:1.5; color:#E4EAF0; }
.pack li { display:flex; gap:12px; }
.pack li::before { content:""; width:5px; height:5px; background:#CD2122; flex:0 0 5px; margin-top:8px; }
.pack li > span { display:flex; flex-direction:column; gap:8px; }
.pack li ul { gap:6px; color:#C9D4DF; }
.pack li li { gap:10px; }
.pack li li::before { background:transparent; border:1px solid #FF6B6B; }
.pack-cta { margin-top:auto; padding-top:28px; font-family:Montserrat,sans-serif; font-weight:700; font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:#fff; }
.pack-cta:hover { color:#FF6B6B; }
.pack-tab { min-height:44px; border:0; cursor:pointer; background:#fff; color:#3A3A3A; font-family:Montserrat,sans-serif; font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; }
.pack-tab.on { background:#CD2122; color:#fff; }

/* Comparativa → «Soluciones similares» (R7.12) */
.fam-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.fam { display:flex; flex-direction:column; padding:26px 24px; min-height:250px; background:#fff; color:#141414; border-top:4px solid #E1E1E1; }
.fam.cur { background:#34495E; color:#fff; border-top-color:#CD2122; }

/* R7.14 — Con foto, la tarjeta deja de llevar el relleno en el propio enlace y
   lo pasa a un cuerpo interior: la banda de la imagen tiene que ir de borde a
   borde, como en `.rel`. Misma altura (150px) y mismo encuadre que la tarjeta
   de «Complementa tu solución», para que los dos bloques de producto de la
   ficha se lean como hermanos y no como dos diseños distintos.
   El relleno se anula aquí, después de la regla de arriba, en vez de quitarlo
   de ella: así la declaración original del diseño queda a la vista y se ve de
   un vistazo qué cambió y por qué. */
.fam { padding:0; }
.fam-shot { display:block; width:100%; height:150px; background-color:#F0F0F0; background-position:center; background-size:cover; }
.fam-body { display:flex; flex-direction:column; flex:1; padding:26px 24px; }
.fam .badge { display:inline-block; align-self:flex-start; padding:5px 11px; font-family:Montserrat,sans-serif; font-weight:700; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; background:#F0F0F0; color:#5B5B5B; }
.fam.cur .badge { background:#CD2122; color:#fff; }

/* Relacionados */
.rel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.rel { display:flex; flex-direction:column; background:#fff; border:1px solid #E6E6E6; color:#141414; }
.rel:hover { border-color:#CD2122; color:#141414; }

/* Acordeón y barra CTA (solo móvil) */
.m-acc { display:none; }
.m-acc-btn { display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 18px; background:#fff; border:0; cursor:pointer; color:#141414; font-family:"Open Sans",sans-serif; }
.m-acc-btn.on { background:#F5F5F5; }
.m-acc-sub { display:none; padding:0 18px 18px; flex-direction:column; }
.m-acc-sub.open { display:flex; }
.m-acc-sub .krow { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid #F0F0F0; font-size:13px; line-height:1.45; }
.m-bar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; background:#0D0D0D; border-top:1px solid #2A2A2A; padding:12px 16px 16px; gap:10px; }

/* ══ Responsive (según frames móviles aprobados) ══ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns:1fr; gap:30px; }
  #main-shot { height:240px; }
  .thumb { height:64px; }
  h1 { font-size:34px !important; letter-spacing:-1px !important; }
  section h2 { font-size:26px !important; letter-spacing:-.7px !important; }
  .assure-grid { grid-template-columns:1fr; gap:14px; }
  .assure { padding:0 !important; border-left:0 !important; }
  .detail-grid { grid-template-columns:1fr; gap:38px; }
  .aside { position:static; }
  .tabbar, .tabpanel { display:none !important; }
  .m-acc { display:block; border-top:2px solid #141414; }
  .uses-grid, .kit-ul, .fam-grid, .rel-grid { grid-template-columns:1fr; }
  .fam { min-height:0; }
  .pack-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#E1E1E1; padding:2px; margin-bottom:16px; }
  .pack { display:none; padding:22px 20px 24px; }
  .pack.on { display:flex; }
  .pack > ul { font-size:13.5px; }
  .pack-sec { padding-top:56px !important; padding-bottom:60px !important; }
  .cod-sec { padding-bottom:60px !important; }
  .cod-table th, .cod-table td { padding:12px 10px; }
  .m-bar { display:flex; }
  body { padding-bottom:84px; }
}