/* Manual de aplicaciones — CSS común Quantum Imports */

:root { --azul-pizarra: #44546A; --azul-pizarra-claro: #6A7A92; --azul-pizarra-oscuro: #2E3A4D; --coral: #C85A3A; --coral-claro: #E5806A; --crema: #EDE0C8; --crema-claro: #F7EFDE; --gris-claro: #F4F5F7; --gris-borde: #E1E5EB; --texto: #2E3A4D; --texto-suave: #5A6478; --warning-bg: #2E3A4D; --warning-border: #C85A3A; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Amiko', 'Plus Jakarta Sans', -apple-system, sans-serif; color: var(--texto); background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  .navbar { background: var(--azul-pizarra); color: #fff; padding: 14px 40px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
  .navbar .brand { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; }
  .navbar .brand .accent { color: var(--coral-claro); }
  .navbar .meta { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--crema); letter-spacing: 0.5px; }
  .hero { background: linear-gradient(135deg, var(--azul-pizarra) 0%, var(--azul-pizarra-oscuro) 100%); color: #fff; padding: 80px 40px 100px; text-align: center; position: relative; overflow: hidden; }
  .hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(200,90,58,0.18) 0%, transparent 70%); pointer-events: none; }
  .hero h1 { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 48px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; position: relative; }
  .hero .subtitle { font-family: 'Lexend Deca', sans-serif; font-weight: 400; font-size: 20px; color: var(--crema); max-width: 720px; margin: 0 auto; position: relative; }
  .hero .badges { margin-top: 32px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; position: relative; }
  .badge { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); padding: 6px 16px; border-radius: 20px; font-size: 13px; letter-spacing: 0.5px; }
  .badge.warning { background: var(--coral); border-color: var(--coral-claro); font-weight: 600; }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
  .toc { background: var(--crema-claro); border-left: 4px solid var(--coral); padding: 28px 32px; margin: -40px auto 60px; max-width: 1100px; border-radius: 8px; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
  .toc h3 { font-family: 'Lexend Deca', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--coral); margin-bottom: 16px; }
  .toc ol { list-style: none; counter-reset: section; columns: 2; column-gap: 40px; }
  .toc ol li { counter-increment: section; padding: 6px 0; break-inside: avoid; }
  .toc ol li::before { content: counter(section, decimal-leading-zero); color: var(--coral); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; margin-right: 12px; font-size: 13px; }
  .toc a { color: var(--azul-pizarra); text-decoration: none; }
  .toc a:hover { color: var(--coral); }
  section { padding: 60px 0; border-bottom: 1px solid var(--gris-borde); }
  section:last-child { border-bottom: none; }
  h2 { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 32px; color: var(--azul-pizarra); margin-bottom: 8px; letter-spacing: 0.5px; }
  .section-num { color: var(--coral); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 4px; display: block; }
  h3 { font-family: 'Lexend Deca', sans-serif; font-weight: 600; font-size: 22px; color: var(--azul-pizarra); margin: 32px 0 12px; }
  p { margin-bottom: 14px; color: var(--texto); }
  .lead { font-size: 17px; color: var(--texto-suave); margin-bottom: 32px; max-width: 800px; }

  .warning-banner { background: var(--warning-bg); color: #fff; border-radius: 12px; padding: 32px 40px; margin: 32px 0; border-left: 6px solid var(--warning-border); }
  .warning-banner h3 { color: var(--coral-claro); margin-top: 0; margin-bottom: 14px; font-size: 18px; text-transform: uppercase; letter-spacing: 2px; }
  .warning-banner p { color: var(--crema); font-size: 15px; }
  .warning-banner ul { color: var(--crema); margin-left: 24px; }
  .warning-banner li { margin-bottom: 6px; }
  .warning-banner strong { color: #fff; }

  .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 32px; }
  .diagram-card { background: var(--crema-claro); border-radius: 12px; padding: 32px; text-align: center; }
  .diagram-card svg { max-width: 100%; height: auto; }
  .diagram-caption { font-size: 13px; color: var(--texto-suave); margin-top: 16px; font-style: italic; }

  .danger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
  .danger-card { background: #fff; border: 2px solid var(--coral); padding: 24px; border-radius: 8px; }
  .danger-card h4 { font-family: 'Lexend Deca', sans-serif; font-size: 15px; color: var(--coral); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1.5px; }
  .danger-card p { font-size: 14px; color: var(--texto); margin-bottom: 8px; }
  .danger-card .badge-x { background: var(--coral); color: #fff; font-weight: 700; padding: 4px 10px; border-radius: 4px; font-size: 11px; letter-spacing: 1px; display: inline-block; margin-bottom: 8px; }

  .checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
  .checklist { background: #fff; border: 1px solid var(--gris-borde); border-radius: 12px; padding: 24px; }
  .checklist.go { border-top: 4px solid var(--azul-pizarra); }
  .checklist.no-go { border-top: 4px solid var(--coral); }
  .checklist h3 { margin-top: 0; font-size: 16px; color: var(--azul-pizarra); }
  .checklist ul { list-style: none; margin-left: 0; }
  .checklist li { padding: 8px 0; border-bottom: 1px solid var(--gris-borde); font-size: 14px; }
  .checklist li:last-child { border-bottom: none; }
  .checklist.go li::before { content: '✓ '; color: var(--azul-pizarra); font-weight: 700; }
  .checklist.no-go li::before { content: '✗ '; color: var(--coral); font-weight: 700; }

  .table-wrap { overflow-x: auto; margin: 24px 0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  table { width: 100%; border-collapse: collapse; background: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; }
  thead { background: var(--azul-pizarra); color: #fff; }
  th { padding: 14px 16px; text-align: left; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
  td { padding: 12px 16px; border-bottom: 1px solid var(--gris-borde); }
  tbody tr:nth-child(even) { background: var(--gris-claro); }
  tbody tr:hover { background: var(--crema-claro); }
  .stars { color: var(--coral); letter-spacing: 2px; font-weight: 700; }
  .sku-code { font-family: 'Source Code Pro', 'Courier New', monospace; font-style: italic; font-size: 13px; background: var(--gris-claro); padding: 2px 8px; border-radius: 4px; color: var(--azul-pizarra); font-weight: 600; }

  .producto { background: #fff; border: 1px solid var(--gris-borde); border-radius: 16px; padding: 40px; margin: 40px 0; box-shadow: 0 4px 20px rgba(68,84,106,0.06); }
  .producto-head { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; margin-bottom: 32px; }
  .producto-img { background: var(--gris-claro); border-radius: 12px; padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 240px; }
  .producto-img img { max-width: 100%; max-height: 220px; object-fit: contain; }
  .producto-info h3 { font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 26px; margin: 0 0 8px; color: var(--azul-pizarra); }
  .producto-tagline { color: var(--coral); font-weight: 600; font-size: 15px; margin-bottom: 20px; letter-spacing: 0.5px; }
  .specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin: 20px 0; }
  .specs > div { font-size: 14px; border-left: 3px solid var(--crema); padding-left: 12px; }
  .specs strong { display: block; color: var(--azul-pizarra); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
  .pros, .cuando-otra { margin-top: 16px; padding: 16px 20px; border-radius: 8px; font-size: 14px; }
  .pros { background: var(--crema-claro); border-left: 4px solid var(--coral); }
  .pros strong, .cuando-otra strong { display: block; color: var(--azul-pizarra); margin-bottom: 8px; font-family: 'Lexend Deca', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
  .cuando-otra { background: var(--gris-claro); border-left: 4px solid var(--azul-pizarra); }
  .pros ul, .cuando-otra ul { margin-left: 20px; }
  .pros li, .cuando-otra li { margin-bottom: 4px; }
  .casos { margin-top: 24px; padding-top: 24px; border-top: 2px solid var(--gris-borde); }
  .casos h4 { font-family: 'Lexend Deca', sans-serif; font-size: 14px; color: var(--coral); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }
  .casos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .caso { background: var(--gris-claro); padding: 14px 18px; border-radius: 8px; font-size: 13px; }
  .caso strong { color: var(--azul-pizarra); display: block; margin-bottom: 4px; }
  .caso span { color: var(--texto-suave); }
  .extra-info { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; padding-top: 28px; border-top: 2px solid var(--gris-borde); }
  .extra-block h4 { font-family: 'Lexend Deca', sans-serif; font-size: 13px; color: var(--coral); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; }
  .extra-block ul { margin-left: 20px; font-size: 14px; line-height: 1.7; }
  .extra-block li { margin-bottom: 4px; color: var(--texto); }
  .extra-block li strong { color: var(--azul-pizarra); }
  .temp-mini-table { width: 100%; border-collapse: collapse; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; background: #fff; border-radius: 6px; overflow: hidden; }
  .temp-mini-table th { background: var(--azul-pizarra); color: #fff; padding: 8px 10px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
  .temp-mini-table td { padding: 8px 10px; border-bottom: 1px solid var(--gris-borde); }
  .temp-mini-table tr:last-child td { border-bottom: none; }
  .temp-mini-table tbody tr:nth-child(even) { background: var(--gris-claro); }
  .ganancia { margin-top: 12px; padding: 10px 14px; background: var(--crema-claro); border-radius: 6px; font-size: 13px; color: var(--azul-pizarra); border-left: 3px solid var(--coral); }
  .ganancia strong { color: var(--coral); }
  .paso { margin: 28px 0; padding: 28px 32px; background: var(--gris-claro); border-radius: 12px; border-left: 4px solid var(--coral); }
  .paso h3 { margin-top: 0; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .paso-num { background: var(--coral); color: #fff; font-family: 'Lexend Deca', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 12px; border-radius: 4px; }
  .paso ol, .paso ul { margin-left: 24px; margin-bottom: 12px; }
  .paso li { margin-bottom: 6px; font-size: 14.5px; }
  .tip { background: var(--crema-claro); padding: 12px 18px; border-radius: 6px; font-size: 13.5px; margin-top: 14px; border-left: 3px solid var(--coral); color: var(--texto); }
  .alert { background: #FFEEE7; padding: 14px 18px; border-radius: 6px; font-size: 14px; margin: 20px 0; border-left: 3px solid var(--coral); color: var(--azul-pizarra-oscuro); font-weight: 500; }
  .errores { display: grid; gap: 16px; margin-top: 24px; }
  .error { background: #fff; border: 1px solid var(--gris-borde); border-left: 4px solid var(--coral); padding: 20px 24px; border-radius: 8px; }
  .error h4 { color: var(--coral); font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; font-family: 'Lexend Deca', sans-serif; }
  .error p { font-size: 14px; color: var(--texto); margin: 0; }
  .error .truth { color: var(--azul-pizarra); font-weight: 600; }
  .cta-catalogo { background: linear-gradient(135deg, var(--coral) 0%, #A8472D 100%); color: #fff; border-radius: 16px; padding: 48px 40px; text-align: center; margin: 60px 0 0; }
  .cta-catalogo h3 { font-family: 'Lexend', sans-serif; color: #fff; font-size: 28px; font-weight: 700; margin: 0 0 12px; letter-spacing: 0.5px; }
  .cta-catalogo p { color: var(--crema); margin-bottom: 24px; font-size: 16px; max-width: 600px; margin-left: auto; margin-right: auto; }
  .cta-button { display: inline-block; background: #fff; color: var(--coral); padding: 14px 36px; border-radius: 8px; text-decoration: none; font-family: 'Lexend Deca', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; transition: transform 0.2s, box-shadow 0.2s; }
  .cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
  footer { background: var(--azul-pizarra-oscuro); color: var(--crema); padding: 40px; text-align: center; font-size: 13px; }
  footer a { color: var(--coral-claro); text-decoration: none; }
  @media (max-width: 768px) { .hero h1 { font-size: 32px; } .hero { padding: 60px 24px 80px; } .container { padding: 0 24px; } .producto { padding: 24px; } .producto-head { grid-template-columns: 1fr; } .producto-img { min-height: 180px; } .toc ol { columns: 1; } .intro-grid { grid-template-columns: 1fr; } .specs { grid-template-columns: 1fr; } .extra-info { grid-template-columns: 1fr; } .checklist-grid { grid-template-columns: 1fr; } }

  /* Botón flotante regresar al menú */
  .btn-menu-flotante {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: var(--coral);
    color: #fff;
    padding: 14px 22px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 1000;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .btn-menu-flotante:hover {
    background: var(--azul-pizarra);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.3);
  }
  .btn-menu-flotante .arrow { font-size: 16px; }
  @media (max-width: 768px) {
    .btn-menu-flotante { bottom: 16px; right: 16px; padding: 11px 18px; font-size: 12px; }
  }

  .navbar .brand-link { display: inline-flex; align-items: center; text-decoration: none; }
  .navbar .brand-logo { height: 50px; width: auto; display: block; }
  @media (max-width: 768px) {
    .navbar { padding: 12px 20px; }
    .navbar .brand-logo { height: 40px; }
    .navbar .meta { font-size: 11px; }
  }
/* ===== ESTILOS FALTANTES DE LA EXTRACCIÓN ===== */

/* Scenarios (refrigeración líquida, disipadores, ventiladores, sim racing) */
.scenarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; }
.scenario { background: #fff; border: 1px solid var(--gris-borde); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.scenario .icon-box { background: var(--azul-pizarra); height: 120px; display: flex; align-items: center; justify-content: center; }
.scenario .icon-box svg { width: 60px; height: 60px; stroke: var(--crema); fill: none; stroke-width: 1.5; }
.scenario .body { padding: 20px; flex: 1; }
.scenario h4 { font-family: 'Lexend Deca', sans-serif; color: var(--azul-pizarra); font-size: 16px; margin-bottom: 8px; }
.scenario .reco { font-size: 13px; color: var(--coral); font-weight: 700; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gris-borde); }
.scenario p { font-size: 13px; color: var(--texto-suave); margin: 0; }

/* Type cards */
.types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.type-card { background: #fff; border: 1px solid var(--gris-borde); border-top: 4px solid var(--coral); padding: 24px; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s; }
.type-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(68,84,106,0.12); }
.type-card h4 { font-family: 'Lexend Deca', sans-serif; font-size: 16px; color: var(--azul-pizarra); margin-bottom: 10px; }
.type-card p { font-size: 14px; color: var(--texto-suave); margin-bottom: 8px; }
.type-card .for-who { font-size: 12px; color: var(--coral); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-top: 12px; }

/* Métodos de aplicación (pastas térmicas) */
.metodos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 24px 0; }
.metodo { background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px; padding: 20px; transition: transform 0.2s, box-shadow 0.2s; }
.metodo:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(68,84,106,0.12); }
.metodo svg { width: 100%; max-width: 160px; height: auto; display: block; margin: 0 auto 16px; }
.metodo h4 { font-family: 'Lexend Deca', sans-serif; color: var(--azul-pizarra); font-size: 15px; margin-bottom: 10px; text-align: center; }
.metodo p { font-size: 13px; margin-bottom: 6px; color: var(--texto-suave); line-height: 1.5; }
.metodo p strong { color: var(--azul-pizarra); display: inline; }

/* Parte divider (refrigeración líquida — separador entre Parte I y Parte II) */
.parte-divider { background: var(--azul-pizarra); color: #fff; padding: 32px 40px; border-radius: 12px; margin: 60px 0 40px; text-align: center; }
.parte-divider .num { color: var(--coral-claro); font-family: 'Lexend Deca', sans-serif; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; }
.parte-divider h2 { color: #fff; font-size: 28px; margin: 8px 0 8px; border: none; }
.parte-divider p { color: var(--crema); margin: 0; font-size: 15px; }

/* SKU label dentro de fichas de producto (wireview) */
.producto-info .sku { font-size: 12px; color: var(--texto-suave); margin-bottom: 8px; }


/* ===== Logo navbar con ondas radar SVG SMIL (cross-browser confiable) ===== */
.navbar { overflow: visible !important; }
.navbar .brand-link { position: relative; display: inline-flex; align-items: center; padding: 0; }
.navbar .brand-logo { position: relative; z-index: 2; }
.navbar-pulse-svg {
  position: absolute;
  top: 50%;
  left: 26px;
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.navbar-pulse-svg circle { stroke-width: 2.5; }
@media (max-width: 768px) {
  .navbar-pulse-svg { left: 20px; width: 90px; height: 90px; }
}