/*
  SUBLIMAWEB — Responsive Improvements
  Inyectar DESPUÉS de main.css en todas las páginas.
  Breakpoints: xs <480px | sm 480-767px | md 768-991px | lg 992-1199px | xl 1200+
*/

/* =============================================
   1. GLOBAL BOX MODEL & OVERFLOW PREVENTION
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

img, video, iframe, embed, object, svg {
    max-width: 100%;
    height: auto;
}

/* Previene que contenedores con ancho fijo rompan el layout */
.container, .container-fluid {
    max-width: 100%;
}

/* =============================================
   2. TIPOGRAFÍA RESPONSIVA — MOBILE EXTRA-SMALL
   ============================================= */
@media (max-width: 767px) {
    h1 { font-size: 38px !important; line-height: 115% !important; }
    h2 { font-size: 30px !important; line-height: 120% !important; }
    h3 { font-size: 26px !important; }
    h4 { font-size: 20px !important; }
    h5 { font-size: 17px !important; }
    h6 { font-size: 15px !important; }
}

@media (max-width: 480px) {
    h1 { font-size: 30px !important; line-height: 110% !important; }
    h2 { font-size: 24px !important; }
    h3 { font-size: 22px !important; }
    h4 { font-size: 18px !important; }
    h5 { font-size: 16px !important; }
    h6 { font-size: 14px !important; }
    body, p, span, li { font-size: 14px !important; line-height: 22px !important; }
}

/* Títulos del hero ajustados */
@media (max-width: 575px) {
    .hero-v1-content h1 span { font-size: 32px !important; line-height: 115% !important; }
}
@media (max-width: 400px) {
    .hero-v1-content h1 span { font-size: 26px !important; }
}

/* =============================================
   3. ESPACIADO DE SECCIONES — MOBILE
   ============================================= */
@media (max-width: 767px) {
    .pt-space { padding-top: 60px !important; }
    .pb-space { padding-bottom: 60px !important; }
    .py-space  { padding-top: 60px !important; padding-bottom: 60px !important; }
}

@media (max-width: 480px) {
    .pt-space { padding-top: 48px !important; }
    .pb-space { padding-bottom: 48px !important; }
    .py-space  { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* =============================================
   4. NAVEGACIÓN — HEADER MOBILE
   ============================================= */

/* ---- Logo a tamaño legible en todos los móviles ---- */
@media (max-width: 991px) {
    .header-section .brand-logo {
        max-width: 130px !important;
    }
}

/* ---- Menú hamburguesa: área de toque más grande ---- */
@media (max-width: 991px) {
    .header-section .main-navbar .navbar-toggle-btn {
        padding: 8px 4px;
        cursor: pointer;
    }
}

/* ---- Menú mobile: fondo y separadores ---- */
@media (max-width: 991px) {
    .header-section .main-navbar .navbar-toggle-item {
        background: var(--bg1);
        border-top: 1px solid var(--border1);
        padding: 16px 0 8px;
    }

    /* Cada enlace/botón del menú: área de toque grande */
    .header-section .main-navbar .custom-nav .menu-item {
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(69,71,80,0.35);
    }
    .header-section .main-navbar .custom-nav .menu-item:last-child {
        border-bottom: none;
    }

    .header-section .main-navbar .custom-nav .menu-item a,
    .header-section .main-navbar .custom-nav .menu-item button {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px 16px;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px;
    }

    /* Sub-menú mobile */
    .header-section .main-navbar .custom-nav .sub-menu {
        margin-left: 16px;
        padding: 4px 0 4px 12px !important;
        border-left: 2px solid var(--theme);
    }
    .header-section .main-navbar .custom-nav .sub-menu li a {
        padding: 8px 12px;
        font-size: 13px !important;
        color: var(--pra-clr) !important;
    }
    .header-section .main-navbar .custom-nav .sub-menu li a:hover {
        color: var(--theme) !important;
    }
}

/* ---- Currency + CTA visible en menú mobile cuando está abierto ---- */
@media (max-width: 991px) {
    /* Mostrar el bloque de currency/CTA cuando el menú está abierto */
    body.overflow-hidden .header-section .d-lg-flex.d-none {
        display: flex !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
        border-top: 1px solid var(--border1);
        background: var(--bg1);
        order: 3;
    }

    /* CTA button a ancho cómodo en el menú */
    body.overflow-hidden .header-section .d-lg-flex.d-none .cmn-btn {
        padding: 12px 24px;
        font-size: 14px;
    }
}

/* =============================================
   5. GRIDS DE CONTENIDO — 1/2/3 COLUMNAS
   ============================================= */

/* Bootstrap ya maneja col-lg-4 col-md-6, pero forzamos col-12 en xs */
@media (max-width: 480px) {
    .col-lg-4.col-md-6,
    .col-lg-3.col-md-6,
    .col-lg-6.col-md-6,
    .col-md-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Tarjetas de servicio */
@media (max-width: 575px) {
    .service-card-item {
        padding: 28px 20px !important;
    }
    .service-icon {
        width: 52px;
        height: 52px;
    }
}

/* Tarjetas de precio */
@media (max-width: 575px) {
    .price-card {
        padding: 28px 20px !important;
    }
    .price-amount {
        font-size: 28px !important;
    }
}

/* Tarjetas de testimonial */
@media (max-width: 575px) {
    .testimonial-card {
        padding: 24px 16px !important;
    }
}

/* Stat numbers */
@media (max-width: 575px) {
    .stat-number {
        font-size: 36px !important;
    }
    .stat-item {
        padding: 20px 12px !important;
    }
}

/* =============================================
   6. SECCIÓN HERO — MOBILE
   ============================================= */
@media (max-width: 767px) {
    .hero-section-version1 {
        padding: 120px 0 60px !important;
        text-align: center;
    }

    /* Centrar logo de clientes */
    .hero-v1-content .hero-sponsor {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 32px !important;
    }

    .hero-v1-content .hero-sponsor .sponsor-inner {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px !important;
    }

    /* Ocultar imagen circular de video en pantallas pequeñas */
    .hero-v1-content .video-popup .hero-circle {
        width: 70px;
        height: 70px;
    }

    /* Experience box al fondo del hero */
    .hero-expriencebox {
        margin: 24px auto 0 !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .hero-section-version1 {
        padding: 100px 0 48px !important;
    }

    /* Alinear hero content a la izquierda en xs para mejor legibilidad */
    .hero-v1-content > div:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* =============================================
   7. FOOTER — RESPONSIVO
   ============================================= */

/* Footer widgets: 2 columnas en tablet, 1 columna en mobile */
@media (max-width: 991px) {
    .footer-v1-top {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 40px 24px;
    }
    .footer-v1-widget:first-child {
        grid-column: 1 / -1; /* Logo/descripción ocupa fila completa */
    }
}

@media (max-width: 575px) {
    .footer-v1-top {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .footer-v1-widget:first-child {
        grid-column: auto;
    }
}

/* Footer bottom: centrar en mobile */
@media (max-width: 575px) {
    .footer-bottom-version-one {
        flex-direction: column !important;
        text-align: center;
        gap: 16px !important;
        padding: 24px 16px !important;
    }

    .footer-logov1 img {
        max-width: 120px;
    }
}

/* =============================================
   8. FORMULARIOS — MOBILE
   ============================================= */
@media (max-width: 767px) {
    .common-form textarea,
    .common-form input,
    .common-form select {
        font-size: 16px !important; /* Evita zoom en iOS */
        padding: 14px 16px !important;
    }

    /* Botones de formulario full-width en mobile */
    .common-form .getin-touch,
    .common-form .cmn-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================
   9. BOTONES — TOUCH-FRIENDLY
   ============================================= */
@media (max-width: 767px) {
    .cmn-btn {
        padding: 14px 24px;
        font-size: 14px;
        min-height: 48px;
    }

    /* Botón de reserva/CTA: full width en mobile muy pequeño */
    .touch-btn.cmn-btn {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    /* Grupo de botones CTA: stack vertical en xs */
    .d-flex.gap-4.flex-wrap {
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    /* CTA section: botones en columna */
    section .d-flex.align-items-center.justify-content-center.gap-4.flex-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    section .d-flex.align-items-center.justify-content-center.gap-4.flex-wrap a,
    section .d-flex.align-items-center.justify-content-center.gap-4.flex-wrap button {
        text-align: center;
        justify-content: center;
        width: 100%;
    }
}

/* =============================================
   10. TARJETAS Y CONTENEDORES — PADDING MOBILE
   ============================================= */
@media (max-width: 575px) {
    /* Reducir padding de secciones internas */
    [class*="p-xxl-"],
    [class*="p-xl-"],
    [class*="p-lg-"] {
        /* No sobrescribir directamente — usar px-3 py-4 en mobile */
    }

    /* Contenedores de tarjeta genéricos */
    .rounded-3, [style*="border-radius:12px"],
    [style*="border-radius: 12px"] {
        padding: 20px 16px;
    }
}

/* =============================================
   11. PÁGINA DE PRECIOS — RESPONSIVA
   ============================================= */
@media (max-width: 767px) {
    /* Toggle de moneda centrado */
    #currencyToggle {
        display: block;
        margin: 0 auto 24px;
    }
}

/* =============================================
   12. PÁGINA DE RESERVAS — RESPONSIVA
   ============================================= */
@media (max-width: 767px) {
    /* Calendario: hacer celdas más grandes para tocar con el dedo */
    #calGrid button,
    .slot-btn,
    [class*="cal-day"] {
        min-height: 44px;
        font-size: 13px;
    }

    /* Steps de reserva: centrado en mobile */
    .step-indicator,
    [class*="step-bar"] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* =============================================
   13. PANEL ADMIN — RESPONSIVO
   ============================================= */
@media (max-width: 767px) {
    /* Sidebar del admin a pantalla completa en mobile */
    #adminSidebar, [class*="admin-sidebar"] {
        width: 100% !important;
        position: relative !important;
    }

    #adminContent, [class*="admin-content"] {
        margin-left: 0 !important;
    }
}

/* =============================================
   14. PÁGINA DE SERVICIOS — GRID DE SERVICIOS
   ============================================= */
@media (max-width: 767px) {
    /* Lista de servicios: ocultar imagen lateral */
    .images-remove-area {
        display: none !important;
    }

    /* Acordeón de servicios: más espacio */
    .accordion-single {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* =============================================
   15. TEXTOS CORTADOS / OVERFLOW FIX
   ============================================= */
/* Evitar que textos largos rompan el layout */
p, h1, h2, h3, h4, h5, h6, span, a, li {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Prevenir que tablas y pre-formateados generen scroll horizontal */
table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* =============================================
   16. CORRECCIÓN LÍNEAS DECORATIVAS — MOBILE
   ============================================= */
@media (max-width: 767px) {
    /* Ocultar líneas/shapes decorativas que desbordan en mobile */
    .line-shape, .cmn-dots, .hero-arrow {
        display: none !important;
    }

    /* Ocultar elementos de fondo/decoración */
    .hero-v3-thumb, .hero-v4-arrow {
        max-width: 200px;
    }
}

/* =============================================
   17. RADIUS BUTTONS — EVITAR OVERFLOW EN MOBILE
   ============================================= */
@media (max-width: 480px) {
    .radius-btn {
        font-size: 11px !important;
        padding: 8px 16px !important;
        flex-wrap: wrap;
    }
}

/* =============================================
   18. SCROLL SUAVE Y ACCESIBILIDAD
   ============================================= */
html {
    scroll-behavior: smooth;
}

/* Área mínima de toque: 44x44px (WCAG 2.5.5) */
a, button, [role="button"] {
    min-height: 24px;
}

@media (max-width: 767px) {
    a, button, [role="button"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Excepción: links de texto inline */
    p a, li a, span a {
        min-height: auto;
        display: inline;
    }
}

/* =============================================
   19. HEADER STICKY — FONDO SIEMPRE EN MOBILE
   ============================================= */
@media (max-width: 991px) {
    .header-section {
        background: var(--bg1) !important;
        border-bottom: 1px solid var(--border1) !important;
    }
}

/* =============================================
   20. PÁGINA 404 (OOPS) — RESPONSIVA
   ============================================= */
@media (max-width: 767px) {
    /* Número de error más pequeño */
    [class*="glitch"], .error-code {
        font-size: 80px !important;
    }

    /* Formulario de búsqueda full-width */
    .search-box {
        flex-direction: column;
    }
    .search-box input,
    .search-box button {
        width: 100%;
        border-radius: 8px !important;
    }
}

/* =============================================
   21. TEAM / PORTFOLIO GRID
   ============================================= */
@media (max-width: 575px) {
    /* Team cards: full width en mobile */
    .col-lg-4.col-md-6.col-sm-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* =============================================
   22. CONTENEDOR PRINCIPAL — PADDING HORIZONTAL
   ============================================= */
@media (max-width: 480px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}