/*
Theme Name: Five Thunder Premium
Theme URI: https://fivethunder9dragons.com
Author: Sifu Ariel
Description: Tema oficial de Five Thunder 9 Dragons. Estética oscura, premium y de alto impacto.
Version: 1.1
Text Domain: fivethunder
*/

/* --- 1. VARIABLES GLOBALES --- */
:root {
    --bg-deep: #070709;
    --bg-primary: #0c0c0f;
    --bg-card: #121216;
    --text-primary: #ede9e3;
    --text-warm: #d4cec6;
    --text-muted: #5c5955;
    --red: #b82020;
    --red-soft: #9e2b2b;
    --gold: #c4a46a;
    --border: rgba(255, 255, 255, 0.12);
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Outfit', sans-serif;
    --transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- 2. RESET Y TIPOGRAFÍA BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body { 
    background-color: var(--bg-deep); 
    color: var(--text-warm); 
    font-family: var(--font-body); 
    line-height: 1.6; 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased; 
}

h1, h2, h3, h4, h5, h6, .ft-display {
    font-family: var(--font-display);
    color: var(--text-primary);
    line-height: 1.15;
    font-weight: 600;
}

a { color: var(--gold); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--red); }

/* --- 3. UTILIDADES GLOBALES --- */
.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 20px; 
    width: 100%; 
}

.kicker { 
    color: var(--red); 
    text-transform: uppercase; 
    letter-spacing: 0.4em; 
    font-size: 11px; 
    font-weight: 600; 
    margin-bottom: 25px; 
    display: block; 
}

.btn-premium {
    display: inline-block; 
    background: var(--red); 
    color: #fff !important; 
    text-decoration: none;
    padding: 20px 45px; 
    border-radius: 100px; 
    font-weight: 600; 
    text-transform: uppercase;
    letter-spacing: 0.25em; 
    font-size: 13px; 
    transition: var(--transition);
    box-shadow: 0 10px 30px rgba(184, 32, 32, 0.3); 
    border: none; 
    cursor: pointer;
}

.btn-premium:hover { 
    transform: translateY(-4px); 
    background: var(--red-soft); 
    box-shadow: 0 15px 40px rgba(184, 32, 32, 0.6); 
}

/* Formatos estándar de WordPress */
.site-main { padding: 80px 0; min-height: 70vh; }
.page-title { font-size: clamp(2.5rem, 6vw, 4rem); text-align: center; margin-bottom: 50px; }
.wp-block-image img { border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); filter: grayscale(100%) contrast(1.2); transition: var(--transition); }
.wp-block-image img:hover { filter: grayscale(0%); }