@font-face{font-family:'Southland';src:url('/assets/fonts/Southland.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Gravhez';src:url('/assets/fonts/Gravhez.otf') format('opentype');font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#141C11;color:#F4EDE0;font-family:'Cormorant Garamond',Georgia,serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#D9BE7A;text-decoration:none;transition:color .3s}
a:hover{color:#F4EDE0}
::selection{background:#D9BE7A;color:#141C11}
@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-16px)}100%{transform:translateY(0)}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes heroIn{0%{opacity:0;transform:translateY(42px)}100%{opacity:1;transform:translateY(0)}}
@keyframes glowPulse{0%,100%{opacity:.4}50%{opacity:.9}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes ghostDrift{0%{transform:translateX(0)}100%{transform:translateX(-40px)}}
/* hamburger */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:10px}
.nav-toggle span{display:block;height:2px;width:100%;background:#D9BE7A;border-radius:2px;transition:transform .3s ease,opacity .25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* mobile dropdown */
.mobile-menu{display:none;position:fixed;top:74px;left:0;right:0;z-index:190;flex-direction:column;padding:18px clamp(20px,5vw,40px) 26px;background:rgba(15,22,12,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(217,190,122,.22);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.mobile-menu.open{display:flex;animation:fadeUp .3s ease both}
.mm-link{text-align:left;background:none;border:none;cursor:pointer;font-family:'Jost',sans-serif;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#F4EDE0;padding:16px 4px;border-bottom:1px solid rgba(217,190,122,.14)}
.mm-link.active{color:#D9BE7A}
.mm-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#141C11;background:#D9BE7A;padding:15px 20px;border-radius:2px;margin-top:18px}
/* product page thumbs */
.p-thumbs{display:flex;flex-wrap:wrap;gap:10px;padding:12px;background:#F6D8CE;border-top:1px solid rgba(20,28,17,.12)}
.p-thumb{width:64px;height:64px;padding:0;border:1px solid rgba(20,28,17,.25);background:#F6D8CE;cursor:pointer;overflow:hidden;flex:0 0 auto;transition:border-color .25s,box-shadow .25s}
.p-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.p-thumb.active{border-color:#D9BE7A;box-shadow:0 0 0 1px #D9BE7A}
/* ---------- nav dropdown (colecciones) ---------- */
.nav-dd{position:relative}
.nav-dd-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:210px;padding:10px 0;margin-top:8px;
  background:rgba(15,22,12,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(217,190,122,.25);border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dd-menu a{
  display:block;padding:10px 22px;font-family:'Jost',sans-serif;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(244,237,224,.75);white-space:nowrap;transition:color .2s,background .2s;
}
.nav-dd-menu a:hover{color:#D9BE7A;background:rgba(217,190,122,.08)}
.nav-dd-menu a:first-child{border-bottom:1px solid rgba(217,190,122,.16);color:#D9BE7A;margin-bottom:4px}
/* submenú móvil */
.mm-sub{
  display:block;padding:11px 4px 11px 26px;font-family:'Jost',sans-serif;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(244,237,224,.65);
  border-bottom:1px solid rgba(217,190,122,.1);
}
.mm-sub:active,.mm-sub:hover{color:#D9BE7A}
/* anchors bajo el nav fijo */
.col-hero{scroll-margin-top:74px}

/* ---------- índice de colecciones (teasers) ---------- */
.colcard{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:center;
  color:inherit;padding:clamp(28px,4vw,46px) 0;border-bottom:1px solid rgba(217,190,122,.18);
}
.colcard.flip .colcard-img{order:2}
.colcard-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#F6D8CE;border:1px solid rgba(217,190,122,.2)}
.colcard-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.colcard:hover .colcard-img img{transform:scale(1.05)}
.colcard-cta{
  display:inline-flex;align-items:center;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#D9BE7A;padding-bottom:3px;border-bottom:1px solid #D9BE7A;transition:color .3s,border-color .3s;
}
.colcard:hover .colcard-cta{color:#F4EDE0;border-color:#F4EDE0}

/* ---------- relleno bajo la galería del producto ---------- */
.p-fill{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:120px;padding:34px 24px;text-align:center;border-top:1px solid rgba(217,190,122,.16);
}
.p-fill img{height:42px;width:auto;opacity:.9}
.p-fill p{margin:0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;line-height:1.4;color:rgba(244,237,224,.75);max-width:300px}
.p-fill span{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,237,224,.45)}

/* ---------- responsive ---------- */
/* Colecciones: en escritorio la sección "flip" pone la imagen a la izquierda */
@media(min-width:861px){
  .col-hero.flip .ch-img{order:-1}
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr !important;min-height:auto !important}
  /* columna de texto del hero: padding cómodo en móvil (la izquierda tenía 58px+) */
  .hero-copy{padding:100px clamp(20px,6vw,40px) 48px clamp(20px,6vw,48px) !important}
  .hero-grid > div:last-child{padding:0 clamp(24px,6vw,60px) 70px !important}
  .split-2{grid-template-columns:1fr !important}
  .grid-4{grid-template-columns:repeat(2,1fr) !important}
  .grid-3{grid-template-columns:1fr !important}
  /* sin escalón decorativo cuando la galería colapsa a 1 columna */
  .grid-3 figure{margin:0 !important}
  .footer-grid{grid-template-columns:1fr !important;gap:36px !important}
  .modal-2{grid-template-columns:1fr !important}
  .nav-links{display:none !important}
  .nav-toggle{display:flex !important}
  .col-hero{min-height:auto !important}
  /* colecciones móvil: siempre texto primero, imagen después (el flip es solo de escritorio) */
  .col-hero .ch-img{order:2}
  /* índice de colecciones: 1 columna, imagen arriba */
  .colcard{grid-template-columns:1fr}
  .colcard-img{order:-1}
  .colcard.flip .colcard-img{order:-1}
  .col-hero .ch-img{min-height:300px !important}
  /* objetivos táctiles: filtros de tono y presentaciones */
  [data-filter]{padding:11px 17px !important;font-size:12px !important}
  [data-pres]{padding:12px 18px !important;font-size:13px !important}
  /* miniaturas de producto: fila desplazable si no caben */
  .p-thumbs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap !important;scrollbar-width:none}
  .p-thumbs::-webkit-scrollbar{display:none}
}
@media(max-width:480px){
  .grid-4{grid-template-columns:1fr !important}
  /* stats del hero más compactos en pantallas muy angostas */
  .hero-copy > div:last-child{gap:18px !important}
}