/* ============================================================
   INFLAPY — MOBILE PRO OVERHAUL
   Hoja central de overrides responsive. Carga DESPUÉS de
   style.css y mobile-optimizations.css en BaseLayout.
   Breakpoints: 1024 / 768 / 640 / 480 / 380
   Filosofía: container fluido, touch ≥44px, iOS-safe, sin
   layout shift, jerarquía limpia, CTAs apilan en pantallas
   chicas.
   ============================================================ */

/* ============================================================
   1. TOKENS RESPONSIVE EN :ROOT
   ============================================================ */
:root{
  --topbar-h: 40px;
  --header-h: 140px;
  --stack-h: calc(var(--topbar-h) + var(--header-h));
  --container-px: 1.5rem;
  --section-py: 4rem;
  --tap-min: 44px;
  --tap-lg: 48px;
}
@media (max-width: 1024px){
  :root{
    --header-h: 124px;
    --container-px: 1.25rem;
    --section-py: 3.5rem;
  }
}
@media (max-width: 768px){
  :root{
    --topbar-h: 40px;
    --header-h: 124px;
    --container-px: 1rem;
    --section-py: 3rem;
  }
}
@media (max-width: 480px){
  :root{
    --header-h: 108px;
    --container-px: .85rem;
    --section-py: 2.5rem;
  }
}
@media (max-width: 380px){
  :root{
    --header-h: 96px;
    --container-px: .75rem;
    --section-py: 2.25rem;
  }
}

/* ============================================================
   2. BASE GLOBAL — overflow + scroll-padding + tap highlight
   ============================================================ */
html{
  scroll-padding-top: calc(var(--stack-h, 180px) + 8px);
  -webkit-text-size-adjust: 100%;
}
body{
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(255, 18, 204, .15);
}
*{ min-width: 0; }
img, picture, video, svg, iframe{ max-width: 100%; }

/* ============================================================
   3. CONTAINER FLUIDO + SAFE-AREA iOS
   ============================================================ */
@media (max-width: 1024px){
  .container{
    width: 100% !important;
    padding-left: var(--container-px) !important;
    padding-right: var(--container-px) !important;
  }
}
@supports (padding: max(0px)){
  @media (max-width: 768px){
    .container,
    .top-bar-container,
    .hero-inner,
    .footer-bottom-inner{
      padding-left: max(var(--container-px), env(safe-area-inset-left)) !important;
      padding-right: max(var(--container-px), env(safe-area-inset-right)) !important;
    }
  }
}

/* ============================================================
   4. SECTION PADDING TOKENIZADO
   ============================================================ */
@media (max-width: 768px){
  .catalogo,
  .como-funciona,
  .testimonios,
  .faq,
  .coverage-section,
  .cobertura,
  .cta-final,
  .contact-section,
  .seguridad-content,
  .nosotros-section,
  .como-funciona-section,
  .preguntas-section,
  .opiniones-section{
    padding-top: var(--section-py) !important;
    padding-bottom: var(--section-py) !important;
  }
}

/* ============================================================
   5. HERO — colapsar 1col antes (≤880), reducir padding,
      tipografía limpia, marketing cards apiladas
   ============================================================ */
@media (max-width: 880px){
  .hero-component-grid{
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  .hero-component-main{ text-align: center !important; }
  .hero-component-subtitle{
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-component-marketing{
    max-width: 600px;
    margin: 0 auto;
  }
}
@media (max-width: 768px){
  .hero-component{
    padding: 2.5rem 1rem 2.75rem !important;
  }
  .hero-component--home{ margin-top: 0 !important; }
  .hero-component-title{
    font-size: clamp(1.75rem, 6.4vw, 2.4rem) !important;
    line-height: 1.12 !important;
  }
  .hero-component-subtitle{
    font-size: .98rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.25rem !important;
  }
  .hero-component-badge{
    font-size: .7rem !important;
    padding: .4rem .85rem !important;
    margin-bottom: 1rem !important;
  }
  .hero-component-marketing{ gap: 1rem !important; }
  .hero-component-mtext{ font-size: .92rem !important; }
  .hero-mcard-label{ font-size: .68rem !important; letter-spacing: .12em !important; }
}
@media (max-width: 480px){
  .hero-component{ padding: 2.25rem .9rem 2.5rem !important; }
  .hero-component-title{ font-size: 1.65rem !important; }
  .hero-component-subtitle{ font-size: .92rem !important; }
}
@media (max-width: 380px){
  .hero-component{ padding: 2rem .75rem 2.25rem !important; }
  .hero-component-title{ font-size: 1.5rem !important; line-height: 1.18 !important; }
}

/* CTA row dentro del hero — siempre stack vertical en mobile */
@media (max-width: 640px){
  .hero-cta-row{
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .hero-cta-row .hero-btn{
    justify-content: center !important;
    width: 100% !important;
    min-height: var(--tap-lg);
  }
}

/* ============================================================
   6. STATS / TRUST BAR — 2 col en mobile
   ============================================================ */
@media (max-width: 640px){
  .stats-grid,
  .trust-bar-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem !important;
  }
  .stat-number{ font-size: 1.55rem !important; }
  .stat-label{ font-size: .72rem !important; }
}

/* ============================================================
   7. CATÁLOGO Y GRIDS — 1col en pantallas chicas
   ============================================================ */
@media (max-width: 640px){
  .catalogo-grid,
  .otros-grid,
  .catalog-grid-home,
  .servicios-zona-grid,
  .testimonios-grid,
  .zones-featured-grid,
  .cobertura-grid,
  .blog-grid,
  .contact-methods-grid,
  .logistica-grid,
  .logistica-grid-v2,
  .salones-grid,
  .related-grid{
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 768px){
  .steps-grid-v2{
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    max-width: 460px;
    margin: 0 auto !important;
  }
}

/* Product cards — touch targets, tipografía optimizada */
@media (max-width: 640px){
  .product-card{ border-radius: 14px; }
  .product-card-image{
    aspect-ratio: 4/3;
    height: auto !important;
    max-height: 260px;
  }
  .product-card-content{
    padding: 1rem !important;
  }
  .product-card-title{
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }
  .product-card-description{
    font-size: .88rem !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
  .product-card-specs{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .5rem !important;
  }
  .product-spec-label{ font-size: .68rem !important; }
  .product-spec-value{ font-size: .82rem !important; }
  .product-card-cta .product-btn,
  .product-btn{
    width: 100% !important;
    min-height: var(--tap-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .92rem !important;
  }
  .product-price-row{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .25rem !important;
  }
  .product-price{ font-size: .9rem !important; }
  .product-price-detail{ font-size: .75rem !important; opacity: .85; }
}

/* ============================================================
   8. SECTION HEADERS — center + tighter tipografía
   ============================================================ */
@media (max-width: 768px){
  .section-header,
  .section-header--two-cols{
    text-align: center !important;
    margin-bottom: 1.5rem !important;
  }
  .section-header--two-cols{
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .section-header--two-cols .section-header-left,
  .section-header--two-cols .section-header-right{
    padding: 0 !important;
    border: none !important;
    align-items: center !important;
  }
  .section-title{
    font-size: clamp(1.45rem, 5.2vw, 1.95rem) !important;
    line-height: 1.18 !important;
  }
  .section-subtitle{
    font-size: .95rem !important;
    line-height: 1.6 !important;
  }
  .section-badge{
    font-size: .72rem !important;
    padding: 5px 12px !important;
  }
}

/* ============================================================
   9. CTA-FINAL Y BUTTONS — siempre full-width en pantallas chicas
   ============================================================ */
@media (max-width: 640px){
  .cta-buttons,
  .cta-chicos-buttons,
  .cta-medianos-buttons,
  .cta-grandes-buttons,
  .logistica-links{
    flex-direction: column !important;
    width: 100%;
    gap: .75rem !important;
  }
  .cta-buttons > .btn,
  .cta-buttons > a,
  .cta-chicos-buttons > a,
  .cta-medianos-buttons > a,
  .cta-grandes-buttons > a{
    width: 100% !important;
    max-width: 360px;
    margin: 0 auto;
    justify-content: center !important;
    min-height: var(--tap-lg);
  }
  .cta-contact-info{
    flex-direction: column !important;
    align-items: center !important;
    gap: .75rem !important;
  }
  .cta-title{
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  .cta-subtitle{ font-size: .95rem !important; }
}

/* Botones globales — touch targets uniformes */
@media (max-width: 640px){
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-whatsapp,
  .btn-catalogo,
  .btn-llamar,
  .hero-btn,
  .form-submit{
    min-height: var(--tap-lg);
    padding: 12px 22px !important;
    font-size: .95rem !important;
    letter-spacing: .3px !important;
  }
  .btn-lg, .btn-xl,
  .btn-whatsapp.btn-lg,
  .btn-catalogo.btn-lg,
  .btn-llamar.btn-lg{
    padding: 14px 26px !important;
    font-size: 1rem !important;
  }
}
@media (max-width: 380px){
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-whatsapp,
  .btn-catalogo,
  .btn-llamar{
    padding: 11px 18px !important;
    font-size: .9rem !important;
  }
}

/* ============================================================
   10. FORMULARIOS — iOS no-zoom (16px) + 48px min-height
   ============================================================ */
@media (max-width: 640px){
  .form-input,
  .form-select,
  .form-textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="url"],
  select,
  textarea{
    font-size: 16px !important;
    min-height: var(--tap-lg);
    padding: 12px 14px !important;
    border-radius: 12px !important;
    -webkit-appearance: none;
            appearance: none;
  }
  textarea,
  .form-textarea{
    min-height: 110px !important;
    line-height: 1.5;
  }
  .form-label{
    font-size: .88rem !important;
    margin-bottom: .35rem !important;
  }
  .form-row,
  .form-row-3{
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }
  .form-submit{
    width: 100%;
    min-height: 52px;
    padding: 14px 22px !important;
    font-size: 1rem !important;
  }
  .form-checkbox,
  input[type="checkbox"],
  input[type="radio"]{
    width: 22px;
    height: 22px;
  }
  .form-checkbox-label{
    font-size: .85rem !important;
    line-height: 1.5;
  }
}

/* ============================================================
   11. TABLAS — scroll horizontal en lugar de overflow
   ============================================================ */
@media (max-width: 640px){
  table:not(.no-scroll){
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }
}

/* ============================================================
   12. WHATSAPP FLOAT — circular, derecha-abajo, sin tooltip
   ============================================================ */
@media (max-width: 768px){
  .whatsapp-float{
    bottom: 18px !important;
    right: 18px !important;
    width: 56px !important;
    height: 56px !important;
    box-shadow: 0 8px 24px rgba(18,140,80,.45) !important;
  }
  .whatsapp-float-icon{
    width: 28px !important;
    height: 28px !important;
  }
  .whatsapp-float-tooltip,
  .whatsapp-float-pulse{ display: none !important; }
  .whatsapp-float-badge{
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
    border-width: 2px !important;
  }
}
@media (max-width: 380px){
  .whatsapp-float{
    bottom: 14px !important;
    right: 14px !important;
    width: 52px !important;
    height: 52px !important;
  }
}

/* Si existe chat widget (DM Champ) y el WA float, separarlos */
@media (max-width: 640px){
  .whatsapp-float{ z-index: 9998 !important; }
}

/* ============================================================
   13. NAVEGACIÓN — touch targets en menú móvil + footer
   ============================================================ */
@media (max-width: 768px){
  /* Menú móvil — items con altura mínima cómoda */
  .mob__link,
  .mob__sub-link{
    min-height: var(--tap-min);
    padding: 13px 16px !important;
    font-size: .98rem !important;
  }
  .mob__sub-link{
    font-size: .92rem !important;
    padding-left: 14px !important;
  }
  /* Burger en mobile usa color sólido — ya OK */
}

/* ============================================================
   14. FOOTER — accordion chevron más visible + spacing aire
   ============================================================ */
@media (max-width: 768px){
  .footer-section > summary{
    min-height: var(--tap-min);
    padding: 14px 4px !important;
    font-size: .85rem !important;
  }
  .footer-section__chevron{
    width: 30px !important;
    height: 30px !important;
    font-size: 1.2rem !important;
  }
  .footer-links li a{
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    font-size: .9rem !important;
  }
  .footer-social__btn{
    width: 42px !important;
    height: 42px !important;
  }
  .footer-bottom-inner{
    flex-direction: column !important;
    text-align: center;
    gap: 10px !important;
  }
  .footer-legal{ justify-content: center !important; }
}
@media (max-width: 480px){
  .footer-main{ padding: 32px 0 22px !important; }
  .footer-logo-img{ height: 80px !important; }
  .footer-trust__item strong{ font-size: 1.05rem !important; }
}

/* ============================================================
   15. BLOG — cards + tipografía artículo
   ============================================================ */
@media (max-width: 640px){
  .blog-card{ border-radius: 14px; }
  .blog-card-image{ height: auto !important; aspect-ratio: 16/10; }
  .blog-card-content{ padding: 1rem !important; }
  .blog-card-title{ font-size: 1.05rem !important; line-height: 1.3 !important; }
  .blog-card-excerpt{
    font-size: .88rem !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .blog-card-meta{ font-size: .76rem !important; }
}
@media (max-width: 768px){
  .article-content,
  .blog-article{
    font-size: 1rem;
  }
  .article-content h1,
  .blog-article h1{
    font-size: clamp(1.6rem, 6vw, 2rem) !important;
    line-height: 1.2 !important;
  }
  .article-content h2{
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
    margin-top: 1.75rem !important;
  }
  .article-content h3{
    font-size: 1.1rem !important;
    margin-top: 1.25rem !important;
  }
  .article-content p,
  .article-content li{
    font-size: 1rem;
    line-height: 1.65;
  }
  .article-content img{
    border-radius: 12px;
    margin: 1rem 0 !important;
  }
}

/* ============================================================
   16. STEPS / PROCESS / COMO-FUNCIONA
   ============================================================ */
@media (max-width: 640px){
  .step-card-v2{ border-radius: 16px; }
  .step-image-wrapper{ aspect-ratio: 3/2 !important; height: auto !important; padding: 0 !important; }
  .step-content-v2{ padding: 28px 18px 22px !important; }
  .step-num-circle{
    width: 48px !important;
    height: 48px !important;
    font-size: 1.05rem !important;
    top: -24px !important;
    right: 18px !important;
  }
  .step-title-v2{ font-size: 1.08rem !important; }
  .step-description-v2{ font-size: .88rem !important; line-height: 1.55 !important; }
}
@media (max-width: 380px){
  .step-image-wrapper{ aspect-ratio: 3/2 !important; height: auto !important; padding: 0 !important; }
}

/* ============================================================
   17. INCLUDED SERVICES (Como funciona) — single col
   ============================================================ */
@media (max-width: 768px){
  .included-services-inner{
    grid-template-columns: 1fr !important;
  }
  .included-info{
    padding: 1.5rem !important;
    text-align: center !important;
  }
  .included-info .btn-primary{ width: 100% !important; max-width: 320px; margin: 0 auto; }
  .included-features{
    grid-template-columns: 1fr !important;
  }
  .included-feature{
    border-right: none !important;
    padding: 1rem !important;
  }
  .included-title-v3{ font-size: 1.25rem !important; }
}

/* ============================================================
   18. COBERTURA / ZONAS / ALCALDÍAS
   ============================================================ */
@media (max-width: 640px){
  .alcaldias-list{ column-count: 1 !important; }
  .alcaldia-item{
    min-height: 42px;
    font-size: .88rem !important;
  }
  .cobertura-card{ padding: 1.25rem !important; }
  .cobertura-card-header h3{ font-size: 1.18rem !important; }
  .cobertura-logistica,
  .cobertura-logistica-v2{
    padding: 1.25rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .logistica-card-v2{ padding: 1.1rem !important; }
  .logistica-icon-v2{ font-size: 2rem !important; }
  .logistica-title-v2{ font-size: 1rem !important; }
  .logistica-kpi-v2{ font-size: 1.25rem !important; }
}

/* Mapas y embeds */
@media (max-width: 640px){
  .map-container,
  .cobertura-mapa{
    border-radius: 12px;
    overflow: hidden;
  }
  .map-container iframe,
  .cobertura-mapa iframe{
    height: 260px !important;
    width: 100% !important;
  }
}

/* ============================================================
   19. TESTIMONIOS
   ============================================================ */
@media (max-width: 640px){
  .testimonio-card{
    padding: 1.25rem !important;
    border-radius: 16px;
  }
  .testimonio-text{
    font-size: .92rem !important;
    line-height: 1.6 !important;
    -webkit-line-clamp: 5 !important;
    line-clamp: 5 !important;
  }
  .testimonio-rating{ font-size: .95rem !important; }
  .author-name{ font-size: .88rem !important; }
  .author-event{ font-size: .76rem !important; }
  .author-avatar{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

/* ============================================================
   20. FAQ — touch friendly
   ============================================================ */
@media (max-width: 640px){
  .faq-item{ border-radius: 12px; }
  .faq-question{
    min-height: var(--tap-lg);
    padding: 14px 16px !important;
    font-size: .95rem !important;
    line-height: 1.4;
  }
  .faq-icon{ font-size: 1.05rem !important; }
  .faq-answer{
    padding: 0 16px 16px !important;
    font-size: .9rem !important;
    line-height: 1.6;
  }
}

/* ============================================================
   21. SECCIÓN CONTACTO — métodos + form 2 cards
   ============================================================ */
@media (max-width: 768px){
  .contact-forms-grid,
  .contact-info-grid{
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .contact-info-content{ padding: 1.25rem !important; }
}
@media (max-width: 640px){
  .contact-method-card{ border-radius: 14px; }
  .contact-method-image{ height: 110px !important; }
  .contact-method-icon{ font-size: 2.5rem !important; }
  .contact-method-content{ padding: 1rem !important; }
  .contact-method-title{ font-size: 1.05rem !important; }
  .contact-method-btn{
    width: 100%;
    min-height: var(--tap-lg);
    padding: 12px 18px !important;
    font-size: .92rem !important;
  }
}

/* Tarjetas de cotización (form de contacto) */
@media (max-width: 640px){
  .cot-card,
  .form-card{
    padding: 1.25rem !important;
    border-radius: 16px !important;
  }
  .cot-card h2,
  .form-card h2{
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }
}

/* ============================================================
   22. SEGURIDAD / NOSOTROS / GUÍA — secciones de contenido
   ============================================================ */
@media (max-width: 768px){
  .seguridad-grid,
  .nosotros-grid,
  .nosotros-stats,
  .guia-grid{
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .seguridad-card,
  .nosotros-card,
  .guia-card{
    padding: 1.25rem !important;
    border-radius: 16px !important;
  }
}

/* ============================================================
   23. SALONES PAGES — galería + proof bar
   ============================================================ */
@media (max-width: 480px){
  .salon-section-title{ font-size: 1.25rem !important; line-height: 1.2 !important; }
  .salon-card{ padding: 1rem !important; border-radius: 14px !important; }
  .salon-content{ padding: 1rem !important; }
}

/* ============================================================
   24. INFLABLES (FICHA DE PRODUCTO L4) — specs + CTAs
   ============================================================ */
@media (max-width: 768px){
  .producto-hero-grid,
  .ficha-hero-grid{
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .ficha-image,
  .producto-image{
    border-radius: 16px;
    overflow: hidden;
  }
  .producto-specs,
  .ficha-rapida,
  .inflable-stats{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .65rem !important;
  }
  .producto-spec,
  .ficha-spec{
    padding: .75rem !important;
    font-size: .85rem !important;
  }
}
@media (max-width: 380px){
  .producto-specs,
  .ficha-rapida,
  .inflable-stats{
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   25. NAVSTRIP / SUBNAV (pestañas debajo del hero)
   ============================================================ */
@media (max-width: 768px){
  .nav-strip,
  .navstrip,
  .nav-strip-bottom{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .5rem var(--container-px);
  }
  .nav-strip::-webkit-scrollbar,
  .navstrip::-webkit-scrollbar,
  .nav-strip-bottom::-webkit-scrollbar{ display: none; }
  .nav-strip-list,
  .navstrip-list{
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  .nav-strip-list a,
  .navstrip-list a,
  .nav-strip-bottom a{
    min-height: var(--tap-min);
    padding: 8px 14px !important;
    font-size: .88rem !important;
    white-space: nowrap;
  }
}

/* ============================================================
   26. BREADCRUMBS — wrap o scroll lateral
   ============================================================ */
@media (max-width: 480px){
  .breadcrumb,
  nav[aria-label="breadcrumb"]{
    font-size: .8rem !important;
    padding: 10px 14px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .breadcrumb ol,
  nav[aria-label="breadcrumb"] ol{
    flex-wrap: nowrap !important;
  }
  .breadcrumb a{
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   27. RELATED LINKS / CTA INLINE
   ============================================================ */
@media (max-width: 640px){
  .related-links,
  .related-grid{
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }
  .related-link,
  .related-card{
    padding: 1rem !important;
    border-radius: 12px !important;
    min-height: 56px;
  }
}

/* ============================================================
   28. FOCUS VISIBLE — accesibilidad táctil
   ============================================================ */
@media (max-width: 768px){
  a:focus-visible,
  button:focus-visible,
  .btn:focus-visible,
  .form-input:focus-visible,
  .form-select:focus-visible,
  .form-textarea:focus-visible{
    outline: 3px solid var(--color-primary, #ff12cc) !important;
    outline-offset: 2px !important;
  }
}

/* ============================================================
   29. PROTECCIÓN ANTI-OVERFLOW — ningún componente desborda
   ============================================================ */
@media (max-width: 768px){
  main, section, .container, .hero-inner, .hero-component-grid{
    overflow-x: clip;
  }
  /* Hard guard contra hijos largos */
  pre, code{
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
  }
}

/* ============================================================
   30. PRINT — limpio
   ============================================================ */
@media print{
  .top-bar, .hdr, .mob, .mob-overlay,
  .whatsapp-float, .cta-final{
    display: none !important;
  }
  body{ background: #fff !important; color: #000 !important; }
}

/* ============================================================
   FIN — INFLAPY MOBILE PRO
   Todo override usa !important para vencer hojas que cargan
   después por componente (scoped Astro). Si necesitas tocar
   un selector que ya esté aquí, edita ESTA hoja — no inventes
   nuevas reglas en componentes.
   ============================================================ */