/* =================================
   CENTRO DE AYUDA
=================================*/

.nx-help{
    width: 100%;
    max-width: 1800px;          /* controla ancho total */
    margin: 0 auto;     
    padding: 40px 60px 0px 60px; /* margen lateral real */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* HERO */

.nx-help-hero{
margin-bottom:60px;
}

.nx-help-hero h1{
font-size:32px;
margin-bottom:10px;
}

.nx-help-subtitle{
font-size:18px;
color:var(--nx-color-text-darks2);
}

/* GRID */

.nx-help-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

/* CARD */

.nx-help-card{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

text-align:center;

padding:40px 20px;

background:var(--nx-surface-1);
border-radius:12px;

text-decoration:none;
color:var(--nx-color-text-dark);

border:1px solid var(--nx-border-light);

transition:all .2s ease;

}

.nx-help-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.nx-help-card img{
width:48px;
height:48px;
margin-bottom:14px;
}

.nx-help-card h2{
font-size:18px;
margin:0;
}

/* CONTACTO */

.nx-help-contact{
margin-top:80px;
text-align:center;
padding-bottom: 60px;
}

.nx-help-contact h2{
margin-bottom:20px;
}

/* BOTON */

.nx-btn-primary{

display:inline-block;
padding:12px 24px;

background:var(--nx-color-button-b);
color:white;

border-radius:10px;
text-decoration:none;

font-weight:600;

}

.nx-btn-primary:hover{
background:var(--nx-color-button-bd);
}

/* RESPONSIVE */

@media (max-width:900px){

.nx-help-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:600px){

.nx-help-grid{
grid-template-columns:1fr;
}

}

/* =================================
   COMPONENTES DE PÁGINA CONTACTO
=================================*/

/* Breadcrumbs */
.nx-breadcrumb {
    font-size: var(--nx-font-sm);
    color: var(--nx-color-text-darks2);
    margin-bottom: 32px;
}
.nx-breadcrumb a { color: var(--nx-color-accent); text-decoration: none; }
.nx-breadcrumb a:hover { text-decoration: underline; }
.nx-breadcrumb .separator { margin: 0 8px; color: var(--nx-color-muted); }

/* Filtro FAQ Rápido (Estilo Amazon) */
.nx-faq-quick { margin-bottom: 48px; }
.nx-faq-quick h2 { font-size: 20px; margin-bottom: 24px; color: var(--nx-color-text-dark); }
.nx-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}
.nx-faq-card {
    background: var(--nx-surface-1);
    border: 1px solid var(--nx-border-light);
    padding: 20px;
    border-radius: var(--nx-radius-md);
    text-decoration: none;
    color: var(--nx-color-text-dark);
    display: flex;
    align-items: center;
    font-weight: 500;
    transition: all 0.2s ease;
}
.nx-faq-card:hover { 
    border-color: var(--nx-color-button-bd); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
}
.nx-faq-card svg { 
    margin-right: 12px; 
    color: var(--nx-color-button-bd); 
    flex-shrink: 0; 
}

/* Grilla de Contacto (Específica) */
.nx-section-title { 
    font-size: 24px; 
    margin-bottom: 24px; 
    border-top: 1px solid var(--nx-border-light); 
    padding-top: 40px;
}
.nx-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

/* Tarjetas de Contacto detalladas */
.nx-contact-card {
    background: var(--nx-surface-1);
    border: 1px solid var(--nx-border-light);
    border-radius: var(--nx-radius-md);
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.nx-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--nx-border-light);
}
.nx-card-header svg { 
    width: 48px; 
    height: 48px; 
    color: var(--nx-color-accent); 
    margin-right: 16px; 
}
.nx-card-header h3 { margin: 0; font-size: 22px; }
.nx-card-header .nx-card-subtitle { 
    margin: 4px 0 0 0; 
    color: var(--nx-color-text-darks2); 
    font-size: var(--nx-font-sm); 
}

/* Contenido de la tarjeta */
.nx-schedule {
    background: var(--nx-surface-2);
    padding: 16px;
    border-radius: var(--nx-radius-sm);
    font-size: var(--nx-font-sm);
    color: var(--nx-color-text-darks2);
    margin-bottom: 24px;
    line-height: 1.6;
}

.nx-contact-list { list-style: none; padding: 0; margin: 0; }
.nx-contact-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    font-size: var(--nx-font-m);
    color: var(--nx-color-text-darks);
}
.nx-contact-list svg { 
    width: 24px; 
    height: 24px; 
    margin-right: 12px; 
    color: var(--nx-color-text-textcomment); 
    flex-shrink: 0; 
}
.nx-contact-list .nx-primary-link {
    color: var(--nx-color-button-bd);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
}
.nx-contact-list .nx-primary-link:hover { text-decoration: underline; }
.nx-contact-list .nx-microcopy {
    display: block;
    font-size: 12px;
    color: var(--nx-color-background-v);
    margin-top: 4px;
    font-weight: 500;
}

/* Botón Destacado de WhatsApp */
.nx-btn-wa {
    display: inline-flex;
    align-items: center;
    background: #25D366;
    color: white;
    padding: 10px 16px;
    border-radius: var(--nx-radius-sm);
    text-decoration: none;
    font-weight: 600;
    margin-top: 4px;
    transition: background 0.2s;
}
.nx-btn-wa:hover { background: #1ebe57; }
.nx-btn-wa svg { color: white; margin-right: 8px; width: 20px; height: 20px;}

/* Banner Quiero que me llamen */
.nx-call-banner {
    background: var(--nx-color-background-cs);
    border: 1px solid var(--nx-color-background-c);
    border-radius: var(--nx-radius-md);
    padding: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 60px;
}
.nx-call-content h3 { margin: 0 0 8px 0; font-size: 22px; color: var(--nx-color-accent); }
.nx-call-content p { margin: 0; color: var(--nx-color-text-darks2); }

/* Responsive Específico */
@media (max-width: 900px) {
    .nx-contact-grid { grid-template-columns: 1fr; }
    .nx-call-banner { flex-direction: column; text-align: center; }
}

.nx-section-header {
    border-top: 1px solid var(--nx-border-light); 
    padding-top: 40px;
    margin-bottom: 24px;
}
.nx-global-schedule {
    display: inline-flex;
    align-items: center;
    background: var(--nx-surface-2);
    padding: 8px 16px;
    border-radius: 20px; /* Estilo píldora */
    font-size: var(--nx-font-sm);
    color: var(--nx-color-text-darks2);
}
.nx-global-schedule svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: var(--nx-color-text-textcomment);
}

/* =================================
   PÁGINA: MEDIOS DE PAGO Y CONFIANZA
=================================*/

/* Grilla de Medios de Pago (4 columnas en desktop) */
.nx-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

/* Tarjeta individual de beneficio */
.nx-benefit-card {
    background: var(--nx-surface-1);
    border: 1px solid var(--nx-border-light);
    border-radius: var(--nx-radius-md);
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nx-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}
.nx-benefit-card .icon-wrapper {
    width: 64px;
    height: 64px;
    background: var(--nx-surface-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--nx-color-accent);
}
.nx-benefit-card .icon-wrapper svg {
    width: 32px;
    height: 32px;
}
.nx-benefit-card h3 {
    font-size: 18px;
    color: var(--nx-color-text-dark);
    margin: 0 0 12px 0;
}
.nx-benefit-card p {
    font-size: var(--nx-font-sm);
    color: var(--nx-color-text-darks2);
    line-height: 1.5;
    margin: 0;
    flex-grow: 1; /* Empuja los links hacia abajo si hay diferencias de altura */
}

/* Destacar las tarjetas con descuento */
.highlight-card {
    border-color: var(--nx-color-background-v); /* Borde verde sutil */
}
.highlight-card .icon-wrapper {
    background: var(--nx-color-background-vs); /* Fondo verde clarito */
    color: var(--nx-color-background-v);
}
.nx-tag-discount {
    display: inline-block;
    background: var(--nx-color-background-vs);
    color: var(--nx-color-background-v);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 4px;
}

/* Enlace de acción rápida (Ej: Chat de pago mixto) */
.nx-link-action {
    display: inline-block;
    margin-top: 16px;
    color: var(--nx-color-button-bd);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--nx-font-sm);
}
.nx-link-action:hover {
    text-decoration: underline;
}

/* Grilla de Confianza / Ayuda (3 columnas) */
.nx-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 60px;
}
.nx-trust-card {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    background: var(--nx-surface-1);
    border: 1px solid var(--nx-border-light);
    border-radius: var(--nx-radius-md);
}
.nx-trust-card .icon-wrapper-small {
    margin-right: 16px;
    color: var(--nx-color-button-bd);
    flex-shrink: 0;
}
.nx-trust-card .icon-wrapper-small svg {
    width: 32px;
    height: 32px;
}
.nx-trust-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: var(--nx-color-text-dark);
}
.nx-trust-card p {
    margin: 0;
    font-size: var(--nx-font-sm);
    color: var(--nx-color-text-darks2);
    line-height: 1.5;
}
.nx-text-link {
    color: var(--nx-color-button-bd);
    text-decoration: none;
}
.nx-text-link:hover {
    text-decoration: underline;
}

.nx-product-title {
    width: 100%;
    max-width: 1800px;          /* controla ancho total */
    margin: 0 auto;     
    padding: 40px 60px 0px 60px; /* margen lateral real */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}


@media (max-width: 768px) {

    .nx-product-title {
        padding: 20px 20px 0px 20px;
    }
}

@media (min-width: 1024px) and (max-width: 1500px) {
    
    .nx-product-title{
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* =================================
   POSTVENTA / TARJETAS
=================================*/

/* Utilidades de espaciado */
.nx-mb-60 { margin-bottom: 60px; }
.nx-mb-24 { margin-bottom: 24px; }

/* Bordes superiores de colores para las tarjetas */
.nx-card-accent { border-top: 4px solid var(--nx-color-accent); }
.nx-card-success { border-top: 4px solid var(--nx-color-background-v); }
.nx-card-primary { border-top: 4px solid var(--nx-color-button-bd); }

/* Colores de íconos principales en el header de la tarjeta */
.nx-icon-accent { stroke: var(--nx-color-accent); width: 40px; height: 40px; }
.nx-icon-success { stroke: var(--nx-color-background-v); width: 40px; height: 40px; }
.nx-icon-primary { stroke: var(--nx-color-button-bd); width: 40px; height: 40px; }

/* Textos de descripción general */
.nx-contact-desc {
    color: var(--nx-color-text-darks2);
    margin-bottom: 16px;
    font-size: var(--nx-font-m);
}

.nx-list-title {
    margin-bottom: 12px;
    font-weight: 500;
    font-size: var(--nx-font-m);
    color: var(--nx-color-text-dark);
}

/* Modificador para listas más compactas (usamos m2 ~ 15px) */
.nx-list-sm li {
    margin-bottom: 8px;
    font-size: var(--nx-font-m2); /* Aplica el 0.93rem que pediste */
}
.nx-list-sm li svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

/* Banner secundario (estilo caja gris clara) */
.nx-banner-alt {
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border-light);
    padding: 16px;
    margin-top: 24px;
    border-radius: var(--nx-radius-sm); /* usa el radius del main */
}
.nx-banner-alt p {
    margin: 0;
    font-size: var(--nx-font-sm); /* Aplica los 14px exactos */
    color: var(--nx-color-text-dark);
}

/* Botón ancho de postventa (Email) */
.nx-btn-postventa {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nx-color-button-bd);
    color: var(--nx-color-bg-w);
    text-decoration: none;
    padding: 12px;
    border-radius: var(--nx-radius-sm);
    font-weight: 600;
    font-size: var(--nx-font-m);
    transition: background 0.2s ease;
}
.nx-btn-postventa:hover {
    background: var(--nx-color-button-b);
}
.nx-btn-postventa svg {
    margin-right: 8px;
}

/* Utilidades de margen */
.nx-mb-40 { margin-bottom: 40px; }
.nx-mt-24 { margin-top: 24px; }
.nx-text-center { text-align: center; }

/* Tipografías específicas */
.nx-font-20 { font-size: 1.25rem; } /* ~20px equilibrado */

/* Banners de Devolución */
.nx-banner-success {
    padding: 20px;
    border-radius: var(--nx-radius-md);
    border: 1px solid var(--nx-color-background-v);
    background: var(--nx-color-background-vs);
}
.nx-banner-success h3 {
    color: var(--nx-color-background-v);
    margin-bottom: 8px;
    font-size: var(--nx-font-m);
}
.nx-banner-success p {
    font-size: var(--nx-font-m2);
    color: var(--nx-color-text-darks2);
    line-height: 1.5;
    margin: 0;
}

/* Banner Gris Suave Final */
.nx-banner-soft {
    background: var(--nx-surface-2);
    padding: 24px;
    border-radius: var(--nx-radius-md);
    width: 100%;
}
.nx-banner-soft p {
    font-size: var(--nx-font-m);
    margin: 0;
    color: var(--nx-color-text-dark);
}

/* Variantes de Tarjetas de Contacto */
.nx-card-error { border-top: 4px solid var(--nx-color-background-r); }

/* Íconos */
.nx-icon-error { stroke: var(--nx-color-background-r); width: 32px; height: 32px; margin-right: 12px; }
.nx-icon-accent-sm { stroke: var(--nx-color-accent); width: 32px; height: 32px; margin-right: 12px; }
.nx-icon-lg { width: 48px; height: 48px; }

/* Microcopy (el texto aclaratorio debajo del email) */
.nx-microcopy {
    display: block;
    font-size: var(--nx-font-xs);
    color: var(--nx-color-text-darks2);
    margin-top: 2px;
}

/* Línea divisoria interna en tarjetas */
.nx-border-b {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--nx-border-light);
}

.nx-contact-list strong{
    margin-right: 5px;
}