/* =========================================================
   CALAS · Mobile UX fixes v5.20 · 02/10/2026
   Correcciones específicas para teléfonos.
   No modifica el diseño de escritorio.
   ========================================================= */

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
*,*::before,*::after{
  box-sizing:border-box;
  min-width:0;
}
img,svg,video,canvas,iframe{max-width:100%;}

/* HEADER / LOGO */
@media (max-width:720px){
  .site-header{
    width:100%;
    max-width:100%;
    overflow:visible;
  }
  .nav-wrap{
    width:100%;
    max-width:100%;
    min-height:72px!important;
    padding-left:16px!important;
    padding-right:16px!important;
    gap:10px!important;
  }
  .brand{
    min-width:0!important;
    width:auto!important;
    max-width:calc(100% - 54px)!important;
    gap:0!important;
  }
  .brand .brand-logo-wrap{
    display:grid!important;
    width:56px!important;
    height:56px!important;
    flex:0 0 56px!important;
  }
  .brand .brand-logo-wrap img{
    display:block!important;
    width:56px!important;
    height:56px!important;
    max-width:none!important;
    object-fit:contain!important;
    transform:none!important;
    filter:none!important;
  }
  .brand .brand-name{display:none!important;}
  .nav-toggle{
    display:block!important;
    flex:0 0 auto!important;
    width:44px!important;
    height:44px!important;
    padding:6px!important;
    font-size:1.55rem!important;
    line-height:1!important;
  }
  .nav{
    top:72px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:16px!important;
  }
  .nav a{
    width:100%!important;
    max-width:100%!important;
  }
}

/* CONTENEDORES */
@media (max-width:720px){
  .container{
    width:100%!important;
    max-width:var(--max)!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  main,section,.section,.page-hero{
    max-width:100%!important;
  }
  .section-head{
    width:100%!important;
    max-width:100%!important;
  }
  h1,h2,h3,p{
    max-width:100%;
    overflow-wrap:anywhere;
  }
}

/* INICIO / HERO */
@media (max-width:720px){
  .hero-redesign{
    width:100%!important;
    max-width:100%!important;
    padding:38px 0 48px!important;
    overflow:hidden!important;
  }
  .hero-redesign .hero-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
    width:100%!important;
    max-width:100%!important;
  }
  .hero-redesign .hero-brand,
  .hero-redesign .hero-copy,
  .hero-redesign .hero-showcase{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .hero-redesign .hero-brand{
    align-items:center!important;
    gap:12px!important;
  }
  .hero-redesign .hero-kicker{
    max-width:100%!important;
    text-align:center!important;
  }
  .hero-redesign .hero-logo{
    width:min(82vw,300px)!important;
    max-width:100%!important;
  }
  .hero-redesign .hero-copy{
    text-align:left!important;
  }
  .hero-redesign .hero-copy h1{
    font-size:clamp(2.8rem,13vw,4.2rem)!important;
  }
  .hero-redesign .hero-actions{
    width:100%!important;
  }
  .hero-redesign .hero-actions .btn{
    max-width:100%!important;
  }
  .hero-redesign .hero-showcase{
    overflow:hidden!important;
  }
  .hero-redesign .showcase-frame{
    width:100%!important;
    max-width:100%!important;
  }
}

/* NOSOTROS: texto y collage pasan a una sola columna */
@media (max-width:720px){
  .about-story-section .about-story-layout{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    gap:34px!important;
    align-items:start!important;
  }
  .about-story-section .about-copy{
    width:100%!important;
    max-width:100%!important;
    font-size:1rem!important;
    line-height:1.78!important;
  }
  .about-story-section .about-story-gallery{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    margin:0 auto!important;
    overflow:visible!important;
  }
  .about-story-section .story-photo-main{
    width:68%!important;
    height:auto!important;
    aspect-ratio:1122 / 1402!important;
    left:11%!important;
    top:38px!important;
  }
  .about-story-section .story-photo-top{
    width:43%!important;
    height:auto!important;
    aspect-ratio:1122 / 1402!important;
    right:0!important;
    top:0!important;
  }
  .about-story-section .story-photo-bottom{
    width:45%!important;
    height:auto!important;
    aspect-ratio:1122 / 1402!important;
    left:0!important;
    bottom:0!important;
  }
  .about-story-section .brand-quote{
    max-width:100%!important;
    font-size:1.08rem!important;
    line-height:1.5!important;
    overflow-wrap:anywhere!important;
  }
  .about-story-section .section-head h2{white-space:normal!important;}
}

/* HISTORIA */
@media (max-width:720px){
  .about-history-card{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    gap:28px!important;
  }
  .about-history-copy{
    width:100%!important;
    max-width:100%!important;
  }
  .history-collage{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
  }
}

/* GRIDS */
@media (max-width:720px){
  .grid-3,.grid-4,.category-grid,.characteristic-grid{
    width:100%!important;
    max-width:100%!important;
  }
  .grid-4,.grid-3{grid-template-columns:1fr!important;}
  .category-grid{grid-template-columns:1fr!important;}
  .product-card,.category-card,.card,.characteristic-card{
    width:100%!important;
    max-width:100%!important;
  }
  .product-photo,.gallery-photo{max-width:100%!important;}
}

/* PAGOS
   Escritorio conserva el montaje actual.
   Móvil usa cuatro logos independientes para evitar recortes. */
.payment-mobile-grid{display:none!important;}
@media (max-width:720px){
  .payment-card-v514{
    width:100%!important;
    max-width:100%!important;
    padding:24px 0 28px!important;
    gap:16px!important;
    overflow:hidden!important;
  }
  .payment-card-v514 .payment-methods-horizontal{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    display:block!important;
  }
  .payment-card-v514 .payment-methods-horizontal > .payment-strip{
    display:none!important;
  }
  .payment-mobile-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    padding:0 4px!important;
  }
  .payment-mobile-item{
    width:100%!important;
    min-width:0!important;
    height:64px!important;
    padding:8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#fff!important;
    border:1px solid rgba(47,77,47,.16)!important;
    border-radius:12px!important;
    overflow:hidden!important;
    box-shadow:0 6px 16px rgba(47,77,47,.06)!important;
  }
  .payment-mobile-item img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
  }
}

/* FOOTER */
@media (max-width:720px){
  .footer{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .footer-main-grid,.footer-grid{grid-template-columns:1fr!important;}
  .footer-bottom,.footer-topline{
    width:100%!important;
    max-width:100%!important;
  }
  .footer-developer{
    max-width:100%!important;
    overflow:hidden!important;
  }
}

/* WHATSAPP */
@media (max-width:720px){
  .whatsapp-fab{
    right:14px!important;
    bottom:14px!important;
    width:58px!important;
    height:58px!important;
  }
}


/* =========================================================
   CALAS · Mobile UX v5.21 · 02/10/2026
   Corrección estructural definitiva para producción.
   ========================================================= */
@media (max-width:720px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:clip!important;
  }

  body{
    margin:0!important;
  }

  main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:clip!important;
  }

  section,.section,.page-hero,.container{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .container{
    padding-left:16px!important;
    padding-right:16px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Ningún bloque de escritorio puede ensanchar el viewport. */
  .hero-grid,
  .about-home-grid,
  .about-story-layout,
  .about-history-card,
  .campaign-card,
  .form-grid,
  .grid-3,
  .grid-4,
  .category-grid,
  .characteristic-grid,
  .footer-main-grid,
  .footer-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* NOSOTROS: texto arriba + collage debajo, sin columnas laterales. */
  .about-story-section .about-story-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:30px!important;
    align-items:start!important;
  }

  .about-story-section .about-copy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  .about-story-section .about-story-gallery{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:520px!important;
    min-height:430px!important;
    height:430px!important;
    margin:0 auto!important;
    overflow:visible!important;
  }

  .about-story-section .story-photo{
    position:absolute!important;
    max-width:none!important;
  }

  .about-story-section .story-photo-main{
    width:68%!important;
    height:320px!important;
    left:11%!important;
    top:42px!important;
  }

  .about-story-section .story-photo-top{
    width:43%!important;
    height:170px!important;
    right:0!important;
    top:0!important;
  }

  .about-story-section .story-photo-bottom{
    width:45%!important;
    height:180px!important;
    left:0!important;
    bottom:0!important;
  }

  /* PAGOS: en móvil NO usar la imagen horizontal de escritorio. */
  .payment-card-v514{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:24px 0 28px!important;
  }

  .payment-card-v514 .payment-methods-horizontal{
    width:100%!important;
    max-width:100%!important;
    display:block!important;
    overflow:visible!important;
  }

  .payment-card-v514 .payment-methods-horizontal > .payment-strip{
    display:none!important;
  }

  .payment-mobile-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
  }

  .payment-mobile-item{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:68px!important;
    padding:8px!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .payment-mobile-item img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
  }

  /* Hero/logo: reserva espacio desde el primer render. */
  .brand .brand-logo-wrap,
  .brand .brand-logo-wrap img{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
  }

  .hero-redesign .hero-logo{
    width:min(82vw,300px)!important;
    max-width:100%!important;
    min-height:1px!important;
  }

  .hero-redesign .hero-logo img{
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    object-fit:contain!important;
  }

  /* Evita que textos con tracking/Playfair creen un ancho lateral. */
  h1,h2,h3,p,.eyebrow,.section-intro-accent,.muted{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }

  .section-head{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .section-head h2,
  .catalog-section-head h2{
    white-space:normal!important;
  }

  /* Imágenes y marcos nunca fuerzan un ancho mayor al contenedor. */
  img,svg,video,canvas,iframe{
    max-width:100%!important;
  }

  .about-home-media,
  .about-home-media img,
  .history-collage,
  .history-collage img,
  .product-card,
  .category-card,
  .card,
  .characteristic-card{
    max-width:100%!important;
    min-width:0!important;
  }

  /* WhatsApp permanece dentro del viewport. */
  .whatsapp-fab{
    right:14px!important;
    left:auto!important;
    bottom:14px!important;
  }
}

@media (max-width:380px){
  .about-story-section .about-story-gallery{
    min-height:400px!important;
    height:400px!important;
  }
  .about-story-section .story-photo-main{height:300px!important;}
  .about-story-section .story-photo-top{height:160px!important;}
  .about-story-section .story-photo-bottom{height:170px!important;}
  .payment-mobile-grid{gap:9px!important;}
  .payment-mobile-item{height:62px!important;}
}