/* AppleAurora — reglas responsive para móviles y tablets */
@media(max-width:900px){
 .container{width:min(100% - 40px,760px)}
 .nav{min-height:76px}
 nav{gap:16px}
 .hero{padding:88px 0 92px}
 .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .aboutgrid{grid-template-columns:1fr;gap:26px}
 .section{padding:64px 0}
}

@media(max-width:600px){
 html{scroll-padding-top:120px}
 .container{width:calc(100% - 32px)}
 header{position:fixed;top:0;left:0;right:0;width:100%;z-index:100;background:rgba(8,10,16,.32);backdrop-filter:saturate(120%) blur(7px);-webkit-backdrop-filter:saturate(120%) blur(7px)}
 header.is-scrolled{background:rgba(8,10,16,.70)}
 .nav{min-height:0;padding:10px 0 12px;flex-direction:column;gap:7px}
 .brand img{width:min(205px,64vw);max-height:none}
 nav{width:100%;justify-content:center;gap:clamp(18px,7vw,34px);font-size:14px;flex-wrap:wrap}
 nav a{padding:5px 0}
 .hero{padding:66px 0 70px}
 .eyebrow{font-size:10px;letter-spacing:.18em}
 .hero h1{font-size:clamp(40px,11vw,62px);letter-spacing:-.065em;margin:15px 0}
 .hero p{font-size:16px;line-height:1.6;max-width:36ch;margin-bottom:24px}
 .actions{flex-direction:column;align-items:stretch;gap:10px;width:min(100%,340px);margin:0 auto}
 .actions .button{width:100%}
 .section{padding:48px 0}
 .section h2{font-size:clamp(29px,8vw,38px);line-height:1.12}
 .sub{font-size:15px;line-height:1.55;margin-bottom:24px}
 .filters{gap:8px;margin-bottom:20px}
 .filter{padding:10px 15px;min-height:42px}
 .products{grid-template-columns:minmax(0,1fr);gap:16px}
 .art{height:190px}
 .phone{transform:rotate(-8deg) scale(.9)}
 .body{padding:19px}
 .product h3{font-size:22px}
 .product p{font-size:15px;line-height:1.5}
 .product .button{width:100%}
 .info{padding:22px}
 footer{padding:30px 0}
}

@media(max-width:360px){
 .container{width:calc(100% - 24px)}
 nav{gap:14px;font-size:13px}
 .brand img{width:175px}
 .hero h1{font-size:39px}
 .section{padding:42px 0}
 .info{padding:18px}
}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media(max-width:700px){.footer-grid{grid-template-columns:1fr;gap:22px}.map-wrap,.map-wrap iframe{min-height:230px}}

/* Menú móvil desplegable */
@media(max-width:700px){
 .nav{position:relative;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
 .menu-toggle{display:block;flex:0 0 44px}
 nav[data-site-nav]{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;flex-direction:column;align-items:stretch;gap:0;padding:10px;border:1px solid #394155;border-radius:18px;background:#101521f5;backdrop-filter:blur(18px);box-shadow:0 18px 45px #000b}
 nav[data-site-nav].is-open{display:flex}
 nav[data-site-nav] a{padding:13px 14px;border-radius:10px;font-size:15px}
 nav[data-site-nav] a:hover{background:#ffffff0d}
 body.menu-open{overflow:hidden}
 .brand img{width:min(190px,58vw)}
 .whatsapp-float{right:16px;bottom:16px;width:56px;height:56px}
 .chat-bubble{right:16px;bottom:82px}
}
@media(min-width:701px){
 nav[data-site-nav]{display:flex}
}

/* Banner: evitar recorte de glifos y mantener el título dentro del ancho útil */
.hero-copy,.hero-copy h1{min-width:0;max-width:100%;overflow:visible}.hero-copy h1{-webkit-box-decoration-break:clone;box-decoration-break:clone;text-wrap:balance}.hero-copy h1 span{display:inline;white-space:normal}
@media(max-width:700px){.hero-copy{width:100%;padding-inline:12px}.hero-slide{padding-inline:42px}.hero-copy h1{font-size:clamp(30px,8vw,46px);letter-spacing:-.015em;line-height:1.2;padding:.22em .24em .30em}.hero-copy h1 span{display:inline}.hero-copy p{max-width:34ch}}
@media(max-width:360px){.hero-copy h1{font-size:clamp(28px,7.8vw,34px);letter-spacing:0}.hero-slide{padding-inline:38px}}

/* Header flotante sobre el banner: reservar espacio para su contenido */
@media(max-width:700px){.hero-carousel{padding-top:76px!important}}

/* Área de seguridad extra para títulos del hero: evita recortes de glifos */
.hero-copy h1{padding-inline:clamp(14px,2.4vw,30px);padding-block:.22em .30em;overflow:visible;box-sizing:border-box}
@media(max-width:700px){.hero-copy h1{padding-inline:clamp(12px,4vw,20px);padding-block:.24em .32em}}


/* Navegación móvil: conservar contraste y jerarquía de Contacto */
@media(max-width:700px){
  header nav#site-nav > a{width:100%;justify-content:flex-start;padding:13px 14px;color:rgba(255,255,255,.97);text-shadow:none}
  header nav#site-nav > a::after{left:14px;right:auto;width:calc(100% - 28px);bottom:7px;transform:scaleX(0);transform-origin:left}
  header nav#site-nav > a:last-child{width:100%;margin:5px 0 2px;padding:13px 14px;justify-content:center;border-radius:12px;background:linear-gradient(110deg,rgba(102,207,255,.24),rgba(169,128,255,.32))}
  header nav#site-nav > a:last-child::after{left:14px;right:14px;width:auto;bottom:5px}
}

/* Panel de navegación móvil: alineado a la derecha y con entrada fluida */
@media(max-width:700px){
  .nav{position:relative}
  nav[data-site-nav]{
    display:flex;
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    left:auto;
    width:min(320px,calc(100vw - 32px));
    max-height:min(72vh,520px);
    overflow-y:auto;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:12px;
    border:1px solid rgba(190,174,255,.24);
    border-radius:18px;
    background:rgba(12,16,28,.96);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:0 18px 44px rgba(0,0,0,.38),0 4px 18px rgba(120,110,255,.10);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0,-9px,0) scale(.985);
    transform-origin:top right;
    transition:opacity .22s ease,transform .28s cubic-bezier(.2,.75,.25,1),visibility .22s;
  }
  nav[data-site-nav].is-open{
    display:flex;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0) scale(1);
  }
  nav[data-site-nav] a{
    display:flex;
    width:100%;
    min-height:44px;
    align-items:center;
    padding:11px 14px;
    border-radius:11px;
    font-size:15px;
    text-align:left;
  }
  nav[data-site-nav] a:hover,
  nav[data-site-nav] a:focus-visible{background:rgba(255,255,255,.08)}
  nav[data-site-nav] a:last-child{
    justify-content:center;
    margin:5px 0 1px;
    border:1px solid rgba(190,174,255,.5);
    background:linear-gradient(110deg,rgba(102,207,255,.20),rgba(169,128,255,.28));
  }
}
@media(prefers-reduced-motion:reduce){
  nav[data-site-nav]{transition:none!important}
}


/* Cards: lectura rápida y botón cómodo en pantallas pequeñas */
@media(max-width:700px){
  .products{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:15px}
  .product .art{height:185px}
  .product .body{padding:17px}
  .product h3{font-size:20px}
  .product .product-cta{min-height:48px}
}
@media(max-width:420px){
  .products{grid-template-columns:1fr}
  .product{max-width:100%}
}