/* Botones outline y fondo dorado personalizados para navbar */
.btn-outline-gold {
    color: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    background: transparent !important;
    transition: background 0.2s, color 0.2s;
}
.btn-outline-gold:hover, .btn-outline-gold:focus {
    background: var(--color-gold) !important;
    color: var(--text-dark) !important;
}
.btn-gold {
    background: var(--color-gold) !important;
    color: var(--text-dark) !important;
    border-color: var(--color-gold) !important;
}
.btn-gold:hover, .btn-gold:focus {
    background: #e59400 !important;
    color: var(--text-dark) !important;
    border-color: #e59400 !important;
}
/* Custom fonts */
@font-face {
    font-family: 'Chopsic';
    src: url('Fuente/Chopsic.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


/* Color palette variables */
:root {
    --color-aqua: #52D1DC;      /* light blue/cyan */
    --color-gold: #FCA311;      /* vibrant gold */
    --color-navy: #02182B;      /* dark navy */
    --color-light: #EEE5E9;     /* pale pink/lavender */
    --color-almostwhite: #FEFCFD; /* off-white */
    --text-dark: var(--color-navy);
}

/* Global body adjustments */
body {
    background-color: var(--color-almostwhite);
    color: var(--text-dark);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*padding-top: 2%;*/
}

/* Header customization */
header {
    /* keep a fallback color but allow background-image overrides */
    background-color: var(--color-aqua);
    color: var(--text-dark) !important;
    overflow: hidden; /* prevent overflow from image or text */
    position: relative;
}

/* layout for header content: text and image share same rectangle */
header .header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap; /* stack on small screens */
    padding-left: 0;
    margin-left: -2rem;
}

header .header-text {
    max-width: 50%;
    direction: ltr;
    text-align: left;
    padding-left: 0;
    margin-left: 0%;
}
/* Increase header text sizes */
header .header-text h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-almostwhite);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

header .header-text .lead {
    font-size: 1.5rem;
    color: var(--color-almostwhite);
    font-weight: 500;
    margin-bottom: 1rem;
}

header .header-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-almostwhite);
}

@media (max-width: 768px) {
    header .header-text h1 { font-size: 2.5rem; }
    header .header-text .lead { font-size: 1.2rem; }
    header .header-text p { font-size: 1rem; }
}

/* Services section heading */
#services h2 {
    font-size: 3.5rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-almostwhite);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    margin-bottom: 2rem;
}

/* Services section lead paragraph */
#services .lead {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-almostwhite);
    line-height: 1.6;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
    margin-bottom: 4rem !important;
}

@media (max-width: 768px) {
    #services h2 { font-size: 2.5rem; }
    #services .lead { font-size: 1.2rem; max-width: 100%; }
}
header .header-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* responsive adjustments */
@media (max-width: 768px) {
    header .header-content {
        flex-direction: column;
        text-align: left;
    }
    header .header-text {
        direction: ltr;
        max-width: 100%;
    }
}

/* Navbar overrides */
.navbar {
    background-color: var(--color-navy) !important;
    min-height: 110px;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-right: 15%;
    position: relative;
    z-index: 2000;
    overflow: visible !important;
}
.navbar .navbar-brand,
.navbar .navbar-toggler-icon {
    color: var(--color-gold) !important;
}
.navbar .navbar-toggler {
    border-color: rgba(252,163,17,.7);
}
.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28252,163,17,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar .dropdown-menu {
    /* dropdown background now light so items are visible */
    background-color: #6c757d;
    border: 1px solid rgba(226, 174, 30, 0.08);
    min-width: 160px;
    position: absolute;
    z-index: 2100;
}
.navbar .dropdown-item {
    color: var(--color-almostwhite);
    text-align: center;
    padding: 0.6rem 1rem;
}
.navbar .dropdown-item:hover {
    background-color: var(--color-aqua);
    color: var(--text-dark);
}
.navbar .dropdown-menu li + li {
    margin-top: 0.3rem;
}

/* center brand while keeping dropdown at right */
.navbar-inner {
    position: relative;
}
.navbar .navbar-brand {
    position: absolute;
    left: 20%;
    transform: translateX(-50%);
}
.navbar .dropdown {
    position: relative;
    z-index: 2100;
    margin-right: 20%;
}
.dropdown-toggle-custom {
    background: transparent;
    border: none;
    color: var(--color-gold);
}
.dropdown-toggle-custom:focus {
    box-shadow: none;
}
.dropdown-menu-custom {
    background-color: var(--color-almostwhite);
}

/* Service cards */
#services .service-card {
    background-color: var(--color-light);
    transition: transform .3s, box-shadow .3s;
}
#services .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}
#services i {
    color: var(--color-gold);
}

/* Buttons */
.btn-primary {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--text-dark);
}
.btn-primary:hover {
    background-color: darken(var(--color-gold), 10%);
    border-color: darken(var(--color-gold), 10%);
    color: var(--text-dark);
}

/* utility helpers */
.bg-navy { background-color: var(--color-navy) !important; }
.bg-aqua { background-color: var(--color-aqua) !important; }
.text-gold { color: var(--color-gold) !important; }
.text-dark { color: var(--text-dark) !important; }

/* Brand font helper */
.brand-font { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 700; }

/* Contact section layout similar to header */
#contact .contact-image {
    max-width: 50%;
    overflow: hidden;
}

#contact .contact-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Make contact form column take remaining space */
#contact .col-md-6:last-child {
    max-width: 50%;
}

@media (max-width: 768px) {
    #contact .row {
        flex-direction: column-reverse;
        text-align: center;
    }
    #contact .contact-image,
    #contact .col-md-6:last-child {
        max-width: 100%;
    }
}

/* Call to action section layout - centered and large */
.cta-content {
    padding: 2rem 0;
}

.cta-title {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--color-almostwhite);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}

.cta-subtitle {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    color: var(--color-almostwhite);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

.btn-cta {
    font-size: 1.2rem;
    padding: 0.75rem 2.5rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(252,163,17,0.4);
    transition: all 0.3s ease;
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(252,163,17,0.6);
}

@media (max-width: 768px) {
    .cta-title { font-size: 2.5rem; }
    .cta-subtitle { font-size: 1.1rem; }
    .btn-cta { font-size: 1rem; }
}

/* hide leftover wave styles */
.wave,
.wave-reverse,
.vertical-wave { display: none; }

/* Image helpers: ensure images fill their box and don't overlap other elements */
.card-image {
    overflow: hidden;
    border-radius: 8px;
}
.card-image img {
    display: block;
    width: 100%;
    height: 220px; /* default visible height */
    object-fit: cover; /* fill the box while preserving aspect ratio */
    object-position: center;
    max-width: 100%;
    position: relative;
}

/* Small screens: make images a bit shorter */
@media (max-width: 576px) {
    .card-image img { height: 160px; }
}

/* Large screens: slightly taller images */
@media (min-width: 992px) {
    .card-image img { height: 260px; }
}

/* Make sure the card below the image has space and doesn't overlap */
.card-image + .card {
    margin-top: 1rem;
}

/* Ensure service cards stack cleanly and have a more square, spacious layout */
#services .service-card {
    position: relative;
    z-index: 1;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    width: 100%;
}

#services .service-card .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#services .service-card .card-body .btn {
    margin-top: auto; /* push button to the bottom of the card */
}

/* Larger gap between services when column layout stacks */
.row.g-5 {
    gap: 2.5rem;
}

/* Section background utility with overlay for readable text */
.section-bg {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: var(--color-almostwhite);
    padding-left: 2rem;
    padding-right: 2rem;
}
.section-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,24,43,0.45), rgba(2,24,43,0.45));
    z-index: 0;
}
.section-bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1));
    z-index: 1;
    pointer-events: none;
}
.section-bg > .container,
.section-bg .container-fluid {
    position: relative;
    z-index: 1;
}

/* Allow content to be wider on large screens while keeping background full-bleed */
.section-bg .container-fluid {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* Specific section backgrounds (use images from Imagenes/) */
header.section-bg {
    background-image: url('Imagenes/9041.jpg');
}
#services.section-bg {
    background-image: url('Imagenes/top-view-internet-communication-network-with-laptop.jpg');
}
#cta.section-bg {
    background-image: url('Imagenes/3d-render-low-poly-design-abstract-blur-background.jpg  ');
}
footer.section-bg {
    /*background-image: url('Imagenes/Paleta colores.png');*/
    background-position: center bottom;
}

/* Adjust text colors for sections that use light overlays */
header.section-bg,
#services.section-bg,
#cta.section-bg,
footer.section-bg {
    color: var(--color-almostwhite);
}

/* Ensure cards on services section still readable: give them a subtle white background */
#services .service-card {
    background-color: rgba(255,255,255,0.9);
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .section-bg::before { background: linear-gradient(180deg, rgba(2,24,43,0.6), rgba(2,24,43,0.6)); }
    .section-bg { padding-left: 1rem; padding-right: 1rem; }
    header .header-text { max-width: 100%; }
    header .header-image { max-width: 100%; }
}

@media (min-width: 992px) {
    .section-bg { padding-left: 6rem; padding-right: 6rem; }
}

/* Vertical sizing: make sections taller so backgrounds are more visible */
header.section-bg,
#cta.section-bg {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#services.section-bg {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (max-width: 991.98px) {
    header.section-bg,
    #cta.section-bg,
    #services.section-bg {
        min-height: 48vh;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

/* Small screens: position collapsed navbar to the right as a dropdown panel */
@media (max-width: 991.98px) {
    .navbar-inner { position: relative; }
    .navbar-collapse {
        position: absolute;
        top: 56px; /* height of navbar */
        right: 8px;
        z-index: 2100;
        background: #6c757d;
        border-radius: 6px;
        box-shadow: 0 .5rem 1rem rgba(2,24,43,.25);
        min-width: 180px;
        padding: .25rem 0;
    }
    .navbar-collapse .navbar-nav {
        align-items: center;
        gap: 0.4rem;
    }
    .navbar-collapse .nav-item {
        width: 100%;
        text-align: center;
    }
    .navbar-collapse .nav-link {
        color: var(--text-dark) !important;
        padding: .6rem 1rem;
        white-space: nowrap;
        text-align: center;
        display: block;
    }
    .navbar-collapse .btn {
        display: inline-block;
        margin-top: 0.15rem;
        margin-bottom: 0.15rem;
    }
    .navbar-toggler {
        margin-left: auto;
        border-color: rgba(252,163,17,.2);
    }
}