@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

:root{
  --header-height:72px;
  --pad:clamp(18px,2.5vw,42px);
}

*{box-sizing:border-box}

html{
  background:#050505;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#050505;
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  font-size:11px;
  letter-spacing:.04em;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

.site-header{
  position:fixed;
  z-index:100;
  top:0;left:0;
  width:100%;
  height:var(--header-height);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 var(--pad);
  mix-blend-mode:difference;
}

.logo{font-size:17px;font-weight:500;letter-spacing:.12em}

.desktop-nav,.utility-nav{
  display:flex;
  gap:26px;
  align-items:center;
}

.utility-nav{justify-content:flex-end}

.desktop-nav a,.utility-nav a,.caption a{
  position:relative;
  white-space:nowrap;
}

.desktop-nav a::after,.utility-nav a::after,.caption a::after{
  content:"";
  position:absolute;
  left:0;bottom:-5px;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s ease;
}

.desktop-nav a:hover::after,.utility-nav a:hover::after,.caption a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* STACK: each image stays full screen while the next panel slides over it */
main{position:relative}

.panel{
  position:sticky;
  top:0;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  background:#111;
}

.panel:nth-child(1){z-index:1}
.panel:nth-child(2){z-index:2}
.panel:nth-child(3){z-index:3}
.panel:nth-child(4){z-index:4}
.panel:nth-child(5){z-index:5}
.panel:nth-child(6){z-index:6}
.panel:nth-child(7){z-index:7}
.panel:nth-child(8){z-index:8}

.media{
  position:absolute;
  inset:-12% 0;
  width:100%;
  height:124%;
  display:block;
  will-change:transform;
  transform:translate3d(0,0,0) scale(1.075);
}

.media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}

.shade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.16),
    transparent 30%,
    transparent 67%,
    rgba(0,0,0,.28)
  );
}

.caption{
  position:absolute;
  z-index:3;
  display:flex;
  gap:24px;
  align-items:center;
  text-transform:uppercase;
  font-size:10px;
  line-height:1;
}

.caption-bottom{
  left:var(--pad);
  right:var(--pad);
  bottom:34px;
  justify-content:space-between;
}

.caption-left{left:var(--pad);bottom:34px}
.caption-right{right:var(--pad);bottom:34px}

.caption-center{
  inset:0;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:18px;
  font-size:12px;
}

.footer-panel{
  position:relative;
  z-index:20;
  min-height:55svh;
  padding:110px var(--pad) 35px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:30px;
  align-items:start;
  background:#050505;
}

.footer-panel h2{
  margin:0 0 12px;
  font-size:26px;
  letter-spacing:.12em;
  font-weight:500;
}

.footer-panel p{margin:0}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-panel small{
  justify-self:end;
  align-self:end;
}

.menu-button,.mobile-menu{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .media{transform:none!important}
}

@media (max-width:700px){
  :root{
    --header-height:62px;
    --pad:18px;
  }

  .site-header{
    grid-template-columns:1fr auto;
    height:var(--header-height);
  }

  .desktop-nav,.utility-nav{display:none}

  .menu-button{
    width:34px;
    height:34px;
    padding:8px 0 8px 10px;
    border:0;
    background:transparent;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    color:#fff;
  }

  .menu-button span{
    width:24px;
    height:1px;
    display:block;
    background:currentColor;
    transition:transform .25s ease;
  }

  .menu-button.is-open span:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-button.is-open span:last-child{transform:translateY(-3px) rotate(-45deg)}

  .mobile-menu{
    position:fixed;
    z-index:90;
    inset:0;
    padding:100px var(--pad) 30px;
    background:rgba(5,5,5,.96);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
    opacity:0;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .25s ease,transform .25s ease;
  }

  .mobile-menu.is-open{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }

  .mobile-menu a{
    font-size:22px;
    letter-spacing:.06em;
  }

  .panel{
    height:100svh;
    min-height:0;
  }

  .media{
    inset:-10% 0;
    height:120%;
    transform:translate3d(0,0,0) scale(1.075);
  }

  .caption-bottom{bottom:24px}
  .caption-left{left:var(--pad);bottom:24px}
  .caption-right{right:var(--pad);bottom:24px}

  .footer-panel{
    min-height:70svh;
    padding:90px var(--pad) 25px;
    display:flex;
    flex-direction:column;
  }

  .footer-panel small{
    margin-top:auto;
    align-self:flex-start;
  }
}


/* FOOTER FOTO — independiente del parallax principal */
.footer-panel.parallax-panel{
  position:relative;
  z-index:20;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:#050505;
}
.footer-media{
  position:absolute;
  inset:-18% 0;
  height:136%;
  z-index:0;
  will-change:transform;
}
.footer-media picture,.footer-media img{display:block;width:100%;height:100%}
.footer-media img{object-fit:cover;object-position:center}
.footer-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.16),transparent 32%,transparent 65%,rgba(0,0,0,.32));
}
.footer-content{
  position:relative;z-index:2;min-height:100svh;
  padding:110px var(--pad) 35px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:start;
}
.footer-content h2{margin:0 0 12px;font-size:26px;letter-spacing:.12em;font-weight:500}
.footer-content p{margin:0}
.footer-content .footer-links{display:flex;flex-direction:column;gap:12px}
.footer-content small{justify-self:end;align-self:end}
@media(max-width:700px){
  .footer-panel.parallax-panel{min-height:100svh}
  .footer-media{inset:-16% 0;height:132%}
  .footer-content{min-height:100svh;padding:90px var(--pad) 25px;display:flex;flex-direction:column}
  .footer-content small{margin-top:auto;align-self:flex-start}
}
/* ========================================
   WHATSAPP FLOAT
   ======================================== */

.whatsapp-float {
  position: fixed;
  z-index: 9999;

  left: 50%;
  bottom: 24px;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateX(-50%);

  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  text-decoration: none;

  transition: transform 0.3s ease;
}

.whatsapp-float img {
  width: 100px;
  height:100px;

  display: block;
  object-fit: contain;
}

.whatsapp-float:hover {
  transform: translateX(-50%) scale(1.1);
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 700px) {

  .whatsapp-float {
    bottom: 18px;

    width: 100px;
    height: 100px;
  }

  .whatsapp-float img {
    width: 100px;
    height: 100px;
  }

}

/* ========================================
   HERO SLIDER — 7 FOTOS / DISOLVENCIA
   ======================================== */

.hero-slider{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  touch-action:pan-y;
}

.hero-slide{
  position:absolute;
  inset:0;
  overflow:hidden;
  visibility:hidden;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,0,0);
  transition:
    opacity 1.2s ease-in-out,
    visibility 0s linear 2s;
}

.hero-slide.is-active{
  visibility:visible;
  pointer-events:auto;
  opacity:1;
  transition:
    opacity 1.2s ease-in-out,
    visibility 0s linear 0s;
}

.hero-slide.is-prev{
  visibility:visible;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,0,0);
  transition:
    opacity 1.2s ease-in-out,
    visibility 0s linear 1.2s;
}

.hero-slide .media{
  z-index:0;
}

.hero-dots{
  position: absolute;
  z-index: 5;
  left: 200px;
  bottom: 40px;

  display: flex;
  align-items: center;
  gap: 9px;
}

.hero-dot{
  width:6px;
  height:6px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  opacity:.7;
  transition:transform .25s ease, opacity .25s ease, background .25s ease;
}

.hero-dot.is-active{
  opacity:1;
  transform:scale(1.45);
  background:#fff;
}

.hero-dot:focus-visible{
  outline:1px solid #fff;
  outline-offset:5px;
}

@media (max-width:700px){
  .hero-slider{
    touch-action:pan-y;
  }

  .hero-slide{
    transition:
      opacity 1s ease-in-out,
      visibility 0s linear 1s;
  }

  .hero-slide.is-active{
    transition:
      opacity 1s ease-in-out,
      visibility 0s linear 0s;
  }

  .hero-slide.is-prev{
    transition:
      opacity 1s ease-in-out,
      visibility 0s linear 1s;
  }

  .hero-dots{
    display:none;
  }
}

/* ========================================
   SECTION 02 — MOBILE VIDEO CAROUSEL
   Desktop keeps the existing large photo.
   Mobile switches to the horizontal videos.
   ======================================== */
.video-carousel{
  display:none;
}

.video-arrow{
  display:none;
}

.section-title-overlay{
  position:absolute;
  z-index:3;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  color:#fff;
  font-size:clamp(24px,4vw,54px);
  line-height:1;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 1px 18px rgba(0,0,0,.22);
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
}

@media (max-width:700px){
  .video-section .video-desktop-media{
    display:none;
  }

  .video-carousel{
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    overflow:hidden;
    touch-action:pan-y;
  }

  .video-track{
    display:flex;
    width:100%;
    height:100%;
    transform:translate3d(0,0,0);
    will-change:transform;
  }

  .video-slide{
    position:relative;
    flex:0 0 100%;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#111;
  }

  .video-media{
    position:absolute;
    inset:-10% 0;
    width:100%;
    height:120%;
    display:block;
    object-fit:cover;
    object-position:center;
    transform:translate3d(0,0,0) scale(1.075);
    will-change:transform;
  }

  .video-dots{
    position:absolute;
    z-index:4;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:7px;
  }

  .video-dot{
    width:5px;
    height:5px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    opacity:.7;
  }

  .video-dot.is-active{
    opacity:1;
    transform:scale(1.45);
    background:#fff;
  }

  /* Same arrow style used by BOYS / GIRLS, only over the mobile videos. */
  .video-arrow{
    display:flex;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    color:#fff;
    font-size:26px;
    z-index:5;
    opacity:.72;
  }
  .video-arrow-prev{left:7px}
  .video-arrow-next{right:7px}
  .video-arrow:disabled{opacity:.22;cursor:default}

  .video-section .shade{
    z-index:2;
  }

  .section-title-overlay{
    font-size:28px;
    letter-spacing:.16em;
  }
}


/* ========================================
   PRODUCT CAROUSELS — BOYS / GIRLS
   Added without changing the existing panels,
   hero slider or mobile video section.
   ======================================== */
.product-section{
  position:relative;
  min-height:100svh;
  width:100%;
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px 0 40px;
}

.product-heading{
  position:absolute;
  top:28px;
  left:30px;
  z-index:5;
  font-family:'Bebas Neue',sans-serif;
  font-size:30px;
  line-height:1;
  letter-spacing:.12em;
  color:#111;
}

.product-carousel{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
}

.product-viewport{
  width:100%;
  overflow:hidden;
  cursor:grab;
}
.product-viewport.is-dragging{cursor:grabbing}

.product-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  padding:0 calc((100vw - min(31vw,500px))/2);
  transform:translate3d(0,0,0);
  will-change:transform;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

.product-card{
  position:relative;
  display:block;
  flex:0 0 min(31vw,500px);
  width:min(31vw,500px);
  aspect-ratio:3 / 4;
  overflow:hidden;
  text-decoration:none;
  background:#eee;
  transform:scale(.94);
  transition:transform .45s ease, opacity .45s ease;
  opacity:.72;
}
.product-card.is-active{
  transform:scale(1);
  opacity:1;
}

.product-media,
.product-media img{
  display:block;
  width:100%;
  height:100%;
}
.product-media img{
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}

.product-info{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:200px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  width:max-content;
  max-width:calc(100% - 28px);
  padding:7px 11px 6px;
  background:#000;
  color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:11px;
  line-height:1.25;
  letter-spacing:.02em;
  white-space:nowrap;
}
.product-ref,.product-price{display:block}

.product-arrow{
  flex:0 0 44px;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  color:#111;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  z-index:5;
}
.product-arrow:disabled{opacity:.22;cursor:default}

@media (max-width:700px){
  .product-section{
    min-height:100svh;
    height:100svh;
    padding:0;
    background:#000;
  }
  .product-heading{
    top:18px;
    left:18px;
    color:#fff;
    font-size:25px;
  }
  .product-carousel{height:100%}
  .product-viewport{height:100%;touch-action:pan-y;}
  .product-track{
    height:100%;
    gap:0;
    padding:0;
    transition:transform .42s cubic-bezier(.22,.61,.36,1);
  }
  .product-card{
    flex:0 0 100vw;
    width:100vw;
    height:100svh;
    aspect-ratio:auto;
    transform:none;
    opacity:1;
  }
  .product-media img{object-fit:cover}
  .product-info{
    bottom:24px;
    font-size:10px;
    padding:6px 9px 5px;
  }
  .product-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    color:#fff;
    font-size:26px;
  }
  .product-arrow-prev{left:7px}
  .product-arrow-next{right:7px}
}


/* ========================================
   BOYS / GIRLS — PHOTO + N PRODUCTS
   Desktop: 3 complete products at once
   Mobile: 1 complete product per screen
   ======================================== */

.category-panel{
  overflow:hidden;
  background:#fff;
}

.category-horizontal{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  touch-action:pan-y;
  background:#fff;
}

.category-track{
  display:flex;
  align-items:stretch;
  width:max-content;
  height:100%;
  transform:translate3d(0,0,0);
  will-change:transform;
  transition:transform .48s cubic-bezier(.22,.61,.36,1);
}

.category-cover{
  position:relative;
  flex:0 0 100vw;
  width:100vw;
  height:100%;
  overflow:hidden;
}

.category-cover .media{
  z-index:0;
}

/* The product area is exactly one viewport wide. */
.category-carousel{
  position:relative;
  flex:0 0 100vw;
  width:100vw;
  height:100%;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#fff;
}

.category-carousel .product-viewport{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#fff;
  cursor:grab;
}

.category-carousel .product-viewport.is-dragging{
  cursor:grabbing;
}

.category-carousel .product-track{
  display:flex;
  align-items:center;
  gap:0;
  width:max-content;
  height:100%;
  padding:0;
  margin:0;
  transition:transform .48s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.category-carousel .product-card{
  position:relative;
  display:block;
  flex:0 0 calc(100vw / 3);
  width:calc(100vw / 3);
  height:100%;
  aspect-ratio:auto;
  overflow:hidden;
  background:#fff;
  text-decoration:none;
  transform:none;
  opacity:1;
}

.category-carousel .product-media,
.category-carousel .product-media img{
  display:block;
  width:100%;
  height:100%;
}

.category-carousel .product-media img{
  object-fit:cover;
  background:#fff;
  user-select:none;
  -webkit-user-drag:none;
}

.category-carousel .product-info{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:200px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  width:max-content;
  min-width:120px;
  max-width:calc(100% - 28px);
  padding:7px 12px 6px;
  background:#000;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:11px;
  line-height:1.25;
  letter-spacing:.02em;
}

.category-carousel .product-ref,
.category-carousel .product-price{
  display:block;
}

/* Arrows belong to the category carousel, never to individual products. */
.category-horizontal > .product-arrow{
  position:absolute !important;
  top:50% !important;
  z-index:10000 !important;
  transform:translateY(-50%) !important;
  width:54px !important;
  height:54px !important;
  margin:0 !important;
  padding:0 0 3px !important;
  border:0 !important;
  border-radius:50% !important;
  
  color:#111 !important;
  font-family:Arial,sans-serif !important;
  font-size:32px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  box-shadow:0 2px 12px rgba(0,0,0,.20);
  -webkit-appearance:none;
  appearance:none;
}

.category-horizontal > .product-arrow-prev{
  left:20px !important;
}

.category-horizontal > .product-arrow-next{
  right:20px !important;
}

.category-horizontal > .product-arrow:disabled{
  opacity:.35 !important;
  cursor:default !important;
}

@media (max-width:700px){

  .category-track{
    transition:transform .42s cubic-bezier(.22,.61,.36,1);
  }

  .category-cover{
    flex:0 0 100vw;
    width:100vw;
  }

  .category-carousel{
    flex:0 0 100vw;
    width:100vw;
    height:100%;
  }

  .category-carousel .product-viewport{
    width:100%;
    height:100%;
    overflow:hidden;
    touch-action:pan-y;
  }

  .category-carousel .product-track{
    gap:0;
    height:100%;
    padding:0;
    transition:transform .42s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
  }

  .category-carousel .product-card{
    flex:0 0 100vw;
    width:100vw;
    height:100svh;
    aspect-ratio:auto;
  }

  .category-carousel .product-media,
  .category-carousel .product-media img{
    width:100%;
    height:100%;
  }

  .category-carousel .product-media img{
    object-fit:cover;
    background:#fff;
  }

  .category-carousel .product-info{
    bottom:200px;
    font-size:10px;
    padding:6px 9px 5px;
  }

  .category-horizontal > .product-arrow{
    width:46px !important;
    height:46px !important;
    font-size:28px !important;
   
    color:#fff!important;
  }

  .category-horizontal > .product-arrow-prev{
    left:10px !important;
  }

  .category-horizontal > .product-arrow-next{
    right:10px !important;
  }
}