/* ===========================================================
   style.css  |  NeoConsult – Modern + Neo-Brutalist Theme
   =========================================================== */

/* --------- 1. ROOT, RESET & TYPOGRAPHY -------------------- */
:root {
    /* Tetradic Palette */
    --color-primary: #1E3A8A;    /* Azul Profundo */
    --color-secondary: #D97706;  /* Naranja Vibrante */
    --color-accent1: #16A34A;    /* Verde Vivo   */
    --color-accent2: #BE185D;    /* Magenta Intenso */

    /* Neutral */
    --color-dark: #111111;
    --color-light: #ffffff;
    --color-gray: #F3F4F6;
    --color-muted: #6B7280;

    /* Gradients & Glassmorphism */
    --grad-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-blur: blur(12px);

    /* Typography */
    --font-title: 'Manrope', sans-serif;
    --font-base: 'Rubik', sans-serif;

    /* Shadows */
    --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.06);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 24px;

    /* Transition */
    --tr-fast: 0.2s ease;
    --tr-medium: 0.35s ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-base);
    color: var(--color-dark);
    background-color: var(--color-light);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-primary);
}

/* --------- 2. NAVBAR -------------------------------------- */
.navbar {
    backdrop-filter: var(--glass-blur);
    background: var(--glass-bg);
}
.navbar-brand { font-weight: 800; letter-spacing: .5px; }
.navbar-nav .nav-link {
    font-weight: 600;
    color: var(--color-light) !important;
    transition: var(--tr-fast);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--color-secondary) !important; }

/* --------- 3. HERO SECTION -------------------------------- */
#hero {
    position: relative;
    color: var(--color-light);
}
#hero .btn {
    box-shadow: var(--shadow-md);
}

/* Responsive heading sizing */
@media (min-width: 992px) {
    #hero h1 { font-size: 3.5rem; }
}

/* --------- 4. GLOBAL BUTTONS ------------------------------ */
.btn, button, input[type='submit'] {
    font-family: var(--font-title);
    letter-spacing: .5px;
    border: none;
    border-radius: var(--radius-sm);
    padding: .75rem 1.5rem;
    transition: transform var(--tr-fast), box-shadow var(--tr-fast), background-color var(--tr-fast);
}
.btn-primary {
    background-image: var(--grad-primary);
    color: var(--color-light);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.btn-outline-primary {
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn-outline-primary:hover {
    background: var(--color-primary);
    color: var(--color-light);
}

/* Micro-interaction */
button:active, .btn:active { transform: scale(.96); }

/* --------- 5. SECTIONS GENERIC ---------------------------- */
section { padding: 4rem 0; }
section.bg-light { background-color: var(--color-gray) !important; }

section h2 {
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
}
section h2::after {
    content: '';
    width: 60px;
    height: 4px;
    background: var(--grad-primary);
    display: block;
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* --------- 6. CARDS & FLEX CENTERING ---------------------- */
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--tr-medium), box-shadow var(--tr-fast);
    background: var(--color-light);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.card-image,
.image-container {
    width: 100%;
    height: 220px;
    overflow: hidden;
}
.card-image img,
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
}
.card-content { padding: 1.25rem 1.5rem; }

/* --------- 7. TEAM CAROUSEL ------------------------------- */
.carousel-item .card { max-width: 420px; margin: 0 auto; }
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
}

/* --------- 8. ACCORDION (FAQ) ----------------------------- */
.accordion-button {
    font-weight: 600;
    transition: background-color var(--tr-fast);
}
.accordion-button:not(.collapsed) {
    color: var(--color-light);
    background: var(--color-primary);
}
.accordion-body { color: var(--color-dark); }

/* --------- 9. READ MORE LINKS ----------------------------- */
.read-more, a.read-more {
    color: var(--color-secondary);
    font-weight: 600;
    position: relative;
    transition: color var(--tr-fast);
}
.read-more::after {
    content: '→';
    margin-left: .35rem;
    display: inline-block;
    transition: transform var(--tr-fast);
}
.read-more:hover {
    color: var(--color-accent2);
}
.read-more:hover::after { transform: translateX(4px); }

/* --------- 10. SOCIAL LINKS FOOTER ------------------------ */
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; color: var(--color-accent1); }

/* --------- 11. SUCCESS PAGE ------------------------------- */
.success-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.success-page h1 { color: var(--color-accent1); }

/* --------- 12. PRIVACY & TERMS PAGES ---------------------- */
.legal-page {
    padding-top: 100px;
}
.legal-page h1 { margin-bottom: 2rem; }

/* --------- 13. PARALLAX & GLASSMORPHISM UTILITIES --------- */
.parallax-bg {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative;
}
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
}

/* --------- 14. SCROLL-DEPENDENT ANIMATIONS (helper) ------- */
[data-sr] { opacity: 1; }

/* --------- 15. COOKIE POPUP OVERRIDES --------------------- */
#cookiePopup {
    font-size: .875rem;
}
#cookiePopup button {
    padding: .5rem 1.25rem;
    border-radius: var(--radius-sm);
}

/* --------- 16. MEDIA QUERIES ------------------------------ */
@media (max-width: 767.98px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
}