/* * Sistema de Diseño CMS CityChipUSA LLC
 * Variables, Tipografías y Clases Globales
 */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Montserrat:wght@400;500;700&display=swap');

:root {
    /* Paleta de Colores de la Marca */
    --city-orange: #FF8C00;
    --city-gold: #FFD700;
    --city-solid-orange: #FF9F2A;
    --city-dark: #1A1A1A;
    --city-gray: #4D4D4D;
    --city-white: #FFFFFF;

    /* Tipografía */
    --font-primary: 'Exo 2', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}

/* =========================================
   Reset y Base
========================================= */
body {
    font-family: var(--font-secondary);
    color: var(--city-gray);
    background-color: #f4f6f9; /* Fondo muy sutil para destacar las cards */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Para mantener el footer al fondo */
}

h1, h2, h3, h4, h5, h6, 
.font-primary, .navbar-brand, .logo-text {
    font-family: var(--font-primary);
    font-weight: 700;
}

p, a, button, input, textarea {
    font-family: var(--font-secondary);
}

/* =========================================
   Utilidades de Color
========================================= */
.bg-city-dark { background-color: var(--city-dark) !important; color: var(--city-white); }
.bg-city-orange { background-color: var(--city-orange) !important; color: var(--city-white); }

.text-city-orange { color: var(--city-orange) !important; }
.text-city-gold { color: var(--city-gold) !important; }

/* =========================================
   Botones Personalizados
========================================= */
.btn-city-primary {
    background-color: var(--city-orange);
    color: var(--city-white);
    border: none;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    transition: all 0.3s ease;
}

.btn-city-primary:hover, .btn-city-primary:focus {
    background-color: var(--city-solid-orange);
    color: var(--city-white);
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.3);
    transform: translateY(-2px);
}

.btn-city-outline {
    background-color: transparent;
    color: var(--city-orange);
    border: 2px solid var(--city-orange);
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-city-outline:hover {
    background-color: var(--city-orange);
    color: var(--city-white);
}

/* =========================================
   Cards Premium (Noticias)
========================================= */
.card-premium {
    border: none;
    border-radius: 12px;
    background-color: var(--city-white);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.card-premium:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(255, 140, 0, 0.15); /* Sombra naranja suave */
}

.card-img-container {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card-premium:hover .card-img-container img {
    transform: scale(1.05); /* Efecto interactivo sutil */
}

.badge-city {
    background-color: var(--city-gold);
    color: var(--city-dark);
    font-weight: 700;
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    z-index: 2;
}

/* =========================================
   Footer y Enlaces
========================================= */
.hover-orange:hover {
    color: var(--city-orange) !important;
    text-decoration: underline !important;
}