/* ==========================================================
   Soul Silver — Design tokens
   Dirección: landing storefront modular — azul marino + arena
   ========================================================== */

/* Bodoni Moda: fuente de acento (logo, cursivas, precios).
   Licencia SIL OFL 1.1 — de uso libre, incluido comercial. */
@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/BodoniModa-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/BodoniModa-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/BodoniModa-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda";
  src:url("../fonts/BodoniModa-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  /* Paleta de marca */
  --quicksand:   #E0C58F;   /* arena dorada — acento cálido */
  --royal-blue:  #112250;   /* azul marino profundo — texto, secciones oscuras */
  --swan-wing:   #F5F0E9;   /* blanco hueso — fondo general */
  --sapphire:    #3C507D;   /* azul medio — texto secundario, hover */
  --shell-stone: #DCCFC0;   /* piedra cálida clara — superficies, tarjetas */

  /* Roles semánticos */
  --bg:          var(--swan-wing);
  --surface:     #EFE8DE;
  --surface-2:   var(--shell-stone);
  --line:        #E1D8CB;

  --ink:         var(--royal-blue);
  --ink-soft:    var(--sapphire);
  --ink-faint:   #7C88A3;

  --night:       var(--royal-blue);
  --night-2:     #0B1633;
  --night-line:  rgba(255,255,255,.10);

  --gold:        var(--quicksand);
  --gold-deep:   #B99A5C;
  --gold-soft:   rgba(224,197,143,.18);

  /* Tipografía */
  --font-display: "New York", ui-serif, Georgia, "Times New Roman", serif;
  --font-accent:  "Bodoni Moda", var(--font-display);
  --font-body:    var(--font-display);

  --radius: 6px;
  --radius-sm: 4px;
  --gap: clamp(1rem, 2vw, 1.75rem);
  --container: 1200px;
  --header-h: 68px;

  --shadow-card: 0 1px 2px rgba(17,34,80,.04);
  --shadow-card-hover: 0 10px 24px rgba(17,34,80,.10);
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-weight:400;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; }
ul{ list-style:none; margin:0; padding:0; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold); color:var(--night);
  padding:.75rem 1rem; z-index:1000;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* Texto solo para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================
   Header
   ========================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  background:rgba(17,34,80,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--night-line);
}
.header-inner{
  max-width:var(--container); margin:0 auto; height:100%;
  padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.brand-mark{ border-radius:50%; }
.brand-name{ color:#fff; font-family:var(--font-display); font-size:1.3rem; letter-spacing:.01em; }
.brand-name em{ font-style:italic; font-family:var(--font-accent); color:var(--gold); }

.main-nav{ display:flex; gap:2rem; }
.main-nav a{
  color:rgba(255,255,255,.72); font-size:.92rem;
  font-weight:400; position:relative; padding:.4rem 0;
  transition:color .2s var(--ease);
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold);
  transition:right .3s var(--ease);
}
.main-nav a:hover, .main-nav a:focus-visible{ color:#fff; }
.main-nav a:hover::after, .main-nav a:focus-visible::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:.9rem; }
.cart-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  color:rgba(255,255,255,.85); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); cursor:pointer; padding:0;
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.cart-btn:hover, .cart-btn:focus-visible{
  color:var(--gold); background:rgba(224,197,143,.12); border-color:rgba(224,197,143,.4);
}
.cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--gold); color:var(--night);
  font-size:.66rem; font-weight:600; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--night);
}
.icon-link{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.icon-link svg path{ fill:currentColor; }
.icon-link:hover, .icon-link:focus-visible{
  color:var(--gold); background:rgba(224,197,143,.12); border-color:rgba(224,197,143,.4);
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:0; cursor:pointer; padding:0;
}
.nav-toggle span{ display:block; height:1px; background:#fff; transition:transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .main-nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    background:var(--night); flex-direction:column; gap:0;
    padding:.5rem 1.5rem 1.5rem; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
    border-bottom:1px solid var(--night-line);
  }
  .main-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .main-nav a{ padding:.9rem 0; border-bottom:1px solid var(--night-line); }
}

/* ==========================================================
   Módulo 1: Hero Split — Grid asimétrico bipartito
   ========================================================== */
.hero-split{
  display:grid; grid-template-columns:repeat(2, 1fr); align-items:stretch;
  gap:clamp(1.5rem, 4vw, 3rem);
  max-width:var(--container); margin:0 auto;
  padding:calc(var(--header-h) + 2.5rem) 1.5rem 3.5rem;
}
.hero-content{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:1.5rem;
}
.hero-eyebrow{
  margin:0; letter-spacing:.18em; font-size:.78rem; font-weight:400; color:var(--gold-deep);
  text-transform:uppercase;
}
.hero-content h1{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  font-size:clamp(2.6rem, 6vw, 4.2rem); line-height:1.02;
  color:var(--ink);
}
.hero-content h1 em{ font-style:italic; color:var(--gold-deep); }
.hero-tagline{
  margin:0; font-size:1.05rem; line-height:1.6; color:var(--ink-soft);
  max-width:34rem;
}
.hero-ctas{ display:flex; gap:.9rem; flex-wrap:wrap; }

.hero-media-wrapper{
  display:flex; align-items:stretch;
}
.hero-media{
  overflow:hidden; border-radius:var(--radius);
  background:var(--surface);
  width:100%;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/5;
}

/* ==========================================================
   Hero de categoría (landing pages)
   ========================================================== */
.cat-hero{
  max-width:var(--container); margin:0 auto;
  padding:calc(var(--header-h) + 2.5rem) 1.5rem 2rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:1rem;
}
.cat-hero h1{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  font-size:clamp(2.6rem, 6vw, 4rem); line-height:1.02; color:var(--ink);
}
.cat-hero .hero-tagline{ max-width:34rem; }
.cat-back{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.82rem; color:var(--ink-soft); text-decoration:none;
  margin-bottom:.5rem; transition:color .2s var(--ease);
}
.cat-back:hover, .cat-back:focus-visible{ color:var(--gold-deep); }

/* ==========================================================
   Carrusel promocional
   ========================================================== */
.promo-section{
  max-width:var(--container); margin:0 auto;
  padding:2rem 1.5rem 1rem;
}
.carousel-container{
  position:relative; width:100%; overflow:hidden;
  border-radius:var(--radius); background:var(--night);
  box-shadow:0 10px 40px rgba(17,34,80,.18);
  touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.carousel-track{
  display:flex; transition:transform .6s var(--ease);
  height:clamp(320px, 46vw, 460px);
}
.carousel-track.dragging{ transition:none; }
.carousel-slide{
  position:relative; min-width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.carousel-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.55;
}
.carousel-slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,22,51,.25) 0%, rgba(11,22,51,.72) 100%);
}
.carousel-content{
  position:relative; z-index:2; color:#fff; text-align:center;
  padding:2rem; max-width:34rem; display:flex; flex-direction:column;
  align-items:center; gap:1rem;
}
.carousel-eyebrow{
  margin:0; letter-spacing:.18em; font-size:.72rem; text-transform:uppercase;
  color:var(--gold);
}
.carousel-content h3{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  font-size:clamp(1.8rem, 4vw, 2.6rem); line-height:1.1; margin:0;
}
.carousel-content p:not(.carousel-eyebrow){ margin:0; color:rgba(255,255,255,.85); line-height:1.6; }

/* Barras de progreso */
.progress-bars{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; gap:8px; padding:1rem 1.5rem; justify-content:center;
  background:rgba(11,22,51,.35);
}
.progress-bar{
  width:clamp(28px, 8vw, 55px); height:5px; border-radius:4px;
  background-color:rgba(255,255,255,.35); position:relative; overflow:hidden;
  cursor:pointer;
}
.progress-bar-fill{
  height:100%; width:0%; background-color:#fff; border-radius:4px;
  will-change:width;
}
.progress-bar-fill.animating{ animation:llenarBarra 4s linear forwards; }
@keyframes llenarBarra{ from{ width:0%; } to{ width:100%; } }
.carousel-container:hover .progress-bar-fill.animating{ animation-play-state:paused; }

/* ==========================================================
   Paginación
   ========================================================== */
.pagination{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:2.5rem; flex-wrap:wrap;
}
.pagination[hidden]{ display:none; }
.page-btn{
  min-width:40px; height:40px; padding:0 .6rem;
  border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--bg); color:var(--ink); font-size:.9rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.page-btn:hover:not(:disabled){ border-color:var(--gold-deep); color:var(--gold-deep); }
.page-btn.active{ background:var(--gold); border-color:var(--gold); color:var(--night); font-weight:500; }
.page-btn.disabled, .page-btn:disabled{ opacity:.4; cursor:default; }

/* ==========================================================
   Módulo 2: Icon Nav — barra de taxonomía rápida
   ========================================================== */
.icon-nav{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.icon-nav ul{
  display:flex; justify-content:space-evenly; align-items:center;
  max-width:var(--container); margin:0 auto; padding:.75rem 1.5rem;
  gap:.5rem;
}
.icon-nav a{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  min-width:44px; min-height:44px;
  justify-content:center;
  color:var(--ink-soft); font-size:.76rem;
  transition:color .2s var(--ease);
}
.icon-nav a:hover, .icon-nav a:focus-visible{ color:var(--ink); }
.icon-nav svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.3; }
.icon-nav-label{ white-space:nowrap; }

/* ==========================================================
   Secciones + encabezados
   ========================================================== */
.section-head{
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom:2rem;
}
.section-head h2{
  font-family:var(--font-accent); font-style:italic;
  font-size:clamp(1.9rem, 4vw, 2.6rem); color:var(--ink);
}
.section-rule{ flex:1; height:1px; background:var(--line); }

.catalog-section, .collection-section{
  max-width:var(--container); margin:0 auto;
  padding:4rem 1.5rem 1rem;
}
.collection-section{ padding-top:4.5rem; }

/* ==========================================================
   Módulo 3: Tabs (roving tabindex)
   ========================================================== */
.tablist{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:2.25rem;
  border-bottom:1px solid var(--line);
  padding-bottom:0;
}
.tablist [role="tab"]{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:.9rem; color:var(--ink-soft);
  padding:.7rem 1.1rem; border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom:2px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.tablist [role="tab"]:hover{ color:var(--ink); }
.tablist [role="tab"][aria-selected="true"]{
  color:var(--ink); border-bottom-color:var(--gold-deep);
}
.tablist [role="tab"]:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.tabpanel[hidden]{ display:none; }

/* ==========================================================
   Product grid — columnas fraccionales
   ========================================================== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:1.5rem; row-gap:2rem;
}
@media (min-width:640px){ .product-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:960px){ .product-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ==========================================================
   Product card
   ========================================================== */
.product-card{
  background:transparent; border:0; border-radius:0;
  overflow:hidden; display:flex; flex-direction:column;
  transition:opacity .25s var(--ease);
}
.product-photo{
  position:relative; display:block;
  background:var(--surface); aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--radius);
}
.product-photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.product-card:hover .product-photo img{ transform:scale(1.03); }
.product-info{
  display:flex; flex-direction:column; gap:.25rem;
  margin-top:.75rem; padding:0 .1rem;
}
.product-code{
  margin:0; font-weight:400; font-size:.7rem; letter-spacing:.04em;
  color:var(--ink-faint);
}
.product-name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
  margin:0; font-size:.92rem; color:var(--ink); min-height:2.4em;
}
.product-name:hover{ color:var(--gold-deep); }
.product-price{
  margin:0 0 .6rem; font-family:var(--font-accent); font-style:italic;
  color:var(--gold-deep); font-size:1.1rem;
}
.product-price .cur{ font-weight:500; margin-right:.08em; }
.buy-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; font-size:.76rem;
  font-weight:500; color:var(--ink); background:transparent;
  border:1px solid var(--line);
  padding:.6rem 1rem; border-radius:999px;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.buy-btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--night); }
.buy-btn:active{ transform:scale(.98); }
.buy-btn.is-added{ background:#3f6b46; border-color:#3f6b46; color:#fff; }

/* ==========================================================
   Módulo 5: Banner editorial split
   ========================================================== */
.editorial-banner{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 4vw, 3rem);
  align-items:center;
  max-width:var(--container); margin:4.5rem auto 4.5rem;
  padding:3.5rem 1.5rem;
  background:var(--night); color:#fff;
  border-radius:var(--radius);
}
.editorial-media{ overflow:hidden; border-radius:var(--radius); background:var(--night-2); }
.editorial-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
.editorial-content{ display:flex; flex-direction:column; gap:1.2rem; align-items:flex-start; }
.editorial-eyebrow{ margin:0; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.editorial-content h2{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  font-size:clamp(1.9rem, 4vw, 2.6rem); line-height:1.1;
}
.editorial-content p:not(.editorial-eyebrow){ margin:0; color:rgba(255,255,255,.78); line-height:1.6; }

/* ==========================================================
   Botones
   ========================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.7rem; border-radius:999px; font-size:.85rem; font-weight:500;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-gold{ background:var(--gold); color:var(--night); }
.btn-gold:hover{ background:var(--gold-deep); }
.btn-ghost{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-ghost-dark{ border-color:rgba(17,34,80,.3); color:var(--ink); }
.btn-ghost-dark:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer{
  background:var(--night-2); color:rgba(255,255,255,.75); text-align:center;
  padding:3.5rem 1.5rem 6.5rem;
}
.footer-mark{ margin:0 auto 1rem; border-radius:50%; }
.footer-brand{ font-family:var(--font-display); font-size:1.4rem; color:#fff; margin:0; }
.footer-brand em{ font-style:italic; font-family:var(--font-accent); color:var(--gold); }
.footer-tagline{ font-family:var(--font-accent); font-style:italic; margin:.4rem 0 1.4rem; color:rgba(255,255,255,.6); }
.footer-contact a:hover{ color:var(--gold); }
.footer-fine{ margin-top:1.6rem; font-size:.72rem; opacity:.55; }

/* ==========================================================
   WhatsApp floating button
   ========================================================== */
.whatsapp-fab{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:90;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .18s var(--ease);
}
.whatsapp-fab:hover{ transform:scale(1.06); }
.whatsapp-fab:active{ transform:scale(.96); }

/* ==========================================================
   Carrito (drawer lateral)
   ========================================================== */
.cart-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(11,22,51,.5); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .25s var(--ease);
}
.cart-overlay.show{ opacity:1; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:210;
  width:min(420px, 100vw); background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column;
  transform:translateX(105%); transition:transform .35s var(--ease);
  box-shadow:-12px 0 40px rgba(17,34,80,.14);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.5rem; border-bottom:1px solid var(--line);
}
.cart-header h2{ font-family:var(--font-accent); font-style:italic; font-size:1.4rem; }
.cart-close{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); font-size:1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.cart-close:hover{ border-color:var(--gold); color:var(--gold-deep); }
.cart-items{ flex:1; overflow-y:auto; padding:1rem 1.5rem; display:flex; flex-direction:column; gap:.9rem; }
.cart-item{
  display:grid; grid-template-columns:64px 1fr auto; gap:.9rem; align-items:center;
  padding:.7rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg);
}
.cart-item img{ width:64px; height:64px; object-fit:cover; border-radius:var(--radius-sm); background:var(--surface); }
.cart-item-info{ min-width:0; }
.cart-item-name{ margin:0 0 .15rem; font-size:.82rem; font-weight:500; line-height:1.25; }
.cart-item-code{ margin:0 0 .35rem; font-size:.66rem; color:var(--ink-faint); }
.cart-item-price{ margin:0; font-size:.8rem; color:var(--gold-deep); font-weight:500; }
.cart-item-price .cur{ font-weight:600; margin-right:.08em; }
.cart-item-controls{ display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.qty-row{ display:flex; align-items:center; gap:.35rem; }
.qty-btn{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); font-size:.95rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.qty-btn:hover{ border-color:var(--gold); color:var(--gold-deep); }
.qty-val{ min-width:22px; text-align:center; font-size:.85rem; font-weight:500; }
.item-remove{
  background:none; border:0; color:var(--ink-faint); font-size:.72rem; cursor:pointer;
  text-decoration:underline; padding:0;
}
.item-remove:hover{ color:#a4433a; }
.cart-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; padding:2rem; text-align:center; }
.cart-empty[hidden]{ display:none; }
.cart-empty p{ color:var(--ink-soft); margin:0; }
.cart-footer{ padding:1.2rem 1.5rem 1.5rem; border-top:1px solid var(--line); background:var(--surface); }
.cart-footer[hidden]{ display:none; }
.cart-total-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.cart-total-row span{ font-size:.9rem; color:var(--ink-soft); }
.cart-total{ font-family:var(--font-accent); font-style:italic; font-size:1.5rem; color:var(--ink); }
.cart-total .cur{ font-weight:500; margin-right:.08em; }
.cart-items{ transition:opacity .2s var(--ease); }
.cart-items.fade-out{ opacity:0; }
.cart-footer.fade-out{ opacity:0; }
.cart-empty.fade-in{ animation:cartFadeIn .25s var(--ease); }
@keyframes cartFadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.cart-note{ margin:0 0 1rem; font-size:.72rem; color:var(--ink-faint); }
.cart-checkout{ width:100%; }
.cart-clear{
  display:block; margin:1rem auto 0; background:none; border:0; color:var(--ink-faint);
  font-size:.76rem; text-decoration:underline; cursor:pointer; padding:0;
}
.cart-clear:hover{ color:#a4433a; }

/* ==========================================================
   Página de detalle de producto
   ========================================================== */
.detail-wrap{ max-width:var(--container); margin:0 auto; padding:2.5rem 1.5rem 4rem; }
.detail-back{ display:inline-block; margin-bottom:1.5rem; font-size:.85rem; color:var(--ink-soft); }
.detail-back:hover{ color:var(--gold-deep); }
.detail-card{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start;
  background:var(--bg); border:0;
  padding:0;
}
.detail-card[hidden]{ display:none; }
.detail-photo{ background:var(--surface); border-radius:var(--radius); overflow:hidden; }
.detail-photo img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.detail-code{ margin:0 0 .4rem; font-weight:400; font-size:.74rem; color:var(--ink-faint); }
.detail-name{ font-family:var(--font-accent); font-style:italic; font-size:clamp(1.8rem, 4vw, 2.5rem); color:var(--ink); margin-bottom:.5rem; }
.detail-price{ font-family:var(--font-accent); font-style:italic; font-size:1.9rem; color:var(--gold-deep); margin:0 0 .3rem; }
.detail-price .cur{ font-weight:500; margin-right:.08em; }
.detail-cat{ margin:0 0 1.6rem; font-size:.85rem; color:var(--ink-soft); }
.detail-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.2rem; }
.detail-note{ margin:0; font-size:.76rem; color:var(--ink-faint); }
.detail-error{ text-align:center; padding:4rem 1.5rem; }
.detail-error h2{ font-family:var(--font-accent); font-style:italic; font-size:1.7rem; margin-bottom:.6rem; }
.detail-error p{ color:var(--ink-soft); margin:0 0 1.5rem; }
@media (max-width: 720px){
  .detail-card{ grid-template-columns:1fr; }
}

/* ==========================================================
   Skeleton loading
   ========================================================== */
.skeleton-card{
  background:var(--bg); border:0; border-radius:var(--radius);
  overflow:hidden;
}
.skeleton-photo{
  aspect-ratio:1/1; background:linear-gradient(100deg, var(--surface) 40%, var(--surface-2) 50%, var(--surface) 60%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--radius);
}
.skeleton-line{
  height:12px; border-radius:6px; margin:.9rem .1rem 0;
  background:linear-gradient(100deg, var(--surface) 40%, var(--surface-2) 50%, var(--surface) 60%);
  background-size:200% 100%; animation:shimmer 1.4s infinite;
}
.skeleton-line.short{ width:55%; }
.skeleton-line.btn{ height:34px; border-radius:999px; margin-top:1rem; }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ==========================================================
   Error state
   ========================================================== */
.catalog-error{
  max-width:var(--container); margin:2rem auto; padding:3rem 1.5rem; text-align:center;
  background:var(--surface); border-radius:var(--radius);
}
.catalog-error h2{ font-family:var(--font-accent); font-style:italic; font-size:1.5rem; margin-bottom:.6rem; }
.catalog-error p{ color:var(--ink-soft); margin:0 0 1.4rem; }

/* ==========================================================
   Scroll reveal — un único fade sutil
   ========================================================== */
.reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:0ms !important;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 860px){
  .hero-split{ grid-template-columns:1fr; padding-top:2rem; }
  .editorial-banner{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .hero-media img{ aspect-ratio:16/10; }
  .carousel-track{ height:340px; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }