/* =====================================================================
   INTEK - Responsive CSS (mobile-first additions)
   ===================================================================== */

/* --- Fuente corporativa Intek --- */
@font-face {
    font-family: 'Juegos';
    src: url('../fonts/JUEGOS.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3,
ul.dropdown li,
#footer-nav ul,
.big-btn,
.medium-btn,
.small-btn,
input.big-submit {
    font-family: 'Juegos', 'GnuolaneRegular', 'Lucida Grande', Arial, sans-serif;
}

/* --- Reset de caja y responsive base --- */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* --- Wrapper responsive --- */
.wrapper {
    width: 100%;
    max-width: 1200px;
    padding-left: 15px;
    padding-right: 15px;
}

/* --- Header / Slideshow responsive --- */
#slideshow {
    width: 100%;
    height: auto;
    min-height: 120px;
}

/* Slideshow fade entre imágenes */
#slideshow img.slide {
    display: none;
    width: 100%;
    height: 380px;
    object-fit: cover;
}
#slideshow img.slide.active {
    display: block;
}

/* Imagen de cabecera interior */
#header > img {
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: cover;
    display: block;
}

/* --- Navegación --- */
#main-nav {
    width: 100%;
}
ul.dropdown {
    max-width: 660px;
}

/* Botón hamburguesa (oculto en escritorio) */
.nav-toggle {
    display: none;
    background: #e8720a;
    color: #fff;
    border: none;
    padding: 8px 14px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 200;
}

/* --- Footer --- */
#footer {
    width: 100%;
}

/* --- Content --- */
#content {
    width: 100%;
}
.wide {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* --- Feature boxes homepage --- */
#feature-box {
    width: 100%;
}
#feature-post-box {
    width: 100%;
}

/* --- Lightbox --- */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}
#lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}
.lb-content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}
.lb-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    margin: auto;
}
.lb-close {
    position: absolute;
    top: -36px;
    right: 0;
    background: #e8720a;
    color: #fff;
    border: none;
    font-size: 24px;
    line-height: 1;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: 2px;
}
.lb-close:hover { background: #000; }

/* --- Formulario - mensajes de resultado --- */
.form-success {
    background: #e6f9e6;
    border: 1px solid #4caf50;
    color: #2e7d32;
    padding: 12px 16px;
    margin-top: 12px;
    border-radius: 3px;
    font-size: 14px;
}
.form-error {
    background: #fdecea;
    border: 1px solid #e53935;
    color: #c62828;
    padding: 12px 16px;
    margin-top: 12px;
    border-radius: 3px;
    font-size: 14px;
}

/* --- Bloque Mitsubishi Electric en sidebar --- */
.mitsubishi-partner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.mitsubishi-partner a {
    display: block;
}
.mitsubishi-partner img,
.mitsubishi-partner svg {
    max-width: 200px;
    height: auto;
}

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

    /* Wrapper */
    .wrapper {
        padding-top: 15px;
        padding-bottom: 25px;
    }

    /* Slideshow */
    #slideshow img.slide {
        height: 200px;
    }

    /* Navegación mobile */
    .nav-toggle {
        display: block;
    }
    #main-nav {
        height: auto;
        position: relative !important;
        top: auto !important;
    }
    #main-nav.fixed {
        position: fixed !important;
        top: 0;
    }
    ul.dropdown {
        display: none;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }
    #main-nav.open ul.dropdown {
        display: flex;
    }
    ul.dropdown li {
        float: none;
        width: 100%;
        display: block;
    }
    ul.dropdown li a {
        float: none;
        margin: 0;
        padding: 12px 20px;
        border-bottom: 1px solid #333;
        line-height: 1.4;
    }
    #search {
        display: none;
    }

    /* Contenido: columnas apiladas */
    .two-third,
    .one-third,
    .one-fourth,
    .two-fourth,
    .three-fourth {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
    }
    .wide {
        width: 100%;
        padding: 0 15px;
    }

    /* Content padding (nav fija) */
    #content {
        padding-top: 50px;
    }

    /* Formulario */
    #name,
    #email,
    #message {
        float: none;
        margin-right: 0;
        display: block;
        width: 100%;
    }
    form.contact-form span input {
        width: 100%;
        box-sizing: border-box;
    }
    form.contact-form span textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Mapa */
    #sidebar iframe {
        width: 100%;
        height: 250px;
    }

    /* Carrusel portfolio */
    .carousel-container {
        float: none;
        width: 100%;
    }
    .horz-carousel {
        width: 100%;
        height: auto;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
    }
    .horz-carousel > li {
        display: flex !important;
        flex-wrap: wrap;
        width: 100%;
    }
    .horz-carousel a.thumb {
        width: 23%;
        height: auto;
        margin: 1%;
    }
    .horz-carousel a.thumb img {
        width: 100%;
        height: auto;
    }
    #arr-prev,
    #arr-next {
        display: none;
    }

    /* Feature boxes homepage */
    #feature-box .one-third {
        width: 100% !important;
        margin-right: 0;
    }
    #feature-post-box h3,
    #feature-post-box p {
        margin-left: 0;
    }
    #feature-post-box .preload.left {
        float: none;
        margin-right: 0;
        margin-bottom: 15px;
    }

    /* Footer */
    #footer-nav ul {
        float: none;
        text-align: center;
    }
    #footer-nav ul li {
        display: block;
    }
    #footer-nav ul li a {
        float: none;
        line-height: 36px;
        display: block;
    }
    #footer #credits {
        float: none;
        text-align: center;
    }
}

/* =====================================================================
   BREAKPOINT TABLET (769px – 1020px)
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1220px) {
    .wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
    #slideshow img.slide {
        height: 280px;
    }
    .two-third { width: 60%; }
    .one-third { width: 36%; margin-right: 4%; }
    form.contact-form span textarea {
        width: 100%;
        max-width: 100%;
    }
}