/* ═══════════════════════════════════════════════════════════
   ACOSTA SHOES · Calzado & Moda
   Paleta y tipografías oficiales del kit de marca.
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  /* Paleta oficial */
  --ivory:#F7F4F1;
  --sand:#D8B4A0;
  --terracotta:#C58B7A;
  /* El gris del kit (#6C6C6C) es neutro y tira a frío sobre el marfil cálido:
     lo desplazamos un punto hacia el cálido para que el texto asiente. */
  --gray:#786E68;
  --black:#000;

  /* Derivados para jerarquía */
  --ink:#141210;
  --ink-2:#3A342F;
  --paper:#FFFDFB;
  --tint:#F2EAE4;
  --gold:#B8935F;
  --wa:#25D366;

  /* Paneles siempre oscuros (header, footer, "Cómo comprar").
     NO se redefinen en tema oscuro: --ink sí se invierte, y usarlo como
     fondo dejaría texto claro sobre fondo claro. */
  --panel:#141210;
  --on-panel:#F2EBE5;
  --on-panel-dim:rgba(242,235,229,.72);

  --hairline:rgba(197,139,122,.30);
  --hairline-soft:rgba(197,139,122,.16);
  --shadow-s:0 2px 12px rgba(60,40,32,.06);
  --shadow-m:0 18px 50px -18px rgba(60,40,32,.28);
  --shadow-l:0 40px 90px -30px rgba(60,40,32,.38);

  /* Tipografía */
  --serif:"Playfair Display", "Times New Roman", Georgia, serif;
  --sans:"Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero:clamp(3rem, 9.5vw, 7.5rem);
  --fs-h2:clamp(2.1rem, 5.2vw, 4.1rem);
  --fs-h3:clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:clamp(.95rem, 1.05vw, 1.0625rem);
  --fs-sm:.8125rem;
  --fs-eyebrow:.6875rem;

  /* Espaciado */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem;
  --s5:4rem; --s6:6.5rem; --s7:10.5rem;
  --pad-section:clamp(5rem, 11vw, 10.5rem);
  --wrap:1320px;
  --gutter:clamp(1.25rem, 4vw, 3.5rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --radius:2px;
}

/* Tema oscuro: solo se redefinen los tokens */
@media (prefers-color-scheme: dark){
  :root{
    --ivory:#14110F;
    --paper:#1A1613;
    --tint:#201A16;
    --ink:#F2EBE5;
    --ink-2:#C9BDB3;
    --gray:#9A8E85;
    --hairline:rgba(216,180,160,.24);
    --hairline-soft:rgba(216,180,160,.12);
    --shadow-s:0 2px 12px rgba(0,0,0,.4);
    --shadow-m:0 18px 50px -18px rgba(0,0,0,.7);
    --shadow-l:0 40px 90px -30px rgba(0,0,0,.8);
  }
}

/* ── Base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:500; line-height:1.02; letter-spacing:-.02em}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul,ol{margin:0; padding:0; list-style:none}

::selection{background:var(--terracotta); color:#fff}

:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
  border-radius:var(--radius);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--panel); color:var(--on-panel); padding:.75rem 1.25rem;
}
.skip-link:focus{left:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}

/* Grano sutil sobre los fondos planos */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.028; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ body::before{ mix-blend-mode:screen; opacity:.05 } }

/* ── Reveal al scroll ───────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

/* ── Tipografía compartida ──────────────────────────────── */
.eyebrow{
  font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--terracotta); margin:0;
}
.lnk{
  color:var(--terracotta); font-weight:500; cursor:pointer;
  border-bottom:1px solid var(--hairline); padding-bottom:2px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.lnk:hover{border-color:var(--terracotta)}

/* ── Botones ────────────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 2rem; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-size:var(--fs-sm); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease);
}
.btn:hover::after{transform:scaleX(1); transform-origin:left}
.btn:hover{color:var(--ivory); border-color:var(--ink)}

.btn--solid{--bg:var(--terracotta); --fg:#fff; --bd:var(--terracotta)}
.btn--solid::after{background:var(--ink)}
.btn--ghost{--bd:var(--hairline); --fg:var(--ink)}
.btn--sm{padding:.7rem 1.35rem; font-size:.6875rem; letter-spacing:.16em}
.btn--lg{padding:1.2rem 3rem}
.ico-wa{width:18px; height:18px; fill:currentColor; flex:none}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{
  position:relative; z-index:60;
  background:#0E0C0B; color:var(--on-panel);
  border-bottom:1px solid rgba(216,180,160,.14);
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  overflow:hidden;
}
.topbar__track{
  display:flex; align-items:center; justify-content:center; gap:1.25rem;
  padding:.65rem var(--gutter); flex-wrap:wrap;
}
.topbar i{color:var(--terracotta); font-style:normal; font-size:.5rem}
@media (max-width:640px){
  .topbar__track span:nth-child(n+5){display:none}
  .topbar__track i:nth-of-type(n+2){display:none}
}

/* ── Nav ────────────────────────────────────────────────── */
/* Header oscuro: continúa la barra superior en un solo bloque
   y da el contraste que el marfil del hero no ofrece. */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,18,16,.92);
  backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid rgba(216,180,160,.16);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(20,18,16,.97);
  border-bottom-color:rgba(216,180,160,.26);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.55);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:1.1rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  transition:padding .5s var(--ease);
}
.nav.is-stuck .nav__inner{padding-block:.7rem}

.brand{display:flex; align-items:center; gap:.75rem; line-height:1; flex:none}
.brand__txt{display:flex; flex-direction:column}
.brand__mark{
  width:44px; height:44px; border-radius:50%; flex:none;
  box-shadow:0 0 0 1px rgba(216,180,160,.35);
  transition:width .5s var(--ease), height .5s var(--ease);
}
.nav.is-stuck .brand__mark{width:38px; height:38px}
.brand__name{font-family:var(--serif); font-size:1.5rem; letter-spacing:-.01em}
.brand__name em{font-style:italic; color:var(--terracotta)}
.brand__sub{
  font-size:.5625rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gray); margin-top:.35rem;
}

/* Marca sobre el header oscuro */
.nav .brand__name{color:var(--on-panel)}
.nav .brand__name em{color:var(--sand)}
.nav .brand__sub{color:rgba(216,180,160,.72)}

.nav__links{display:flex; gap:2rem}
.nav__links a{
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(242,235,229,.76); position:relative; padding-block:.25rem;
  transition:color .4s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--sand); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:hover{color:var(--ivory)}
.nav__links a:hover::after{transform:scaleX(1); transform-origin:left}

/* Botón del header sobre fondo oscuro */
.nav .btn--sm{--bd:rgba(216,180,160,.5); --fg:var(--on-panel)}
.nav .btn--sm::after{background:var(--sand)}
.nav .btn--sm:hover{color:var(--ink); border-color:var(--sand)}

.nav__actions{display:flex; align-items:center; gap:1rem; flex:none}
.burger{display:none; flex-direction:column; gap:5px; padding:.5rem}
.burger span{display:block; width:22px; height:1px; background:var(--on-panel); transition:transform .4s var(--ease), opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1080px){ .nav__links{gap:1.35rem} .nav__links a{font-size:.6875rem} }
@media (max-width:900px){
  .burger{display:flex}
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:0 var(--gutter);
    background:rgba(20,18,16,.98); border-bottom:1px solid rgba(216,180,160,.2);
    max-height:0; overflow:hidden; transition:max-height .6s var(--ease), padding .4s;
  }
  .nav__links.is-open{max-height:24rem; padding-block:1rem 1.5rem}
  .nav__links a{padding:.85rem 0; border-bottom:1px solid rgba(216,180,160,.14); font-size:.8125rem}
  .nav__links a::after{display:none}
  .nav__actions .btn{display:none}
}

/* ── Hero ───────────────────────────────────────────────── */
.hero{position:relative; padding-block:clamp(3rem,7vw,6rem) clamp(4rem,8vw,7rem); overflow:hidden}
.hero__grid{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,5rem); align-items:center;
}
.hero__copy{position:relative; z-index:2}
.hero__title{margin-top:1.5rem; display:flex; flex-direction:column}
.hero__title .l1{
  font-size:clamp(1.35rem,2.6vw,2.1rem); font-weight:400;
  letter-spacing:.01em; color:var(--ink-2);
}
.hero__title .l2{font-size:var(--fs-hero); margin-top:.1em; letter-spacing:-.035em}
.hero__title em{font-style:italic; color:var(--terracotta)}

.hero__slogan{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3vw,2.25rem); color:var(--terracotta);
  margin-top:.75rem; position:relative; display:inline-block;
}
.hero__slogan::after{
  content:""; position:absolute; left:0; bottom:-.15em; width:100%; height:1px;
  background:linear-gradient(90deg, var(--terracotta), transparent);
}
.hero__lead{
  margin-top:1.75rem; max-width:44ch; color:var(--ink-2);
  font-weight:300; font-size:clamp(1rem,1.15vw,1.125rem); line-height:1.85;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.25rem}

.hero__stats{
  display:flex; gap:clamp(1.5rem,3vw,3rem); margin-top:3.25rem;
  padding-top:2rem; border-top:1px solid var(--hairline);
}
.hero__stats li{display:flex; align-items:baseline; gap:.7rem}
.hero__stats strong{font-family:var(--serif); font-size:2rem; font-weight:500; color:var(--terracotta); line-height:1}
.hero__stats span{font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gray); line-height:1.5}

/* Composición asimétrica solapada */
.hero__art{position:relative; aspect-ratio:1/1.06; min-height:420px}
.hero__img{margin:0; overflow:hidden; position:absolute; box-shadow:var(--shadow-m); background:var(--tint)}
.hero__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease)}
.hero__img:hover img{transform:scale(1.05)}
.hero__img--a{width:64%; aspect-ratio:2/3; top:0; right:0; z-index:2}
.hero__img--b{width:47%; aspect-ratio:2/3; bottom:0; left:0; z-index:3; box-shadow:var(--shadow-l)}
.hero__img--c{width:32%; aspect-ratio:1/1.28; top:14%; left:4%; z-index:1; opacity:.92}

.hero__seal{
  position:absolute; right:2%; bottom:6%; z-index:4;
  width:clamp(88px,9vw,120px); aspect-ratio:1;
  display:grid; place-items:center;
  background:var(--ivory); border-radius:50%;
  box-shadow:var(--shadow-m);
}
.hero__seal svg{position:absolute; inset:0; width:100%; height:100%; animation:spin 26s linear infinite}
.hero__seal text{font-family:var(--sans); font-size:7.4px; letter-spacing:.22em; fill:var(--ink-2); text-transform:uppercase}
.hero__seal b{color:var(--terracotta); font-size:1.05rem}
@keyframes spin{to{transform:rotate(360deg)}}

.hero__scroll{
  position:absolute; left:50%; bottom:1.25rem; translate:-50% 0;
  width:1px; height:52px; background:var(--hairline); overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0; background:var(--terracotta);
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr; gap:3rem}
  .hero__art{order:-1; min-height:0; aspect-ratio:1/.92; max-width:520px; margin-inline:auto; width:100%}
  .hero__stats{flex-wrap:wrap; gap:1.25rem 2rem}
  .hero__scroll{display:none}
}
@media (max-width:520px){
  .hero__stats li{flex:1 1 40%}
  .hero__stats strong{font-size:1.6rem}
}

/* ── Cinta de valores (estática, sin color de fondo) ────── */
.values{border-block:1px solid var(--hairline); background:var(--ivory)}
.values__list{
  max-width:var(--wrap); margin-inline:auto; padding:1.5rem var(--gutter);
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.6rem clamp(1.5rem,3.5vw,3.25rem);
}
.values__list li{
  position:relative;
  font-family:var(--serif); font-size:clamp(.95rem,1.35vw,1.2rem);
  color:var(--ink-2); letter-spacing:.01em; white-space:nowrap;
}
/* Separador: rombo fino en terracota, centrado en el hueco entre elementos */
.values__list li + li::before{
  content:"◆"; position:absolute;
  left:calc(clamp(1.5rem,3.5vw,3.25rem) / -2);
  top:50%; transform:translate(-50%,-50%);
  font-size:.34rem; line-height:1; color:var(--terracotta); opacity:.8;
}
@media (max-width:700px){
  .values__list{gap:.5rem 1.5rem}
  .values__list li + li::before{display:none}
  .values__list li:not(:last-child)::after{content:" ·"; color:var(--terracotta); margin-left:.5rem}
}

/* ── Secciones ──────────────────────────────────────────── */
/* El nav es sticky: sin esto, saltar por ancla deja el título debajo de la barra. */
.section,.closer,.foot,#top{scroll-margin-top:88px}

.section{padding-block:var(--pad-section); position:relative}
.section--tint{background:var(--tint)}
.section--dark{background:var(--panel); color:var(--on-panel)}
.section--dark .shead__desc,.section--dark .steps p{color:rgba(242,235,229,.7)}
.section--dark .shead__idx{color:var(--sand)}
.section--dark .shead__idx::after{background:rgba(216,180,160,.3)}
.section--dark .btn--solid{--bd:var(--terracotta)}
.section--dark .btn--solid::after{background:var(--on-panel)}
.section--dark .btn--solid:hover{color:var(--panel); border-color:var(--on-panel)}

/* Encabezado de sección con índice numerado */
.shead{max-width:62ch; margin-bottom:clamp(3rem,6vw,5rem)}
.shead--center{margin-inline:auto; text-align:center}
.shead--flush{margin-bottom:2.5rem}
.shead__idx{
  display:flex; align-items:center; gap:1rem;
  font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.24em;
  color:var(--terracotta); margin-bottom:1.25rem;
}
.shead__idx::after{content:""; flex:1; height:1px; background:var(--hairline)}
.shead--center .shead__idx{justify-content:center}
.shead--center .shead__idx::before,
.shead--center .shead__idx::after{content:""; flex:0 0 60px; height:1px; background:var(--hairline)}
.shead__title{font-size:var(--fs-h2)}
.shead__title em{font-style:italic; color:var(--terracotta)}
.shead__desc{margin-top:1.35rem; color:var(--gray); font-weight:300; line-height:1.85}

/* ── Categorías ─────────────────────────────────────────── */
.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.75rem)}
.cat{
  position:relative; overflow:hidden; text-align:left; display:block;
  background:var(--tint); box-shadow:var(--shadow-s);
  transition:box-shadow .7s var(--ease), transform .7s var(--ease);
}
.cat:hover{box-shadow:var(--shadow-m); transform:translateY(-4px)}
.cat__img{display:block; aspect-ratio:4/5; overflow:hidden}
/* Las fotos son verticales y el producto vive en el tercio inferior:
   bajamos el punto de encuadre para no cortar a media pierna. */
.cat__img img{width:100%; height:100%; object-fit:cover; object-position:center 70%; transition:transform 1.4s var(--ease)}
.cat:hover .cat__img img{transform:scale(1.07)}
.cat__body{
  position:absolute; inset:auto 0 0 0; padding:1.5rem;
  display:flex; flex-direction:column; gap:.15rem; color:#fff;
  background:linear-gradient(to top, rgba(20,18,16,.88) 0%, rgba(20,18,16,.55) 45%, transparent 100%);
}
.cat__n{font-size:.625rem; letter-spacing:.24em; opacity:.75}
.cat__name{font-family:var(--serif); font-size:1.6rem; line-height:1.1}
.cat__count{font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8}

.cats__note{
  margin-top:2.5rem; text-align:center; color:var(--gray);
  font-size:.9375rem; font-weight:300;
}
.cats__note strong{color:var(--ink); font-weight:500}

@media (max-width:820px){ .cats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){
  .cats{grid-template-columns:1fr}
  .cat__img{aspect-ratio:16/11}
}

/* ── Filtros ────────────────────────────────────────────── */
.filters{
  display:flex; flex-wrap:wrap; gap:.6rem;
  padding-bottom:1.75rem; border-bottom:1px solid var(--hairline);
}
.chip{
  padding:.6rem 1.35rem; border:1px solid var(--hairline);
  font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2);
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.chip:hover{border-color:var(--terracotta); color:var(--terracotta)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:var(--ivory)}

.counter{
  margin-top:1.25rem; font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gray);
}
.counter strong{color:var(--terracotta); font-weight:600}

/* ── Grid de colección ──────────────────────────────────── */
.grid{
  margin-top:2.5rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.75rem,1.4vw,1.35rem);
}
.card{
  position:relative; display:block; padding:0; overflow:hidden;
  background:var(--tint); aspect-ratio:3/4; width:100%;
  transition:opacity .5s var(--ease);
}
.card img{
  width:100%; height:100%; object-fit:cover; object-position:center 68%;
  transition:transform 1.3s var(--ease), filter .8s var(--ease);
}
.card:hover img{transform:scale(1.06)}
.card__tag{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:.55rem .85rem; background:var(--ivory); color:var(--ink);
  font-size:.625rem; letter-spacing:.18em; font-weight:600;
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.card:hover .card__tag,.card:focus-visible .card__tag{transform:none}
.card__veil{
  position:absolute; inset:0; z-index:1; opacity:0;
  background:linear-gradient(to top, rgba(20,18,16,.45), transparent 55%);
  transition:opacity .6s var(--ease);
}
.card:hover .card__veil{opacity:1}

@media (max-width:980px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .grid{grid-template-columns:repeat(2,1fr)} }

.more{display:flex; justify-content:center; margin-top:3.5rem}
.more[hidden]{display:none}

/* ── Split (Detalles) ───────────────────────────────────── */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center}
.split__art{position:relative; aspect-ratio:1/1.1}
.split__img{margin:0; position:absolute; overflow:hidden; box-shadow:var(--shadow-m); background:var(--tint)}
.split__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease)}
.split__img:hover img{transform:scale(1.05)}
.split__img--a{width:74%; aspect-ratio:1/1; top:0; left:0}
.split__img--b{width:52%; aspect-ratio:2/3; bottom:0; right:0; box-shadow:var(--shadow-l)}

.feats{display:flex; flex-direction:column; gap:2rem}
.feats li{display:flex; gap:1.5rem; align-items:flex-start}
.feats__n{
  flex:none; width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--hairline); border-radius:50%;
  font-family:var(--serif); font-size:.95rem; color:var(--terracotta);
}
.feats h3{font-size:var(--fs-h3); letter-spacing:.01em; margin-bottom:.5rem}
.feats p{color:var(--gray); font-weight:300; font-size:.9375rem; line-height:1.8}

@media (max-width:860px){
  .split{grid-template-columns:1fr; gap:3rem}
  .split__art{max-width:480px; width:100%; margin-inline:auto}
}

/* ── Pasos ──────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3.5vw,3.5rem)}
.steps li{position:relative; padding-top:2rem; border-top:1px solid rgba(216,180,160,.28)}
.steps__n{
  display:block; font-family:var(--serif); font-size:2.75rem;
  color:var(--terracotta); line-height:1; margin-bottom:1.1rem;
}
.steps h3{font-size:var(--fs-h3); margin-bottom:.75rem}
.steps p{font-weight:300; font-size:.9375rem; line-height:1.8}
.steps em{font-style:normal; color:var(--sand); font-family:var(--serif); font-size:1.02em}
.steps__cta{display:flex; justify-content:center; margin-top:clamp(3rem,6vw,4.5rem)}
@media (max-width:760px){ .steps{grid-template-columns:1fr; gap:2.5rem} }

/* ── Envíos ─────────────────────────────────────────────── */
.ship{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center}
.ship__img{margin:0; overflow:hidden; box-shadow:var(--shadow-m); background:var(--tint)}
.ship__img img{width:100%; transition:transform 1.6s var(--ease)}
.ship__img:hover img{transform:scale(1.04)}
.ship__lead{color:var(--gray); font-weight:300; line-height:1.85; max-width:46ch}
.ship__pills{display:flex; flex-wrap:wrap; gap:.6rem; margin-block:2rem}
.ship__pills li{
  padding:.55rem 1.4rem; border:1px solid var(--hairline);
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta);
}
@media (max-width:860px){ .ship{grid-template-columns:1fr; gap:2.5rem} }

/* ── Instagram ──────────────────────────────────────────── */
.ig{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.75rem,1.5vw,1.5rem)}
.ig__i{overflow:hidden; aspect-ratio:1; background:var(--ivory); box-shadow:var(--shadow-s); position:relative}
.ig__i img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
.ig__i:hover img{transform:scale(1.06)}

/* El sello es un PNG circular transparente: sin fondo ni sombra de tarjeta,
   para que no se vea el cuadrado blanco alrededor del círculo. */
.ig__i--logo{background:transparent; box-shadow:none}
.ig__i--logo img{object-fit:contain; padding:6%}
@media (max-width:700px){ .ig{grid-template-columns:repeat(2,1fr)} }

/* ── Cierre ─────────────────────────────────────────────── */
.closer{
  padding-block:var(--pad-section);
  background:linear-gradient(180deg, var(--ivory) 0%, var(--tint) 100%);
  text-align:center; border-top:1px solid var(--hairline-soft);
}
.closer__in{display:flex; flex-direction:column; align-items:center; gap:1.25rem}
.closer__title{font-family:var(--serif); font-size:clamp(2.75rem,8vw,6rem); margin-top:.5rem}
.closer__title em{font-style:italic; color:var(--terracotta)}
.closer__lead{color:var(--gray); font-weight:300; max-width:40ch}
.closer .btn{margin-top:1rem}

/* ── Footer ─────────────────────────────────────────────── */
.foot{background:var(--panel); color:var(--on-panel); padding-top:clamp(3.5rem,7vw,5.5rem)}
.foot__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem); padding-bottom:3.5rem;
}
/* El sello es una foto oscura: sobre el panel negro necesita un aro que lo recorte. */
.foot__mark{
  width:104px; height:104px; border-radius:50%; margin-bottom:1.5rem;
  box-shadow:0 0 0 1px rgba(216,180,160,.35), 0 8px 24px -8px rgba(0,0,0,.6);
}
.foot__brand .brand__name{font-size:1.9rem; display:block}
.foot__brand .brand__sub{display:block; margin-top:.5rem; color:var(--sand)}
.foot__brand p{margin-top:1.5rem; color:rgba(242,235,229,.6); font-weight:300; font-size:.875rem; line-height:1.9}
.foot__col{display:flex; flex-direction:column; gap:.7rem}
.foot__col h3{
  font-family:var(--sans); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--sand); margin-bottom:.6rem;
}
.foot__col a,.foot__col span{font-size:.875rem; font-weight:300; color:rgba(242,235,229,.72)}
.foot__col a{cursor:pointer; transition:color .4s var(--ease)}
.foot__col a:hover{color:var(--sand)}
.foot__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:1.75rem; border-top:1px solid rgba(216,180,160,.16);
  font-size:.75rem; letter-spacing:.1em; color:rgba(242,235,229,.5);
}
.foot__heart{color:var(--terracotta)}
@media (max-width:860px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot__grid{grid-template-columns:1fr} .foot__bar{justify-content:center; text-align:center} }

/* ── FAB WhatsApp ───────────────────────────────────────── */
.fab{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:70;
  display:flex; align-items:center; gap:.7rem;
  padding:.9rem 1.35rem; background:var(--wa); color:#fff;
  border-radius:100px; box-shadow:0 12px 32px -8px rgba(37,211,102,.55);
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.fab.is-on{opacity:1; visibility:visible; transform:none}
.fab:hover{transform:translateY(-3px)}
.fab svg{width:22px; height:22px; fill:currentColor; flex:none}
@media (max-width:600px){
  .fab{padding:1rem; border-radius:50%}
  .fab__label{display:none}
}

/* ── Lightbox ───────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(12,10,9,.94); backdrop-filter:blur(8px);
  animation:fade .35s var(--ease);
}
.lb[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.lb__box{
  margin:0; max-width:min(560px,92vw); width:100%;
  display:flex; flex-direction:column; background:var(--ivory);
  box-shadow:var(--shadow-l); animation:pop .45s var(--ease);
}
@keyframes pop{from{opacity:0; transform:scale(.96) translateY(12px)}to{opacity:1; transform:none}}
.lb__box img{width:100%; max-height:66vh; object-fit:contain; background:var(--tint)}
.lb__cap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.25rem 1.5rem; border-top:1px solid var(--hairline);
}
.lb__id{
  display:block; font-family:var(--serif); font-size:1.4rem; color:var(--ink);
}
.lb__cat{
  display:block; font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gray); margin-top:.15rem;
}
.lb__cap .btn{padding:.85rem 1.5rem}

.lb__x,.lb__nav{
  position:absolute; z-index:2; color:#fff; opacity:.7;
  display:grid; place-items:center; transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.lb__x{top:clamp(.75rem,2vw,1.75rem); right:clamp(.75rem,2vw,1.75rem); width:46px; height:46px; font-size:2.25rem; line-height:1}
.lb__nav{top:50%; translate:0 -50%; width:56px; height:56px; font-size:3rem; line-height:1}
.lb__nav--prev{left:clamp(.25rem,1.5vw,1.5rem)}
.lb__nav--next{right:clamp(.25rem,1.5vw,1.5rem)}
.lb__x:hover,.lb__nav:hover{opacity:1}
.lb__nav--prev:hover{transform:translateX(-3px)}
.lb__nav--next:hover{transform:translateX(3px)}
@media (max-width:600px){
  .lb__nav{width:44px; height:44px; font-size:2.25rem; top:auto; bottom:1rem; translate:0 0}
  .lb__cap{justify-content:center; text-align:center}
}

body.no-scroll{overflow:hidden}