/* ===== Método Progresivo — Design tokens ===== */
:root{
  --hero:      #0A0A0A;
  --filosofia: #141414;
  --coleccion: #1E1E1E;
  --comunidad: #F0F0F0;
  --contacto:  #FFFFFF;

  --ink-light: #FFFFFF;
  --ink-light-dim: #B3B3B3;
  --ink-dark:  #0A0A0A;
  --ink-dark-dim: #555555;

  --red: #E4232C;
  --red-deep: #A5121A;

  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "Work Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --max: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-light);
  background:var(--hero);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important}
}
a{color:inherit}
img,svg{display:block;max-width:100%}
ul{list-style:none;margin:0;padding:0}

/* ===== Logo intro — big mark on load, settles into the header ===== */
.logo-intro{
  position:fixed;inset:0;z-index:500;
  background:var(--hero);
  display:flex;align-items:center;justify-content:center;
  transition:opacity 500ms ease;
}
.logo-intro.is-done{opacity:0;pointer-events:none}
.logo-intro-img{
  width:min(46vw,260px);height:auto;
  transform-origin:center center;
  animation:logo-pulse-in 1.4s ease-in-out 1;
}
.logo-intro-img.is-flying{
  animation:none;
  transition:transform 700ms cubic-bezier(.65,0,.35,1);
}
@keyframes logo-pulse-in{
  0%{opacity:0;transform:scale(0.85)}
  30%{opacity:1;transform:scale(1)}
  65%{transform:scale(1.07)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .logo-intro{display:none}
}

/* ===== Progress rail — reads as the brand's own thesis, not decoration ===== */
.progress-rail{
  position:fixed;top:0;left:0;right:0;height:3px;
  background:rgba(255,255,255,0.08);
  z-index:200;
}
.progress-fill{
  height:100%;width:0%;
  background:var(--red);
  transition:width 80ms linear;
}

/* ===== Header ===== */
header{
  position:fixed;top:3px;left:0;right:0;z-index:150;
  padding:18px 0;
  transition:background 300ms ease, padding 300ms ease, backdrop-filter 300ms ease;
}
header.is-scrolled{
  background:rgba(10,10,10,0.86);
  backdrop-filter:blur(10px);
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.header-inner{
  max-width:var(--max);margin:0 auto;padding:0 6%;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--ink-light);
  font-family:var(--font-display);
}
.logo-mark{
  width:30px;height:auto;
  opacity:0;
  transition:opacity 400ms ease;
  animation:logo-breathe 3.2s ease-in-out infinite;
}
.logo-mark.is-in{opacity:1}
.logo-text{display:flex;flex-direction:column;line-height:0.85}
@keyframes logo-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .logo-mark{animation:none}
}
.logo-line{font-size:19px;font-weight:700;letter-spacing:2px}
.logo-accent{color:var(--red)}
.main-nav{display:flex;gap:34px}
.main-nav a{
  text-decoration:none;color:var(--ink-light-dim);
  font-size:14px;letter-spacing:0.5px;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color 200ms ease, border-color 200ms ease;
}
.main-nav a:hover{color:var(--ink-light);border-color:var(--red)}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:34px;height:26px;flex-direction:column;justify-content:space-between;padding:0;
}
.nav-toggle span{height:2px;background:var(--ink-light);border-radius:2px}

/* ===== Stage sections — the value scale IS the progression narrative ===== */
.stage{
  position:relative;
  padding:120px 0 100px;
  transition:background 400ms ease;
}
.stage-inner{max-width:var(--max);margin:0 auto;padding:0 6%}

.stage-hero{background:var(--hero);color:var(--ink-light);min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding-top:80px;overflow:hidden;position:relative}

.hero-watermark{
  position:absolute;top:50%;left:50%;
  width:min(80vw,900px);
  transform:translate(-50%,-50%);
  z-index:1;
  opacity:0.14;
  animation:watermark-breathe 6s ease-in-out infinite;
}
.hero-watermark img{width:100%;height:auto}
@keyframes watermark-breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:0.14}
  50%{transform:translate(-50%,-50%) scale(1.08) rotate(1.5deg);opacity:0.22}
}
@media (prefers-reduced-motion:reduce){
  .hero-watermark{animation:none}
}
.stage-filosofia{background:var(--filosofia);color:var(--ink-light)}
.stage-coleccion{background:var(--coleccion);color:var(--ink-light)}
.stage-comunidad{background:var(--comunidad);color:var(--ink-dark)}
.stage-contacto{background:var(--contacto);color:var(--ink-dark)}

.kicker{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--red);margin:0 0 18px;
}

.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.02;
  letter-spacing:0.5px;
  margin:0 0 26px;
}
.section-title-dark{color:var(--ink-dark)}
.section-sub{font-size:17px;line-height:1.6;color:var(--ink-light-dim);max-width:560px;margin:0 0 40px}
.section-sub-dark{color:var(--ink-dark-dim)}

/* ===== Gender switch ===== */
.switch-label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink-light-dim);margin:0 0 14px;
}
.section-title-tag{color:var(--red);font-size:0.5em;vertical-align:middle;letter-spacing:1px}
.gender-switch{
  display:inline-flex;gap:4px;padding:6px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;margin-bottom:40px;
}
.gender-btn{
  font-family:var(--font-mono);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  padding:12px 30px;border-radius:999px;border:none;background:transparent;
  color:var(--ink-light-dim);cursor:pointer;font-weight:500;
  transition:background 250ms ease, color 250ms ease, transform 200ms ease;
}
.gender-btn:hover{color:var(--ink-light);transform:translateY(-1px)}
.gender-btn.is-active{background:var(--red);color:#FFFFFF}
.product-grid.is-hidden{display:none}
.product-grid{animation:grid-in 450ms ease both}
@keyframes grid-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== Hero ===== */
.hero-inner{max-width:800px;position:relative;z-index:2}
.hero-inner .kicker{animation:hero-in 700ms cubic-bezier(.16,1,.3,1) both}
.hero-inner .hero-title{animation:hero-in 800ms cubic-bezier(.16,1,.3,1) 120ms both}
.hero-inner .hero-sub{animation:hero-in 800ms cubic-bezier(.16,1,.3,1) 240ms both}
.hero-inner .hero-actions{animation:hero-in 800ms cubic-bezier(.16,1,.3,1) 360ms both}
.hero-inner .hero-specs{animation:hero-in 800ms cubic-bezier(.16,1,.3,1) 480ms both}
.catalog-wheel{animation:fade-in 900ms ease 600ms both}
@keyframes hero-in{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fade-in{
  from{opacity:0}
  to{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .hero-inner .kicker,.hero-inner .hero-title,.hero-inner .hero-sub,.hero-inner .hero-actions,.hero-inner .hero-specs,.catalog-wheel{
    animation:none;
  }
}
.hero-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(44px,7.4vw,88px);
  line-height:0.98;
  letter-spacing:0.5px;
  margin:0 0 26px;
}
.hero-title-accent{color:var(--red)}
.hero-sub{
  font-size:18px;line-height:1.65;color:var(--ink-light-dim);
  max-width:560px;margin:0 0 40px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px}
.hero-specs{
  display:flex;gap:28px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12px;letter-spacing:1px;
  color:var(--ink-light-dim);text-transform:uppercase;
}
.hero-specs li{padding-left:16px;position:relative}
.hero-specs li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:1px;background:var(--red)}

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  padding:15px 34px;border-radius:999px;
  text-decoration:none;
  transition:transform 220ms cubic-bezier(.34,1.56,.64,1), background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 220ms ease;
}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn:active{transform:translateY(-1px) scale(0.98)}
.btn-solid{background:var(--red);color:#FFFFFF;border:1px solid var(--red)}
.btn-solid:hover{background:#C41820;box-shadow:0 10px 24px -8px rgba(228,35,44,0.55)}
.btn-ghost{background:transparent;color:var(--ink-light);border:1px solid rgba(255,255,255,0.3)}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn-dark{background:var(--ink-dark);color:var(--contacto);border-color:var(--ink-dark)}
.btn-dark:hover{background:#1F1F1F;box-shadow:0 10px 24px -8px rgba(10,10,10,0.4)}

/* ===== Hero catalog wheel — continuous rotating strip, ready for product photos ===== */
.catalog-wheel{
  margin-top:64px;
  width:100vw;
  position:relative;
  left:50%;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.catalog-track{
  display:flex;gap:20px;width:max-content;
  animation:catalog-spin 26s linear infinite;
}
.catalog-wheel:hover .catalog-track{animation-play-state:paused}
.catalog-slot{
  width:150px;height:150px;flex:0 0 auto;
  border-radius:20px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(228,35,44,0.35);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  transition:border-color 250ms ease, transform 250ms ease, background 250ms ease;
}
.catalog-slot:hover{border-color:var(--red);background:rgba(228,35,44,0.1);transform:scale(1.05) rotate(-2deg)}
.catalog-slot-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;
  text-transform:uppercase;color:var(--ink-light-dim);line-height:1.5;
}
@keyframes catalog-spin{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .catalog-track{animation:none}
}

/* ===== Filosofía ===== */
.filosofia-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}
.filosofia-lead{font-size:19px;line-height:1.7;color:var(--ink-light-dim)}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.pillar-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--red);
  background:none;border:none;border-bottom:1px solid rgba(228,35,44,0.4);
  padding:0 0 10px;cursor:pointer;width:100%;text-align:left;
  transition:border-color 200ms ease;
}
.pillar-tag::after{
  content:"+";font-size:15px;margin-left:auto;
  transition:transform 250ms ease;
}
.pillar-tag[aria-expanded="true"]::after{transform:rotate(45deg)}
.pillar-tag:hover{border-color:var(--red)}
.pillar p{font-size:15px;line-height:1.55;color:var(--ink-light-dim);margin:10px 0 0}

/* ===== Accordion (Filosofía / Comunidad) ===== */
.accordion-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 350ms ease;
}
.accordion-panel.is-open{grid-template-rows:1fr}
.accordion-inner{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .accordion-panel{transition:none}
}

/* ===== Colección ===== */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:20px}
.product-card{
  background:rgba(0,0,0,0.16);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;padding:30px 26px 26px;
  transition:border-color 250ms ease, transform 300ms cubic-bezier(.34,1.56,.64,1);
}
.product-card:hover{border-color:rgba(228,35,44,0.5);transform:translateY(-8px) rotate(-1deg)}
.product-card:nth-child(2):hover{transform:translateY(-8px) rotate(1deg)}
.product-visual{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;border-radius:14px;background:rgba(0,0,0,0.12)}
.garment{width:110px;height:120px;fill:rgba(255,255,255,0.08);stroke:var(--red);stroke-width:2;transition:transform 400ms ease}
.product-card:hover .garment{transform:rotate(4deg) scale(1.06)}
.garment-pocket,.garment-brim{fill:rgba(228,35,44,0.14)}
.garment-string{fill:var(--red);stroke:none}
.product-card h3{font-family:var(--font-display);font-weight:700;font-size:23px;margin:0 0 10px;letter-spacing:0.3px}
.product-copy{font-size:14.5px;line-height:1.55;color:var(--ink-light-dim);margin:0 0 18px}
.spec-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.spec-tags li{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;
  border:1px solid rgba(228,35,44,0.35);color:var(--red);
  padding:5px 12px;border-radius:999px;
  transition:background 200ms ease, transform 200ms ease;
}
.spec-tags li:hover{background:rgba(228,35,44,0.15);transform:translateY(-2px)}
.product-status{
  display:inline-block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:1px;text-transform:uppercase;color:var(--ink-light-dim);
  border-top:1px solid rgba(255,255,255,0.12);padding-top:14px;width:100%;
}
.coleccion-note{margin-top:44px;font-size:14.5px;color:var(--ink-light-dim)}
.coleccion-note a{color:var(--red);text-decoration:underline}

/* ===== Comunidad ===== */
.comunidad-lead{font-size:19px;line-height:1.7;color:var(--ink-dark-dim);max-width:640px;margin:0 0 46px}
.comunidad-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.comunidad-item{
  border:1px solid rgba(10,10,10,0.12);border-radius:16px;
  padding:20px 22px;background:rgba(10,10,10,0.02);
}
.comunidad-tag{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font-family:var(--font-display);font-weight:700;font-size:22px;
  color:var(--ink-dark);background:none;border:none;cursor:pointer;padding:0;
}
.comunidad-tag::after{
  content:"+";margin-left:auto;font-family:var(--font-mono);
  font-size:20px;color:var(--red-deep);transition:transform 250ms ease;
}
.comunidad-tag[aria-expanded="true"]::after{transform:rotate(45deg)}
.comunidad-item p{font-size:14.5px;line-height:1.55;color:var(--ink-dark-dim);margin:12px 0 0}

/* ===== Contacto ===== */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:10px}
.contact-form{display:flex;flex-direction:column;gap:6px}
.contact-form label{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-dark-dim);margin-top:14px}
.contact-form input,.contact-form textarea{
  font-family:var(--font-body);font-size:15px;
  border:1px solid rgba(10,10,10,0.25);background:transparent;
  padding:12px 16px;border-radius:14px;color:var(--ink-dark);
  resize:vertical;
  transition:border-color 200ms ease;
}
.contact-form input:hover,.contact-form textarea:hover{border-color:rgba(10,10,10,0.4)}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--red-deep);outline-offset:1px}
.contact-form button{margin-top:22px;align-self:flex-start}
.form-note{font-size:13px;color:var(--red-deep);margin:12px 0 0;min-height:16px}

.contacto-links{display:flex;flex-direction:column;gap:20px;justify-content:center}
.contacto-link{
  text-decoration:none;display:flex;flex-direction:column;gap:2px;
  padding:16px 0;border-bottom:1px solid rgba(10,10,10,0.15);
  transition:padding-left 200ms ease;
}
.contacto-link:hover{padding-left:8px}
.contacto-link-label{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--red-deep)}
.contacto-link-value{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--ink-dark)}

/* ===== Footer ===== */
footer{background:var(--contacto);color:var(--ink-dark);padding:0 0 46px}
.footer-inner{max-width:var(--max);margin:0 auto;padding:36px 6% 0;border-top:1px solid rgba(10,10,10,0.15);text-align:center}
.footer-logo{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:2px}
.footer-tag{font-size:13px;color:var(--ink-dark-dim);margin:10px 0}
.footer-copy{font-size:12px;color:var(--ink-dark-dim);margin:0}

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 700ms ease, transform 700ms ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ===== WhatsApp floating button ===== */
.whatsapp-fab{
  position:fixed;right:24px;bottom:24px;z-index:180;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -6px rgba(0,0,0,0.5);
  animation:fab-pulse 2.6s ease-in-out infinite;
  transition:transform 200ms ease;
}
.whatsapp-fab:hover{transform:scale(1.08)}
.whatsapp-icon{width:30px;height:30px;fill:#FFFFFF}
@keyframes fab-pulse{
  0%,100%{box-shadow:0 8px 20px -6px rgba(0,0,0,0.5), 0 0 0 0 rgba(37,211,102,0.5)}
  50%{box-shadow:0 8px 20px -6px rgba(0,0,0,0.5), 0 0 0 10px rgba(37,211,102,0)}
}
@media (prefers-reduced-motion:reduce){
  .whatsapp-fab{animation:none}
}
@media (max-width:720px){
  .whatsapp-fab{right:16px;bottom:16px;width:52px;height:52px}
  .whatsapp-icon{width:26px;height:26px}
}

/* ===== Responsive ===== */
@media (max-width:900px){
  .filosofia-grid{grid-template-columns:1fr;gap:36px}
  .pillars{grid-template-columns:1fr 1fr}
  .product-grid{grid-template-columns:1fr;gap:20px}
  .comunidad-list{grid-template-columns:1fr;gap:34px}
  .contacto-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:720px){
  .main-nav{
    position:absolute;top:100%;left:0;right:0;
    background:rgba(10,10,10,0.97);
    flex-direction:column;gap:0;
    max-height:0;overflow:hidden;
    transition:max-height 300ms ease;
  }
  .main-nav.is-open{max-height:280px;border-bottom:1px solid rgba(255,255,255,0.08)}
  .main-nav a{padding:16px 6%;border-bottom:1px solid rgba(255,255,255,0.06)}
  .nav-toggle{display:flex}
  .pillars{grid-template-columns:1fr}
  .stage{padding:90px 0 70px}
}