/* =========================================================
   Alpine Nomad — página de inicio
   ========================================================= */

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; min-height:max(100svh,640px); color:var(--paper); background:var(--bg);
  display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
}
.hero__media{ position:absolute; inset:-6% 0; z-index:-3; will-change:transform; }
.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero__shade{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(90deg, rgba(14,16,19,.82) 0%, rgba(14,16,19,.5) 45%, rgba(14,16,19,.05) 80%),
    linear-gradient(0deg, rgba(14,16,19,.92) 0%, rgba(14,16,19,0) 42%),
    linear-gradient(180deg, rgba(14,16,19,.55) 0%, rgba(14,16,19,0) 22%);
}
.hero__inner{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px; position:static;
  padding-top:calc(var(--header-h) + 40px); padding-bottom:clamp(64px,11vh,110px);
}
.hero__copy{ flex:1; min-width:0; }
.hero__eyebrow{ margin-bottom:22px; }
.hero__eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 0 rgba(199,242,59,.6); animation:ping 2.2s infinite; }
.hero__eyebrow::before{ display:none; }
@keyframes ping{ 70%,100%{ box-shadow:0 0 0 12px rgba(199,242,59,0); } }
.hero__title{ font-size:clamp(50px,8.4vw,128px); }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .line > span{ display:block; transform:translateY(110%); animation:rise 1s var(--ease) forwards; }
.hero__title .line:nth-child(2) > span{ animation-delay:.14s; }
.hero__title em{ font-style:normal; color:var(--lime); }
@keyframes rise{ to{ transform:none; } }
.hero__lead{ max-width:52ch; margin:26px 0 34px; font-size:clamp(16px,1.5vw,19px); color:#d3d5d9; opacity:0; animation:fadeUp .9s var(--ease) .5s forwards; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; opacity:0; animation:fadeUp .9s var(--ease) .65s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

.hero__pick{
  position:absolute; right:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom:clamp(64px,11vh,110px); width:290px; display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:center; padding:12px;
  border-radius:var(--radius-l); background:rgba(20,22,26,.42); border:1px solid rgba(246,244,238,.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  opacity:0; animation:fadeUp .9s var(--ease) .9s forwards; transition:transform .3s var(--ease), border-color .3s;
}
.hero__pick:hover{ transform:translateY(-4px); border-color:var(--lime); }
.hero__pick > *{ transition:opacity .22s ease; }
.hero__pick.is-fading > *{ opacity:0; }
.hero__pick img{ width:76px; height:95px; object-fit:cover; border-radius:8px; }
.hero__pick small{ display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); }
.hero__pick strong{ display:block; font-size:15.5px; font-weight:600; line-height:1.25; margin:3px 0 4px; }
.hero__pick span{ font-family:var(--font-display); font-weight:700; font-size:22px; }

.hero__toggle{
  position:absolute; right:var(--gutter); top:calc(var(--header-h) + 14px); z-index:3; width:40px; height:40px; border-radius:50%;
  background:rgba(20,22,26,.45); border:1px solid rgba(246,244,238,.3); color:var(--paper);
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s;
}
.hero__toggle:hover{ background:var(--lime); color:var(--ink); }
.hero__toggle svg{ width:16px; height:16px; }
.hero__scroll{ position:absolute; left:50%; bottom:22px; z-index:2; width:26px; height:44px; border:1.5px solid rgba(246,244,238,.5); border-radius:99px; transform:translateX(-50%); }
.hero__scroll span{ position:absolute; left:50%; top:8px; width:3px; height:8px; margin-left:-1.5px; border-radius:3px; background:var(--lime); animation:scrollCue 1.8s var(--ease) infinite; }
@keyframes scrollCue{ 0%{ opacity:0; transform:translateY(0); } 30%{ opacity:1; } 100%{ opacity:0; transform:translateY(16px); } }
@media (max-width:1100px){ .hero__pick{ display:none; } }
@media (max-width:760px){
  .hero__scroll{ display:none; }
  .hero__inner{ padding-bottom:100px; }
  .hero__shade{ background:linear-gradient(0deg, rgba(14,16,19,.94) 0%, rgba(14,16,19,.55) 55%, rgba(14,16,19,.25) 100%), linear-gradient(180deg, rgba(14,16,19,.55) 0%, rgba(14,16,19,0) 24%); }
  .hero__cta .btn{ flex:1 1 100%; }
}

/* ---------- Confianza ---------- */
.trust{ background:var(--bg); color:var(--paper); border-top:1px solid var(--line-light); }
.trust__grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.trust__item{ display:flex; align-items:center; gap:16px; padding:26px 20px; border-left:1px solid var(--line-light); }
.trust__item:first-child{ border-left:0; padding-left:0; }
.trust__item svg{ width:32px; height:32px; color:var(--lime); flex:none; }
.trust__item strong{ display:block; font-size:15px; font-weight:700; }
.trust__item span{ display:block; font-size:13px; color:#9A9CA1; }
@media (max-width:860px){
  .trust__grid{ grid-template-columns:1fr; }
  .trust__item{ border-left:0; border-top:1px solid var(--line-light); padding:18px 0; }
  .trust__item:first-child{ border-top:0; }
}

/* ---------- Marquee ---------- */
.marquee{ background:var(--lime); color:var(--ink); overflow:hidden; white-space:nowrap; border-block:1px solid var(--ink); }
.marquee__track{ display:inline-flex; align-items:center; gap:34px; padding:14px 0; animation:marquee 34s linear infinite; }
.marquee span{ font-family:var(--font-display); font-weight:900; font-size:clamp(22px,2.6vw,34px); text-transform:uppercase; letter-spacing:.03em; line-height:1; }
.marquee i{ width:14px; height:14px; background:var(--ink); transform:rotate(45deg); flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee__track{ padding-inline:17px; }

/* ---------- Dos mundos ---------- */
.worlds{ display:grid; grid-template-columns:1fr 1fr; background:var(--ink); }
.world{ position:relative; min-height:min(88vh,780px); display:flex; align-items:flex-end; overflow:hidden; color:var(--paper); isolation:isolate; }
.world img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease); }
.world::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(14,16,19,.92) 0%, rgba(14,16,19,.45) 45%, rgba(14,16,19,.1) 100%); transition:opacity .5s; }
.world:hover img{ transform:scale(1.06); }
.world__body{ padding:clamp(28px,4vw,64px); max-width:600px; }
.world__body h2{ font-size:clamp(48px,6vw,92px); margin:14px 0 18px; }
.world__body p:not(.eyebrow){ color:#d3d5d9; max-width:44ch; margin-bottom:24px; }
.world .link-arrow{ color:var(--paper); }
.world--urbano .link-arrow{ color:var(--lime); }
.world--montana .eyebrow{ color:#ff8a54; }
.world--montana .link-arrow{ color:#ff8a54; }
@media (max-width:860px){
  .worlds{ grid-template-columns:1fr; }
  .world{ min-height:74vh; }
}

/* ---------- Secciones ---------- */
.section{ padding:clamp(70px,9vw,120px) 0; }
.section--stone{ background:var(--stone); }
.section--ink{ background:var(--bg); color:var(--paper); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,52px); }
.section-title{ font-size:clamp(40px,5.6vw,78px); margin-top:12px; }
.section-sub{ max-width:38ch; color:#9A9CA1; }
.section-foot{ display:flex; justify-content:center; margin-top:52px; }
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Categorías (bento) ---------- */
.cats{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(230px,26vw); gap:16px; }
.cat{
  position:relative; display:flex; align-items:flex-end; overflow:hidden; border-radius:var(--radius-l);
  background:var(--bg-lift); color:var(--paper); isolation:isolate;
}
.cat:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.cat:nth-child(4), .cat:nth-child(5), .cat:nth-child(6){ grid-column:span 2; }
.cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .9s var(--ease); }
.cat::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(14,16,19,.85) 0%, rgba(14,16,19,.05) 65%); }
.cat:hover img{ transform:scale(1.07); }
.cat__body{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; width:100%; padding:clamp(16px,2vw,26px); }
.cat__name{ font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:clamp(26px,3vw,44px); line-height:.95; }
.cat:nth-child(1) .cat__name{ font-size:clamp(38px,4.6vw,66px); }
.cat__n{ display:block; font-size:12.5px; font-weight:600; color:#c9cbd0; margin-top:6px; letter-spacing:.03em; }
.cat__go{ flex:none; width:44px; height:44px; border-radius:50%; background:var(--lime); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease); }
.cat__go svg{ width:20px; height:20px; }
.cat:hover .cat__go{ transform:rotate(-45deg) scale(1.08); }
@media (max-width:980px){
  .cats{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(200px,44vw); }
  .cat:nth-child(1){ grid-column:span 2; grid-row:span 1; }
  .cat:nth-child(4){ grid-column:span 2; }
  .cat:nth-child(5), .cat:nth-child(6){ grid-column:span 1; }
}
@media (max-width:520px){
  .cats{ gap:10px; grid-auto-rows:minmax(170px,52vw); }
}

/* ---------- Banda de video ---------- */
.band{ position:relative; min-height:min(84vh,760px); display:flex; align-items:center; color:var(--paper); overflow:hidden; isolation:isolate; background:var(--bg); }
.band__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.band__shade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,16,19,.86) 0%, rgba(14,16,19,.45) 60%, rgba(14,16,19,.2) 100%); }
.band__inner{ padding-block:clamp(70px,10vw,130px); }
.band__title{ font-size:clamp(46px,7vw,108px); margin:16px 0 22px; }
.band__lead{ max-width:46ch; color:#d3d5d9; font-size:clamp(16px,1.4vw,18.5px); margin-bottom:32px; }

/* ---------- Lookbook ---------- */
.look{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(190px,22vw,300px); gap:14px; }
.look__item{ position:relative; margin:0; overflow:hidden; border-radius:var(--radius-l); background:var(--bg-lift); }
.look__item--tall{ grid-row:span 2; }
.look__item img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.look__item:hover img{ transform:scale(1.06); }
.look__item figcaption{
  position:absolute; left:14px; bottom:14px; padding:6px 12px; border-radius:99px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(20,22,26,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--paper);
}
@media (max-width:900px){ .look{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(170px,38vw,300px); gap:10px; } }

/* ---------- Pasos ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px); counter-reset:s; }
.step{ position:relative; padding-top:22px; border-top:2px solid var(--ink); }
.step__n{ font-size:clamp(64px,7vw,104px); color:var(--rust); display:block; margin-bottom:10px; }
.step h3{ font-family:var(--font-body); font-size:20px; font-weight:700; margin-bottom:10px; }
.step p{ color:var(--muted-dark); max-width:36ch; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } .step{ display:grid; grid-template-columns:auto 1fr; column-gap:22px; } .step__n{ grid-row:span 2; margin:0; } }

/* ---------- CTA final ---------- */
.cta{ background:var(--rust); color:var(--ink); }
.cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-block:clamp(56px,7vw,92px); }
.cta h2{ font-size:clamp(42px,6vw,88px); line-height:1.02; }
.cta p{ margin-top:16px; max-width:40ch; font-weight:500; }
.cta__btn{ min-height:60px; font-size:16px; padding:0 34px; --b-bg:var(--ink); --b-fg:var(--paper); --b-bd:var(--ink); }
.cta__btn:hover{ --b-bg:#000; --b-bd:#000; box-shadow:0 14px 34px -10px rgba(0,0,0,.6); }
.cta__btn svg{ color:var(--wa); width:22px; height:22px; }