/* ===========================================
   RESPONSIVE STYLES FOR TREN SUBURBANO
   =========================================== */

/* ===========================================
   BREAKPOINTS
   =========================================== */
/* 
   Mobile: 320px - 767px
   Tablet: 768px - 991px  
   Desktop: 992px+
*/

/* ===========================================
   MOBILE FIRST APPROACH
   =========================================== */

/* ===========================================
   NAVBAR RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .suburbano-navbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: #333 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .navbar-toggler {
        border: none;
        padding: 4px 8px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-collapse {
        background-color: #333;
        margin-top: 10px;
        border-radius: 8px;
        padding: 15px;
    }

    .navbar-nav .nav-link {
        color: white !important;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }

    .navbar-nav .nav-link.active {
        color: #dc3545 !important;
        font-weight: bold;
    }
}

/* ===========================================
   HERO SECTIONS RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .hero {
        margin-top: 0 !important;
        height: 60vh !important;
        min-height: 400px;
        background-position: center !important;
        background-size: cover !important;
    }

    .hero__content {
        margin: 40px 0 !important;
        padding: 20px !important;
    }

    .home__hero {
        margin-top: 0 !important;
        height: 100vh !important;
    }

    .home__hero--slide {
        height: 100vh !important;
    }

    .home__hero--content {
        padding: 20px !important;
    }

    .home__hero--content .hero-content-wrapper {
        max-width: 90% !important;
        text-align: center !important;
    }

    .hero-cta {
        font-size: 1rem !important;
        padding: 10px 20px !important;
    }

    .hero-content-wrapper {
        max-width: 90% !important;
    }
}

@media (max-width: 767px) {
    .hero {
        height: 50vh !important;
        min-height: 350px;
    }

    .hero__content {
        margin: 20px 0 !important;
        padding: 15px !important;
    }

    .hero-cta {
        font-size: 0.9rem !important;
        padding: 8px 16px !important;
    }

    .home__hero--content .hero-content-wrapper {
        max-width: 95% !important;
        padding: 10px !important;
    }
}

/* ===========================================
   GRID LAYOUTS RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .grid--2cols {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .grid--2cols--45-55 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .grid--3cols {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    .grid--4cols {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    .grid--5cols {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 16px !important;
    }
}

@media (max-width: 767px) {
    .grid--3cols {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .grid--4cols {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .grid--5cols {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
}

@media (max-width: 575px) {
    .grid--5cols {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ===========================================
   TYPOGRAPHY RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .text--xl {
        font-size: 2rem !important;
    }

    .text--lg {
        font-size: 1.5rem !important;
    }

    .text--md {
        font-size: 1rem !important;
    }

    .text--sm {
        font-size: 0.9rem !important;
    }

    .section__title {
        font-size: 2rem !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 767px) {
    .text--xl {
        font-size: 1.5rem !important;
    }

    .text--lg {
        font-size: 1.25rem !important;
    }

    .text--md {
        font-size: 0.95rem !important;
    }

    .section__title {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }
}

/* ===========================================
   SPACING RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .mw--1440 {
        padding: 0 20px !important;
    }

    .py-4 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-md-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 767px) {
    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ===========================================
   IMAGES RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .w-100 {
        width: 100% !important;
    }

    .mw--680 {
        max-width: 100% !important;
    }

    .mw--980 {
        max-width: 100% !important;
    }

    .mw--1440 {
        max-width: 100% !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ===========================================
   BUTTONS RESPONSIVE
   =========================================== */
@media (max-width: 767px) {
    .btn {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
    }

    .btn--rounded {
        border-radius: 25px !important;
    }
}

/* ===========================================
   FORMS RESPONSIVE
   =========================================== */
@media (max-width: 767px) {
    .form-control {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
        padding: 12px !important;
        border-radius: 6px !important;
    }

    .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 5px !important;
    }

    .form-check-input {
        margin-top: 0.3rem !important;
    }

    .form-check-label {
        font-size: 0.9rem !important;
    }
}

/* ===========================================
   CAROUSEL RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .splide__arrow {
        padding: 8px !important;
        font-size: 12px !important;
    }

    .splide__pagination {
        bottom: 15px !important;
    }

    .splide__pagination__page {
        width: 8px !important;
        height: 8px !important;
        margin: 0 3px !important;
    }
}

@media (max-width: 767px) {
    .splide__arrow {
        padding: 6px !important;
        font-size: 10px !important;
    }

    .splide__pagination {
        bottom: 10px !important;
    }

    .splide__pagination__page {
        width: 6px !important;
        height: 6px !important;
        margin: 0 2px !important;
    }
}

/* ===========================================
   TEXT CAROUSEL RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .text-carousel {
        height: 5rem !important;
        min-height: 5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .carousel-item.text {
        font-size: 2.2rem !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.2 !important;
        padding: 0 10px !important;
    }
}

@media (max-width: 767px) {
    .text-carousel {
        height: 5rem !important;
        min-height: 5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .carousel-item.text {
        font-size: 1.8rem !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.2 !important;
        padding: 0 10px !important;
        font-weight: 600 !important;
    }
}


/* ===========================================
   SOCIAL ICONS RESPONSIVE
   =========================================== */
@media (max-width: 767px) {
    .redes__icon {
        width: 32px !important;
        height: 32px !important;
    }

    .list-unstyled.d-flex {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .list-unstyled.d-flex li {
        margin: 5px !important;
    }
}

/* ===========================================
   FOOTER RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .grid--2cols.gap--24 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .d-flex.flex-column.flex-md-row {
        flex-direction: column !important;
        text-align: center !important;
    }

    .d-flex.justify-content-end {
        justify-content: center !important;
        margin-top: 20px !important;
    }
}

@media (max-width: 767px) {
    footer {
        padding: 20px 15px !important;
    }

    .col-md-3,
    .col-md-9 {
        text-align: center !important;
        margin-bottom: 20px !important;
    }
}

/* ===========================================
   SPECIFIC PAGE RESPONSIVE
   =========================================== */

/* Home page specific */
@media (max-width: 991px) {

    /* Hero content wrapper responsive */
    .home__hero--content .hero-content-wrapper {
        max-width: 90% !important;
        text-align: center !important;
    }

    /* Second slide specific fixes */
    .home__hero--content.align-content-end {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .home__hero--content.align-content-end .hero-content-wrapper {
        max-width: 90% !important;
        text-align: center !important;
        width: auto !important;
    }

    /* Fix the text carousel container */
    .home__hero--content.align-content-end .hero-title {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* Text carousel responsive */
    .text-carousel {
        height: 5rem !important;
        min-height: 5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .carousel-item.text {
        font-size: 2.2rem !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        line-height: 1.2 !important;
        padding: 0 10px !important;
    }
}

@media (max-width: 767px) {
    .home__hero--content.align-content-end {
        align-items: center !important;
        padding-bottom: 40px !important;
    }

    .typewriter-text.animate-text-glow {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    /* Second slide mobile fixes */
    .home__hero--content.align-content-end .hero-content-wrapper {
        max-width: 95% !important;
        text-align: center !important;
        width: auto !important;
        padding: 10px !important;
    }

    .home__hero--content.align-content-end .hero-title {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    /* Text carousel mobile */
    .text-carousel {
        height: 5rem !important;
        min-height: 5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .carousel-item.text {
        font-size: 1.8rem !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        line-height: 1.2 !important;
        padding: 0 10px !important;
        font-weight: 600 !important;
    }

    /* Hero CTA button mobile */
    .home__hero--content.align-content-end .hero-cta {
        font-size: 0.9rem !important;
        padding: 8px 16px !important;
        text-align: center !important;
        display: inline-block !important;
    }

    /* Fix the specific width issue in the HTML */
    .home__hero--content.align-content-end .hero-title[style*="width: 1000px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ===========================================
   HERO SLIDE SPECIFIC FIXES
   =========================================== */
@media (max-width: 991px) {

    /* Override any inline styles that cause issues */
    .home__hero--content.align-content-end .hero-title {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* Ensure the content wrapper doesn't have fixed widths */
    .home__hero--content.align-content-end .hero-content-wrapper {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 767px) {

    /* Mobile specific overrides */
    .home__hero--content.align-content-end .hero-title {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    .home__hero--content.align-content-end .hero-content-wrapper {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        padding: 10px !important;
    }

    .prepara-images-section-inner2>* {
        margin-top: 15px !important;
    }

    .prepara-images-section-inner3>* {
        margin-top: 15px !important;
    }

    .prepara-images-section-inner {
        padding-bottom: 0 !important;
        margin-bottom: 9px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .prepara-images-section-inner>.grid--2cols.gap--24.mb-4 {
        gap: 20px !important;
        margin-bottom: 0 !important;
    }

    .prepara-images-section {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .prepara-images-section2 {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .cultura-title {
        font-size: 1.7rem !important;
        text-align: center !important;
        margin-top: 0px !important;
    }

    .equipo-images-section {
        padding: 0 !important;
    }

    .equipo-images-section>* {
        margin-top: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-left: -5% !important;
        width: 110% !important;
        max-width: 110% !important;
    }

    .cultura-horarios {
        margin-left: -10% !important;
        width: 120% !important;
        max-width: 120% !important;
    }

    .equipo-section-hitos {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Prepara page specific */
@media (max-width: 991px) {
    .facturacion__content {
        margin-bottom: 2rem !important;
    }

    .facturacion__guide-card {
        min-height: 250px !important;
    }
}

@media (max-width: 767px) {
    .facturacion__content {
        padding: 1.5rem !important;
    }

    .facturacion__guide-card {
        padding: 1.5rem !important;
        min-height: 200px !important;
    }

    .facturacion__icon {
        width: 50px !important;
        height: 50px !important;
    }

    .facturacion__icon i {
        font-size: 2rem !important;
    }
}

/* Cultura page specific */
@media (max-width: 767px) {
    .row .col-md-8.grid--2cols {
        grid-template-columns: 1fr !important;
    }

    .row .col-md-4 {
        margin-top: 20px !important;
    }
}

/* Equipo page specific */
@media (max-width: 767px) {
    .align-content-right {
        text-align: center !important;
    }

    .pl-5.ml-5 {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

/* Atencion page specific */
@media (max-width: 767px) {
    .gap--24 {
        gap: 20px !important;
    }

    .p-4.helvetica {
        padding: 1rem !important;
    }
}

/* ===========================================
   UTILITY CLASSES RESPONSIVE
   =========================================== */
@media (max-width: 767px) {
    .d-none.d-lg-flex {
        display: none !important;
    }

    .d-lg-none {
        display: block !important;
    }

    .text-center {
        text-align: center !important;
    }

    .text-start {
        text-align: left !important;
    }

    .text-end {
        text-align: right !important;
    }

    .justify-content-center {
        justify-content: center !important;
    }

    .align-items-center {
        align-items: center !important;
    }
}

/* ===========================================
   ACCESSIBILITY IMPROVEMENTS
   =========================================== */
@media (max-width: 767px) {

    /* Ensure touch targets are at least 44px */
    .btn,
    .nav-link,
    .navbar-toggler {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Improve readability */
    p,
    li {
        line-height: 1.6 !important;
    }

    /* Better spacing for mobile */
    .my-2 {
        margin: 10px 0 !important;
    }

    .my-3 {
        margin: 15px 0 !important;
    }

    .my-4 {
        margin: 20px 0 !important;
    }
}

/* ===========================================
   PRINT STYLES
   =========================================== */
@media print {

    .suburbano-navbar,
    .hero,
    .splide__arrow,
    .splide__pagination,
    footer {
        display: none !important;
    }

    body {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }

    .container,
    .mw--1440 {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}