/*
Theme Name: Warmazon Music Theme
Theme URI: https://warmazon.com
Author: Warmazon
Author URI: https://warmazon.com
Description: Tema para web de musica en 2 columnas sin fechas y optimizado para moviles.
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: warmazon
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #121212; color: #ffffff; line-height: 1.5; }

.site-header { background-color: #000000; padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1a1a1a; }
.site-logo { font-size: 26px; font-weight: 900; color: #ffffff; text-decoration: none; text-transform: uppercase; }
.header-nav a { color: #ffffff; text-decoration: underline; font-size: 15px; }

.hero-banner { position: relative; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; padding: 70px 20px 80px; text-align: center; }
.hero-title { font-size: 50px; font-weight: 800; color: #ffffff; margin-bottom: 35px; }
.hero-title .highlight { color: #20c997; }

.search-container { max-width: 800px; margin: 0 auto; }
.search-form-exact { display: flex; background-color: #ffffff; border-radius: 4px; overflow: hidden; }
.search-input-exact { flex: 1; border: none; padding: 18px 22px; font-size: 16px; color: #333333; outline: none; }
.search-button-exact { background-color: #20c997; border: none; width: 65px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.search-button-exact svg { width: 22px; height: 22px; fill: #ffffff; }

.categories-container { background-color: #121212; padding: 50px 20px; }
.categories-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-card { border-radius: 6px; padding: 45px 20px; text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; }
.cat-card.mp3 { background-color: #113859; }
.cat-card.flac { background-color: #e05e38; }
.cat-card.concierto { background-color: #2d7d0f; }
.cat-icon { width: 55px; height: 55px; background-color: #000000; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.cat-icon svg { width: 28px; height: 28px; fill: #20c997; }
.cat-label { color: #ffffff; font-size: 16px; font-weight: 800; }

.results-wrapper { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.results-heading { font-size: 26px; margin-bottom: 30px; font-weight: 700; }
.search-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.result-item { background-color: #1e1e1e; border-radius: 8px; overflow: hidden; border: 1px solid #282828; display: flex; flex-direction: column; height: 100%; }
.result-thumb { width: 100%; height: 240px; overflow: hidden; background-color: #252525; }
.result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-body { padding: 22px; display: flex; flex-direction: column; flex-grow: 1; }
.result-title { font-size: 20px; margin-bottom: 12px; }
.result-title a { color: #ffffff; text-decoration: none; }
.result-title a:hover { color: #20c997; }
.result-excerpt { color: #aaaaaa; font-size: 14px; line-height: 1.6; }

.site-footer { text-align: center; padding: 40px 20px; background-color: #0a0a0a; color: #666666; margin-top: 60px; border-top: 1px solid #1f1f1f; }

@media (max-width: 768px) {
    .site-header { padding: 15px 20px; }
    .hero-title { font-size: 32px; margin-bottom: 25px; }
    .hero-banner { padding: 40px 15px 50px; }
    .categories-grid { grid-template-columns: 1fr; gap: 15px; }
    .cat-card { padding: 30px 15px; }

    .search-grid-2col { display: flex !important; flex-direction: column !important; gap: 20px !important; }
    .result-item { height: auto !important; margin-bottom: 0 !important; }
    .result-thumb { height: 180px !important; }
    .result-thumb img { height: 180px !important; width: 100% !important; object-fit: cover !important; }
    .result-body { padding: 15px !important; }
    .result-excerpt p { margin: 0 !important; }
}