.catalogo-section { padding: 80px 20px; text-align: center; }
.catalogo-header h2 { font-size: 2.5rem; color: var(--oscuro-primario); margin-bottom: 10px; }
.catalogo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1200px; margin: 0 auto; }

/* TARJETAS 3D */
.card-flip-container { background-color: transparent; width: 320px; height: 420px; perspective: 1000px; }
.card-flip-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; }
.card-flip-inner.girada { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); background: #fff; overflow: hidden; }
.card-front .img-container { width: 100%; height: 250px; padding: 10px; }
.card-front .img-container img { width: 100%; height: 100%; object-fit: contain; }
.card-info { padding: 1.5rem; background: #f8f9fa; height: calc(100% - 250px); display: flex; flex-direction: column; justify-content: center; }
.btn-girar { background-color: var(--oscuro-primario); color: #fff; border: none; padding: 10px; border-radius: 5px; font-weight: bold; cursor: pointer; }
.card-back { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; background-color: var(--oscuro-primario); color: white; border-bottom: 5px solid var(--amarillo-espeche); }
.lista-carta { list-style: none; text-align: left; width: 100%; line-height: 2; margin-bottom: 20px; color: var(--texto-claro); }
.btn-cerrar-carta { position: absolute; top: 15px; right: 15px; background: transparent; color: #999; border: 1px solid #999; padding: 5px 10px; cursor: pointer; }

/* MODAL SMASH BROS */
.btn-smash { background-color: var(--amarillo-espeche); color: #111; border: none; padding: 12px 20px; border-radius: 5px; font-weight: bold; cursor: pointer; width: 100%; }
.modal-smash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(15, 15, 20, 0.98); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-smash.activo { opacity: 1; pointer-events: auto; }
.btn-cerrar-foco { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid #fff; padding: 8px 15px; cursor: pointer; font-weight: bold; z-index: 2010; }
.smash-layout { width: 90vw; height: 85vh; background: #1e1e24; border-radius: 10px; display: flex; overflow: hidden; box-shadow: 0 0 50px rgba(255, 193, 7, 0.2); transform: scale(0.9); transition: transform 0.4s; }
.modal-smash.activo .smash-layout { transform: scale(1); }
.smash-img-section { width: 45%; height: 100%; background: #fff; clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); display: flex; align-items: center; justify-content: center; position: relative; }
.smash-img-section img { width: 90%; height: 90%; object-fit: contain; }
.smash-img-section::after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; border-right: 15px solid var(--amarillo-espeche); pointer-events: none; }
.smash-info-section { width: 55%; padding: 30px 40px 30px 0; display: flex; flex-direction: column; justify-content: center; }
.smash-title-banner { background: linear-gradient(90deg, var(--oscuro-primario), var(--oscuro-secundario)); padding: 20px 40px; color: white; clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%); border-bottom: 6px solid var(--amarillo-espeche); margin-bottom: 30px; text-align: center; }
.smash-price { font-size: 1.5rem; font-weight: bold; color: var(--amarillo-espeche); }
.smash-grid { display: flex; flex-wrap: wrap; gap: 15px; }
.smash-box { flex: 1 1 45%; padding: 20px; color: white; background: #2b2d42; clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%); box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }
.smash-box h3 { font-size: 1.1rem; color: var(--amarillo-espeche); margin-bottom: 10px; }
.box-large { flex: 1 1 100%; background: #25D366; clip-path: polygon(2% 0, 100% 0, 98% 100%, 0% 100%); cursor: pointer; text-align: center; }

@media (max-width: 768px) {
    .smash-layout { flex-direction: column; height: 95vh; overflow-y: auto; }
    .smash-img-section { width: 100%; height: 35%; clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); }
    .smash-img-section::after { border-right: none; border-bottom: 10px solid var(--amarillo-espeche); }
    .smash-info-section { width: 100%; height: 65%; padding: 15px; justify-content: flex-start; }
    .smash-box, .box-large { clip-path: none; border-radius: 8px; }
}