/**
 * Footer CSS - Sin Bootstrap
 * Hereda colores desde --theme-* (definidas en theme/[tema]/assets/css/main.css)
 *
 * @version 2.0.0
 */

/* ========================================
   VARIABLES LOCALES DEL FOOTER
   ======================================== */
.cz-footer {
    --footer-bg: var(--theme-secondary-light, #f4f4f5);
    --footer-text: var(--theme-secondary, #334155);
    --footer-link-hover: var(--theme-primary, #007bff);
}

/* ========================================
   BANNER DE BENEFICIOS
   ======================================== */
.cz-benefits {
    background-color: var(--theme-primary-light, #e3f2fd);
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-md);
}

.cz-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.cz-benefits__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cz-benefits__item svg {
    color: var(--theme-primary, #007bff);
    flex-shrink: 0;
}

.cz-benefits__item p {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    color: var(--theme-secondary, #334155);
}

.cz-benefits__item a {
    color: var(--theme-secondary, #334155);
    text-decoration: none;
}

.cz-benefits__item a:hover {
    color: var(--theme-primary, #007bff);
    text-decoration: underline;
}

/* Responsive: 3 columnas en tablet, 6 en desktop */
@media (min-width: 768px) {
    .cz-benefits__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .cz-benefits__grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .cz-benefits__item {
        justify-content: center;
        text-align: left;
    }
}

/* ========================================
   FOOTER PRINCIPAL
   ======================================== */
.cz-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    font-size: var(--font-size-sm);
}

.cz-footer__container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ========================================
   SECCIÓN SUPERIOR (Enlaces + Reviews)
   ======================================== */
.cz-footer__top {
    padding: var(--spacing-xl) 0;
}

.cz-footer__top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

@media (min-width: 1024px) {
    .cz-footer__top-grid {
        grid-template-columns: 1.4fr 1fr;
    }
}

/* Título de sección */
.cz-footer__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--footer-text);
    margin-bottom: var(--spacing-md);
    letter-spacing: var(--tracking-tight);
}

/* Grid de enlaces principales */
.cz-footer__links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm) var(--spacing-md);
}

@media (min-width: 768px) {
    .cz-footer__links-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cz-footer__link-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

.cz-footer__link-item svg {
    color: var(--theme-primary, #007bff);
    flex-shrink: 0;
}

.cz-footer__link-item a {
    color: var(--footer-text);
    text-decoration: none;
    transition: color var(--transition-base);
}

.cz-footer__link-item a:hover {
    color: var(--footer-link-hover);
}

/* Widget de reviews + social container */
.cz-footer__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.cz-footer__reviews {
    background-color: var(--card);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-lg);
}

/* Redes sociales (ahora bajo el widget) */
.cz-footer__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}

.cz-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--footer-text);
    text-decoration: none;
    border-radius: var(--border-radius-full);
    transition: all var(--transition-base);
}

.cz-footer__social a:hover {
    color: var(--theme-primary, #007bff);
    background-color: var(--accent);
}

/* ========================================
   SEPARADOR
   ======================================== */
.cz-footer__divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

/* ========================================
   SECCIÓN MEDIA (Nuestros sitios)
   ======================================== */
.cz-footer__middle {
    padding: var(--spacing-md) 0;
}

/* Listas de enlaces */
.cz-footer__sites {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs) 0;
}

.cz-footer__sites li {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.cz-footer__sites li:first-child {
    font-weight: var(--font-weight-semibold);
}

.cz-footer__sites a {
    color: var(--footer-text);
    text-decoration: none;
    transition: color var(--transition-base);
}

.cz-footer__sites a:hover {
    color: var(--footer-link-hover);
}

/* ========================================
   SECCIÓN INFERIOR (Legal)
   ======================================== */
.cz-footer__bottom {
    padding: var(--spacing-md) 0;
}

/* Enlaces legales */
.cz-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.cz-footer__legal a,
.cz-footer__legal button {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-base);
}

.cz-footer__legal a:hover,
.cz-footer__legal button:hover {
    color: var(--footer-link-hover);
}

/* ========================================
   COPYRIGHT Y PAGOS
   ======================================== */
.cz-footer__copyright-section {
    padding: var(--spacing-lg) 0 var(--spacing-xl);
}

.cz-footer__copyright-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    align-items: center;
}

@media (min-width: 1024px) {
    .cz-footer__copyright-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.cz-footer__copyright {
    text-align: center;
}

.cz-footer__copyright p {
    margin: 0;
    line-height: var(--line-height-normal);
}

.cz-footer__copyright-main {
    font-size: var(--font-size-xs);
    color: var(--muted-foreground);
    margin-bottom: var(--spacing-xs);
}

.cz-footer__copyright-legal {
    font-size: 0.6875rem; /* 11px */
    color: var(--muted-foreground);
    opacity: 0.7;
}

@media (min-width: 1024px) {
    .cz-footer__copyright {
        text-align: left;
    }
}

/* Métodos de pago */
.cz-footer__payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.cz-footer__payments img {
    height: 25px;
    width: auto;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--card);
}

@media (min-width: 1024px) {
    .cz-footer__payments {
        justify-content: flex-end;
    }
}

/* ========================================
   MOBILE SPACING FIX
   ======================================== */
.cz-footer__copyright-section {
    padding-bottom: 5rem; /* Espacio para barra móvil fija */
}

@media (min-width: 1024px) {
    .cz-footer__copyright-section {
        padding-bottom: var(--spacing-xl);
    }
}