
*,*::before,*::after{box-sizing:border-box}
html{
  width:100%;max-width:100%;overflow-x:hidden;overflow-y:scroll;
  scrollbar-gutter:stable;scroll-behavior:smooth;
}
body{width:100%;max-width:100%;overflow-x:hidden!important}
img,video,svg,canvas{max-width:100%}
header,section{scroll-margin-top:92px}

nav{left:0!important;right:0!important;width:100%!important}
.nav{width:min(1240px,92vw)!important;min-width:0!important}
.links{min-width:0!important}
.links a{white-space:nowrap}
.lang-switcher{flex:0 0 auto}
.lang-switcher select{max-width:112px!important}

h1,h2,h3,p,.lead,.card,.spec,.moment,.b2b,
.personal-carousel-kicker,.experience-point,.sensory-stage-text{
  overflow-wrap:anywhere;
}
html[lang="en"] .lead,
html[lang="pt"] .lead,
html[lang="fr"] .lead{line-height:1.72!important}
html[lang="zh-CN"] p,
html[lang="zh-CN"] .lead,
html[lang="zh-CN"] .pane p{line-height:1.9!important}

.hero-cap{width:min(96vw,1500px)!important;max-width:96vw!important}
.hero-cap h2{
  white-space:nowrap!important;max-width:100%!important;
  font-size:clamp(17px,4.2vw,62px)!important;
}

/* Proceso: mismo marco visual para todas las imágenes */
#proceso .pane-photo{
  display:block!important;width:100%!important;
  height:360px!important;min-height:360px!important;max-height:360px!important;
  object-fit:contain!important;object-position:center center!important;
  margin:0!important;padding:10px!important;box-sizing:border-box!important;
}

/* Producto: imagen natural y sin marco/sombra */
#producto .product-img{
  min-width:0!important;border:none!important;box-shadow:none!important;
  background:transparent!important;
}
#producto .product-img::before,#producto .product-img::after{display:none!important}
#producto .product-img img{
  width:100%!important;height:auto!important;max-height:none!important;
  object-fit:contain!important;border-radius:0!important;box-shadow:none!important;
  filter:none!important;
}

/* Personalización: slider a la izquierda, texto a la derecha */
#personalizacion .wrap{
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr)!important;
  grid-template-rows:auto auto 1fr!important;
  align-items:center!important;column-gap:46px!important;row-gap:12px!important;
}
#personalizacion .personal-showcase{
  grid-column:1!important;grid-row:1 / span 3!important;
  width:100%!important;min-width:0!important;margin:0!important;
}
#personalizacion .eyebrow,
#personalizacion h2,
#personalizacion p.lead{grid-column:2!important;min-width:0!important}
#personalizacion p.lead{max-width:none!important;margin:8px 0 0!important}

@media(max-width:1024px){
  .wrap{width:min(100%,92vw)!important}
  .pad{padding:78px 0!important}
  .origin-grid,#vegas-basile .vegas-layout,#producto .product-grid,.experience-grid{
    gap:30px!important;
  }
  #proceso .pane-photo{
    height:310px!important;min-height:310px!important;max-height:310px!important;
  }
  #personalizacion .wrap{
    grid-template-columns:minmax(0,1fr) minmax(310px,.88fr)!important;
    column-gap:30px!important;
  }
  #personalizacion .personal-carousel-viewport{min-height:430px!important}
}

@media(max-width:860px){
  header,section{scroll-margin-top:120px}
  .nav{
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;
    row-gap:6px!important;padding:7px 0 6px!important;
  }
  .brand{flex:0 0 auto}
  .lang-switcher{margin-left:auto!important}
  .links{
    order:3!important;width:100%!important;display:flex!important;
    flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
    gap:16px!important;padding:5px 0 3px!important;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  }
  .links a{flex:0 0 auto!important}

  .origin-grid,#vegas-basile .vegas-layout,#producto .product-grid,.experience-grid{
    grid-template-columns:1fr!important;
  }

  #proceso .process-tabs{
    display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  #proceso .process-btn{flex:0 0 124px!important;scroll-snap-align:start}
  #proceso .pane.active{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto auto auto!important;
    min-height:0!important;
  }
  #proceso .pane-photo{
    grid-column:1!important;grid-row:1!important;
    height:300px!important;min-height:300px!important;max-height:300px!important;
  }
  #proceso .pane .num,#proceso .pane h3,#proceso .pane p,#proceso .pane ul{
    grid-column:1!important;padding-left:26px!important;padding-right:26px!important;
  }
  #proceso .pane .num{grid-row:2!important;padding-top:24px!important}
  #proceso .pane h3{grid-row:3!important}
  #proceso .pane p{grid-row:4!important;padding-bottom:60px!important}
  #proceso .pane ul{grid-row:5!important}

  .sensory-luxury{grid-template-columns:1fr!important}
  .sensory-metrics{
    display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;
    padding-bottom:7px!important;-webkit-overflow-scrolling:touch;
  }
  .metric-chip{flex:0 0 auto!important}

  #personalizacion .wrap{
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;gap:14px!important;
  }
  #personalizacion .eyebrow{order:1}
  #personalizacion h2{order:2}
  #personalizacion p.lead{order:3}
  #personalizacion .personal-showcase{order:4;margin-top:12px!important}
  #personalizacion .personal-carousel-viewport{min-height:410px!important}

  #b2b .b2b-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #galeria .gallery{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:600px){
  header,section{scroll-margin-top:116px}
  .wrap{width:min(100%,91vw)!important}
  .pad{padding:62px 0!important}
  h2{font-size:clamp(32px,9.8vw,44px)!important;line-height:1.04!important}
  h3{font-size:clamp(23px,7vw,30px)!important}
  p,.lead{font-size:15px!important;line-height:1.72!important}
  .brand img{width:40px!important}
  .brand b{display:none!important}
  .lang-label{display:none!important}
  .lang-switcher select{max-width:72px!important;min-height:31px!important}

  .hero-cap{width:98vw!important;max-width:98vw!important}
  .hero-cap h2{
    font-size:clamp(15px,4.65vw,27px)!important;
    letter-spacing:-.018em!important;
  }

  .origin-grid{gap:28px!important}
  #origen .hook{padding:22px!important}
  #diferencia .cards5{grid-template-columns:1fr!important}
  #vegas-basile .vegas-mosaic{width:100%!important}

  #proceso .pane-photo{
    height:235px!important;min-height:235px!important;max-height:235px!important;
    padding:7px!important;
  }
  #proceso .process-btn{flex-basis:108px!important;font-size:9.5px!important}
  #proceso .pane .num,#proceso .pane h3,#proceso .pane p,#proceso .pane ul{
    padding-left:20px!important;padding-right:20px!important;
  }

  .sensory-stage{padding:20px!important}
  .sensory-stage-card{grid-template-columns:1fr!important}
  .sensory-stage-number{min-height:88px!important}
  .sensory-notes{grid-template-columns:1fr!important}

  #personalizacion .personal-carousel-viewport{min-height:300px!important}
  #personalizacion .personal-showcase{padding:14px!important}
  #personalizacion .personal-carousel-meta{align-items:flex-start!important}
  #personalizacion .personal-carousel-kicker{
    width:100%!important;font-size:10px!important;line-height:1.5!important;
  }

  .experience-point{padding:16px!important}
  #b2b .b2b-grid{grid-template-columns:1fr!important}
  #galeria .gallery{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;
  }
  #contacto .cta{padding:44px 18px!important}
}

@media(max-width:380px){
  .hero-cap h2{font-size:14.5px!important}
  #proceso .pane-photo{
    height:210px!important;min-height:210px!important;max-height:210px!important;
  }
  #personalizacion .personal-carousel-viewport{min-height:265px!important}
}
