:root{--mobile-min-touch:44px;--mobile-padding:1rem;--mobile-font-min:0.875rem}@media (max-width:768px){.container{padding:0 var(--mobile-padding)}body{overflow-x:hidden}body{font-size:1rem;-webkit-text-size-adjust:100%}}@media (max-width:768px){.top-info-bar{padding:0}.top-info-container{padding:8px var(--mobile-padding);gap:8px}.top-info-brand{font-size:10px;letter-spacing:0}.top-info-item{font-size:11px;min-height:var(--mobile-min-touch);display:flex;align-items:center}.top-info-social{width:36px;height:36px}.top-info-social svg{width:18px;height:18px}}@media (max-width:480px){.top-info-brand{display:none}.top-info-left{flex:1;justify-content:flex-start}.top-info-right{gap:4px}.top-info-social{width:32px;height:32px}}@media (max-width:768px){.btn{min-height:var(--mobile-min-touch);padding:12px 20px;font-size:0.95rem}.btn-lg{padding:14px 24px;font-size:1rem}.btn-xl{padding:16px 28px;font-size:1.05rem}.btn-whatsapp, .btn-catalogo, .btn-llamar{padding:14px 24px;font-size:1rem;letter-spacing:0.5px}.btn-product{min-height:var(--mobile-min-touch);padding:12px 16px;font-size:0.9rem}.btn-outline-small{min-height:40px;padding:10px 16px;font-size:0.85rem}}@media (max-width:768px){.stats-bar{padding:var(--space-lg) 0}.stats-grid{grid-template-columns:repeat(2, 1fr);gap:var(--space-md)}.stat-number{font-size:1.75rem}.stat-label{font-size:0.8rem}}@media (max-width:480px){.stats-grid{gap:var(--space-sm)}.stat-number{font-size:1.5rem}.stat-label{font-size:0.75rem}}@media (max-width:768px){.catalogo, .como-funciona, .testimonios, .faq, .coverage-section{padding:var(--space-2xl) 0}.section-header{margin-bottom:var(--space-xl)}.section-badge{font-size:0.8rem;padding:6px 14px}.section-title{font-size:clamp(1.5rem, 5vw, 2rem);line-height:1.2}.section-subtitle{font-size:0.95rem}}@media (max-width:640px){.catalogo-grid{gap:var(--space-md);max-width:100%}.product-card{border-radius:var(--radius-lg)}.product-image{height:200px}.product-content{padding:var(--space-md)}.product-title{font-size:1.1rem}.product-description{font-size:0.875rem;-webkit-line-clamp:3;min-height:auto;margin-bottom:var(--space-sm)}.product-specs{margin-bottom:var(--space-sm);padding-top:var(--space-sm)}.spec-icon{font-size:0.9rem}.spec-text{font-size:0.7rem}.product-badge{font-size:0.65rem;padding:4px 8px}}@media (max-width:640px){.steps-grid-v2{gap:32px}.step-image-wrapper{aspect-ratio:3/2;height:auto;border-radius:20px 20px 0 0;padding:0}.step-content-v2{padding:36px 22px 26px}.step-num-circle{width:56px;height:56px;font-size:1.25rem;top:-28px;right:22px}.step-label{font-size:0.7rem}.step-title-v2{font-size:1.18rem}.step-description-v2{font-size:0.9rem}}@media (max-width:968px){.included-info{padding:var(--space-xl);text-align:center}.included-title-v3{font-size:1.4rem}.included-description{font-size:0.95rem}.included-info .btn-primary{width:100%}}@media (max-width:640px){.included-feature{padding:var(--space-md);gap:var(--space-sm)}.feature-number{font-size:1.25rem;min-width:32px}.feature-title{font-size:0.95rem}.feature-description{font-size:0.8rem}}@media (max-width:640px){.testimonios-grid{gap:var(--space-md);max-width:100%}.testimonio-card{padding:var(--space-lg)}.testimonio-text{font-size:0.9rem;-webkit-line-clamp:5}.author-avatar{width:40px;height:40px;min-width:40px;font-size:0.8rem}.author-name{font-size:0.85rem}.author-event{font-size:0.75rem}}@media (max-width:768px){.faq-grid{gap:var(--space-sm)}.faq-question{padding:var(--space-md);font-size:0.95rem;min-height:var(--mobile-min-touch)}.faq-icon{font-size:1.1rem}.faq-answer{padding:0 var(--space-md) var(--space-md);padding-left:var(--space-md);font-size:0.9rem}}@media (max-width:768px){.cobertura{padding:var(--space-2xl) 0}.zones-featured-grid{gap:var(--space-md)}.zone-featured-card{border-radius:var(--radius-lg)}.zone-featured-image{height:150px}.zone-featured-content{padding:var(--space-md)}.zone-featured-content h3{font-size:1.1rem}.zone-featured-content p{font-size:0.85rem}.zone-featured-highlights li{font-size:0.8rem}.zone-featured-badge{font-size:0.6rem;padding:4px 8px}.cobertura-card{padding:var(--space-lg)}.cobertura-card-header h3{font-size:1.2rem}.alcaldia{font-size:0.8rem;padding:6px 10px}.logistica-grid, .logistica-grid-v2{grid-template-columns:1fr;gap:var(--space-md)}.logistica-card, .logistica-card-v2{padding:var(--space-md)}.logistica-kpi, .logistica-kpi-v2{font-size:1.25rem}}@media (max-width:768px){.cta-final{padding:var(--space-2xl) 0}.cta-confetti{font-size:2.5rem}.cta-title{font-size:clamp(1.5rem, 6vw, 2rem);line-height:1.2}.cta-subtitle{font-size:1rem;margin-bottom:var(--space-lg)}.cta-buttons{flex-direction:column;width:100%;gap:var(--space-sm)}.cta-buttons .btn{width:100%}.cta-contact-info{flex-direction:column;gap:var(--space-md)}.contact-item{font-size:0.9rem}}@media (max-width:768px){.whatsapp-float{bottom:16px;right:16px;width:56px;height:56px}.whatsapp-float-icon{width:28px;height:28px}.whatsapp-float-tooltip{display:none}.whatsapp-float-badge{width:20px;height:20px;font-size:10px}}@media (max-width:640px){.servicios-zona-grid{gap:var(--space-md);max-width:100%}.servicio-zona-card{border-radius:var(--radius-lg)}.servicio-zona-image{height:160px}.servicio-zona-content{padding:var(--space-md)}.servicio-zona-content h3{font-size:1.05rem}.servicio-zona-content p{font-size:0.85rem}.servicio-zona-features li{font-size:0.8rem}}@media (max-width:768px){a:focus-visible, button:focus-visible, .btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}input, select, textarea{font-size:16px}}@supports (padding:env(safe-area-inset-bottom)){.footer-bottom{padding-bottom:calc(var(--space-lg) + env(safe-area-inset-bottom))}.whatsapp-float{bottom:calc(16px + env(safe-area-inset-bottom))}}@media print{.whatsapp-float, .cta-final{display:none !important}.hdr{position:static}body{font-size:12pt}}html{overscroll-behavior:none}.whatsapp-float, .sidebar-toggle{contain:layout style}.catalog-sidebar{touch-action:pan-y;-webkit-overflow-scrolling:touch}.footer-links--alcaldias{contain:content}@media (max-width:768px){.filter-checkbox input{width:24px;height:24px}.filter-checkbox{min-height:44px;padding:8px 0}.filter-btn{min-height:48px;padding:12px 16px}.footer-links li a{min-height:36px;display:flex;align-items:center}input[type="range"]{height:44px}input[type="range"]::-webkit-slider-thumb{width:28px;height:28px}}@media (max-width:768px){.form-input, .form-select, .form-textarea{min-height:48px;font-size:16px;padding:12px 16px}.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;-webkit-appearance:none;appearance:none}.form-checkbox{width:24px;height:24px}.form-input:invalid:not(:placeholder-shown), .form-select:invalid:not(:placeholder-shown){border-color:#e53935}.form-input:valid:not(:placeholder-shown), .form-select:valid:not(:placeholder-shown){border-color:#43a047}}@media (max-width:1024px){.sidebar-toggle{bottom:24px;padding:14px 24px;font-size:0.95rem;box-shadow:0 4px 20px rgba(0,0,0,0.2)}.catalog-sidebar{overscroll-behavior:contain}.sidebar-overlay{backdrop-filter:blur(2px)}.catalog-card-actions{gap:8px}.catalog-card-btn{min-height:48px;font-size:0.95rem}}@media (max-width:768px){.contact-methods-grid{gap:var(--space-md)}.contact-method-card{border-radius:var(--radius-lg)}.contact-method-image{height:120px}.contact-method-icon{font-size:3rem}.contact-method-btn{min-height:44px;padding:12px 20px}.contact-info-content{padding:var(--space-xl)}.map-container{min-height:300px;border-radius:var(--radius-lg)}.horarios-grid{gap:8px}.horario-item{padding:10px 12px;font-size:0.85rem}}@media (max-width:640px){.blog-grid{gap:var(--space-md)}.blog-card{border-radius:var(--radius-lg)}.blog-card-image{height:180px}.blog-card-content{padding:var(--space-md)}.blog-card-title{font-size:1.1rem}.blog-card-excerpt{font-size:0.85rem;-webkit-line-clamp:2}}.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--color-primary);color:white;padding:12px 24px;border-radius:var(--radius-md);z-index:10000;text-decoration:none;font-weight:600}@media (hover:hover){.btn:hover{outline:none}}@media (max-width:360px){:root{--mobile-padding:0.75rem}.btn-whatsapp, .btn-catalogo{padding:12px 16px;font-size:0.9rem}.product-card{border-radius:var(--radius-md)}.footer-phone{font-size:1.1rem}}.trust-bar{padding:1.25rem 1rem}.trust-bar-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:0.75rem}@media (max-width:768px){.trust-bar{padding:1rem 0.75rem}.trust-bar-grid{grid-template-columns:repeat(3, 1fr);gap:0.5rem}.trust-number{font-size:1.4rem !important}.trust-label{font-size:0.7rem !important}}@media (max-width:480px){.trust-bar-grid{grid-template-columns:repeat(3, 1fr);gap:0.4rem}.trust-number{font-size:1.2rem !important}.trust-label{font-size:0.65rem !important}.trust-item{padding:0.5rem 0.25rem !important}}@media (max-width:768px){.product-price-row{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex-wrap:wrap}.product-price{font-size:0.85rem !important}}@media (max-width:480px){.product-price-row{flex-direction:column;align-items:flex-start;gap:0.35rem}.product-price-row .btn{width:100%;text-align:center;justify-content:center}}.cobertura-mapa{border-radius:12px;overflow:hidden;margin-bottom:1.5rem}@media (max-width:768px){.cobertura-mapa iframe{height:280px !important}}@media (max-width:480px){.cobertura-mapa iframe{height:220px !important}}@media (max-width:768px){.logistica-grid-v2{grid-template-columns:1fr !important;gap:1rem !important}.logistica-links-v2{grid-template-columns:repeat(2, 1fr) !important}}@media (max-width:480px){.cobertura-logistica-v2{padding:1.5rem 0.75rem !important}.logistica-links-v2{grid-template-columns:repeat(2, 1fr) !important;gap:0.4rem !important}.logistica-links-v2 a{font-size:0.75rem !important;padding:0.3rem 0.5rem !important}}@media (max-width:480px){.hero-component-mcard{padding:0.75rem 0 !important}.hero-component-mtext{font-size:0.85rem !important}}.loading{position:relative;pointer-events:none}.loading::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center}.img-skeleton{background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size:200% 100%}

/* ============================================================
   MOBILE PRO IMAGE GOVERNANCE — añadido 2026-04-29
   Objetivo: imágenes proporcionadas, sin estiramiento ni saltos
   de layout en cualquier teléfono (≤768 / ≤480 / ≤360).
   ============================================================ */

/* Reset universal de imágenes en mobile: nunca rompen el ancho */
@media (max-width: 768px){
  img, picture, video, svg{ max-width: 100%; height: auto; display: block; }
  .container, main, section{ overflow-x: clip; }
}

/* Cualquier imagen dentro de tarjeta: cover + centrada (faces visibles) */
@media (max-width: 768px){
  .product-card-image img,
  .beneficio-card-image img,
  .para-quien-card-image img,
  .step-image-wrapper img,
  .step-image,
  .zone-featured-image img,
  .servicio-zona-image img,
  .blog-card-image img,
  .otros-grid .product-card-image img,
  .catalog-grid .product-card-image img,
  .catalog-grid-home .product-card-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* Steps (cómo funciona) — alturas razonables en phone */
@media (max-width: 640px){
  .step-image-wrapper{ aspect-ratio: 3/2 !important; height: auto !important; padding: 0 !important; }
}
@media (max-width: 480px){
  .step-image-wrapper{ aspect-ratio: 3/2 !important; height: auto !important; padding: 0 !important; border-radius: 16px 16px 0 0 !important; }
  .step-content-v2{ padding: 32px 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; }
}
@media (max-width: 360px){
  .step-image-wrapper{ aspect-ratio: 3/2 !important; height: auto !important; padding: 0 !important; }
}

/* Cards de producto en grids — aspect-ratio + cap absoluto en pantalla mini */
@media (max-width: 480px){
  .catalog-grid-home .product-card-image,
  .otros-grid .product-card-image,
  .catalog-grid .product-card-image{
    aspect-ratio: 4/3;
    max-height: 280px;
  }
  .beneficio-card-image,
  .para-quien-card-image{
    aspect-ratio: 16/10;
    max-height: 220px;
  }
}
@media (max-width: 360px){
  .catalog-grid-home .product-card-image,
  .otros-grid .product-card-image,
  .catalog-grid .product-card-image{ max-height: 240px; }
  .beneficio-card-image,
  .para-quien-card-image{ max-height: 200px; }
}

/* Bloques con altura fija (cobertura/blog/servicios) — más bajos en phone */
@media (max-width: 480px){
  .zone-featured-image{ height: 160px !important; }
  .servicio-zona-image{ height: 150px !important; }
  .blog-card-image{ height: 180px !important; }
  .contact-method-image{ height: 110px !important; }
}

/* Avatars de testimonios — touch-friendly + perfectamente redondos */
@media (max-width: 480px){
  .author-avatar,
  .author-avatar--biz{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
  }
}

/* Tipografía + spacing crítico en pantalla muy chica */
@media (max-width: 480px){
  .section-title{ font-size: clamp(1.45rem, 5.5vw, 1.85rem) !important; }
  .section-subtitle{ font-size: 0.92rem !important; line-height: 1.55 !important; }
  .container{ padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 360px){
  .container{ padding-left: 12px; padding-right: 12px; }
  .section-title{ font-size: 1.35rem !important; }
}

/* Hero — refinamiento extra en pantallas mini */
@media (max-width: 360px){
  .hero-component{ padding: 2.4rem 0.9rem 2.4rem !important; }
  .hero-component-title{ font-size: 1.65rem !important; line-height: 1.12 !important; }
  .hero-component-subtitle{ font-size: 0.9rem !important; }
  .hero-component-mtext{ font-size: 0.82rem !important; }
  .hero-component-badge{ font-size: 0.7rem !important; padding: .4rem .8rem !important; }
}

/* Image rendering crujiente en retina mobile */
@media (max-width: 768px){
  .product-card-image img,
  .beneficio-card-image img,
  .para-quien-card-image img,
  .author-avatar,
  .step-image,
  .zone-featured-image img,
  .blog-card-image img{
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Lazy CLS guard — fondo gris hasta cargar (sensación más pro) */
@media (max-width: 768px){
  img[loading="lazy"]{ background-color: #f3f4f6; }
  .product-card,
  .beneficio-card,
  .para-quien-card,
  .step-card-v2,
  .testimonio-card{ contain: content; }
}

/* Specs de producto — stack limpio en pantallas mini */
@media (max-width: 360px){
  .product-card-specs,
  .otros-grid .product-card-specs{
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
  }
}

/* Catálogo grid — single column ≤480 (no quedan tarjetas a media) */
@media (max-width: 480px){
  .catalog-grid-home,
  .otros-grid{
    grid-template-columns: 1fr !important;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    gap: 1.1rem !important;
  }
}

/* CTA finales — botones full-width en phone */
@media (max-width: 480px){
  .cta-chicos-buttons,
  .cta-medianos-buttons,
  .cta-grandes-buttons,
  .cta-buttons{
    flex-direction: column !important;
    width: 100%;
  }
  .cta-btn-chicos,
  .cta-btn-medianos,
  .cta-btn-grandes{
    width: 100% !important;
    max-width: 320px;
    justify-content: center;
  }
}

/* WhatsApp float — un poco más visible en phone pequeño */
@media (max-width: 360px){
  .whatsapp-float{ width: 52px; height: 52px; bottom: 14px; right: 14px; }
}

/* ============================================================
   SALONES — galería + proof-bar pulido en mobile
   ============================================================ */
@media (max-width: 768px){
  .galeria-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .galeria-item--hero{ grid-column: span 2 !important; grid-row: span 1 !important; }
  .galeria-item img{ min-height: 140px !important; }
  .galeria-item--hero img{ min-height: 200px !important; }
  .proof-bar{
    flex-wrap: wrap;
    gap: 8px 14px !important;
    font-size: 0.82rem !important;
    padding: 12px 14px !important;
    line-height: 1.4;
  }
  .proof-bar span{ flex: 1 1 calc(50% - 14px); white-space: nowrap; }
}
@media (max-width: 480px){
  .galeria-grid{ gap: 4px !important; }
  .galeria-item img{ min-height: 110px !important; }
  .galeria-item--hero img{ min-height: 170px !important; }
  .proof-bar{ font-size: 0.78rem !important; padding: 10px 12px !important; }
  .proof-bar span{ flex: 1 1 100%; }
  .salon-section-title{ font-size: 1.3rem !important; line-height: 1.25 !important; }
}

/* ============================================================
   BLOG card image fallback — gradient sólido mientras carga
   ============================================================ */
@media (max-width: 768px){
  .blog-card-image,
  .blog-card-image img{
    background: linear-gradient(135deg, #fdf2f8 0%, #ede9fe 50%, #e0f2fe 100%);
  }
}

/* ============================================================
   Hero badge wrap — padding más cómodo cuando rompe a 2 líneas
   ============================================================ */
@media (max-width: 480px){
  .hero-component-badge{
    text-align: center;
    line-height: 1.35;
    max-width: 100%;
    padding: .5rem 1rem !important;
  }
}

/* ============================================================
   TopBar mobile — evita que info se corte
   ============================================================ */
@media (max-width: 480px){
  .top-info-bar{ padding: 4px 0 !important; }
  .top-info-container{ padding: 6px 12px !important; gap: 6px !important; }
  .top-info-item{ font-size: 10.5px !important; }
}

/* ============================================================
   Footer accordions mobile — espaciado más respirado
   ============================================================ */
@media (max-width: 480px){
  .footer-content{ gap: 0 !important; }
  .footer-column h3{ font-size: 0.85rem !important; }
  .footer-links li a{ font-size: 0.92rem !important; }
}

/* ============================================================
   Breadcrumb mobile — wrap correcto + scroll si es muy largo
   ============================================================ */
@media (max-width: 480px){
  .breadcrumb,
  nav[aria-label="breadcrumb"]{
    font-size: 0.82rem;
    padding: 12px 16px !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .breadcrumb ol,
  nav[aria-label="breadcrumb"] ol{
    flex-wrap: nowrap !important;
  }
}

/* ============================================================
   Inflable spec grids (ficha producto) — 1 col en pantalla mini
   ============================================================ */
@media (max-width: 360px){
  .inflable-stats,
  .producto-specs,
  .ficha-rapida{
    grid-template-columns: 1fr !important;
  }
}