/* =========================================
   FÉNIX CONTADORES - BRAND COLOR PALETTE
   ========================================= */

:root {
    --brand-orange-main: rgb(237, 123, 43);
    /* Naranja principal - header/footer */
    --brand-brown-dark: rgba(220, 105, 40);
    /* Marrón oscuro */
    --brand-beige-light: rgb(233, 210, 198);
    /* Beige claro */
    --brand-orange-light: rgb(228, 147, 107);
    /* Naranja claro */
    --brand-orange-red: rgb(197, 82, 39);
    /* Naranja rojizo */
    --brand-brown-medium: rgb(157, 71, 28);
    /* Marrón medio */
    --brand-black: rgb(46, 45, 44);
    /* Negro/gris oscuro */
    --brand-white: #ffffff;
    /* Blanco */
}

/* =========================================
   GLOBAL PAGE BACKGROUND
   ========================================= */
body {
    background-color: rgba(229, 115, 42) !important;
}

/* =========================================
   HEADER STYLES
   ========================================= */
header.pager__header {
    background-color: #fff !important;
    /* Fondo blanco */
}

.pager__header,
.pager__barra-navegacion,
.pager__navegacion-nav,
.pager__navegacion-nav span,
.pager__navegacion-nav a {
    color: #000 !important;
}

/* =========================================
   FOOTER STYLES
   ========================================= */
.pager__footer-redes {
    background-color: #f5f5f5 !important;
}

.pager__contacto-footer {
    background: #f5f5f5 !important;
}

.pager__copyright-footer {
    background: var(--brand-brown-dark) !important;
}

.pager__contacto-footer-item .pager__card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(237, 123, 43, 0.3) !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.pager__contacto-footer-item .pager__card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.25) !important;
    border-color: rgb(237, 123, 43) !important;
}

.pager__contacto-footer-item .pager__card-header {
    text-align: center !important;
}

.pager__contacto-footer-item .pager__card-header i {
    color: rgb(237, 123, 43) !important;
    font-size: 3rem !important;
    margin-bottom: 15px !important;
}

.pager__contacto-footer-item .pager__card-body {
    color: rgb(46, 45, 44) !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

.pager__contacto-footer-item .pager__card-body h4 {
    color: rgba(220, 105, 40) !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    font-size: 1.3rem !important;
}

.pager__contacto-footer-item .pager__card-body p {
    color: rgb(46, 45, 44) !important;
    font-size: 1.1rem !important;
}

.pager__contacto-footer-item .pager__card-body a {
    color: rgb(197, 82, 39) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.pager__contacto-footer-item .pager__card-body a:hover {
    color: rgb(237, 123, 43) !important;
}

/* =========================================
   ACCENT COLORS
   ========================================= */

/* Buttons and CTAs */
.btn-primary {
    background-color: var(--brand-orange-red) !important;
    border-color: var(--brand-orange-red) !important;
}

.btn-primary:hover {
    background-color: var(--brand-brown-medium) !important;
    border-color: var(--brand-brown-medium) !important;
}

/* Form button styles moved to form_professional.css */

/* =========================================
   TEXT ON COLORED BACKGROUNDS
   ========================================= */
/* White text on orange backgrounds */
.bg-orange,
.pager__header,
.pager__footer-redes,
.pager__contacto-footer {
    color: white !important;
}

/* Black text on white backgrounds */
.bg-white,
body,
.seccion-blanca {
    color: var(--brand-black) !important;
}