/*//////////////////////////////////////////////////////////////////
[ CATALOG LAYOUT SYSTEM ]
Sistema de layout unificado para el catálogo MetrePay
Aplicable a: home-catalogo, comercio, producto (checkout)
*/

/* ============================================
   VARIABLES CSS
   ============================================ */
:root {
    /* Layout */
    --catalog-max-width: 1280px;
    --catalog-padding-mobile: 20px;
    --catalog-padding-tablet: 24px;
    --catalog-padding-desktop: 32px;
    
    /* Espaciado */
    --catalog-gap-small: 16px;
    --catalog-gap-medium: 24px;
    --catalog-gap-large: 32px;
    --catalog-gap-xlarge: 48px;
    
    /* Breakpoints */
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1280px;
    
    /* Colores semánticos */
    --color-blue-primary: #6E96FF;
    --color-blue-hover: #6687DC;
    --color-blue-tag-bg: #EBF0FF;
    --color-blue-tag-text: #6687DC;
    
    --color-purple-primary: #5C0390;
    --color-purple-hover: #3A005C;
    --color-purple-tag-bg: #F9EEFF;
    --color-purple-tag-text: #5C0390;
    
    /* Tipografía */
    --font-family-base: 'Cabin', sans-serif;
    --font-family-heading: 'Inter', sans-serif;
}

/* ============================================
   CONTENEDOR BASE
   ============================================ */
.catalog-container {
    max-width: var(--catalog-max-width);
    margin: 0 auto;
    padding-left: var(--catalog-padding-mobile);
    padding-right: var(--catalog-padding-mobile);
    width: 100%;
}

@media (min-width: 768px) {
    .catalog-container {
        padding-left: var(--catalog-padding-tablet);
        padding-right: var(--catalog-padding-tablet);
    }
}

@media (min-width: 1024px) {
    .catalog-container {
        padding-left: var(--catalog-padding-desktop);
        padding-right: var(--catalog-padding-desktop);
    }
}

/* ============================================
   HEADER WRAPPER
   Permite que el header tenga fondo full-width
   pero contenido alineado con el resto
   ============================================ */
.catalog-header-wrapper {
    width: 100%;
    /* El fondo se aplica aquí (gradiente, color, etc.) */
}

.catalog-header-content {
    max-width: var(--catalog-max-width);
    margin: 0 auto;
    padding-left: var(--catalog-padding-mobile);
    padding-right: var(--catalog-padding-mobile);
}

@media (min-width: 768px) {
    .catalog-header-content {
        padding-left: var(--catalog-padding-tablet);
        padding-right: var(--catalog-padding-tablet);
    }
}

@media (min-width: 1024px) {
    .catalog-header-content {
        padding-left: var(--catalog-padding-desktop);
        padding-right: var(--catalog-padding-desktop);
    }
}

/* ============================================
   UTILIDADES DE ESPACIADO
   ============================================ */
.catalog-section {
    padding-top: var(--catalog-gap-large);
    padding-bottom: var(--catalog-gap-large);
}

@media (min-width: 1024px) {
    .catalog-section {
        padding-top: var(--catalog-gap-xlarge);
        padding-bottom: var(--catalog-gap-xlarge);
    }
}

.catalog-spacing-small {
    margin-bottom: var(--catalog-gap-small);
}

.catalog-spacing-medium {
    margin-bottom: var(--catalog-gap-medium);
}

.catalog-spacing-large {
    margin-bottom: var(--catalog-gap-large);
}

.catalog-spacing-xlarge {
    margin-bottom: var(--catalog-gap-xlarge);
}

/* ============================================
   GRILLA DE PRODUCTOS
   ============================================ */
.catalog-products-grid {
    display: grid;
    gap: var(--catalog-gap-medium);
    grid-template-columns: 1fr;
}

/* Tablet: 2 columnas */
@media (min-width: 768px) {
    .catalog-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--catalog-gap-large);
    }
}

/* Desktop: 3 columnas */
@media (min-width: 1024px) {
    .catalog-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Wide: 4 columnas */
@media (min-width: 1280px) {
    .catalog-products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   CARD DE PRODUCTO
   ============================================ */
.catalog-product-card {
    display: flex;
    flex-direction: column;
    min-height: 0px;
    padding: 24px;
    background: #FAFAFA;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: none;
}

.catalog-product-card:hover {
    background: #FFFFFF;
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 
                0 0px 0 1px rgba(10, 10, 10, 0.02);
    transform: translateY(-2px);
}

.catalog-product-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================
   CHECKOUT CONTAINER
   ============================================ */
.catalog-checkout-wrapper {
    display: flex;
    justify-content: center;
    padding-top: var(--catalog-gap-large);
    padding-bottom: var(--catalog-gap-large);
}

.catalog-checkout-card {
    width: 100%;
    max-width: 720px;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0px 0px 6px 3px rgba(127, 146, 189, 0.1);
}

@media (min-width: 768px) {
    .catalog-checkout-card {
        padding: 32px;
    }
}

@media (min-width: 1024px) {
    .catalog-checkout-wrapper {
        padding-top: var(--catalog-gap-xlarge);
        padding-bottom: var(--catalog-gap-xlarge);
    }
}

/* ============================================
   FORMULARIO CHECKOUT
   ============================================ */
.catalog-form-section {
    margin-bottom: var(--catalog-gap-large);
}

.catalog-form-section:last-child {
    margin-bottom: 0;
}

.catalog-form-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--catalog-gap-medium);
    color: #333;
}

/* Mobile: inputs full-width */
.catalog-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--catalog-gap-medium);
}

/* Desktop: campos relacionados en 2 columnas */
@media (min-width: 768px) {
    .catalog-form-row.catalog-form-row-2cols {
        flex-direction: row;
    }
    
    .catalog-form-row.catalog-form-row-2cols > * {
        flex: 1;
    }
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
.catalog-hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .catalog-hide-mobile {
        display: block;
    }
}

.catalog-hide-desktop {
    display: block;
}

@media (min-width: 768px) {
    .catalog-hide-desktop {
        display: none;
    }
}

/* ============================================
   TEXT UTILITIES
   ============================================ */
.catalog-text-center {
    text-align: center;
}

.catalog-text-muted {
    color: #666666;
}

.catalog-text-small {
    font-size: 0.875rem;
}

.catalog-text-large {
    font-size: 1.125rem;
}

/* ============================================
   FLEX UTILITIES
   ============================================ */
.catalog-flex {
    display: flex;
}

.catalog-flex-column {
    flex-direction: column;
}

.catalog-flex-center {
    justify-content: center;
    align-items: center;
}

.catalog-flex-between {
    justify-content: space-between;
}

.catalog-flex-end {
    justify-content: flex-end;
}

.catalog-flex-1 {
    flex: 1;
}

.catalog-product-card ul.content {
    padding-left: 0;
    margin-left: 0;
}

.catalog-product-card ul.content li {
    list-style: none;

    /* clave */
    padding-left: 0.8em;   /* espacio para el bullet */
    text-indent: -0.8em;   /* cuelga la primera línea */

    line-height: 1.5;
}