/* ==============================================================
   PARKING NARANJA · MOBILE GLOBAL OVERRIDES
   Carga DESPUÉS de todos los CSS específicos.
   Cubre breakpoints: 1180 (tablet/hamburger), 992 (small tablet),
   768 (mobile), 480 (small mobile).
   ============================================================== */

/* ----------------------------------------------------------------
   0. PREVENT HORIZONTAL OVERFLOW (global safety net)
   ---------------------------------------------------------------- */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

@media (max-width: 1180px) {
    body {
        -webkit-text-size-adjust: 100%;
    }
    img, video, iframe, embed, object {
        max-width: 100% !important;
        height: auto;
    }
    /* Cualquier contenedor superior que tenga max-width: 1120/1200 debe quedar contenido */
    .container-barajas,
    .home-pro .container-barajas,
    .hero-section,
    .home-pro .hero-section {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Box-sizing universal en mobile (evita overflow por padding) */
@media (max-width: 768px) {
    *, *::before, *::after {
        box-sizing: border-box;
    }
    /* Reset cualquier margin-left negativo de bootstrap rows */
    .row { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ----------------------------------------------------------------
   1. HOME · HERO BANNER (texto blanco directo sobre fondo aeropuerto)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .home-pro .hero-section {
        margin: 12px 10px !important;
        overflow: hidden !important;
        width: auto !important;
    }
    .home-pro .hero-inner {
        padding: 36px 18px !important;
        gap: 24px !important;
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .home-pro .hero-inner,
    .home-pro .hero-inner * {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .home-pro .banner-info,
    .home-pro .hero-section-info,
    .home-pro .banners-items,
    .home-pro .banner-item {
        max-width: 100% !important;
        width: auto !important;
        flex: 1 1 100% !important;
    }
    .home-pro .banner-info h1 {
        font-size: 26px !important;
        line-height: 1.15 !important;
    }
    .home-pro .banner-info h1 span {
        font-size: 16px !important;
    }
    .home-pro .banner-info ul li {
        font-size: 14px !important;
        padding-left: 26px !important;
    }
    .home-pro .content-form {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .home-pro .hero-section {
        margin: 10px 8px !important;
    }
    .home-pro .banner-info h1 {
        font-size: 22px !important;
    }
    .home-pro .banner-info h1 span {
        font-size: 14px !important;
    }
    .home-pro .banner-info ul li {
        font-size: 13.5px !important;
    }
}

/* ----------------------------------------------------------------
   2. HOME · FORM DE BÚSQUEDA (content-form)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .home-pro .content-form {
        padding: 20px 16px !important;
        max-width: 100% !important;
    }
    .home-pro .content-form .row > .field > .row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .home-pro .content-form .form-control,
    .home-pro .content-form .form-select {
        height: 46px !important;
        font-size: 16px !important; /* iOS NO zoom si >= 16px */
    }
    .home-pro .content-form .field-type-car #containerTypeCar {
        height: 52px !important;
    }
    .home-pro .content-form #parkingForm button[type="submit"] {
        height: 52px !important;
        font-size: 15px !important;
    }
    /* Ocultar tooltips "?" en móvil — son 18px (no cumplen tap target 44px)
       y se posicionan mal junto a labels largos en multilinea. La info ya
       está implícita en los labels. */
    .home-pro .content-form .btn-tooltip,
    .home-pro .content-form button.btn-tooltip {
        display: none !important;
    }
}

/* ----------------------------------------------------------------
   3. HOME · NUESTRAS VENTAJAS (cards con iconos flotantes)
   - container .icon mantiene tamaño original
   - solo crece la imagen interior (picture/img)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .home-pro .content-cards-aditional {
        padding-top: 70px !important;
        padding-inline: 14px !important;
        padding-bottom: 28px !important;
    }
    .home-pro .content-cards-aditional > h2 {
        font-size: 22px !important;
        margin-bottom: 50px !important;
    }
    .home-pro .content-aditional {
        grid-template-columns: 1fr 1fr !important;
        gap: 70px 12px !important;
    }
    .home-pro .content-cards-aditional .card {
        padding: 60px 14px 18px !important;
        margin-top: 50px !important;
    }
    .home-pro .content-cards-aditional .card .icon {
        top: -50px !important;
        width: 88px !important;                /* container ORIGINAL */
        height: 88px !important;
        border-radius: 20px !important;
    }
    .home-pro .content-cards-aditional .card .icon picture,
    .home-pro .content-cards-aditional .card .icon img {
        width: 86px !important;                /* icono casi del tamaño del container (era 80 → +7%) */
        height: 86px !important;
    }
    .home-pro .content-cards-aditional .card h3,
    .home-pro .content-cards-aditional .card h4 {
        font-size: 13px !important;
        min-height: auto !important;
        margin-bottom: 6px !important;
    }
    .home-pro .content-cards-aditional .card p.main {
        font-size: 12px !important;
        min-height: auto !important;
        margin-bottom: 4px !important;
    }
    .home-pro .content-cards-aditional .card p.sub {
        font-size: 11.5px !important;
    }
}

@media (max-width: 380px) {
    .home-pro .content-aditional {
        grid-template-columns: 1fr !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
}

/* ----------------------------------------------------------------
   4. HOME · CÓMO FUNCIONA EN 3 PASOS
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .pn-3pasos {
        padding: 0 14px !important;
        margin: 32px auto 24px !important;
    }
    .pn-3pasos__title {
        font-size: 20px !important;
        margin-bottom: 22px !important;
    }
    .pn-3pasos__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .pn-3pasos__img-wrap {
        max-width: 320px;
        margin: 0 auto;
    }
    .pn-3pasos__num {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    .pn-3pasos__step h3 {
        font-size: 15px !important;
    }
    .pn-3pasos__step p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }
}

/* ----------------------------------------------------------------
   5. HOME · TIPOS DE APARCAMIENTO/PLAZA (flip cards)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .home-pro .content-cards-services {
        padding: 28px 14px !important;
    }
    .home-pro .intro-aparcamiento h2 {
        font-size: 22px !important;
    }
    .home-pro .intro-aparcamiento p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
    .home-pro .subtitle-tipos {
        font-size: 17px !important;
        margin-bottom: 16px !important;
    }
    .home-pro .tipos-parking-grid {
        grid-template-columns: 1fr !important;
        max-width: 360px !important;
        gap: 18px !important;
        margin: 0 auto !important;
    }
    .home-pro .tipo-flip {
        height: 320px !important;
    }
}

/* ----------------------------------------------------------------
   6. HOME · FAQ (accordion)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .home-pro .content-questions {
        padding: 28px 14px !important;
    }
    .home-pro #accordion h3 {
        padding: 14px 50px 14px 16px !important;
        font-size: 14px !important;
    }
    .home-pro #accordion h3::after {
        right: 16px !important;
        font-size: 20px !important;
    }
    .home-pro #accordion .ui-accordion-content,
    .home-pro #accordion .faq-item .faq-body {
        padding: 14px 16px 16px !important;
        font-size: 13.5px !important;
    }
}

/* ----------------------------------------------------------------
   7. HOME · INSTALACIONES (Swiper)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .home-pro .content-facilities {
        padding: 28px 14px !important;
    }
    .home-pro .content-facilities .title h2 {
        font-size: 22px !important;
    }
    .home-pro .content-facilities .mySwiper .swiper-slide {
        width: 90px !important;
        height: 60px !important;
    }
    .home-pro .content-facilities .swiper-button-prev,
    .home-pro .content-facilities .swiper-button-next {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ----------------------------------------------------------------
   8. HEADER · MEJORAS DEL HAMBURGER + LOGO
   ---------------------------------------------------------------- */
@media (max-width: 1180px) {
    body header .content-header .nav-bar .logo img {
        max-width: 180px !important;
        max-height: 44px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important; /* evita estiramiento del logo en móvil */
    }
    body header {
        height: 64px !important;
    }
    body #site-header {
        height: 64px !important;
    }
    body header .content-header .nav-bar-items {
        top: 64px !important;
        box-shadow: 0 8px 16px rgba(0,0,0,.08) !important;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
    body header .content-header .nav-bar-items ul li {
        padding: 14px 16px !important;
        border-bottom: 1px solid #f1f5f9;
        margin-right: 0 !important;
        font-size: 13px !important;
    }
    body header .content-header .nav-bar-items ul li:last-child {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    body header .content-header .nav-bar .logo img {
        max-width: 150px !important;
        max-height: 40px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 480px) {
    body header .content-header .nav-bar .logo img {
        max-width: 130px !important;
        max-height: 36px !important;
        object-fit: contain !important;
    }
}

/* ----------------------------------------------------------------
   9. STEPS PROGRESS (wizard) — flow después del home
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .container-barajas .steps-progress {
        padding: 12px 4px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .container-barajas .steps-progress-content {
        gap: 2px !important;
        min-width: 100%;
    }
    .container-barajas .steps-progress-content .step {
        min-width: 48px !important;
    }
    .container-barajas .steps-progress-content .step .icon {
        width: 26px !important;
        height: 26px !important;
    }
    .container-barajas .steps-progress-content .step p {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }
}

/* ----------------------------------------------------------------
   10. REGISTER · rg-* (form de datos de la reserva)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .rg-page {
        padding: 16px 0 40px !important;
    }
    .rg-container {
        padding: 0 12px !important;
    }
    .rg-page-title {
        margin-bottom: 20px !important;
    }
    .rg-page-title h2,
    .rg-page-title h2 span {
        font-size: 19px !important;
    }
    .rg-section-header {
        padding: 14px 16px !important;
        gap: 10px !important;
    }
    .rg-section-icon {
        width: 32px !important;
        height: 32px !important;
    }
    .rg-section-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    .rg-section-title {
        font-size: 12px !important;
    }
    .rg-section-subtitle {
        font-size: 10.5px !important;
    }
    .rg-section-body {
        padding: 18px 14px !important;
    }
    .rg-email-card {
        padding: 16px 14px !important;
    }
    .rg-email-card .rg-email-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .rg-email-card .rg-email-row button {
        width: 100% !important;
        justify-content: center !important;
    }
    .rg-form .form-control,
    .rg-form .form-select {
        height: 46px !important;
        font-size: 16px !important;
    }
    .rg-form .rg-grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    #btnContinue {
        width: 100% !important;
        min-width: auto !important;
        height: 50px !important;
        font-size: 14px !important;
    }
    .rg-submit-area {
        padding: 12px 0 !important;
    }
}

@media (max-width: 480px) {
    .rg-page-title h2,
    .rg-page-title h2 span {
        font-size: 17px !important;
    }
    .rg-section-body {
        padding: 16px 12px !important;
    }
    .rg-form .rg-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ----------------------------------------------------------------
   11. CONFIRMATION · grid responsive (col-4 → col-12 en mobile)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .content-confirmation {
        padding: 0 12px !important;
    }
    .content-info-confirmation {
        padding: 18px 14px !important;
        margin: 16px 0 !important;
    }
    .content-info-confirmation h2 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
    .content-info-confirmation .info-title {
        margin-bottom: 16px !important;
        font-size: 13.5px !important;
    }
    .content-info-confirmation .container .row {
        margin: 0 !important;
    }
    .content-info-confirmation .container .row [class^="col-"],
    .content-info-confirmation .container .row [class*=" col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 8px 0 !important;
        margin-bottom: 4px !important;
    }
    .content-info-confirmation .container .row .col-12 {
        margin-bottom: 6px !important;
    }
    .content-info-confirmation h3 {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #c92900 !important;
        text-transform: uppercase !important;
        letter-spacing: .5px !important;
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .content-info-confirmation label {
        font-size: 11px !important;
        color: #64748b !important;
        font-weight: 600 !important;
        display: block !important;
        margin-bottom: 2px !important;
    }
    .content-info-confirmation span {
        font-size: 13.5px !important;
        color: #0a2351 !important;
        font-weight: 600 !important;
        display: block !important;
    }
    .content-info-confirmation .content-img img {
        max-width: 120px !important;
        margin: 0 auto 14px !important;
        display: block !important;
    }
    .container-total {
        padding: 14px 16px !important;
        border-radius: 10px !important;
        margin: 12px 0 !important;
    }
    .container-total .price-total {
        flex-direction: column !important;
        gap: 4px !important;
        text-align: center !important;
    }
    .container-total .price-total p {
        font-size: 13px !important;
        text-transform: uppercase !important;
    }
    .container-total .price-total strong {
        font-size: 22px !important;
        color: #c92900 !important;
    }
    .title-payment h3 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    .container-type-payment .payment {
        padding: 12px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        background: #f8fafc;
    }
    .container-type-payment .payment label {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        padding-left: 26px !important;
    }
    .container-TyC .tyc {
        margin-bottom: 8px !important;
    }
    .container-TyC .tyc label {
        font-size: 12.5px !important;
        padding-left: 26px !important;
    }
    .actions-toolbar {
        padding: 14px 0 !important;
    }
    .actions-toolbar #confirmationButton {
        height: 50px !important;
        font-size: 14px !important;
    }
    .modal-dialog {
        margin: 12px !important;
    }
    .modal-content {
        border-radius: 12px !important;
    }
    .modal-body .row .col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ----------------------------------------------------------------
   12. SERVICES / INSURANCES — tarjetas y botones de flujo
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .content-services,
    .content-insurances {
        padding: 16px 12px !important;
    }
    .content-services h2,
    .content-insurances h2 {
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }
    .service-card,
    .insurance-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }
    .actions-toolbar .btn-primary,
    .actions-toolbar .btn-secondary {
        height: 48px !important;
        font-size: 14px !important;
        max-width: 100% !important;
    }
}

/* ----------------------------------------------------------------
   13. RESULTADO V2 (.r2-*)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .r2-page {
        padding: 0 0 30px !important;
    }
    .r2-search-summary {
        padding: 10px 14px !important;
    }
    .r2-search-summary-inner {
        gap: 8px !important;
        font-size: 12px !important;
    }
    .r2-search-summary-inner .r2-edit {
        margin-left: 0 !important;
        margin-top: 4px !important;
    }
    .r2-container {
        padding: 14px !important;
    }
    .r2-toolbar {
        gap: 6px !important;
        margin-bottom: 18px !important;
    }
    .r2-chip {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
    .r2-sort {
        width: 100%;
        margin-left: 0 !important;
        margin-top: 4px;
    }
    .r2-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .r2-card {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    .r2-price {
        /* Subido de 24→30px para acompañar el aumento desktop (28→34px).
           Mantiene proporción y destaca el precio en cards mobile. */
        font-size: 30px !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
    }
    .r2-cta {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }
    .r2-links a {
        padding: 8px 4px !important;
        font-size: 11.5px !important;
    }
    .r2-lightbox {
        padding: 16px 8px !important;
    }
    .r2-lightbox-stage {
        gap: 10px !important;
    }
    .r2-lightbox-title {
        font-size: 14px !important;
    }
    .r2-lightbox-nav {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
    .r2-lightbox-thumbs img {
        width: 48px !important;
        height: 36px !important;
    }
}

/* ----------------------------------------------------------------
   14. REVIEW-PARKING (clon pdaparking.es)
   ---------------------------------------------------------------- */
@media (max-width: 992px) {
    .review-parking-page .container-rp,
    .review-parking-page .rp-container {
        padding: 0 14px !important;
    }
    .review-parking-page .rp-header,
    .review-parking-page .rp-banner {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 20px 16px !important;
        text-align: center !important;
    }
    .review-parking-page .app-download-section,
    .review-parking-page .pn-app-download {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 22px 18px !important;
    }
}

@media (max-width: 768px) {
    .review-parking-page h1 {
        font-size: 22px !important;
    }
    .review-parking-page h2 {
        font-size: 18px !important;
    }
    .review-parking-page .ts-card,
    .review-parking-page .rp-card {
        padding: 16px !important;
        margin-bottom: 14px !important;
    }
    .review-parking-page .rp-gallery,
    .review-parking-page .photos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .review-parking-page .rp-features {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .review-parking-page .rp-cta {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .review-parking-page .rp-cta .btn,
    .review-parking-page .rp-cta button {
        width: 100% !important;
    }
}

/* ----------------------------------------------------------------
   15. COTIZACION + TIPOS_SERVICIOS pages
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .cotizacion-page .cot-container,
    .cotizacion-page .cot-grid {
        padding: 0 12px !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .cotizacion-page .cot-card {
        padding: 16px !important;
    }
    .cotizacion-page h1 {
        font-size: 22px !important;
    }
    .cotizacion-page h2 {
        font-size: 18px !important;
    }
}

/* ----------------------------------------------------------------
   16. SLIDER (Swiper) thumbs comunes
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .mySwiper .swiper-slide,
    .mySwiper2 .swiper-slide {
        max-width: 100%;
    }
    .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
    }
}

/* ----------------------------------------------------------------
   17. TYPOGRAPHY FALLBACKS · h1/h2/h3 globales (legacy css)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    body h1 { font-size: 24px !important; }
    body h1 span { font-size: 24px !important; }
    body h2 { font-size: 20px !important; }
    body h2 span { font-size: 20px !important; }
    body h3 { font-size: 17px !important; }
}

@media (max-width: 480px) {
    body h1 { font-size: 22px !important; }
    body h1 span { font-size: 22px !important; }
    body h2 { font-size: 19px !important; }
    body h2 span { font-size: 19px !important; }
    body h3 { font-size: 16px !important; }
}

/* ----------------------------------------------------------------
   18. ACCESSIBILITY · tap targets 44px + no zoom iOS + scroll smooth
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    button, a.btn, .btn, input[type="submit"] {
        min-height: 44px;
    }
    /* Excepciones: botones decorativos inline dentro de listas compactas
       que NO deben heredar 44px (rompen el ritmo visual de la línea).
       El primer atributo de las cards de resultado ("Shuttle al aeropuerto")
       tiene un botón "info" ⓘ; sin esta exclusión su línea mide 44px
       mientras las siguientes atributos miden 21px → desigual. */
    .r2-attrs .r2-info-btn,
    .r2-chip,
    .r2-info-btn {
        min-height: 0 !important;
    }
    /* Garantiza altura uniforme de todos los atributos de la card */
    .r2-attrs .r2-attr {
        min-height: 21px;
    }
    /* iOS no-zoom: inputs >= 16px */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
    html { scroll-behavior: smooth; }
}

/* ----------------------------------------------------------------
   19. FOOTER · refuerzo del centrado en móvil
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    body footer .content-footer-background .container-footer {
        padding: 30px 16px !important;
    }
    body footer .content-footer-background .container-footer .item-footer .info h3 {
        font-size: 14px !important;
    }
    body footer .content-footer-background .container-footer .item-footer .info p {
        font-size: 13px !important;
    }
    body footer .content-footer .footer-links .footer-img img {
        max-width: 180px !important;
    }
    body footer .content-footer .footer-info p,
    body footer .content-footer .footer-info a {
        font-size: 12.5px !important;
    }
}

/* ----------------------------------------------------------------
   20. CONTAINERS · safety net horizontal padding
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .container, .container-fluid, .container-barajas {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .contacto-page, .employment-page {
        padding: 16px 0 32px !important;
    }
}