/* ==========================================================================
   Variables Globales y Paleta de Colores
   Inspirado en las convenciones y estilo arquitectónico de UTN Programación III
   ========================================================================== */
:root {
    /* Paleta Principal */
    --color-primario: #0d6efd;
    --color-primario-hover: #0b5ed7;
    --color-primario-suave: #e7f1ff;
    --color-secundario: #6c757d;
    --color-secundario-hover: #5c636a;
    --color-acento: #ff6b35;
    --color-acento-hover: #e85924;
    --color-exito: #198754;
    --color-peligro: #dc3545;
    --color-peligro-hover: #bb2d3b;
    --color-instagram: #e1306c;
    --color-instagram-hover: #c13584;
    --gradiente-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

    /* Fondos y Superficies */
    --color-fondo: #f8f9fa;
    --color-superficie: #ffffff;
    --color-superficie-alt: #f1f3f5;
    
    /* Textos y Bordes */
    --color-texto-principal: #212529;
    --color-texto-secundario: #6c757d;
    --color-texto-claro: #ffffff;
    --color-borde: #dee2e6;
    --color-borde-hover: #ced4da;

    /* Categorías */
    --cat-tazas: #0d6efd;
    --cat-bazar: #198754;
    --cat-accesorios: #6f42c1;

    /* Tipografía */
    --fuente-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Sombras */
    --sombra-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --sombra-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --sombra-drawer: -4px 0 24px rgba(0, 0, 0, 0.18);

    /* Bordes y Transiciones */
    --radio-sm: 6px;
    --radio-md: 10px;
    --radio-lg: 16px;
    --radio-full: 9999px;
    --transicion-rapida: 0.2s ease;
    --transicion-normal: 0.3s ease;
}

/* ==========================================================================
   Reset Universal y Configuración Base
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fuente-base);
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button, input, select {
    font-family: inherit;
    font-size: 1rem;
}

/* ==========================================================================
   Contenedores Genéricos
   ========================================================================== */
.header__contenedor,
.hero__contenedor,
.catalogo__contenedor,
.beneficios__contenedor,
.contacto__contenedor,
.footer__contenedor {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Encabezado (Header)
   ========================================================================== */
.header {
    background-color: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sombra-sm);
}

.header__contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    gap: 1rem;
}

.header__marca {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header__logo-caja {
    width: 55px;
    height: 55px;
    border-radius: var(--radio-md);
    overflow: hidden;
    background-color: var(--color-superficie-alt);
    border: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header__titulos {
    display: flex;
    flex-direction: column;
}

.header__nombre {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-texto-principal);
    line-height: 1.2;
}

.header__eslogan {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

.header__nav {
    display: flex;
}

.header__menu {
    display: flex;
    gap: 1.5rem;
}

.header__enlace {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-texto-secundario);
    transition: color var(--transicion-rapida);
    padding: 0.5rem 0;
}

.header__enlace:hover {
    color: var(--color-primario);
}

.header__nav-svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
    opacity: 0.75;
}

.header__enlace--instagram {
    color: var(--color-instagram);
    font-weight: 600;
}

.header__enlace--instagram:hover {
    color: var(--color-instagram-hover);
}

/* El ícono de Instagram usa las mismas reglas de .header__nav-svg pero sin opacidad reducida */
.header__ig-svg {
    opacity: 1;
}

/* Botón de Carrito en el Header */
.header__carrito-caja {
    display: flex;
    align-items: center;
}

.btn-carrito {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-primario-suave);
    color: var(--color-primario);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: var(--radio-full);
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transicion-rapida);
}

.btn-carrito:hover {
    background-color: var(--color-primario);
    color: var(--color-texto-claro);
    transform: translateY(-1px);
    box-shadow: var(--sombra-sm);
}

.btn-carrito__icono {
    font-size: 1.15rem;
}

.btn-carrito__badge {
    background-color: var(--color-acento);
    color: var(--color-texto-claro);
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: var(--radio-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    transition: transform var(--transicion-rapida);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: var(--color-texto-claro);
    padding: 4rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(13, 110, 253, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.hero__texto {
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero__titulo {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.hero__descripcion {
    font-size: 1.1rem;
    color: #cbd5e1;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero__acciones {
    display: flex;
    justify-content: center;
}

.btn-hero {
    background-color: var(--color-acento);
    color: var(--color-texto-claro);
    padding: 0.85rem 2rem;
    border-radius: var(--radio-full);
    font-weight: 700;
    font-size: 1rem;
    transition: all var(--transicion-rapida);
    display: inline-block;
}

.btn-hero:hover {
    background-color: var(--color-acento-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.35);
}

/* ==========================================================================
   Catálogo y Filtros
   ========================================================================== */
.catalogo {
    padding: 3.5rem 0;
}

.seccion-titulo {
    text-align: center;
    margin-bottom: 2.5rem;
}

.seccion-titulo__texto {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-texto-principal);
    margin-bottom: 0.5rem;
}

.seccion-titulo__bajada {
    font-size: 1rem;
    color: var(--color-texto-secundario);
}

/* Controles de Filtros */
.filtros {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--sombra-sm);
}

.filtros__form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1.25rem;
    align-items: flex-end;
}

.filtros__campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.filtros__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-texto-secundario);
}

.filtros__input,
.filtros__select {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    background-color: var(--color-superficie);
    color: var(--color-texto-principal);
    outline: none;
    transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.filtros__input:focus,
.filtros__select:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* ==========================================================================
   Grilla y Cards de Productos
   ========================================================================== */
.grilla-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.75rem;
}

.card-producto {
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida), border-color var(--transicion-rapida);
    position: relative;
}

.card-producto:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-lg);
    border-color: var(--color-borde-hover);
}

.card-producto__imagen-caja {
    width: 100%;
    height: 220px;
    background-color: #fafbfc;
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow: hidden;
}

.card-producto__imagen {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.card-producto:hover .card-producto__imagen {
    transform: scale(1.06);
}

.card-producto__cuerpo {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-producto__categoria-caja {
    margin-bottom: 0.6rem;
}

.badge-categoria {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radio-full);
}

.badge-categoria--tazas {
    background-color: rgba(13, 110, 253, 0.12);
    color: var(--cat-tazas);
}

.badge-categoria--bazar {
    background-color: rgba(25, 135, 84, 0.12);
    color: var(--cat-bazar);
}

.badge-categoria--accesorios {
    background-color: rgba(111, 66, 193, 0.12);
    color: var(--cat-accesorios);
}

.card-producto__titulo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-texto-principal);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.card-producto__descripcion {
    font-size: 0.88rem;
    color: var(--color-texto-secundario);
    margin-bottom: 1.25rem;
    flex-grow: 1;
    line-height: 1.45;
}

.card-producto__precio-caja {
    margin-bottom: 1rem;
}

.card-producto__precio {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-texto-principal);
}

.card-producto__acciones-caja {
    margin-top: auto;
}

/* ==========================================================================
   Botones Generales
   ========================================================================== */
.btn-primario,
.btn-secundario,
.btn-agregar-carrito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radio-md);
    cursor: pointer;
    border: none;
    transition: all var(--transicion-rapida);
    text-align: center;
}

.btn-primario {
    background-color: var(--color-primario);
    color: var(--color-texto-claro);
}

.btn-primario:hover:not(:disabled) {
    background-color: var(--color-primario-hover);
    transform: translateY(-1px);
    box-shadow: var(--sombra-sm);
}

.btn-secundario {
    background-color: var(--color-superficie-alt);
    color: var(--color-texto-principal);
    border: 1px solid var(--color-borde);
}

.btn-secundario:hover:not(:disabled) {
    background-color: #e2e6ea;
    border-color: var(--color-borde-hover);
}

.btn-instagram {
    background: var(--gradiente-instagram);
    color: var(--color-texto-claro);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-instagram:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(225, 48, 108, 0.35);
}

.btn-agregar-carrito {
    width: 100%;
    background-color: var(--color-primario);
    color: var(--color-texto-claro);
}

.btn-agregar-carrito:hover {
    background-color: var(--color-primario-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25);
}

.btn-agregar-carrito:active {
    transform: translateY(0);
}

.btn-ancho-completo {
    width: 100%;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Mensaje de Búsqueda Vacía
   ========================================================================== */
.mensaje-aviso {
    padding: 3rem 1.5rem;
    text-align: center;
    background-color: var(--color-superficie);
    border-radius: var(--radio-lg);
    border: 1px dashed var(--color-borde);
    margin-top: 1.5rem;
}

.mensaje-aviso--oculto {
    display: none;
}

.mensaje-aviso__texto {
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    margin-bottom: 1rem;
}

/* ==========================================================================
   Beneficios y Contacto
   ========================================================================== */
.beneficios {
    background-color: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
    padding: 3.5rem 0;
}

.beneficios__contenedor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.beneficios__card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1rem;
}

.beneficios__icono-caja {
    font-size: 2.2rem;
    line-height: 1;
}

.beneficios__titulo {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.beneficios__descripcion {
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
}

.contacto {
    padding: 3.5rem 0;
    background-color: var(--color-fondo);
}

.contacto__info {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-top: 1.5rem;
}

.contacto__parrafo {
    font-size: 0.95rem;
    color: var(--color-texto-principal);
}

.contacto__link-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-instagram);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transicion-rapida);
}

.contacto__link-instagram:hover {
    color: var(--color-instagram-hover);
}

/* ==========================================================================
   Carrito de Compras (Drawer Lateral)
   ========================================================================== */
.carrito-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    visibility: hidden;
    transition: visibility var(--transicion-normal);
}

.carrito-drawer.abierto {
    visibility: visible;
}

.carrito-drawer__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--transicion-normal);
}

.carrito-drawer.abierto .carrito-drawer__overlay {
    opacity: 1;
}

.carrito-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 440px;
    height: 100%;
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-drawer);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transicion-normal) cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1001;
}

.carrito-drawer.abierto .carrito-drawer__panel {
    transform: translateX(0);
}

/* Header del Drawer */
.carrito-drawer__header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-superficie);
}

.carrito-drawer__titulo {
    font-size: 1.35rem;
    font-weight: 700;
}

.carrito-drawer__subtitulo {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}

.btn-cerrar {
    background: transparent;
    border: none;
    font-size: 1.3rem;
    color: var(--color-texto-secundario);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: var(--radio-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transicion-rapida);
}

.btn-cerrar:hover {
    background-color: var(--color-superficie-alt);
    color: var(--color-texto-principal);
}

/* Listado de Productos en el Carrito */
.carrito-drawer__listado {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Tarjeta individual en el Carrito */
.carrito-item {
    display: grid;
    grid-template-columns: 75px 1fr 35px;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    background-color: var(--color-superficie);
    transition: background-color var(--transicion-rapida);
}

.carrito-item:hover {
    background-color: #fdfdfd;
}

.carrito-item__img-caja {
    width: 75px;
    height: 75px;
    background-color: #f8f9fa;
    border-radius: var(--radio-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border: 1px solid var(--color-borde);
}

.carrito-item__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.carrito-item__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.carrito-item__titulo {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.carrito-item__precio-unitario {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
}

.carrito-item__fila-inferior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.35rem;
    gap: 0.5rem;
}

/* Controles de Cantidad */
.carrito-item__controles {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    overflow: hidden;
    background-color: var(--color-superficie-alt);
}

.btn-cantidad {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    color: var(--color-texto-principal);
    transition: background-color var(--transicion-rapida);
}

.btn-cantidad:hover {
    background-color: #dde1e5;
}

.carrito-item__cantidad-valor {
    min-width: 28px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.carrito-item__subtotal {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-texto-principal);
}

.btn-eliminar-item {
    background: transparent;
    border: none;
    color: var(--color-texto-secundario);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radio-sm);
    transition: all var(--transicion-rapida);
}

.btn-eliminar-item:hover {
    color: var(--color-peligro);
    background-color: rgba(220, 53, 69, 0.1);
}

/* Estado de Carrito Vacío */
.carrito-drawer__vacio {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
    padding: 2rem 1.5rem;
}

.carrito-drawer__vacio-icono-caja {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.carrito-drawer__vacio-texto {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-texto-principal);
    margin-bottom: 0.5rem;
}

.carrito-drawer__vacio-bajada {
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
}

/* Footer del Drawer y Resumen */
.carrito-drawer__footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--color-borde);
    background-color: #fafbfc;
}

.carrito-resumen {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.carrito-resumen__fila {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: var(--color-texto-secundario);
}

.carrito-resumen__fila--total {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-texto-principal);
    border-top: 1px dashed var(--color-borde);
    padding-top: 0.65rem;
    margin-top: 0.35rem;
}

.texto-gratis {
    color: var(--color-exito);
    font-weight: 700;
}

/* Mensaje de Aviso de Instagram en el Carrito */
.carrito-aviso-instagram {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fff5f8 0%, #fdf2f8 100%);
    border: 1px solid #fbcfe8;
    border-radius: var(--radio-md);
    padding: 0.85rem 1rem;
    margin-bottom: 1.15rem;
}

.carrito-aviso-instagram__icono-caja {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--color-instagram);
    flex-shrink: 0;
}

.carrito-aviso-instagram__texto-caja {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.carrito-aviso-instagram__titulo {
    font-size: 0.9rem;
    font-weight: 700;
    color: #9d174d;
}

.carrito-aviso-instagram__descripcion {
    font-size: 0.82rem;
    color: #4b5563;
    line-height: 1.4;
}

.carrito-aviso-instagram__enlace {
    color: var(--color-instagram);
    font-weight: 700;
    text-decoration: underline;
}

.carrito-aviso-instagram__enlace:hover {
    color: var(--color-instagram-hover);
}

.carrito-acciones {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* ==========================================================================
   Modal de Checkout
   ========================================================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.modal--oculto {
    display: none;
}

.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal__caja {
    position: relative;
    background-color: var(--color-superficie);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg);
    max-width: 480px;
    width: 100%;
    padding: 2.25rem;
    text-align: center;
    z-index: 2001;
    animation: modalEntrada 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalEntrada {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal__icono-caja {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.modal__titulo {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-texto-principal);
}

.modal__descripcion {
    font-size: 0.95rem;
    color: var(--color-texto-secundario);
    margin-bottom: 1.5rem;
}

.modal__resumen-caja {
    background-color: var(--color-superficie-alt);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: 1rem;
    margin-bottom: 1.25rem;
    text-align: left;
    font-size: 0.9rem;
}

.modal__resumen-caja p {
    margin-bottom: 0.35rem;
}

.modal__mensaje-pegado {
    margin-bottom: 1.5rem;
    text-align: left;
}

.modal__mensaje-pegado-titulo {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-texto-secundario);
    margin-bottom: 0.35rem;
}

.modal__textarea-caja {
    width: 100%;
}

.modal__textarea {
    width: 100%;
    background-color: var(--color-superficie-alt);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    padding: 0.75rem;
    font-size: 0.82rem;
    font-family: inherit;
    resize: none;
    color: var(--color-texto-principal);
    line-height: 1.45;
}

.modal__acciones {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

@media (min-width: 480px) {
    .modal__acciones {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Notificaciones Flotantes (Toasts)
   ========================================================================== */
.toast-contenedor {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast {
    background-color: #1e293b;
    color: var(--color-texto-claro);
    padding: 0.85rem 1.25rem;
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    pointer-events: auto;
    animation: toastEntrada 0.3s ease;
    border-left: 4px solid var(--color-primario);
}

.toast--exito {
    border-left-color: var(--color-exito);
}

.toast--peligro {
    border-left-color: var(--color-peligro);
}

.toast--salida {
    animation: toastSalida 0.3s ease forwards;
}

@keyframes toastEntrada {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSalida {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ==========================================================================
   Pie de Página (Footer)
   ========================================================================== */
.footer {
    background-color: #111827;
    color: #9ca3af;
    padding: 3.5rem 0 2rem;
    margin-top: auto;
}

.footer__contenedor {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer__marca {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer__logo-caja {
    width: 65px;
    height: 65px;
    border-radius: var(--radio-md);
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.footer__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer__titulo {
    font-size: 1.3rem;
    color: #ffffff;
    font-weight: 700;
}

.footer__descripcion {
    font-size: 0.9rem;
    max-width: 500px;
    line-height: 1.5;
}

.footer__redes {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.footer__redes-etiqueta {
    font-size: 0.85rem;
    color: #cbd5e1;
}

.footer__redes-items {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer__red-enlace {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #e2e8f0;
    font-size: 0.88rem;
    background-color: rgba(255, 255, 255, 0.08);
    padding: 0.45rem 0.9rem;
    border-radius: var(--radio-full);
    transition: all var(--transicion-rapida);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__red-enlace:hover {
    background: var(--gradiente-instagram);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(225, 48, 108, 0.35);
}

.footer__creditos {
    border-top: 1px solid #1f2937;
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.footer__copyright {
    color: #6b7280;
    margin-top: 0.35rem;
}

/* ==========================================================================
   Diseño Responsivo (Media Queries)
   ========================================================================== */
@media (max-width: 900px) {
    .filtros__form {
        grid-template-columns: 1fr 1fr;
    }
    
    .filtros__campo:first-child {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .header__nav {
        display: none; /* Oculta navegación en pantallas chicas para dar prioridad al logo y carrito */
    }

    .hero__titulo {
        font-size: 1.8rem;
    }

    .grilla-productos {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.25rem;
    }

    .beneficios__contenedor {
        grid-template-columns: 1fr;
    }

    .footer__marca {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .filtros__form {
        grid-template-columns: 1fr;
    }

    .filtros__campo:first-child {
        grid-column: span 1;
    }

    .header__titulos {
        display: none; /* En pantallas muy pequeñas deja solo el logo y el botón carrito */
    }

    .carrito-drawer__panel {
        max-width: 100%;
    }
}