/*
Theme Name: NovaGex Blocksy Child
Template:   blocksy
Author:     NovaGex
Version:    1.0
*/

/* ============================================================
   NOVAGEX — Blocksy Child v1.0
   Prefijo: ngx-  para evitar conflictos con Blocksy/WooCommerce
   Tokens portados del sitio estático (tema "laboratorio de élite")
   ============================================================ */

:root {
  --ngx-bg:      #0A1628;
  --ngx-bg2:     #0E1E38;
  --ngx-bg3:     #162448;
  --ngx-bg4:     #1C2E54;
  --ngx-ink:     #F2E8CC;
  --ngx-ink2:    #D4C9A8;
  --ngx-soft:    #8A9DC0;
  --ngx-gold:    #C9A84C;
  --ngx-gold2:   #E8C76A;
  --ngx-line:    rgba(201,168,76,0.12);
  --ngx-line2:   rgba(201,168,76,0.22);
  --ngx-navy:    #060E1E;
  --ngx-r:       6px;
  --ngx-r2:      10px;
  --ngx-sh1:     0 2px 8px rgba(0,0,0,0.3);
  --ngx-sh2:     0 8px 32px rgba(0,0,0,0.4);
  --ngx-sh3:     0 24px 64px rgba(0,0,0,0.5);
  --ngx-display: "Figtree", system-ui, sans-serif;
  --ngx-sans:    "Noto Sans", system-ui, sans-serif;
}

/* ── Base oscura ── */
body {
  background: var(--ngx-bg);
  color: var(--ngx-ink);
  font-family: var(--ngx-sans);
}
h1,h2,h3,h4,.entry-title { font-family: var(--ngx-display); color: var(--ngx-ink); }
a { color: var(--ngx-gold); }
a:hover { color: var(--ngx-gold2); }

/* ── Botón "Agregar al carrito" / CTAs WooCommerce ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  background: var(--ngx-gold) !important;
  color: #0A1628 !important;
  border-radius: var(--ngx-r) !important;
  font-family: var(--ngx-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover { background: var(--ngx-gold2) !important; }

/* ── Tarjetas de producto (tienda) ── */
.woocommerce ul.products li.product,
.wc-block-grid__product {
  background: var(--ngx-bg2);
  border: 1px solid var(--ngx-line);
  border-radius: var(--ngx-r2);
  overflow: hidden;
}
.woocommerce ul.products li.product .price { color: var(--ngx-gold2); }

/* ── Precio en ficha de producto ── */
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ngx-gold2); font-family: var(--ngx-display); }

/* ============================================================
   FICHA DE PRODUCTO (PDP) — single-product.php
   ============================================================ */
.ngx-pdp { background: var(--ngx-bg); color: var(--ngx-ink); padding: 32px 0 80px; }
.ngx-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Breadcrumb */
.ngx-breadcrumb { font-family: var(--ngx-sans); font-size: 12.5px; color: var(--ngx-soft); margin-bottom: 28px; }
.ngx-breadcrumb a { color: var(--ngx-soft); text-decoration: none; }
.ngx-breadcrumb a:hover { color: var(--ngx-gold2); }
.ngx-breadcrumb span { margin: 0 4px; }
.ngx-bc-current { color: var(--ngx-ink2); }

/* Grid principal */
.ngx-pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .ngx-pdp-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ── Galería ── */
.ngx-gallery { position: sticky; top: 100px; }
@media (max-width: 900px) { .ngx-gallery { position: static; } }
.ngx-main-img {
  position: relative; background: var(--ngx-bg2); border: 1px solid var(--ngx-line);
  border-radius: var(--ngx-r2); aspect-ratio: 1/1; display: flex; align-items: center;
  justify-content: center; overflow: hidden; padding: 32px;
}
.ngx-main-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 14px 36px rgba(0,0,0,0.35)); }
.ngx-stamp, .ngx-sku-badge {
  position: absolute; font-family: var(--ngx-sans); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ngx-soft);
}
.ngx-stamp { top: 18px; left: 18px; }
.ngx-sku-badge { bottom: 18px; right: 18px; color: var(--ngx-ink2); }
.ngx-badge-stock {
  position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--ngx-gold); color: #0A1628; padding: 4px 10px; border-radius: 999px;
  font-family: var(--ngx-sans); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
}
.ngx-badge-stock.ngx-out { background: #7C3AED; color: #fff; }
.ngx-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.ngx-thumb {
  aspect-ratio: 1/1; background: var(--ngx-bg3); border: 1px solid var(--ngx-line);
  border-radius: var(--ngx-r); cursor: pointer; overflow: hidden; display: flex;
  align-items: center; justify-content: center; padding: 8px; transition: border-color 0.15s;
}
.ngx-thumb:hover { border-color: var(--ngx-line2); }
.ngx-thumb.active { border-color: var(--ngx-gold); border-width: 2px; }
.ngx-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ── Info ── */
.ngx-cat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ngx-cat-tag { font-family: var(--ngx-sans); font-size: 10px; letter-spacing: 0.18em; color: var(--ngx-gold2); text-transform: uppercase; }
.ngx-badge-ruo { font-family: var(--ngx-sans); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(201,168,76,0.12); color: var(--ngx-gold2); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ngx-line2); }
.ngx-title { font-family: var(--ngx-display); font-size: clamp(34px, 4.5vw, 56px); font-weight: 600;
  line-height: 1.0; letter-spacing: -0.015em; color: var(--ngx-ink); margin: 0 0 14px; }
.ngx-lead { font-size: 15px; color: var(--ngx-soft); line-height: 1.7; margin-bottom: 26px; max-width: 480px; }

.ngx-price-row { padding: 20px 0; border-top: 1px solid var(--ngx-line); border-bottom: 1px solid var(--ngx-line); margin-bottom: 24px; }
.ngx-price-label { font-family: var(--ngx-sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ngx-soft); display: block; margin-bottom: 6px; }
.ngx-price { font-family: var(--ngx-display); font-size: 40px; line-height: 1; color: var(--ngx-gold2); }
.ngx-price .amount, .ngx-price bdi { color: var(--ngx-gold2); }
.ngx-price-tbd { font-size: 26px; color: var(--ngx-ink2); }
.ngx-price-meta { display: block; margin-top: 8px; font-family: var(--ngx-sans); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ngx-soft); }

.ngx-buy { margin-bottom: 18px; }
.ngx-buy .quantity input { background: var(--ngx-bg3); border: 1px solid var(--ngx-line2); color: var(--ngx-ink); border-radius: var(--ngx-r); padding: 10px; }
.ngx-buy .single_add_to_cart_button { width: 100%; padding: 15px 24px !important; font-size: 15px !important; }

.ngx-secondary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.ngx-btn-outline {
  flex: 1; min-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border: 1px solid var(--ngx-line2); border-radius: var(--ngx-r);
  background: transparent; color: var(--ngx-ink2); font-family: var(--ngx-display); font-weight: 600;
  font-size: 13px; text-decoration: none; transition: all 0.15s;
}
.ngx-btn-outline:hover { border-color: var(--ngx-gold); color: var(--ngx-gold2); }

.ngx-warn { background: rgba(201,168,76,0.06); border: 1px solid var(--ngx-line); border-left: 3px solid var(--ngx-gold);
  border-radius: var(--ngx-r); padding: 14px 16px; font-size: 13px; color: var(--ngx-soft); line-height: 1.6; }
.ngx-warn strong { color: var(--ngx-gold2); }

/* ── Detalle (tabs) ── */
.ngx-detail { margin-top: 64px; }
.ngx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ngx-line); margin-bottom: 28px; }
.ngx-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--ngx-soft);
  font-family: var(--ngx-display); font-weight: 600; font-size: 14px; padding: 12px 18px; cursor: pointer; }
.ngx-tab.active { color: var(--ngx-gold2); border-bottom-color: var(--ngx-gold); }
.ngx-panel { color: var(--ngx-ink2); line-height: 1.8; font-size: 15px; max-width: 820px; }
.ngx-panel h3 { font-family: var(--ngx-display); color: var(--ngx-ink); margin: 24px 0 10px; }
.ngx-panel ul { padding-left: 20px; } .ngx-panel li { margin-bottom: 6px; }
.ngx-hidden { display: none; }
.ngx-specs-table { width: 100%; border-collapse: collapse; }
.ngx-specs-table th, .ngx-specs-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--ngx-line); font-size: 14px; }
.ngx-specs-table th { color: var(--ngx-soft); font-weight: 600; width: 42%; font-family: var(--ngx-sans); }
.ngx-specs-table td { color: var(--ngx-ink); }

/* ── Relacionados ── */
.ngx-related { margin-top: 72px; }
.ngx-related-title { font-family: var(--ngx-display); font-size: 26px; color: var(--ngx-ink); margin-bottom: 24px; }
.ngx-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 800px) { .ngx-related-grid { grid-template-columns: repeat(2, 1fr); } }
.ngx-rel-card { background: var(--ngx-bg2); border: 1px solid var(--ngx-line); border-radius: var(--ngx-r2);
  overflow: hidden; text-decoration: none; display: block; transition: border-color 0.15s, transform 0.15s; }
.ngx-rel-card:hover { border-color: var(--ngx-line2); transform: translateY(-3px); }
.ngx-rel-img { aspect-ratio: 1/1; background: var(--ngx-bg3); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ngx-rel-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ngx-rel-body { padding: 14px 16px; }
.ngx-rel-name { font-family: var(--ngx-display); font-size: 15px; color: var(--ngx-ink); margin: 0 0 6px; }
.ngx-rel-price { color: var(--ngx-gold2); font-family: var(--ngx-display); font-size: 15px; }

/* ============================================================
   NAV + FOOTER compartidos (plantillas standalone: legal, etc.)
   ============================================================ */
.ngx-nav{background:rgba(10,22,40,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--ngx-line);position:sticky;top:0;z-index:100}
.ngx-nav-in{max-width:1200px;margin:0 auto;padding:0 24px;height:70px;display:flex;align-items:center;justify-content:space-between}
.ngx-nav-logo img{height:42px;width:auto}
.ngx-nav-logo span{font-family:var(--ngx-display);font-weight:800;font-size:20px;color:var(--ngx-ink)}
.ngx-nav-logo span em{color:var(--ngx-gold);font-style:normal}
.ngx-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.ngx-nav ul a{font-size:13px;font-weight:600;color:var(--ngx-soft);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;transition:.2s}
.ngx-nav ul a:hover,.ngx-nav ul a.active{color:var(--ngx-ink);border-bottom-color:var(--ngx-gold)}
.ngx-nav-wa{background:var(--ngx-gold);color:#0A1628;font-family:var(--ngx-display);font-weight:700;font-size:13px;padding:9px 18px;border-radius:6px;text-decoration:none}
.ngx-foot{background:#060E1E;border-top:1px solid var(--ngx-line);padding:40px 0 22px}
.ngx-foot .ngx-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.ngx-foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:28px}
@media(max-width:700px){.ngx-foot-grid{grid-template-columns:1fr}}
.ngx-foot h4{font-family:var(--ngx-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ngx-gold);margin-bottom:12px}
.ngx-foot ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin:0;padding:0}
.ngx-foot a,.ngx-foot p{font-size:12.5px;color:var(--ngx-soft);line-height:1.7;text-decoration:none}
.ngx-foot a:hover{color:var(--ngx-gold2)}
.ngx-foot-bottom{border-top:1px solid var(--ngx-line);padding-top:18px;font-size:11px;color:var(--ngx-soft)}

/* ============================================================
   PÁGINAS LEGALES (page-legal.php, page-politica-ruo.php, etc.)
   ============================================================ */
.ngx-legal{background:var(--ngx-bg);color:var(--ngx-ink2);padding:56px 0 80px}
.ngx-legal .ngx-wrap,.ngx-legal-in{max-width:820px;margin:0 auto;padding:0 24px}
.ngx-legal .lbadge{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ngx-gold2);border:1px solid var(--ngx-line2);border-radius:20px;padding:5px 13px;margin-bottom:16px}
.ngx-legal h1{font-family:var(--ngx-display);font-size:clamp(30px,4.5vw,46px);font-weight:600;color:var(--ngx-ink);line-height:1.08;margin-bottom:10px}
.ngx-legal .lmeta{font-size:12.5px;color:var(--ngx-soft);margin-bottom:32px;padding-bottom:22px;border-bottom:1px solid var(--ngx-line)}
.ngx-legal h2{font-family:var(--ngx-display);font-size:21px;font-weight:600;color:var(--ngx-gold2);margin:34px 0 12px}
.ngx-legal h3{font-family:var(--ngx-display);font-size:17px;color:var(--ngx-ink);margin:22px 0 10px}
.ngx-legal p{font-size:14.5px;line-height:1.8;margin-bottom:14px}
.ngx-legal ul,.ngx-legal ol{margin:0 0 16px;padding-left:22px}
.ngx-legal li{font-size:14.5px;line-height:1.75;margin-bottom:9px}
.ngx-legal strong{color:var(--ngx-ink)}
.ngx-legal a{color:var(--ngx-gold2)}
.ngx-legal .lnote{background:rgba(201,168,76,.06);border:1px solid var(--ngx-line);border-left:3px solid var(--ngx-gold);border-radius:var(--ngx-r);padding:16px 18px;margin:22px 0}
.ngx-legal table{width:100%;border-collapse:collapse;margin:16px 0}
.ngx-legal th,.ngx-legal td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--ngx-line);font-size:14px}
.ngx-legal th{color:var(--ngx-soft)}

/* ============================================================
   PDP — insignias de confianza, pestañas múltiples, FAQ
   ============================================================ */
.ngx-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
@media (max-width: 480px) { .ngx-trust { grid-template-columns: 1fr; } }
.ngx-trust-i { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: var(--ngx-bg2); border: 1px solid var(--ngx-line); border-radius: var(--ngx-r2); }
.ngx-trust-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: rgba(201,168,76,.1); color: var(--ngx-gold2); display: flex; align-items: center; justify-content: center; }
.ngx-trust-i > span:last-child { display: flex; flex-direction: column; }
.ngx-trust-i strong { font-family: var(--ngx-display); font-size: 12.5px; color: var(--ngx-ink); line-height: 1.25; }
.ngx-trust-i small { font-size: 10.5px; color: var(--ngx-soft); }

.ngx-tabs { overflow-x: auto; }
.ngx-panel .ngx-muted { color: var(--ngx-soft); font-size: 12.5px; font-style: italic; margin-top: 10px; }

.ngx-faq { margin-top: 64px; max-width: 820px; }
.ngx-faq-title { font-family: var(--ngx-display); font-size: 28px; color: var(--ngx-ink); margin-bottom: 22px; }
.ngx-faq-item { border-bottom: 1px solid var(--ngx-line); }
.ngx-faq-q { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; text-align: left; font-family: var(--ngx-display); font-size: 15.5px; font-weight: 600; color: var(--ngx-ink); }
.ngx-faq-plus { flex-shrink: 0; color: var(--ngx-gold2); font-size: 22px; line-height: 1; transition: transform .2s; }
.ngx-faq-item.open .ngx-faq-plus { transform: rotate(45deg); }
.ngx-faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.ngx-faq-item.open .ngx-faq-a { max-height: 400px; }
.ngx-faq-a p { color: var(--ngx-soft); font-size: 14px; line-height: 1.75; padding: 0 0 18px; margin: 0; }

/* ── FAQ centrado + tablas/contenido dentro de las pestañas ── */
.ngx-faq { margin-left: auto; margin-right: auto; }
.ngx-faq-title { text-align: center; }
.ngx-related-title { text-align: center; }
.ngx-panel table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.ngx-panel th, .ngx-panel td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ngx-line); font-size: 13.5px; color: var(--ngx-ink2); }
.ngx-panel th { color: var(--ngx-soft); font-weight: 600; }
.ngx-panel h4 { font-family: var(--ngx-display); color: var(--ngx-ink); font-size: 15px; margin: 20px 0 8px; }

/* ── COA/Ficha: bloques de descarga ── */
.ngx-coa-block { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--ngx-bg2); border: 1px solid var(--ngx-line2); border-radius: var(--ngx-r2); margin-bottom: 10px; }
.ngx-coa-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 8px; background: rgba(201,168,76,.1); color: var(--ngx-gold2); font-family: var(--ngx-display); font-size: 11px; font-weight: 700; letter-spacing: .05em; display: flex; align-items: center; justify-content: center; }
.ngx-coa-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ngx-coa-meta strong { font-family: var(--ngx-display); font-size: 13.5px; color: var(--ngx-ink); }
.ngx-coa-meta small { font-size: 11.5px; color: var(--ngx-soft); }
.ngx-coa-btn { flex-shrink: 0; background: var(--ngx-gold); color: #0A1628; font-family: var(--ngx-display); font-weight: 700; font-size: 12.5px; padding: 9px 16px; border-radius: var(--ngx-r); text-decoration: none; white-space: nowrap; }
.ngx-coa-btn:hover { background: var(--ngx-gold2); color: #0A1628; }
@media (max-width: 520px) { .ngx-coa-block { flex-wrap: wrap; } .ngx-coa-btn { margin-left: 56px; } }

/* ── Tabla de especificaciones extraída (td:first-child = etiqueta) ── */
.ngx-panel table td:first-child { color: var(--ngx-soft); font-family: var(--ngx-display); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; width: 42%; vertical-align: top; }
.ngx-panel table td:last-child { color: var(--ngx-ink2); }