:root{
    --prod-accent: #0066d6;
    --prod-card-radius: 14px;
    --prod-shadow: 0 12px 30px rgba(11,59,102,0.06);
    --nav-color-default: #4b5563;
}

.contenedor-seccion-max {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 15px; 
    width: 100%;
}

.content-section{ 
    padding: 28px 0; 
}

.section-subtitle{ 
    font-size:30px; 
    color:#054bad; 
    margin:0 0 18px; 
    font-weight:700; 
    text-align: center; 
}

.contpaqi-nav{ 
    display:flex; 
    gap:16px; 
    align-items:center; 
    margin:12px 0 24px; 
    flex-wrap:wrap; 
    justify-content: center; 
}

.contpaqi-nav .nav-item{ 
    display:flex; 
    align-items:center; 
    gap:8px; 
    padding:8px 18px; 
    background:transparent; 
    border-radius: 999px; 
    cursor:pointer; 
    color: var(--nav-color-default); 
    border:1px solid #d1d5db; 
    transition:all .25s ease;
    box-shadow: none; 
}
.contpaqi-nav .nav-item:hover{
    border-color: var(--prod-accent);
    background: #f7faff;
    color: var(--prod-accent);
}

.contpaqi-nav .nav-item i{ 
    display:inline-block; 
    width:24px; 
    height:24px; 
    border-radius:999px; 
    background:transparent; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color: var(--nav-color-default); 
    font-size:16px;
    transition: color .25s ease;
}
.contpaqi-nav .nav-item span{ font-weight: 600; font-size: 15px; }

.contpaqi-nav .nav-item.active{ 
    background: var(--prod-accent); 
    border-color: var(--prod-accent); 
    box-shadow: 0 4px 12px rgba(0,102,214,0.3); 
    color: white; 
    transform: translateY(-2px); 
}
.contpaqi-nav .nav-item.active i {
    background: none;
    color: white; 
}
.contpaqi-nav .nav-item.active:hover {
    background: #005ac5; 
    border-color: #005ac5;
    color: white;
}

.contpaqi-nav:after{ 
    content:''; 
    display:block; 
    width:100%; 
    max-width: 800px;
    height:1px; 
    background: rgba(11,59,102,0.1); 
    margin:18px auto 12px auto; 
}

.products-tab-content{ margin-top:6px }
.tab-title{ font-size:18px; color:#054bad; margin:6px 0 12px; font-weight:700 }

.tab-pane{ display:none }
.tab-pane.active{ display:block }

.product-boxes-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px }
.product-controls{ position:relative }
.products-nav-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0b3b66,#2a69b3); color:#fff; box-shadow:0 8px 20px rgba(11,59,102,0.12); border:none; cursor:pointer; z-index:30 }
.products-nav-arrow.left{ left:8px }
.products-nav-arrow.right{ right:8px }
.products-nav-arrow:disabled{ opacity:0.4; cursor:default }
.product-box{ background:#fff; border-radius:var(--prod-card-radius); padding:20px; box-shadow:var(--prod-shadow); text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; border:1px solid rgba(11,59,102,0.03); transition:transform .18s ease, box-shadow .18s ease }
.product-box:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(11,59,102,0.08) }
.product-box img{ max-width:220px; width:auto; height:90px; object-fit:contain; display:block }
.product-box h4{ font-size:16px; color:#083a66; margin:6px 0; font-weight:700 }
.product-box p{ color:#4a5562; font-size:14px; margin:0 0 10px; line-height:1.45 }
.btn-product{ display:inline-block; padding:9px 14px; background:var(--prod-accent); color:#fff; text-decoration:none; border-radius:10px; box-shadow:0 8px 18px rgba(11,59,102,0.10); transition:transform .12s ease, box-shadow .12s ease }
.btn-product:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(11,59,102,0.12) }
.btn-product:focus{ outline:3px solid rgba(0,102,214,0.12); outline-offset:3px }

@media (max-width: 1100px){
    .product-boxes-grid{ grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 800px){
    .product-boxes-grid{ grid-template-columns: repeat(2, 1fr) }
    .contpaqi-nav{ gap:12px }
    .contpaqi-nav .nav-item{ padding:8px 14px }
}
@media (max-width: 480px){
    .product-boxes-grid{ grid-template-columns: 1fr }
    .section-subtitle{ font-size:18px }
    .contpaqi-nav{ justify-content:center }
    .product-box{ padding:14px }
    .product-box img{ max-width:160px }
}

.product-box .btn-product{ background: linear-gradient(135deg,var(--prod-accent),#2a69b3) }