/* ============================================
   Eléctricos Los Andes — Hoja de estilos principal
   Base: Electra theme (íntegro) + personalizaciones
   ============================================ */

/* ---- Variables del tema Electra (sobreescribe Bootstrap CDN estándar) ---- */
:root {
    --bs-primary:       #F68A0A;
    --bs-primary-rgb:   246, 138, 10;
    --bs-dark:          #0E121D;
    --bs-dark-rgb:      14, 18, 29;
    --bs-light:         #F8F8F8;
    --bs-light-rgb:     248, 248, 248;
    --bs-secondary:     #6c757d;
    --bs-white:         #fff;
    --bs-body-color:    #878d97;
    --bs-body-bg:       #fff;
    --bs-body-font-family: "Inter", sans-serif;
    --bs-heading-color: #0e121d;
    --ela-blue:         #2E3BC8;
    --ela-blue-rgb:     46, 59, 200;
}

/* ---- Body: color de texto suave igual que Electra ---- */
body {
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    color: #878d97;
    background-color: #fff;
}

/* ---- Headings: siempre negrita, Jost, oscuro ---- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Jost", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #0e121d;
}

/* ---- Párrafos color suave ---- */
p { color: #878d97; }

/* ---- bg-dark y bg-light correctos ---- */
.bg-dark  { background-color: #0E121D !important; }
.bg-light { background-color: #F8F8F8 !important; }

/* ---- Texto sobre fondos oscuros ---- */
.bg-dark p, .bg-dark li { color: rgba(255,255,255,0.75); }
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6 { color: #fff; }
.footer p, .footer li { color: rgba(255,255,255,0.7); }

/* ---- text-primary naranja ---- */
.text-primary { color: #F68A0A !important; }

/* ---- bg-primary naranjo ---- */
.bg-primary { background-color: #F68A0A !important; }

/* ---- Sin líneas en links ---- */
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ==================================================
   AZUL DEL LOGO — equilibrio naranja / azul
   ================================================== */

/* Todos los iconos FA por defecto → azul del logo */
.fa, .fas, .far, .fab, .fal, .bi {
    color: var(--ela-blue);
}

/* Excepción: iconos dentro de botones y elementos con color propio */
.btn .fa, .btn .fas, .btn .far, .btn .fab, .btn .fal,
.text-white .fa, .text-white .fas, .text-white .far, .text-white .fab,
.text-primary .fa, .text-primary .fas,
.floating-btn .fa, .floating-btn .fas, .floating-btn .fab,
.modal .fa, .modal .fas, .modal .far { color: inherit; }

/* text-primary → naranja (labels de sección, bolt, check, redes sociales) */
.text-primary { color: #F68A0A !important; }

/* Iconos de tarjetas de Servicios → azul */
.service-item span.text-primary,
.service-item i.text-primary { color: var(--ela-blue) !important; }

/* Iconos sección Sobre Nosotros → azul */
.about span.text-primary,
.about i.text-primary { color: var(--ela-blue) !important; }

/* Iconos topbar (Los Andes, Chile / email) → azul */
.topbar i.text-primary,
.topbar span.text-primary { color: var(--ela-blue) !important; }

/* Iconos de contacto footer (teléfono, email, mapa en links) → azul */
.footer i.text-primary { color: var(--ela-blue) !important; }

/* Iconos de contacto (círculos) — fondo azul */
.contact-icon { background-color: var(--ela-blue) !important; }
.contact-icon i { color: #fff !important; }

/* Botón back-to-top → azul, hover naranja */
.back-to-top,
.btn.back-to-top,
a.back-to-top,
.btn-primary.back-to-top {
    background-color: var(--ela-blue) !important;
    border-color: var(--ela-blue) !important;
    color: #fff !important;
}
.back-to-top:hover,
.btn.back-to-top:hover,
.btn-primary.back-to-top:hover {
    background-color: #F68A0A !important;
    border-color: #F68A0A !important;
}
.back-to-top .fa,
.back-to-top i { color: #fff !important; }

/* fa-arrow-up explícito — azul sobre blanco si hover cambia fondo */
.back-to-top .fa-arrow-up { color: #fff !important; }

/* Iconos del footer → azul por defecto */
.footer .fa, .footer .fas, .footer .far, .footer .fab {
    color: var(--ela-blue);
}

/* Footer redes sociales (botones light) → iconos azul */
.footer .btn-light .fab,
.footer .btn-light .fas { color: var(--ela-blue) !important; }

/* Copyright — texto blanco */
.copyright,
.copyright span,
.copyright a { color: rgba(255,255,255,0.75) !important; }
.copyright a:hover { color: #fff !important; }

/* "Diseñado por Andesbytes.cl" — negrita blanco */
.copyright .col-md-6:last-child,
.copyright .col-md-6:last-child a {
    color: #fff !important;
    font-weight: 700;
    border-bottom: none !important;
}

/* Líneas divisorias / hr */
hr { border-color: var(--ela-blue); opacity: 0.3; }

/* Border-primary en topbar → azul */
.border-primary { border-color: var(--ela-blue) !important; }

/* Navbar toggler → azul */
.navbar.navbar-expand-lg .navbar-toggler {
    border-color: var(--ela-blue) !important;
    color: var(--ela-blue) !important;
}
.navbar-toggler .fa { color: var(--ela-blue) !important; }

/* Nav-link hover/activo → azul */
.navbar-light .navbar-nav .nav-item:hover .nav-link,
.navbar-light .navbar-nav .nav-item.active .nav-link { color: var(--ela-blue) !important; }

/* Nav-links: negrita, sin salto de línea */
.navbar .nav-link {
    font-weight: 700;
    white-space: nowrap;
}

/* Cards de servicio: borde izquierdo azul al hover */
.service-item {
    border-left: 3px solid transparent;
    transition: border-color 0.3s;
}
.service-item:hover { border-left-color: var(--ela-blue); }

/* Footer links hover → azul */
.footer .footer-item a:hover { color: var(--ela-blue) !important; letter-spacing: 1px; }

/* Logo en footer */
.footer-logo {
    height: 80px;
    width: auto;
    border-radius: 8px;
}

/* ---- Todos los botones en naranjo (excepto success/danger/light y Contáctanos) ---- */
.btn-primary {
    background-color: #F68A0A !important;
    border-color: #F68A0A !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: #0E121D !important;
    border-color: #0E121D !important;
    color: #fff !important;
}

/* Botones "Contáctanos" y "Enviar Mensaje" específicos → azul */
#btnAboutContact,
#btnWhyContact,
#btnContactModal,
#btnContactSection {
    background-color: var(--ela-blue) !important;
    border-color: var(--ela-blue) !important;
    color: #fff !important;
}
#btnAboutContact:hover,
#btnWhyContact:hover,
#btnContactModal:hover,
#btnContactSection:hover {
    background-color: #F68A0A !important;
    border-color: #F68A0A !important;
    color: #fff !important;
}

/* ---- Card "20+ Años de experiencia" — texto legible ---- */
.bg-primary .display-2 { color: #fff; font-weight: 700; }
.bg-primary p          { color: rgba(255,255,255,0.9); font-weight: 600; }

/* ---- Cards "Por Qué Elegirnos" — p en blanco nítido y negrita ---- */
.pulse-card p { color: #fff !important; font-weight: 700 !important; }

/* ---- Animaciones de scroll propias (sin dependencias externas) ---- */
/* Por defecto: contenido visible si JS no funciona */
.wow {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* Cuando JS está activo: ocultar elementos hasta que entren al viewport */
.js-animations-enabled .wow {
    opacity: 0;
    transform: translateY(30px);
}

.js-animations-enabled .wow.fadeInLeft {
    transform: translateX(-30px);
}

.js-animations-enabled .wow.fadeInRight {
    transform: translateX(30px);
}

.js-animations-enabled .wow.fadeIn {
    transform: translateY(0);
}

/* Al activar la animación */
.js-animations-enabled .wow.animated {
    opacity: 1;
    transform: translateY(0) translateX(0) !important;
}

/* ---- Cards Por Qué Elegirnos debajo de la imagen ---- */
.why-cards-overlay {
    position: static;
    margin-top: 1.5rem;
}

@media (max-width: 991px) {
    .why-cards-overlay .col-md-6 {
        width: 100%;
    }
}

/* Altura mínima de la imagen para evitar colapso */
.testimonial img.object-fit-cover {
    min-height: 250px;
    object-fit: cover;
}

/* ---- Efectos hover en cards de servicio ---- */
.service-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s;
}
.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(46, 59, 200, 0.15);
    border-left-color: var(--ela-blue);
}
.service-item:hover .fas,
.service-item:hover .fa {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* ---- Efecto pulse en cards de Por Qué Elegirnos ---- */
.pulse-card {
    animation: pulse 2s infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pulse-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(246, 138, 10, 0.3);
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(246, 138, 10, 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(246, 138, 10, 0);
    }
}

/* ---- Efecto hover en botones ---- */
.btn {
    transition: all 0.3s ease;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* ---- Efecto hover en iconos de contacto ---- */
.contact-icon {
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.contact-icon:hover {
    transform: scale(1.1);
    background-color: var(--bs-primary) !important;
}

/* ---- Efecto hover en footer logo ---- */
.footer-logo {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.footer-logo:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Spinner size */
.spinner-lg { width: 3rem; height: 3rem; }

/* ==================================================
   ELECTRA THEME — copia íntegra de Electra/css/style.css
   ================================================== */

/*** Spinner Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}
#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    transition: 0.5s;
    z-index: 99;
}

/*** Button Start ***/
.btn { font-weight: 600; transition: .5s; }
.btn-square   { width: 32px; height: 32px; }
.btn-sm-square { width: 34px; height: 34px; }
.btn-md-square { width: 40px; height: 40px; }
.btn-lg-square { width: 46px; height: 46px; }
.btn-xl-square { width: 56px; height: 56px; }
.btn-square, .btn-sm-square, .btn-md-square, .btn-lg-square, .btn-xl-square {
    padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal;
}
.btn.btn-primary { color: var(--bs-white); border: none; }
.btn.btn-primary:hover { background: var(--bs-dark); color: var(--bs-white); }
.btn.btn-light { color: var(--bs-primary); border: none; }
.btn.btn-light:hover { color: var(--bs-white); background: var(--bs-primary); }
/*** Button End ***/

/*** Navbar Start ***/
.header-top .topbar .dropdown-toggle::after {
    border: none; content: "\f107"; font-family: "Font Awesome 5 Free";
    font-weight: 600; vertical-align: middle; margin-left: 8px; color: var(--bs-primary);
}
.header-top .topbar .dropdown .dropdown-menu {
    transform: rotateX(0deg); visibility: visible; background: var(--bs-light);
    padding-top: 12px; border: 0; transition: .5s; opacity: 1;
}
.header-top { height: 125px; position: relative; }
.header-top::after {
    content: ""; position: absolute; overflow: hidden;
    width: 50%; height: 100%; top: 0; left: 0;
    background: var(--bs-dark); z-index: 1;
}
.header-top .container { position: relative; z-index: 999; }

@media (min-width: 992px) {
    .header-top::before {
        content: ""; position: absolute; overflow: hidden;
        width: 100%; height: 45px; top: 0; right: 0;
        background: var(--bs-dark); z-index: -1;
    }
    .navbar-brand-2 { display: none; }
    .header-top .navbar-brand {
        position: relative; overflow: hidden; padding: 40px 50px 40px 0; z-index: 99;
    }
    .navbar-brand::before {
        content: ""; position: absolute; overflow: hidden;
        width: 300px; height: 600px; top: -200px; right: 18px;
        background: var(--bs-dark); transform: rotate(-18deg); z-index: -1;
    }
    .navbar-brand::after {
        content: ""; position: absolute; overflow: hidden;
        width: 5px; height: 600px; top: -200px; right: 18px;
        background: var(--ela-blue); transform: rotate(-18deg); z-index: -1;
    }
    .nav-bar .navbar::before {
        position: absolute; content: ""; width: 50px; height: 100%;
        top: 0; left: -49px; background: var(--bs-white);
    }
    .navbar .nav-btn { display: flex; align-items: center; justify-content: end; }
    .navbar .navbar-nav {
        width: 100%; display: flex; justify-content: center; align-items: center;
        background: var(--bs-light); border-radius: 10px;
    }
    .navbar .navbar-nav .nav-btn { width: 100%; display: flex; margin-left: auto; }
    .navbar .nav-item .dropdown-menu {
        display: block; visibility: hidden; top: 100%;
        transform: rotateX(-75deg); transform-origin: 0% 0%;
        border: 0; transition: .5s; opacity: 0;
    }
    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg); visibility: visible; margin-top: 19px;
        background: var(--bs-white); transition: .5s; opacity: 1;
    }
}

@media (max-width: 991px) {
    .header-top { max-height: 80px; }
    .navbar { justify-content: space-between; }
    .header-top .container { max-height: 80px; }
    .navbar-brand { display: none; }
    .navbar-brand-2 {
        position: relative; overflow: hidden; width: 200px; height: 100%;
        padding: 0; display: flex; align-items: center; z-index: 99;
    }
    .navbar-brand-2::before {
        content: ""; position: absolute; overflow: hidden;
        width: 100%; height: 600px; top: -200px; right: 18px;
        background: var(--bs-dark); transform: rotate(-18deg); z-index: -1;
    }
    .navbar-brand-2::after {
        content: ""; position: absolute; overflow: hidden;
        width: 5px; height: 600px; top: -200px; right: 18px;
        background: var(--ela-blue); transform: rotate(-18deg); z-index: -1;
    }
    .navbar.navbar-light { height: 100%; padding: 0; }
    .navbar .navbar-collapse { margin-top: -20px; }
    .navbar { padding: 20px 0; }
    .navbar .navbar-nav .nav-link { padding: 0; }
    .navbar .navbar-nav .nav-item {
        display: flex; padding: 12px; flex-direction: column;
        justify-content: start; align-items: start;
    }
    .navbar .navbar-nav .nav-btn { display: flex; justify-content: start; }
    .navbar .navbar-nav {
        width: 100%; display: flex; margin-top: 20px; padding-bottom: 20px;
        margin-left: 50px; background: var(--bs-light);
    }
    .navbar .navbar-nav .nav-btn { display: flex; flex-direction: column; }
    .navbar .navbar-nav .nav-btn a.btn { margin-right: 15px; }
    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 8px 15px; border: 1px solid var(--bs-primary); color: var(--bs-primary);
    }
}

.nav-bar .navbar { height: 100%; background: var(--bs-white); position: relative; z-index: 9; }
.navbar-light .navbar-brand img { max-height: 60px; transition: .5s; }
.nav-bar .navbar-light .navbar-brand img { max-height: 50px; }
.navbar .navbar-nav .nav-item .nav-link { padding: 0; }
.navbar .navbar-nav .nav-item { display: flex; align-items: center; padding: 0; margin-right: 20px; }
.navbar-light .navbar-nav .nav-item:hover,
.navbar-light .navbar-nav .nav-item.active,
.navbar-light .navbar-nav .nav-item:hover .nav-link,
.navbar-light .navbar-nav .nav-item.active .nav-link { color: var(--bs-primary); }
.navbar .dropdown-toggle::after {
    border: none; content: "\f107"; font-family: "Font Awesome 5 Free";
    font-weight: 600; vertical-align: middle; margin-left: 8px;
}
.dropdown .dropdown-menu .dropdown-item:hover { background: var(--bs-primary); color: var(--bs-white); }
/*** Navbar End ***/

/*** Hero Start ***/
.hero-section {
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
    width: 100%;
    min-height: 700px;
    display: flex;
    align-items: center;
    position: relative;
}
.hero-bg-half-1 {
    background: linear-gradient(135deg, #F68B1E 0%, #e67e22 100%);
    clip-path: polygon(37% 0%, 100% 0%, 100% 100%, 0% 100%);
    position: absolute;
    width: 58%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 1;
}
.hero-shape-1 {
    background-color: var(--bs-primary);
    width: 150px;
    height: 50%;
    position: absolute;
    left: 54%;
    top: 0;
    transform: translateY(-50%) skew(-26deg, 0deg);
}
.hero-shape-1:before {
    background-color: var(--bs-dark);
    content: "";
    width: 50%;
    height: 80%;
    position: absolute;
    right: 0;
    top: 0;
}
.hero-section .carousel-caption { z-index: 9; }
/*** Hero End ***/

/*** Service Start ***/
.service .nav .nav-item { width: 75%; border: 1px solid var(--bs-primary); background: var(--bs-light); }
.service .nav .nav-item a { display: flex; justify-content: center; }
.owl-stage-outer { margin-right: -1px; }
.service .nav-item a.active { background: var(--bs-primary); }
.service .nav-item a span { color: var(--bs-dark); }
.service .nav-item a.active span { color: var(--bs-white); }
.service-carousel .owl-nav .owl-prev,
.service-carousel .owl-nav .owl-next {
    position: absolute; padding: 10px 35px;
    border: 1px solid var(--bs-primary); color: var(--bs-dark);
    background: var(--bs-light); transition: 0.5s;
}
.service-carousel .owl-nav .owl-prev:hover,
.service-carousel .owl-nav .owl-next:hover { background: var(--bs-primary); color: var(--bs-white); }
@media (min-width: 992px) {
    .service-carousel .owl-nav .owl-prev { top: 0; left: -115px; }
    .service-carousel .owl-nav .owl-next { bottom: 0; left: -115px; }
}
@media (max-width: 991px) {
    .owl-stage-outer { margin-bottom: 70px; }
    .service-carousel .owl-nav .owl-prev { bottom: -70px; left: 0; }
    .service-carousel .owl-nav .owl-next { bottom: -70px; right: 0; }
    .service .nav { display: flex; justify-content: center; }
}
/*** Service End ***/

/*** Team Start ***/
.team .team-item .team-img { position: relative; overflow: hidden; }
.team .team-item .team-img img { transition: 0.5s; }
.team .team-item:hover .team-img img { transform: scale(1.1); }
.team .team-item .team-img .team-icon { position: absolute; bottom: 20px; right: -100%; z-index: 9; transition: 0.5s; }
.team .team-item:hover .team-img .team-icon { right: 25px; }
.team .team-item .team-img::after {
    content: ""; position: absolute; width: 100%; height: 0;
    top: 0; left: 0; background: rgba(246, 138, 10, .2); transition: 0.5s; z-index: 1;
}
.team .team-item:hover .team-img::after { height: 100%; }
.team .team-item .team-content { transition: 0.5s; }
.team .team-item:hover .team-content { box-shadow: 0 0 20px rgba(0,0,0,.2); }
/*** Team End ***/

/*** Testimonial Start ***/
.testimonial-carousel .owl-stage-outer { margin-right: -1px; }
.testimonial .testimonial-item { position: relative; margin-top: 35px; }
.testimonial .testimonial-item .customer-text { border: 1px solid var(--bs-primary); border-top: none; }
.testimonial .testimonial-item .testimonial-quote {
    position: absolute; width: 50px; height: 50px; top: 0; right: 25px;
    transform: translateY(-50%); color: var(--bs-dark); background: var(--bs-primary);
    display: flex; align-items: center; justify-content: center;
}
.testimonial .testimonial-item .testimonial-inner { display: flex; align-items: center; background: var(--bs-white); }
.testimonial .testimonial-item .testimonial-inner img { width: 100px; height: 100px; border: 2px solid var(--bs-primary); }
.testimonial-carousel .owl-dots { display: flex; align-items: center; justify-content: center; text-align: center; }
.testimonial-carousel .owl-dots .owl-dot {
    width: 30px; height: 30px; margin: 30px 10px 0 10px; background: var(--bs-white); transition: 0.5s;
}
@media (max-width: 991px) {
    .testimonial-carousel .owl-dots .owl-dot { margin: 0 10px 0 10px; }
}
.testimonial-carousel .owl-dots .owl-dot.active { width: 30px; height: 30px; background: var(--bs-primary); transition: 0.5s; }
.testimonial-carousel .owl-dots .owl-dot span {
    position: relative; margin-top: 50%; margin-left: 50%;
    transform: translate(-50%, -50%); margin-right: -1px;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.testimonial-carousel .owl-dots .owl-dot.active span::after { background: var(--bs-white); }
.testimonial-carousel .owl-dots .owl-dot span::after {
    content: ""; width: 15px; height: 15px; position: absolute;
    top: 50%; left: 0; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: var(--bs-primary); transition: 0.5s;
}
/*** Testimonial End ***/

/*** Footer Start ***/
.footer { background: var(--bs-dark); }
.footer .footer-item a { line-height: 35px; color: var(--bs-white); transition: 0.5s; }
.footer .footer-item p { line-height: 35px; }
.footer .footer-item a:hover { letter-spacing: 1px; color: var(--bs-primary); }
.footer .footer-item .footer-btn a { transition: 0.5s; }
.footer .footer-item .footer-btn a:hover { background: var(--bs-white); color: var(--bs-primary); }
/*** Footer End ***/

/*** Copyright Start ***/
.copyright { border-top: 1px solid rgba(255,255,255,0.08); background: var(--bs-dark); }
/*** Copyright End ***/

.sticky-top { transition: top 0.3s ease; }

/* ==================================================
   PERSONALIZACIONES PROPIAS
   ================================================== */

/* Logo desktop */
.logo-desktop-wrapper { height: 125px; }
.logo-desktop-link { height: 125px; display: flex; align-items: center; }
.logo-desktop-img { height: 100px; width: auto; object-fit: contain; }
.logo-mobile-img { height: 55px; width: auto; object-fit: contain; }

/* Topbar height */
.topbar { height: 45px; }

/* Nav desktop min-width */
@media (min-width: 992px) {
    .navbar-nav-desktop { min-width: 700px; }
    .nav-bar { height: 80px; }
}

/* Services intro */
.services-intro { max-width: 800px; }

/* Contact icons */
.contact-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-item-clickable { cursor: pointer; }

/* Contact map */
.contact-map { height: 330px; }

/* Hero carousel items */
.hero-carousel-item-inner { height: 400px; display: flex; align-items: center; justify-content: center; }

/* Modal */
.modal-contact-content { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
.modal-input { background: rgba(255,255,255,0.1) !important; color: white !important; }
.modal-input::placeholder { color: rgba(255,255,255,0.5); }
.modal-label { color: rgba(255,255,255,0.7); }
.modal-select option { background: #1a1a2e; }
.modal-backdrop { z-index: 1040; }
.modal { z-index: 1055; }

/* Form */
.honeypot { display: none; }
.form-message { margin-top: 15px; padding: 10px; border-radius: 8px; text-align: center; font-weight: 600; display: none; }
.form-message.success { display: block; background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.form-message.error   { display: block; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.footer .form-control::placeholder { color: #6c757d; }

/* Floating buttons */
.floating-buttons { position: fixed; bottom: 120px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 999; }
.floating-btn {
    display: flex; align-items: center; gap: 10px; padding: 12px 20px;
    border-radius: 50px; color: white; font-weight: 700; font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: 0.3s; text-decoration: none;
}
.floating-btn:hover { transform: translateY(-3px) scale(1.05); text-decoration: none; color: white; }
.floating-btn-contact   { background-color: #25D366; }
.floating-btn-emergency { background-color: #dc3545; animation: pulse-emergency 2s infinite; }
.floating-icon { font-size: 1.2rem; }
.floating-text { font-size: 0.85rem; }
@keyframes pulse-emergency {
    0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
    50%       { box-shadow: 0 0 0 10px rgba(220,53,69,0.4); }
}

/* Pulse card */
.pulse-card { animation: pulse-card 2s infinite; }
@keyframes pulse-card {
    0%, 100% { box-shadow: 0 0 0 0 rgba(246,139,30,0.7); }
    50%       { box-shadow: 0 0 0 15px rgba(246,139,30,0); }
}

/* ==================================================
   MÓVIL ≤ 991px
   ================================================== */
@media (max-width: 991px) {

    /* Header fondo oscuro limpio */
    .header-top {
        height: auto !important;
        max-height: none !important;
        background: #212529 !important;
    }
    .header-top::after,
    .header-top::before { display: none !important; }
    .header-top .container { max-height: none !important; }
    .nav-bar { height: auto !important; }

    /* Navbar móvil transparente cuando está colapsado */
    .navbar.navbar-expand-lg {
        flex-wrap: wrap !important;
        padding: 8px 12px !important;
        justify-content: space-between !important;
        background: transparent !important;
    }
    .navbar-nav {
        min-width: unset !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Menú desplegable móvil: blanco semitransparente */
    .navbar-collapse {
        background: transparent !important;
    }
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        margin-top: 8px !important;
        padding: 15px 0 25px 0;
        min-height: auto;
        overflow: visible;
    }
    .navbar-collapse.show .navbar-nav,
    .navbar-collapse.collapsing .navbar-nav,
    .navbar-collapse.show .bg-white,
    .navbar-collapse.collapsing .bg-white {
        background: transparent !important;
    }

    /* Centrar items del menú móvil */
    .navbar-collapse.show .navbar-nav,
    .navbar-collapse.collapsing .navbar-nav {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 15px 0 !important;
    }
    .navbar-collapse.show .navbar-nav .nav-item,
    .navbar-collapse.collapsing .navbar-nav .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 0 !important;
        margin: 4px 0 !important;
        width: 100% !important;
        min-height: 44px !important;
    }
    .navbar-collapse.show .navbar-nav .nav-link,
    .navbar-collapse.collapsing .navbar-nav .nav-link {
        font-size: 17px !important;
        padding: 8px 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Separación extra entre Contacto y el botón */
    .navbar-collapse.show .navbar-nav .nav-item:last-of-type,
    .navbar-collapse.collapsing .navbar-nav .nav-item:last-of-type {
        margin-bottom: 10px !important;
    }

    /* Botón Enviar Mensaje más abajo, separado del menú, centrado */
    .navbar-collapse.show .navbar-nav .nav-btn,
    .navbar-collapse.collapsing .navbar-nav .nav-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 25px !important;
        padding: 15px 0 !important;
        width: 100% !important;
    }
    .navbar-collapse.show .navbar-nav .nav-btn .btn,
    .navbar-collapse.collapsing .navbar-nav .nav-btn .btn {
        width: 100%;
        max-width: 250px;
        margin: 0 auto !important;
    }

    /* Texto mínimo 18px — colores Electra preservados */
    body    { font-size: 18px !important; color: #878d97; }
    p, li, td, th, label { font-size: 18px !important; color: #878d97; }
    .nav-link { font-size: 18px !important; }
    h1 { font-size: 2rem !important; color: #0e121d; }
    h2 { font-size: 1.6rem !important; color: #0e121d; }
    h3 { font-size: 1.4rem !important; color: #0e121d; }
    h4 { font-size: 1.2rem !important; color: #0e121d; }
    h5 { font-size: 1.1rem !important; color: #0e121d; }

    /* Hero */
    .hero-section { min-height: auto !important; padding: 40px 0 !important; }
    .hero-carousel-item-inner { height: 250px; }

    /* Floating buttons */
    .floating-buttons { bottom: 80px !important; right: 12px !important; }
}

/* FIN */

/* ============================================
   BACK TO TOP
   ============================================ */
.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    transition: 0.5s;
    z-index: 99;
}

/* ============================================
   BUTTONS (Electra base)
   ============================================ */
.btn { font-weight: 600; transition: .5s; }
.btn-square  { width: 32px; height: 32px; }
.btn-sm-square { width: 34px; height: 34px; }
.btn-md-square { width: 40px; height: 40px; }
.btn-lg-square { width: 46px; height: 46px; }
.btn-xl-square { width: 56px; height: 56px; }
.btn-square, .btn-sm-square, .btn-md-square, .btn-lg-square, .btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}
.btn.btn-primary        { color: #fff; border: none; }
.btn.btn-primary:hover  { background: var(--bs-dark); color: #fff; }
.btn.btn-light          { color: var(--bs-primary); border: none; }
.btn.btn-light:hover    { color: #fff; background: var(--bs-primary); }

/* ============================================
   NAVBAR / HEADER (Electra base)
   ============================================ */
.header-top .topbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
    color: var(--bs-primary);
}
.header-top .topbar .dropdown .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-light);
    padding-top: 12px;
    border: 0;
    transition: .5s;
    opacity: 1;
}
.header-top {
    height: 125px;
    position: relative;
}
.header-top::after {
    content: "";
    position: absolute;
    overflow: hidden;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--bs-dark);
    z-index: 1;
}
.header-top .container {
    position: relative;
    z-index: 999;
}

/* Desktop (lg+) */
@media (min-width: 992px) {
    .header-top::before {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 45px;
        top: 0;
        right: 0;
        background: var(--bs-dark);
        z-index: -1;
    }
    .navbar-brand-2 { display: none; }
    .header-top .navbar-brand {
        position: relative;
        overflow: hidden;
        padding: 40px 50px 40px 0;
        z-index: 99;
    }
    .navbar-brand::before {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 300px;
        height: 600px;
        top: -200px;
        right: 18px;
        background: var(--bs-dark);
        transform: rotate(-18deg);
        z-index: -1;
    }
    .navbar-brand::after {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 5px;
        height: 600px;
        top: -200px;
        right: 18px;
        background: var(--ela-blue);
        transform: rotate(-18deg);
        z-index: -1;
    }
    .nav-bar .navbar::before {
        position: absolute;
        content: "";
        width: 50px;
        height: 100%;
        top: 0;
        left: -49px;
        background: var(--bs-white);
    }
    .navbar .nav-btn { display: flex; align-items: center; justify-content: end; }
    .navbar .navbar-nav {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--bs-light);
        border-radius: 10px;
    }
    .navbar .navbar-nav .nav-btn { width: 100%; display: flex; margin-left: auto; }
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        transition: .5s;
        opacity: 0;
    }
    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        margin-top: 19px;
        background: var(--bs-white);
        transition: .5s;
        opacity: 1;
    }
}

/* Shared navbar */
.nav-bar .navbar { height: 100%; background: var(--bs-white); position: relative; z-index: 9; }
.navbar-light .navbar-brand img { max-height: 60px; transition: .5s; }
.nav-bar .navbar-light .navbar-brand img { max-height: 50px; }
.navbar .navbar-nav .nav-item .nav-link { padding: 0; }
.navbar .navbar-nav .nav-item { display: flex; align-items: center; padding: 0; margin-right: 20px; }
.navbar-light .navbar-nav .nav-item:hover,
.navbar-light .navbar-nav .nav-item.active,
.navbar-light .navbar-nav .nav-item:hover .nav-link,
.navbar-light .navbar-nav .nav-item.active .nav-link { color: var(--bs-primary); }
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
}
.dropdown .dropdown-menu .dropdown-item:hover { background: var(--bs-primary); color: var(--bs-white); }

/* Logo personalizado */
.navbar-brand img { object-fit: contain; }

/* nav-bar container height (desktop) */
.nav-bar { height: 80px; }

/* ============================================
   NAVBAR DESKTOP — nav-bar altura
   ============================================ */
/* (ya definido arriba con .nav-bar { height: 80px }) */

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
    min-height: 700px;
    display: flex;
    align-items: center;
    position: relative;
}
.hero-bg-half-1 {
    background: linear-gradient(135deg, #F68B1E 0%, #e67e22 100%);
    clip-path: polygon(37% 0%, 100% 0%, 100% 100%, 0% 100%);
    position: absolute;
    width: 58%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 1;
}
.hero-shape-1 {
    background-color: var(--bs-primary);
    width: 150px;
    height: 50%;
    position: absolute;
    left: 54%;
    top: 0;
    transform: translateY(-50%) skew(-26deg, 0deg);
}
.hero-shape-1:before {
    background-color: var(--bs-dark);
    content: "";
    width: 50%;
    height: 80%;
    position: absolute;
    right: 0;
    top: 0;
}
.hero-section .carousel-caption { z-index: 9; }

/* Carousel dentro del hero */
.hero-carousel .hero-carousel-item { padding: 10px; }

/* ============================================
   CAROUSEL ITEMS (inline style reemplazado)
   ============================================ */
.hero-carousel-item-inner {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   CONTACT ICONS (inline style reemplazado)
   ============================================ */
.contact-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

/* ============================================
   MODAL CONTENT (inline style reemplazado)
   ============================================ */
.modal-contact-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.modal-input {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}
.modal-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.modal-label { color: rgba(255, 255, 255, 0.7); }
.modal-select option { background: #1a1a2e; }

/* Mapa iframe */
.contact-map { height: 330px; }

/* ============================================
   SERVICES
   ============================================ */
.service .nav .nav-item { width: 75%; border: 1px solid var(--bs-primary); background: var(--bs-light); }
.service .nav .nav-item a { display: flex; justify-content: center; }
.owl-stage-outer { margin-right: -1px; }
.service .nav-item a.active { background: var(--bs-primary); }
.service .nav-item a span { color: var(--bs-dark); }
.service .nav-item a.active span { color: var(--bs-white); }

/* ============================================
   FOOTER
   ============================================ */
.footer { background: var(--bs-dark); }
.footer .footer-item a { line-height: 35px; color: var(--bs-white); transition: 0.5s; }
.footer .footer-item p { line-height: 35px; }
.footer .footer-item a:hover { letter-spacing: 1px; color: var(--bs-primary); }
.footer .footer-item .footer-btn a { transition: 0.5s; }
.footer .footer-item .footer-btn a:hover { background: var(--bs-white); color: var(--bs-primary); }
.footer .form-control::placeholder { color: #6c757d; }

/* ============================================
   COPYRIGHT
   ============================================ */
.copyright { border-top: 1px solid rgba(255, 255, 255, 0.08); background: var(--bs-dark); }

/* ============================================
   FLOATING BUTTONS
   ============================================ */
.floating-buttons {
    position: fixed;
    bottom: 120px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
}
.floating-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 50px;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
    text-decoration: none;
}
.floating-btn:hover { transform: translateY(-3px) scale(1.05); text-decoration: none; color: white; }
.floating-btn-contact { background-color: #25D366; }
.floating-btn-emergency { background-color: #dc3545; animation: pulse 2s infinite; }
.floating-icon { font-size: 1.2rem; }
.floating-text { font-size: 0.85rem; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
    50%       { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0.4); }
}

/* ============================================
   CONTACT FORM / MODAL
   ============================================ */
.honeypot { display: none; }
.form-message { margin-top: 15px; padding: 10px; border-radius: 8px; text-align: center; font-weight: 600; display: none; }
.form-message.success { display: block; background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.form-message.error   { display: block; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.modal-backdrop { z-index: 1040; }
.modal { z-index: 1055; }

/* ============================================
   PULSE CARD
   ============================================ */
.pulse-card { animation: pulse-card 2s infinite; }
@keyframes pulse-card {
    0%, 100% { box-shadow: 0 0 0 0 rgba(246, 139, 30, 0.7); }
    50%       { box-shadow: 0 0 0 15px rgba(246, 139, 30, 0); }
}

/* ============================================
   STICKY TOP
   ============================================ */
.sticky-top { transition: top 0.3s ease; }

/* ============================================
   LOGO (reemplaza inline styles)
   ============================================ */
.logo-desktop-wrapper {
    height: 125px;
}
.logo-desktop-link {
    height: 125px;
    display: flex;
    align-items: center;
}
.logo-desktop-img {
    height: 100px;
    width: auto;
}
.logo-mobile-img {
    height: 55px;
    width: auto;
    object-fit: contain;
}

/* ============================================
   NAVBAR DESKTOP min-width (reemplaza inline)
   ============================================ */
@media (min-width: 992px) {
    .navbar-nav-desktop {
        min-width: 700px;
    }
}

/* ============================================
   TOPBAR HEIGHT (reemplaza inline)
   ============================================ */
.topbar { height: 45px; }

/* ============================================
   SERVICES INTRO max-width (reemplaza inline)
   ============================================ */
.services-intro {
    max-width: 800px;
}

/* ============================================
   CONTACT ITEM CLICKABLE (reemplaza inline)
   ============================================ */
.contact-item-clickable {
    cursor: pointer;
}

/* ============================================
   MÓVIL (max 991px)
   ============================================ */
@media (max-width: 991px) {

    /* Header: fondo oscuro limpio, sin pseudo-elementos del Electra */
    .header-top {
        height: auto !important;
        max-height: none !important;
        background: #212529 !important;
    }
    .header-top::after,
    .header-top::before { display: none !important; }
    .header-top .container { max-height: none !important; }
    .nav-bar { height: auto !important; }

    /* Navbar: logo izquierda, hamburger derecha */
    .navbar.navbar-expand-lg {
        flex-wrap: wrap !important;
        padding: 8px 12px !important;
        justify-content: space-between !important;
    }

    /* Menú: sin min-width fijo */
    .navbar-nav {
        min-width: unset !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Texto mínimo 18px en contenido */
    body    { font-size: 18px !important; }
    p, li, td, th, label, .nav-link { font-size: 18px !important; }
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.4rem !important; }
    h4 { font-size: 1.2rem !important; }
    h5 { font-size: 1.1rem !important; }

    /* Hero */
    .hero-section { min-height: auto !important; padding: 40px 0 !important; }
    .hero-carousel-item-inner { height: 250px; }

    /* Floating buttons */
    .floating-buttons { bottom: 80px !important; right: 12px !important; }

    /* Services media */
    .owl-stage-outer { margin-bottom: 70px; }
    .service .nav { display: flex; justify-content: center; }

    /* Menú hamburguesa: fondo blanco semitransparente, items centrados */
    .navbar.navbar-expand-lg {
        position: relative !important;
        background: transparent !important;
    }
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        padding: 15px 0 30px 0 !important;
    }
    .navbar-collapse.show .navbar-nav,
    .navbar-collapse.collapsing .navbar-nav,
    .navbar-collapse.show .bg-white,
    .navbar-collapse.collapsing .bg-white {
        background: transparent !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .navbar-collapse.show .navbar-nav .nav-item,
    .navbar-collapse.collapsing .navbar-nav .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px 0 !important;
        margin: 6px 0 !important;
        width: 100% !important;
        text-align: center !important;
    }
    .navbar-collapse.show .navbar-nav .nav-link,
    .navbar-collapse.collapsing .navbar-nav .nav-link {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }
    .navbar-collapse.show .navbar-nav .nav-btn,
    .navbar-collapse.collapsing .navbar-nav .nav-btn {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 25px !important;
        padding: 0 !important;
    }
    .navbar-collapse.show .navbar-nav .nav-btn .btn,
    .navbar-collapse.collapsing .navbar-nav .nav-btn .btn {
        width: 100%;
        max-width: 250px;
        margin: 0 auto !important;
    }

}