/*
Theme Name: PNWDeportes
Theme URI: https://pnwdeportes.com
Author: PNWDeportes
Author URI: https://pnwdeportes.com
Description: Tema personalizado para PNWDeportes - Noticias deportivas del Pacific Northwest en español
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: pnwdeportes
*/

:root {
  --green: #1a7a3c;
  --green-dark: #0f5228;
  --green-light: #25a352;
  --gold: #c8a84b;
  --white: #f5f5f0;
  --gray: #e0ddd5;
  --dark: #0d0d0d;
  --dark2: #161616;
  --dark3: #1e1e1e;
  --text-muted: #888;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--dark); color: var(--white); font-family: 'Barlow', sans-serif; overflow-x: hidden; }

/* ── AD SLOTS ── */
.ad-banner-top { background: #111; border-bottom: 1px solid #2a2a2a; padding: 0.5rem 2rem; display: flex; align-items: center; justify-content: center; min-height: 60px; }
.ad-slot { background: var(--dark3); border: 1.5px dashed #333; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: #444; position: relative; }
.ad-slot .ad-label { position: absolute; top: 4px; left: 6px; font-size: 0.6rem; letter-spacing: 1.5px; color: #383838; }
.ad-leaderboard { width: 728px; max-width: 100%; height: 90px; }
.ad-sidebar { width: 100%; height: 250px; }
.ad-inline { width: 100%; height: 90px; }
.ad-block { margin: 2rem 0; display: flex; justify-content: center; }

/* ── HEADER ── */
header { position: sticky; top: 0; z-index: 100; background: rgba(13,13,13,0.97); backdrop-filter: blur(10px); border-bottom: 2px solid var(--green); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 64px; }
.logo { display: flex; align-items: baseline; gap: 0.15rem; text-decoration: none; }
.logo-pnw { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--gold); letter-spacing: 2px; }
.logo-dep { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--green-light); letter-spacing: 2px; }
nav { display: flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
nav a { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); text-decoration: none; padding: 0.3rem 0.6rem; transition: color 0.2s; }
nav a:hover { color: var(--gold); }
.btn-subscribe { background: var(--green); color: var(--white) !important; padding: 0.35rem 1rem !important; }
.btn-subscribe:hover { background: var(--green-light) !important; }

/* ── TICKER ── */
.ticker { background: var(--green-dark); border-bottom: 1px solid var(--green); padding: 0.45rem 0; overflow: hidden; white-space: nowrap; }
.ticker-inner { display: inline-flex; gap: 3rem; animation: ticker 35s linear infinite; }
.ticker-item { font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; }
.ticker-item strong { margin-right: 0.4rem; }
.t-seattle { color: #4db8ff; }
.t-portland { color: #ff6b6b; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── HERO ── */
.hero { position: relative; min-height: 480px; display: flex; align-items: flex-end; overflow: hidden; background: linear-gradient(135deg, #061a2e 0%, #0a1f0d 40%, #1a0a0a 100%); }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 70% at 15% 50%, rgba(12,35,64,0.6) 0%, transparent 70%), radial-gradient(ellipse 50% 70% at 85% 40%, rgba(192,57,43,0.2) 0%, transparent 70%); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 48px 48px; }
.hero-cities { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1.5rem; opacity: 0.15; font-family: 'Bebas Neue', sans-serif; font-size: 6rem; line-height: 1; letter-spacing: 4px; text-align: right; }
.hero-cities .c-sea { color: #4db8ff; }
.hero-cities .c-pdx { color: #ff6b6b; }
.hero-content { position: relative; z-index: 2; padding: 3rem 2rem; max-width: 680px; }
.hero-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); border-left: 3px solid var(--gold); padding-left: 0.6rem; margin-bottom: 1rem; display: inline-block; }
.hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 0.95; letter-spacing: 2px; margin-bottom: 1.2rem; }
.hero h1 .sea { color: #4db8ff; }
.hero h1 .pdx { color: #ff6b6b; }
.hero p { font-size: 1rem; color: var(--gray); max-width: 500px; line-height: 1.6; margin-bottom: 1.8rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary { background: var(--green); color: var(--white); padding: 0.7rem 1.8rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: none; cursor: pointer; text-decoration: none; transition: background 0.2s; display: inline-block; }
.btn-primary:hover { background: var(--green-light); }
.btn-outline { background: transparent; color: var(--white); padding: 0.7rem 1.8rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: 1.5px solid rgba(255,255,255,0.25); cursor: pointer; text-decoration: none; transition: border-color 0.2s, color 0.2s; display: inline-block; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── MAIN LAYOUT ── */
.main-container { max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem; display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; border-bottom: 2px solid var(--dark3); padding-bottom: 0.6rem; }
.section-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 2px; display: flex; align-items: center; gap: 0.5rem; }
.section-title::before { content: ''; display: inline-block; width: 4px; height: 1.3rem; background: var(--green-light); }
.section-link { font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; color: var(--green-light); text-decoration: none; }

/* ── CARDS ── */
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
.card { background: var(--dark2); border: 1px solid #242424; overflow: hidden; transition: border-color 0.2s, transform 0.15s; cursor: pointer; }
.card:hover { border-color: var(--green); transform: translateY(-2px); }
.card-wide { grid-column: 1 / -1; }
.card-img { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; position: relative; }
.card-wide .card-img { aspect-ratio: 21/9; font-size: 4rem; }
.card-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); }
.bg-mariners { background: linear-gradient(135deg, #0c2340 0%, #001f4d 100%); }
.bg-blazers { background: linear-gradient(135deg, #1a0a00 0%, #3d1500 100%); }
.bg-timbers { background: linear-gradient(135deg, #003a1a 0%, #001f0d 100%); }
.bg-thorns { background: linear-gradient(135deg, #1a0010 0%, #3d0020 100%); }
.bg-fire { background: linear-gradient(135deg, #1a0005 0%, #400010 100%); }
.bg-minors { background: linear-gradient(135deg, #061520 0%, #0a2a40 100%); }
.card-body { padding: 0.9rem 1.1rem 1.1rem; }
.card-team { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.35rem; }
.team-mariners { color: #4db8ff; }
.team-blazers { color: #ff6b00; }
.team-timbers { color: #6dbf4a; }
.team-thorns { color: #ff4488; }
.team-fire { color: #ff2255; }
.team-minors { color: #88ccff; }
.card h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.45rem; }
.card-wide h2 { font-size: 1.6rem; }
.card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.7rem; }
.card-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--text-muted); font-family: 'Barlow Condensed', sans-serif; }
.ai-badge { background: rgba(26,122,60,0.15); border: 1px solid var(--green); color: var(--green-light); padding: 0.12rem 0.45rem; font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; }

/* ── AI GENERATOR ── */
.ai-generator { background: var(--dark2); border: 1px solid var(--green-dark); padding: 1.4rem; position: relative; overflow: hidden; margin-bottom: 2.5rem; }
.ai-generator::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--green-dark), var(--green-light), var(--green-dark)); }
.ai-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.ai-icon { width: 34px; height: 34px; background: var(--green-dark); border: 1px solid var(--green); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.ai-label { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--green-light); }
.ai-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 1px; }
.ai-prompt { display: flex; gap: 0.6rem; margin-bottom: 0.9rem; }
.ai-input { flex: 1; background: var(--dark3); border: 1px solid #333; color: var(--white); padding: 0.6rem 0.9rem; font-family: 'Barlow', sans-serif; font-size: 0.88rem; outline: none; transition: border-color 0.2s; }
.ai-input:focus { border-color: var(--green); }
.ai-input::placeholder { color: #444; }
.btn-ai { background: var(--green); color: var(--white); border: none; padding: 0.6rem 1.2rem; font-family: 'Barlow Condensed', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.btn-ai:hover { background: var(--green-light); }
.btn-ai:disabled { background: #333; cursor: not-allowed; }
.ai-output { background: var(--dark3); border: 1px solid #2a2a2a; padding: 1.1rem; font-size: 0.9rem; line-height: 1.7; color: var(--gray); display: none; }
.ai-output.visible { display: block; }
.ai-output h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; }
.dot-pulse { display: flex; gap: 4px; }
.dot-pulse span { width: 6px; height: 6px; background: var(--green-light); border-radius: 50%; animation: pulse 1.2s ease-in-out infinite; }
.dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
.dot-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 0%,80%,100% { opacity:0.2; transform:scale(0.8); } 40% { opacity:1; transform:scale(1); } }

/* ── SCORES ── */
.scores-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 2.5rem; }
.score-card { background: var(--dark2); border: 1px solid #242424; padding: 0.7rem 1rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; }
.score-card:hover { border-color: #333; }
.team-info { display: flex; align-items: center; gap: 0.5rem; }
.team-info.away { flex-direction: row-reverse; text-align: right; }
.team-emoji { font-size: 1.4rem; }
.team-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.95rem; }
.team-record { font-size: 0.72rem; color: var(--text-muted); }
.score-center { text-align: center; }
.score-nums { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 3px; line-height: 1; }
.score-status { font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--green-light); }
.score-status.final { color: var(--text-muted); }
.score-status.live { color: #ff4444; animation: blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* ── SIDEBAR ── */
.sidebar { display: flex; flex-direction: column; gap: 1.75rem; }
.sidebar-widget { background: var(--dark2); border: 1px solid #242424; overflow: hidden; }
.widget-header { background: var(--dark3); padding: 0.65rem 1rem; font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem; letter-spacing: 2px; border-bottom: 1px solid #2a2a2a; }
.widget-body { padding: 0.9rem; }
.standings-table { width: 100%; border-collapse: collapse; }
.standings-table th { font-family: 'Barlow Condensed', sans-serif; font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); text-align: right; padding: 0.25rem 0.4rem; border-bottom: 1px solid #2a2a2a; }
.standings-table th:first-child { text-align: left; }
.standings-table td { font-family: 'Barlow Condensed', sans-serif; font-size: 0.88rem; padding: 0.35rem 0.4rem; text-align: right; border-bottom: 1px solid #1a1a1a; color: var(--gray); }
.standings-table td:first-child { text-align: left; }
.standings-table tr.highlight td { color: var(--white); font-weight: 700; }
.newsletter-desc { font-size: 0.83rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.7rem; }
.newsletter-form { display: flex; flex-direction: column; gap: 0.5rem; }
.newsletter-form input { background: var(--dark3); border: 1px solid #333; color: var(--white); padding: 0.55rem 0.8rem; font-family: 'Barlow', sans-serif; font-size: 0.83rem; outline: none; }
.newsletter-form input:focus { border-color: var(--green); }
.newsletter-form input::placeholder { color: #444; }
.newsletter-form button { background: var(--green); color: var(--white); border: none; padding: 0.55rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.88rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.newsletter-form button:hover { background: var(--green-light); }
.social-links { display: flex; flex-direction: column; gap: 0.4rem; }
.social-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; background: var(--dark3); border: 1px solid #242424; text-decoration: none; color: var(--gray); font-family: 'Barlow Condensed', sans-serif; font-size: 0.88rem; letter-spacing: 1px; transition: border-color 0.2s; }
.social-link:hover { border-color: var(--green); color: var(--white); }
.social-icon { font-size: 1rem; width: 22px; text-align: center; }
.social-handle { margin-left: auto; font-size: 0.72rem; color: var(--green-light); }

/* ── FOOTER ── */
footer { background: var(--dark2); border-top: 2px solid var(--green-dark); padding: 2rem; text-align: center; }
.footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; letter-spacing: 3px; margin-bottom: 0.4rem; }
.footer-logo .f-pnw { color: var(--gold); }
.footer-logo .f-dep { color: var(--green-light); }
.footer-tagline { font-size: 0.82rem; color: var(--text-muted); letter-spacing: 1px; margin-bottom: 1.25rem; }
.footer-teams { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.footer-teams a { font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
.footer-teams a:hover { color: var(--white); }
.footer-copy { font-size: 0.75rem; color: #383838; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) { .main-container { grid-template-columns: 1fr; } .news-grid { grid-template-columns: 1fr; } .card-wide { grid-column: 1; } }
@media (max-width: 600px) { nav { display: none; } .hero h1 { font-size: 2.6rem; } .hero-cities { display: none; } }