/* ============================================================
   OVERL1NE — sistema visual (tema claro / crema)
   Paleta: crema + acento azul del logo
   ============================================================ */

:root{
  /* --- base --- */
  --bg:        #f3f0e8;   /* crema */
  --bg-2:      #ece8dd;
  --surface:   #faf8f2;
  --surface-2: #efece2;
  --line:      rgba(22,21,15,.14);
  --line-2:    rgba(22,21,15,.055);

  /* --- texto --- */
  --txt:       #16150f;
  --txt-dim:   #5c5a50;
  --txt-faint: #a29e90;

  /* --- ACENTO (del logo OVERL1NE) --- */
  --accent:      #2a3fe0;   /* azul del logo */
  --accent-deep: #1a2470;   /* navy del star/lightning */
  --accent-soft: rgba(42,63,224,.12);

  /* --- fuentes --- */
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body:    "Instrument Sans", system-ui, sans-serif;
  --f-mono:    "DM Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.16,.84,.44,1);
  --pad:  clamp(16px, 5vw, 88px);
}

/* ============================================================
   RESET
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em}

/* ============================================================
   FONDO 3D ANIMADO (escena en perspectiva + parallax por scroll)
   Variables JS: --sy (scroll px), --p (progreso 0..1)
   ============================================================ */
.bg-fx{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  perspective:640px;perspective-origin:50% 42%;
}
.scene{
  position:absolute;inset:0;transform-style:preserve-3d;
  /* leve inclinación que aumenta al scrollear */
  transform:translateY(calc(var(--sy,0px) * -0.04)) rotateX(calc(var(--p,0) * 5deg));
  will-change:transform;
}

/* grilla 3D en perspectiva (piso y techo) */
.grid3d{
  position:absolute;left:-50%;width:200%;height:150%;
  --g:rgba(42,63,224,.16);
  background-image:
    linear-gradient(var(--g) 1px, transparent 1px),
    linear-gradient(90deg, var(--g) 1px, transparent 1px);
  background-size:64px 64px;
  /* se traslada con el scroll -> sensación de avanzar */
  background-position:0 calc(var(--sy,0px) * 0.6);
  opacity:.55;
}
.grid3d--floor{
  bottom:-25%;
  transform:rotateX(76deg);
  transform-origin:50% 100%;
  mask-image:linear-gradient(to top, #000 4%, transparent 58%);
  -webkit-mask-image:linear-gradient(to top, #000 4%, transparent 58%);
}
.grid3d--roof{
  top:-25%;
  transform:rotateX(-76deg);
  transform-origin:50% 0%;
  opacity:.32;
  mask-image:linear-gradient(to bottom, #000 4%, transparent 55%);
  -webkit-mask-image:linear-gradient(to bottom, #000 4%, transparent 55%);
}

/* blobs con profundidad (translateZ) para el efecto 3D */
.blob{
  position:absolute;border-radius:50%;
  filter:blur(70px);opacity:.5;will-change:transform;
}
.blob--1{
  width:46vw;height:46vw;left:-8vw;top:-6vw;transform:translateZ(-120px);
  background:radial-gradient(circle, rgba(42,63,224,.34), transparent 70%);
  animation:drift1 22s ease-in-out infinite;
}
.blob--2{
  width:38vw;height:38vw;right:-6vw;top:20vh;transform:translateZ(-40px);
  background:radial-gradient(circle, rgba(26,36,112,.30), transparent 70%);
  animation:drift2 27s ease-in-out infinite;
}
.blob--3{
  width:42vw;height:42vw;left:20vw;bottom:-12vw;transform:translateZ(-200px);
  background:radial-gradient(circle, rgba(42,63,224,.22), transparent 70%);
  animation:drift3 31s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{transform:translate3d(0,0,-120px) scale(1)}
  50%{transform:translate3d(14vw,10vh,-120px) scale(1.18)}
}
@keyframes drift2{
  0%,100%{transform:translate3d(0,0,-40px) scale(1)}
  50%{transform:translate3d(-12vw,-8vh,-40px) scale(1.12)}
}
@keyframes drift3{
  0%,100%{transform:translate3d(0,0,-200px) scale(1)}
  50%{transform:translate3d(-10vw,-14vh,-200px) scale(1.22)}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:14px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
}
.nav.is-scrolled{
  background:rgba(243,240,232,.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-top:10px;padding-bottom:10px;
}
.nav__brand{display:flex;align-items:center}
.nav__logo{
  height:26px;width:auto;
  /* funde el fondo blanco del logo con el crema */
  mix-blend-mode:multiply;
}
.nav__links{display:none;gap:28px}
.nav__links a{
  font-family:var(--f-body);font-size:.9rem;font-weight:500;letter-spacing:.01em;
  color:var(--txt-dim);position:relative;transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;
  background:var(--accent);transition:width .35s var(--ease);
}
.nav__links a:hover{color:var(--txt)}
.nav__links a:hover::after{width:100%}

.nav__drop{position:relative}
.nav__cta{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--f-body);font-size:.86rem;font-weight:500;letter-spacing:.01em;
  color:var(--txt);background:transparent;
  padding:9px 16px;border:1px solid var(--line);border-radius:100px;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.nav__cta:hover,.nav__cta[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.nav__cta-arrow{transition:transform .3s var(--ease)}
.nav__cta[aria-expanded="true"] .nav__cta-arrow{transform:rotate(180deg)}

/* panel desplegable del nav */
.nav__panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:120;
  width:min(78vw, 280px);
  display:flex;flex-direction:column;
  background:rgba(250,248,242,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:14px;
  padding:8px;
  box-shadow:0 24px 60px -24px rgba(22,21,15,.4);
  transform-origin:top right;
  animation:panelIn .28s var(--ease);
}
.nav__panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.nav__panel-label{color:var(--txt-faint);padding:8px 12px 6px}
.nav__panel a{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 12px;border-radius:9px;
  font-family:var(--f-display);font-weight:600;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:-.01em;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav__panel a .mono{font-family:var(--f-mono);font-weight:400;font-size:.72rem;text-transform:none;color:var(--txt-faint)}
.nav__panel a:hover{background:var(--accent);color:#fff}
.nav__panel a:hover .mono{color:rgba(255,255,255,.7)}
.nav__panel-sep{height:1px;background:var(--line);margin:6px 8px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;z-index:1;padding:104px var(--pad) 0}
.hud{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.hud__item{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--txt-dim);
}
.hero__grid{
  display:flex;justify-content:center;
  padding:44px 0 40px;
}
.hero__lead{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:860px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.02em;
  color:var(--txt-dim);margin-bottom:22px;
}
.tick{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(42,63,224,.5)}
  70%{box-shadow:0 0 0 10px rgba(42,63,224,0)}
  100%{box-shadow:0 0 0 0 rgba(42,63,224,0)}
}
.hero__logo{
  width:min(100%, 620px);height:auto;display:block;
  margin:6px auto;
  mix-blend-mode:multiply;
}
.hero__sub{
  max-width:48ch;margin:20px auto 30px;
  color:var(--txt-dim);font-size:1.05rem;line-height:1.6;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero__tag{
  position:absolute;top:14px;right:14px;
  display:flex;gap:10px;background:rgba(250,248,242,.7);
  padding:5px 10px;border:1px solid var(--line);border-radius:100px;
  backdrop-filter:blur(6px);
}
.hero__tag .mono{color:var(--txt-dim)}
.hero__tag .mono:last-child{color:var(--accent)}

/* Marquee */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:8px;padding:14px 0;
}
.marquee__track{
  display:inline-flex;gap:26px;white-space:nowrap;
  animation:scroll 26s linear infinite;
  font-family:var(--f-display);font-weight:600;font-size:1.05rem;
  letter-spacing:.02em;text-transform:uppercase;
}
.marquee__track span:nth-child(even){color:var(--accent)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============================================================
   DESTACADOS
   ============================================================ */
.featured{position:relative;z-index:1}
.feat-grid{
  display:grid;grid-template-columns:1fr;gap:12px;
  padding:0 var(--pad) var(--pad);
}
.feat{
  position:relative;border:1px solid var(--line);background:var(--surface);
  overflow:hidden;transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.feat:hover{border-color:var(--accent);box-shadow:0 20px 50px -28px rgba(42,63,224,.45)}
.feat__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface-2)}
.feat__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.feat:hover .feat__media img{transform:scale(1.04)}
.feat__badge{
  position:absolute;top:12px;left:12px;
  background:var(--accent);color:#fff;padding:5px 10px;border-radius:5px;
}
.feat__body{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:18px;border-top:1px solid var(--line);
}
.feat__cat{color:var(--accent);display:block;margin-bottom:6px}
.feat__name{
  font-family:var(--f-display);font-weight:700;font-size:1.7rem;
  text-transform:uppercase;letter-spacing:-.025em;line-height:1;
}
.feat__buy{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.feat__price{font-size:1.05rem;font-weight:500}
@media (min-width:720px){
  .feat-grid{grid-template-columns:1fr 1fr;gap:16px}
}

/* ============================================================
   COLECCIONES
   ============================================================ */
.collections{position:relative;z-index:1}
.col-grid{
  display:grid;grid-template-columns:1fr;gap:12px;
  padding:0 var(--pad) var(--pad);
}
.col{
  position:relative;border:1px solid var(--line);background:var(--surface);
  overflow:hidden;transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.col:hover{border-color:var(--accent);transform:translateY(-4px)}
.col__media{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.col__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);filter:grayscale(.2)
}
.col:hover .col__media img{transform:scale(1.05);filter:grayscale(0)}
.col__row{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-top:1px solid var(--line);
}
.col__count{color:var(--txt-faint)}
.col__name{
  font-family:var(--f-display);font-weight:700;font-size:1.5rem;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
}
.col__arrow{
  margin-left:auto;font-size:1.3rem;color:var(--accent);
  transition:transform .3s var(--ease);
}
.col:hover .col__arrow{transform:translateX(5px)}
@media (min-width:720px){
  .col-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}

/* ============================================================
   IMAGEN DE PRODUCTO (en card)
   ============================================================ */
.card__img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  background:var(--surface-2);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-size:.95rem;font-weight:500;letter-spacing:.005em;
  padding:14px 24px;border-radius:100px;
  border:1px solid var(--line);
  transition:transform .3s var(--ease), background .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease);
  will-change:transform;
}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--primary:hover{background:#3a50f5;border-color:#3a50f5;transform:translateY(-2px)}
.btn--ghost{color:var(--txt);background:transparent}
.btn--ghost:hover{border-color:var(--txt);transform:translateY(-2px)}
.btn--lg{padding:18px 32px;font-size:1.02rem}
.btn__arrow{transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ============================================================
   ENCABEZADOS DE SECCIÓN
   ============================================================ */
.section-head{
  display:flex;flex-direction:column;gap:18px;
  padding:var(--pad) var(--pad) 26px;
  border-top:1px solid var(--line);
}
.section-head__left{display:flex;align-items:baseline;gap:16px}
.index-num{
  font-family:var(--f-mono);font-size:.82rem;color:var(--accent);
  letter-spacing:.02em;
}
.section-title{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.4rem, 10vw, 5.6rem);line-height:.92;
  letter-spacing:-.035em;text-transform:uppercase;
}
.section-head__desc{color:var(--txt-dim);max-width:52ch}

/* ============================================================
   GRILLA / CATÁLOGO  (grilla rota intencional)
   ============================================================ */
.catalog{position:relative;z-index:1}
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:0 var(--pad) var(--pad);
}
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{border-color:var(--accent);box-shadow:0 18px 40px -24px rgba(42,63,224,.4)}
.card__media{position:relative;overflow:hidden;display:flex}
.card__media .card__img{
  transition:transform .6s var(--ease), filter .6s var(--ease);
  filter:grayscale(.08) contrast(1.02);
}
.card:hover .card__media .card__img{transform:scale(1.04);filter:grayscale(0) contrast(1.05)}
.card__idx{
  position:absolute;top:10px;left:10px;z-index:2;
  color:var(--txt-dim);background:rgba(250,248,242,.75);
  padding:3px 7px;border-radius:5px;backdrop-filter:blur(4px);
}
.card__flag{
  position:absolute;top:10px;right:10px;z-index:2;
  color:var(--accent);background:rgba(250,248,242,.75);
  padding:3px 7px;border-radius:5px;backdrop-filter:blur(4px);
  border:1px solid var(--accent-soft);
}
.card__body{
  padding:16px;display:flex;flex-direction:column;gap:16px;
  border-top:1px solid var(--line);
}
.card__row{display:flex;flex-direction:column;gap:5px}
.card__name{
  font-family:var(--f-display);font-weight:700;font-size:1.4rem;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
}
.card__sku{color:var(--txt-faint)}
.card__buy{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card__price{font-size:1.05rem;color:var(--txt);font-weight:500}

/* botón comprar */
.buy{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;
  font-family:var(--f-body);font-size:.9rem;font-weight:500;letter-spacing:.005em;
  padding:11px 20px;border-radius:100px;
  background:var(--accent);color:#fff;
  transition:background .3s var(--ease), transform .25s var(--ease);
}
.buy:hover{background:#3a50f5;transform:translateY(-2px)}
.buy span{transition:transform .35s var(--ease)}
.buy__wa{
  position:absolute;left:0;right:0;text-align:center;
  transform:translateY(140%);
}
.buy:hover span:first-child{transform:translateY(-140%)}
.buy:hover .buy__wa{transform:translateY(0)}

/* modificadores de tamaño (desktop) */
@media (min-width:720px){
  .grid{grid-template-columns:repeat(6,1fr);gap:16px;grid-auto-flow:dense}
  .card{grid-column:span 2}
  .card--wide{grid-column:span 4}
  .card--tall{grid-column:span 2;grid-row:span 2}
  .card--tall .card__media{flex:1}
  .card--tall .card__media .card__img{height:100%;aspect-ratio:auto}
  /* desfase asimétrico */
  .card:nth-child(2){transform:translateY(28px)}
  .card:nth-child(6){transform:translateY(28px)}
  .card:hover{transform:translateY(-4px)}
  .card:nth-child(2):hover,.card:nth-child(6):hover{transform:translateY(24px)}
}
@media (min-width:1100px){
  .nav__links{display:flex}
  .hero__grid{padding:64px 0 52px}
  .section-head{
    flex-direction:row;align-items:flex-end;justify-content:space-between;
  }
  .section-head__desc{text-align:right}
}

/* ============================================================
   PANELES DESPLEGABLES (acordeón por categoría)
   ============================================================ */
.panels{position:relative;z-index:1}
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc__head{
  display:flex;align-items:center;gap:16px;
  padding:clamp(18px,4vw,30px) var(--pad);
  cursor:pointer;list-style:none;user-select:none;
  transition:background .3s var(--ease);
}
.acc__head::-webkit-details-marker{display:none}
.acc__head:hover{background:rgba(42,63,224,.04)}
.acc__title{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2rem,9vw,4.6rem);line-height:.9;
  letter-spacing:-.035em;text-transform:uppercase;
}
.acc__meta{color:var(--txt-faint);margin-left:auto}
.acc__icon{
  position:relative;width:22px;height:22px;flex-shrink:0;
}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;top:50%;left:50%;
  width:16px;height:2px;background:var(--accent);
  transform:translate(-50%,-50%);transition:transform .35s var(--ease);
}
.acc__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc[open] .acc__icon::after{transform:translate(-50%,-50%) rotate(0)}
.acc[open] .acc__head{background:rgba(42,63,224,.05)}
.acc__body{
  padding:0 var(--pad) clamp(24px,5vw,48px);
  animation:accBody .5s var(--ease);
}
@keyframes accBody{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.acc .grid{padding:0}

/* ============================================================
   MARCA
   ============================================================ */
.brand{
  position:relative;z-index:1;
  padding:var(--pad);border-top:1px solid var(--line);
}
.brand__grid{display:grid;grid-template-columns:1fr;gap:24px}
.brand__copy p{color:var(--txt-dim);max-width:52ch;margin-bottom:18px;font-size:1.05rem}
.brand__copy .section-title{margin-bottom:24px}
.brand__copy .section-title .accent{color:var(--accent)}
.brand__note{color:var(--txt-faint);margin-bottom:28px}
.brand__stats{
  display:flex;flex-wrap:wrap;gap:14px;
  padding-top:26px;border-top:1px solid var(--line);
}
.stat{
  flex:1;min-width:90px;
  border-left:2px solid var(--accent);padding-left:14px;
}
.stat__num{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.4rem,8vw,3.4rem);line-height:1;letter-spacing:-.03em;
}
.stat__label{color:var(--txt-dim);display:block;margin-top:6px}
@media (min-width:900px){
  .brand__grid{grid-template-columns:.2fr 1fr;gap:40px;align-items:start}
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{
  position:relative;z-index:1;
  padding:clamp(60px,14vw,140px) var(--pad);
  border-top:1px solid var(--line);
  text-align:center;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(42,63,224,.16) 0%, transparent 60%);
}
.contact__inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.contact__title{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.6rem,12vw,6.5rem);line-height:.92;
  text-transform:uppercase;letter-spacing:-.035em;
}
.contact__sub{color:var(--txt-dim);max-width:40ch;font-size:1.05rem}
.contact__socials{
  display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-top:16px;
}
.contact__socials a{color:var(--txt-dim);transition:color .3s var(--ease)}
.contact__socials a:hover{color:var(--accent)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;z-index:1;
  padding:26px var(--pad);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
}
.footer__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.footer__brand{font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.footer__meta{color:var(--txt-faint)}
.footer__meta span{color:var(--txt-faint)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}