/* =============================================================
   MÓDULO: CATÁLOGO (SELECTOR DE MARCAS)
   ============================================================= */

/* 1. SECCIÓN PRINCIPAL Y CONTENEDOR */
.catalog-section {
    padding: 6rem 5% 4rem 5%;
    min-height: 100vh;
}

.catalog-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 2. BOTÓN DE VOLVER Y TEXTOS SAKO */
.back-btn-container {
    margin-bottom: 4rem;
    text-align: left;
}

.catalogo-titulo {
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 1rem;
    letter-spacing: 4px;
    font-family: 'Cinzel', serif;
    background: linear-gradient(to right, #ffffff, #D1D5DB, #888888, #D1D5DB, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.catalogo-subtitulo {
    color: #a0a0a0;
    font-size: 1.2rem;
    margin-bottom: 3.5rem;
    font-weight: 300;
}

/* 3. BUSCADOR (Centrado y Moderno) */
.buscador-marcas {
    display: block; 
    margin: 0 auto 4rem auto; 
    padding: 15px 20px; 
    width: 100%; 
    max-width: 500px; 
    font-size: 1.1rem;
    border: 1px solid rgba(255,255,255,0.2); 
    background: rgba(0,0,0,0.5); 
    color: white;
    outline: none; 
    transition: all 0.3s ease;
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.buscador-marcas:focus { 
    border-color: var(--gold); 
    box-shadow: 0 0 20px rgba(209,213,219,0.2); 
    background: rgba(0,0,0,0.8);
}

/* 4. GRID DE MARCAS */
.marcas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    width: 100%;
}

.marca-card { display: block; width: 100%; text-decoration: none; }

/* 5. EL MOTOR DE LEVITADO */
.tarjeta-animada {
    padding: 5rem 2rem;
    text-align: center;
    border-radius: 12px;
    transition: all 0.4s ease; 
    overflow: hidden;
    position: relative;
    height: 100%; 
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.marca-card:hover .tarjeta-animada {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* =========================================
   ANIMACIONES GLOBALES
   ========================================= */
@keyframes brillo-movimiento {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes radar-spin { 
    100% { transform: rotate(360deg); } 
}

/* =========================================
   FONDOS DE TARJETAS ESPECÍFICAS
   ========================================= */

/* AQUAFORE */
.fondo-aquafore {
    background: linear-gradient(45deg, #0093e9, #80d0c7, #ffffff, #007cf0, #0093e9);
    background-size: 400% 400%;
    animation: brillo-movimiento 8s ease infinite;
}

/* ANDREA MARAZZINI */
.fondo-marazzini {
    background: linear-gradient(45deg, #ff00cc, #333399, #00ffff, #ffff00, #ff00cc);
    background-size: 400% 400%;
    animation: brillo-movimiento 10s ease infinite;
}

/* SWISS MILITARY */
.fondo-swiss {
    background: linear-gradient(45deg, #8b0000, #ef4444, #ffffff, #7f1d1d, #8b0000);
    background-size: 400% 400%;
    animation: brillo-movimiento 12s ease infinite;
}

/* ZEPPELIN */
.fondo-zeppelin {
    background: radial-gradient(circle at center, #1a1a1a, #000000);
    border: 1px solid #333;
}
.fondo-zeppelin::before {
    content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent, rgba(50, 205, 50, 0.1), transparent 30%);
    animation: radar-spin 10s linear infinite;
}

/* OLIVIA BURTON*/
.fondo-olivia {
    background-color: #111; /* Fondo oscuro */
    /* Patrón de lunares rosas y amarillos */
    background-image: 
        radial-gradient(#ff1493 15%, transparent 20%),
        radial-gradient(#ffd700 15%, transparent 20%);
    background-size: 30px 30px; 
    background-position: 0 0, 15px 15px; 
    border: 2px solid #ff1493; /* Borde rosa sólido */
    position: relative;
    z-index: 1;
}

/* Flor en la esquina superior derecha */
.fondo-olivia::before {
    content: '';
    position: absolute;
    top: -25px;
    right: -25px;
    width: 120px;
    height: 120px;
    /* SVG de una flor oscura estilo cerezo/vintage */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='25' r='20' fill='%234a1c31'/%3E%3Ccircle cx='75' cy='45' r='20' fill='%234a1c31'/%3E%3Ccircle cx='65' cy='75' r='20' fill='%234a1c31'/%3E%3Ccircle cx='35' cy='75' r='20' fill='%234a1c31'/%3E%3Ccircle cx='25' cy='45' r='20' fill='%234a1c31'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23222'/%3E%3Cpath d='M50 50 L 50 35 M 50 50 L 65 45 M 50 50 L 60 60 M 50 50 L 40 60 M 50 50 L 35 45' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='35' r='2' fill='%23ffb7c5'/%3E%3Ccircle cx='65' cy='45' r='2' fill='%23ffb7c5'/%3E%3Ccircle cx='60' cy='60' r='2' fill='%23ffb7c5'/%3E%3Ccircle cx='40' cy='60' r='2' fill='%23ffb7c5'/%3E%3Ccircle cx='35' cy='45' r='2' fill='%23ffb7c5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    transition: transform 0.5s ease;
}

/* Rama verde en la esquina inferior izquierda */
.fondo-olivia::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100px;
    height: 120px;
    /* SVG de una rama con hojas verdes oscuras */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 100 Q 40 50 80 10' stroke='%232b3a24' stroke-width='4' fill='none'/%3E%3Cpath d='M40 70 Q 20 60 10 75 T 40 70' fill='%232b3a24'/%3E%3Cpath d='M50 50 Q 30 40 20 55 T 50 50' fill='%232b3a24'/%3E%3Cpath d='M60 30 Q 40 20 30 35 T 60 30' fill='%232b3a24'/%3E%3Cpath d='M30 85 Q 50 90 60 75 T 30 85' fill='%232b3a24'/%3E%3Cpath d='M40 65 Q 60 70 70 55 T 40 65' fill='%232b3a24'/%3E%3Cpath d='M50 45 Q 70 50 80 35 T 50 45' fill='%232b3a24'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    transition: transform 0.5s ease;
}

.marca-card:hover .fondo-olivia { border-color: #ff69b4; box-shadow: 0 0 15px rgba(255, 20, 147, 0.4); }
.marca-card:hover .fondo-olivia::before { transform: rotate(15deg) scale(1.05); }
.marca-card:hover .fondo-olivia::after { transform: rotate(-10deg) scale(1.05); }


/* BOHEME (Con enredadera espinosa mística) */
.fondo-boheme {
    background: linear-gradient(135deg, #2a1b38 0%, #593c73 50%, #7e57c2 100%);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Enredadera real: tallos retorcidos, hojas y espinas (Arriba Izquierda) */
.fondo-boheme::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 150px;
    height: 150px;
    /* SVG: Enredadera detallada violeta oscuro */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%231a0b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-10 -10 C 20 40, 70 10, 100 50'/%3E%3Cpath d='M10 10 C 40 50, 90 20, 110 60' opacity='0.6' stroke-width='1.5'/%3E%3Cpath d='M15 15 L 10 20 M 35 25 L 40 18 M 60 30 L 65 38 M 80 40 L 75 30' stroke-width='1'/%3E%3Cpath d='M25 20 C 20 15, 15 25, 25 30 Z M 50 25 C 45 20, 40 30, 50 35 Z M 75 35 C 70 30, 65 40, 75 45 Z' fill='%231a0b2e'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: -1;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Enredadera real: tallos retorcidos, hojas y espinas (Abajo Derecha) */
.fondo-boheme::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    /* SVG: Enredadera detallada violeta oscuro */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%231a0b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M110 110 C 80 60, 30 90, 0 50'/%3E%3Cpath d='M90 90 C 60 50, 10 80, -10 40' opacity='0.6' stroke-width='1.5'/%3E%3Cpath d='M85 85 L 90 80 M 65 75 L 60 82 M 40 70 L 35 62 M 20 60 L 25 70' stroke-width='1'/%3E%3Cpath d='M75 80 C 80 85, 85 75, 75 70 Z M 50 75 C 55 80, 60 70, 50 65 Z M 25 65 C 30 70, 35 60, 25 55 Z' fill='%231a0b2e'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.marca-card:hover .fondo-boheme {
    background: linear-gradient(135deg, #3a254d 0%, #7e57c2 50%, #b39ddb 100%);
}

.marca-card:hover .fondo-boheme::before {
    transform: scale(1.1) translate(-5px, -5px);
    opacity: 0.8;
}
.marca-card:hover .fondo-boheme::after {
    transform: scale(1.1) translate(5px, 5px);
    opacity: 0.7;
}

/* =========================================
   TEXTOS Y TYPOGRAPHY
   ========================================= */
.titulo-marca { 
    color: white; font-size: 2.2rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); 
    font-family: "Cinzel", serif; margin-bottom: 10px; 
}

.subtitulo-marca { 
    color: white; font-weight: bold; letter-spacing: 2px; 
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); text-transform: uppercase; 
}

/* Sobrescrituras para marcas específicas */
.fondo-zeppelin h2 { color: #4ade80; text-shadow: 0 0 10px rgba(74, 222, 128, 0.5); font-family: "Courier New", monospace;}

/* Textos de Olivia Burton 100% fieles a la imagen */
.fondo-olivia h2 { 
    color: #ff69b4; /* Rosa vibrante */
    /* Efecto de borde/resplandor blanco intenso */
    text-shadow: 
        -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 
        0px 4px 10px rgba(0,0,0,0.8); 
    font-weight: 700;
}
.fondo-olivia p { 
    color: #ff1493; /* Texto rosa fuerte */
    background: rgba(220, 220, 220, 0.95); /* Fondo "píldora" gris/blanco */
    padding: 8px 20px; 
    border-radius: 30px; 
    display: inline-block;
    font-weight: 800;
    letter-spacing: 3px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

/* =========================================
   MEDIA QUERIES (MÓVILES)
   ========================================= */
@media (max-width: 768px) {
    .catalog-section { padding: 5rem 20px 3rem 20px; }
    .catalogo-titulo { font-size: 2.2rem; }
}