/* ============================================================
   TIMBÓ — Atelier de diseño y objetos para el hogar
   Hoja de estilos principal (optimizada)

   Cambios de rendimiento (sin alterar el diseño):
   - Se reemplazó "transition: all" por propiedades específicas
     (menos trabajo de estilo/repintado en hover).
   - Color de fondo de respaldo en las slides del hero, para que
     no haya "parpadeo" mientras se cargan las diferidas.
   - Se evita el salto de layout en imágenes sin dimensiones
     mediante aspect-ratio / display:block.
   - Reglas duplicadas o sin efecto eliminadas.
   ============================================================ */

:root{
  /* Paleta real de marca (ver paleta TIMBÓ) */
  --hueso:      #F6F3EC;
  --arena:      #C9C0A0;
  --musgo:      #5C6449;
  --terracota:  #BC5B39;
  --humo:       #2A2A26;
  --azul:       #26507E;

  /* Roles */
  --bg:         var(--hueso);
  --bg-alt:     #EFEAE0;
  --ink:        var(--humo);
  --ink-soft:   #5B584F;
  --accent:     var(--terracota);
  --line:       rgba(42,42,38,0.14);
  --line-strong:rgba(42,42,38,0.28);

  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --container-max: 1320px;
  --radius-pill: 999px;
  --radius-soft: 2px;

  /* Altura aproximada del navbar fijo: se usa como offset de las anclas */
  --nav-offset: 96px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Las secciones con id son destino de los links del menú:
   este offset evita que el navbar fijo tape el título. */
section[id]{ scroll-margin-top:var(--nav-offset); }
#inicio{ scroll-margin-top:0; }

::selection{ background:var(--terracota); color:var(--hueso); }

h1,h2,h3,h4,
.font-display{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:0.01em;
  color:var(--ink);
  margin:0;
}

h1{ font-size:clamp(2.6rem, 5vw, 4.5rem); line-height:1.05; }
h2{ font-size:clamp(2rem, 3.4vw, 3rem); line-height:1.1; }
h3{ font-size:clamp(1.3rem, 1.8vw, 1.7rem); line-height:1.2; }

p{ color:var(--ink-soft); max-width:62ch; }

a{ color:inherit; text-decoration:none; }

.container-timbo{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 3rem);
}

.section{ padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-alt{ background:var(--bg-alt); }

.eyebrow{
  font-family:var(--font-body);
  font-size:0.8rem;
  letter-spacing:0.04em;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  display:inline-block;
}

.lede{ font-size:1.05rem; max-width:52ch; }

.btn{
  border-radius:var(--radius-pill);
  padding:.75rem 1.75rem;
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:0.01em;
  border:1px solid transparent;
  transition:transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:active{ transform:scale(0.97); }

.btn-timbo-primary{
  background:var(--ink);
  color:var(--hueso);
}
.btn-timbo-primary:hover{
  background:var(--accent);
  color:var(--hueso);
}

.btn-timbo-outline{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--ink);
}
.btn-timbo-outline:hover{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--hueso);
}

.btn-timbo-accent{
  background:var(--accent);
  color:var(--hueso);
}
.btn-timbo-accent:hover{
  background:var(--ink);
  color:var(--hueso);
}

.btn-sm-pill{
  border-radius:var(--radius-pill);
  padding:.4rem .9rem;
  font-size:.8rem;
}

/* ============================= NAVBAR ============================= */
.navbar-timbo{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:1040;
  padding-block:1.35rem;
  background:transparent;
  transition:background-color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.navbar-timbo.is-scrolled{
  background:rgba(246,243,236,0.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  padding-block:.85rem;
  border-color:var(--line);
}
.navbar-timbo .navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.brand-mark{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:0.02em;
}
.logo-img{ height:34px; width:auto; display:block; }

/* Logo del navbar: versión blanca sobre el hero, oscura al hacer scroll */
.brand-logo{ position:relative; display:inline-block; line-height:0; }
.brand-logo .logo-img{ transition:opacity .35s var(--ease); }
.brand-logo .logo-dark{
  position:absolute;
  top:0; left:0;
  opacity:0;
  pointer-events:none;
}
.navbar-timbo.is-scrolled .brand-logo .logo-light{ opacity:0; }
.navbar-timbo.is-scrolled .brand-logo .logo-dark{ opacity:1; }

.nav-links{
  display:flex;
  align-items:center;
  gap:2.1rem;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  font-size:.92rem;
  color:var(--ink);
  position:relative;
  padding-bottom:3px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--accent);
  transition:right .35s var(--ease);
}
.nav-links a:hover::after{ right:0; }

.nav-actions{ display:flex; align-items:center; gap:1rem; }

.cart-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cart-toggle:hover{ background:var(--ink); color:var(--hueso); border-color:var(--ink); }
.cart-count{
  position:absolute; top:-6px; right:-6px;
  background:var(--accent);
  color:var(--hueso);
  font-size:.68rem;
  min-width:19px; height:19px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.cart-count.d-none-count{ display:none; }

.navbar-toggler-timbo{
  border:1px solid var(--line-strong);
  border-radius:50%;
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent;
}

.offcanvas-nav .offcanvas-body a{
  display:block;
  padding:.9rem 0;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:1.4rem;
}

/* ============================= HERO ============================= */
.hero-carousel{
  height:100svh;
  min-height:560px;
  position:relative;
}
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{ height:100%; }
.hero-slide{
  position:relative;
  height:100%;
  width:100%;
  background-color:var(--humo); /* respaldo mientras cargan las slides diferidas */
  background-size:cover;
  background-position:center;
}
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,19,15,.15) 0%, rgba(20,19,15,.08) 45%, rgba(20,19,15,.55) 100%);
}
.hero-copy{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:clamp(2rem,6vw,5rem) clamp(1.25rem,4vw,3rem);
  z-index:2;
  color:var(--hueso);
  max-width:var(--container-max);
  margin-inline:auto;
}
.hero-copy .eyebrow{ color:var(--arena); }
.hero-copy .eyebrow::before{ background:var(--terracota); }
.hero-copy h1{ color:var(--hueso); max-width:14ch; }
.hero-copy p{ color:rgba(246,243,236,0.82); margin-top:1rem; }
.hero-actions{ margin-top:1.75rem; display:flex; gap:1rem; flex-wrap:wrap; }

.hero-carousel .carousel-indicators{
  margin-bottom:2.25rem;
}
.hero-carousel .carousel-indicators [data-bs-target]{
  width:8px; height:8px;
  border-radius:50%;
  background-color:rgba(246,243,236,0.5);
  border:none;
  opacity:1;
}
.hero-carousel .carousel-indicators .active{ background-color:var(--terracota); }

/* En mobile los indicadores se bajan al borde inferior
   y se despeja espacio en el copy. */
@media (max-width: 767px){
  .hero-carousel .carousel-indicators{ margin-bottom:.5rem; }
  .hero-copy{ padding-bottom:3.25rem; }
}

.scroll-cue{
  position:absolute;
  right:clamp(1.25rem,4vw,3rem);
  bottom:2.25rem;
  z-index:2;
  color:var(--hueso);
  writing-mode:vertical-rl;
  font-size:.78rem;
  letter-spacing:.15em;
  display:flex;
  align-items:center;
  gap:.6rem;
  opacity:.85;
}
.scroll-cue span.line{
  width:1px; height:40px; background:rgba(246,243,236,.6);
  display:inline-block;
}

/* ============================= PRESENTACIÓN ============================= */
.about-figure{
  position:relative;
  overflow:hidden;
}
.about-figure img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s var(--ease);
}
.about-figure:hover img{ transform:scale(1.04); }

.about-figure-frame{
  position:relative;
}

.stat-row{
  display:flex;
  gap:clamp(1.5rem,4vw,3.5rem);
  flex-wrap:wrap;
  margin-top:2.25rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.stat-item .num{
  font-family:var(--font-display);
  font-size:2.1rem;
  color:var(--accent);
  display:block;
}
.stat-item .label{
  font-size:.82rem;
  color:var(--ink-soft);
  max-width:16ch;
}

/* ============================= CATÁLOGO ============================= */
.catalog-header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:2.5rem;
}

.catalog-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.filter-pill{
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  border-radius:var(--radius-pill);
  padding:.55rem 1.3rem;
  font-size:.86rem;
  font-family:var(--font-body);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.filter-pill:hover{ border-color:var(--ink); }
.filter-pill.active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--hueso);
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:2.25rem 1.75rem;
}

.product-card{
  cursor:pointer;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.product-card.is-visible{ opacity:1; transform:translateY(0); }

.product-card-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--bg-alt);
  margin-bottom:1rem;
}
.product-card-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .9s var(--ease);
}
.product-card:hover .product-card-media img{ transform:scale(1.06); }

.badge-status{
  position:absolute;
  top:.9rem; left:.9rem;
  font-size:.7rem;
  letter-spacing:.03em;
  padding:.35rem .75rem;
  border-radius:var(--radius-pill);
  background:rgba(246,243,236,0.92);
  color:var(--ink);
  border:1px solid var(--line);
}
.badge-status.stock{ color:var(--musgo); }
.badge-status.pedido{ color:var(--accent); }
.badge-status.consultar{ color:var(--ink-soft); }

.badge-featured{
  position:absolute;
  top:.9rem; right:.9rem;
  font-size:.7rem;
  padding:.35rem .75rem;
  border-radius:var(--radius-pill);
  background:var(--accent);
  color:var(--hueso);
}

.product-card-body .cat{
  font-size:.75rem;
  color:var(--ink-soft);
  letter-spacing:.03em;
  display:block;
  margin-bottom:.25rem;
}
.product-card-body h3{ margin-bottom:.35rem; }
.product-card-body .price{
  font-family:var(--font-display);
  color:var(--accent);
  font-size:1.05rem;
}
.product-card-body .price.tbd{
  font-family:var(--font-body);
  color:var(--ink-soft);
  font-size:.85rem;
}

.product-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:.65rem;
}

.color-dots{ display:flex; gap:.3rem; }
.color-dot{
  width:12px; height:12px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  display:inline-block;
}

.empty-state{
  text-align:center;
  padding:4rem 1rem;
  color:var(--ink-soft);
  display:none;
}
.empty-state.is-visible{ display:block; }

/* ============================= MODAL PRODUCTO ============================= */
.modal-timbo .modal-content{
  background:var(--bg);
  border-radius:0;
  border:none;
}
.modal-timbo .modal-body{ padding:0; }
.pd-gallery-main{
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--bg-alt);
}
.pd-gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumbs{ display:flex; gap:.6rem; margin-top:.75rem; flex-wrap:wrap; }
.pd-thumbs img{
  width:64px; height:64px; object-fit:cover; cursor:pointer;
  border:1px solid var(--line); opacity:.7; transition:opacity .25s var(--ease), border-color .25s var(--ease);
}
.pd-thumbs img.active{ opacity:1; border-color:var(--ink); }

.pd-panel{ padding:clamp(1.5rem,3vw,3rem); }
.pd-category{ font-size:.8rem; color:var(--ink-soft); letter-spacing:.03em; }
.pd-price{ font-family:var(--font-display); font-size:1.6rem; color:var(--accent); margin-top:.4rem; }
.pd-desc{ margin-top:1.1rem; }

.pd-option-group{ margin-top:1.4rem; }
.pd-option-label{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:.6rem;
  display:flex;
  justify-content:space-between;
}
.pd-option-value{ color:var(--ink-soft); font-weight:400; }

.pd-swatches{ display:flex; flex-wrap:wrap; gap:.6rem; }
.swatch{
  width:34px; height:34px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  position:relative;
  box-shadow:0 0 0 1px var(--line);
}
.swatch.selected{ border-color:var(--ink); }
.swatch[data-color="hueso"]{ background:var(--hueso); }
.swatch[data-color="arena"]{ background:var(--arena); }
.swatch[data-color="musgo"]{ background:var(--musgo); }
.swatch[data-color="terracota"]{ background:var(--terracota); }
.swatch[data-color="humo"]{ background:var(--humo); }
.swatch[data-color="azul"]{ background:var(--azul); }

.pd-chip-group{ display:flex; flex-wrap:wrap; gap:.55rem; }
.pd-chip{
  border:1px solid var(--line-strong);
  background:transparent;
  border-radius:var(--radius-pill);
  padding:.45rem 1rem;
  font-size:.84rem;
  cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pd-chip.selected{ background:var(--ink); border-color:var(--ink); color:var(--hueso); }

.pd-meta-list{ margin-top:1.5rem; border-top:1px solid var(--line); padding-top:1.1rem; }
.pd-meta-list dt{ font-size:.78rem; color:var(--ink-soft); }
.pd-meta-list dd{ font-size:.92rem; margin-bottom:.7rem; }

.pd-qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.pd-qty button{
  width:38px; height:38px;
  background:transparent; border:none;
  font-size:1.1rem;
}
.pd-qty input{
  width:40px; text-align:center;
  border:none; background:transparent;
  font-family:var(--font-body); font-size:1rem;
}
.pd-qty input:focus{ outline:none; }

.pd-add-row{ display:flex; align-items:center; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }

.artisanal-note{
  margin-top:1.5rem;
  padding:1rem 1.2rem;
  background:var(--bg-alt);
  border-left:2px solid var(--accent);
  font-size:.88rem;
  color:var(--ink-soft);
}

/* ============================= ARTESANAL ============================= */
.craft-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.craft-item{
  background:var(--bg);
  padding:clamp(1.5rem,3vw,2.5rem);
}
.craft-item .num{
  font-family:var(--font-display);
  color:var(--accent);
  font-size:1.1rem;
  display:block;
  margin-bottom:.9rem;
}
@media (max-width: 767px){
  .craft-grid{ grid-template-columns:1fr; }
}

/* ============================= A PEDIDO / PERSONALIZACIÓN ============================= */
.custom-section{
  background:var(--humo);
  color:var(--hueso);
  position:relative;
  overflow:hidden;
}
.custom-section h2, .custom-section .eyebrow{ color:var(--hueso); }
.custom-section .eyebrow::before{ background:var(--terracota); }
.custom-section p{ color:rgba(246,243,236,.78); }
.custom-figure{ aspect-ratio:4/5; overflow:hidden; }
.custom-figure img{ width:100%; height:100%; object-fit:cover; display:block; }

.custom-list{ list-style:none; padding:0; margin:1.75rem 0; display:flex; flex-direction:column; gap:.9rem; }
.custom-list li{ display:flex; gap:.75rem; align-items:flex-start; }
.custom-list li i{ color:var(--terracota); margin-top:.25rem; }

/* ============================= STOCK LEGEND ============================= */
.stock-legend{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1.5rem; }
.stock-legend-item{ display:flex; align-items:center; gap:.55rem; font-size:.86rem; color:var(--ink-soft); }
.stock-dot{ width:10px; height:10px; border-radius:50%; }
.stock-dot.stock{ background:var(--musgo); }
.stock-dot.pedido{ background:var(--accent); }
.stock-dot.consultar{ background:var(--arena); }

/* ============================= GALERÍA ============================= */
.gallery-masonry{
  --gallery-gap: 0px;              /* 0 = imágenes pegadas, sin bordes. Subilo (ej. 4px) si querés una línea mínima */
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gallery-gap);
  overflow:hidden;                 /* recorta cualquier desborde del contenedor */
}

.gallery-masonry img{
  width:100%;
  height:100%;
  aspect-ratio:1 / 1;              /* mismo tamaño para todas (reserva el espacio antes de cargar: sin saltos de layout) */
  object-fit:cover;                /* llena la celda sin deformar */
  object-position:center;
  display:block;                   /* elimina el espacio fantasma bajo la imagen */
  background:var(--bg-alt);        /* color de respaldo mientras carga la imagen */
  border:0;
  border-radius:0;
  outline:0;
  transition:filter .6s var(--ease), opacity .6s var(--ease);
}

/* Hover: se atenúan las demás y la activa queda resaltada (sin escalar, así no se superpone) */
@media (hover:hover){
  .gallery-masonry:hover img{ filter:brightness(.7) saturate(.85); }
  .gallery-masonry:hover img:hover{ filter:none; }
}

/* Tablet: 2 columnas */
@media (max-width:900px){
  .gallery-masonry{ grid-template-columns:repeat(2, 1fr); }
}

/* Móvil: se mantienen 2 columnas, más compacto y con menos scroll */
@media (max-width:480px){
  .gallery-masonry img{ aspect-ratio:4 / 5; }
}

/* ============================= INTERIORISMO ============================= */
.interior-teaser{
  position:relative;
  overflow:hidden;
  min-height:420px;
  display:flex;
  align-items:center;
  background-color:var(--humo);
}
.interior-teaser img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.interior-teaser::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(42,42,38,.92) 0%, rgba(42,42,38,.55) 55%, rgba(42,42,38,.25) 100%);
}
.interior-teaser-copy{ position:relative; z-index:2; color:var(--hueso); padding:clamp(2rem,5vw,4rem); max-width:640px; }
.interior-teaser-copy h2{ color:var(--hueso); }
.interior-teaser-copy .eyebrow{ color:var(--arena); }
.interior-teaser-copy .eyebrow::before{ background:var(--terracota); }
.interior-teaser-copy p{ color:rgba(246,243,236,.8); }

/* ============================= FAQ ============================= */
.accordion-timbo .accordion-item{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
}
.accordion-timbo .accordion-button{
  background:transparent;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1.15rem;
  padding:1.4rem 0;
  box-shadow:none;
}
.accordion-timbo .accordion-button:not(.collapsed){ color:var(--accent); }
.accordion-timbo .accordion-button::after{ filter:none; }
.accordion-timbo .accordion-body{ padding:0 0 1.6rem; color:var(--ink-soft); }

/* ============================= CONTACTO ============================= */
.contact-card{
  border:1px solid var(--line);
  padding:2rem;
  height:100%;
}
.contact-card i{ color:var(--accent); font-size:1.3rem; margin-bottom:.9rem; display:inline-block; }
.social-row{ display:flex; gap:.75rem; margin-top:1.25rem; }
.social-pill{
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.social-pill:hover{ background:var(--ink); color:var(--hueso); border-color:var(--ink); }

/* ============================= FOOTER ============================= */
.footer-timbo{
  background:var(--humo);
  color:rgba(246,243,236,.85);
  padding-block:clamp(3.5rem,6vw,5.5rem) 2rem;
}
.footer-timbo h5{
  font-family:var(--font-display);
  color:var(--hueso);
  font-size:1.1rem;
  margin-bottom:1.1rem;
}
.footer-timbo a{ color:rgba(246,243,236,.7); }
.footer-timbo a:hover{ color:var(--terracota); }
.footer-timbo ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; font-size:.9rem; }
.footer-brand{ font-family:var(--font-display); font-size:1.6rem; color:var(--hueso); display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.footer-brand img{ height:40px; width:auto; display:block; }
.footer-bottom{
  border-top:1px solid rgba(246,243,236,.14);
  margin-top:3rem;
  padding-top:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  font-size:.82rem;
  color:rgba(246,243,236,.55);
}
.footer-bottom a{ color:rgba(246,243,236,.75); }

/* ============================= CARRITO OFFCANVAS ============================= */
.offcanvas-cart{ background:var(--bg); }
.offcanvas-cart .offcanvas-header{ border-bottom:1px solid var(--line); }
.offcanvas-cart .offcanvas-title{ font-family:var(--font-display); font-size:1.4rem; }

.cart-item{
  display:flex; gap:1rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line);
}
.cart-item img{ width:76px; height:76px; object-fit:cover; flex-shrink:0; }
.cart-item-info{ flex:1; }
.cart-item-info h4{ font-size:.95rem; font-family:var(--font-body); font-weight:600; margin-bottom:.15rem; }
.cart-item-variant{ font-size:.78rem; color:var(--ink-soft); }
.cart-item-price{ font-size:.85rem; color:var(--accent); margin-top:.3rem; }
.cart-item-row{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; }
.cart-remove{ background:none; border:none; color:var(--ink-soft); font-size:.78rem; text-decoration:underline; }

.cart-qty{ display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius-pill); }
.cart-qty button{ width:26px; height:26px; background:none; border:none; font-size:.9rem; }
.cart-qty span{ width:24px; text-align:center; font-size:.85rem; }

.cart-empty{ text-align:center; padding:3rem 1rem; color:var(--ink-soft); }
.cart-empty i{ font-size:2rem; color:var(--line-strong); margin-bottom:1rem; display:block; }

.cart-summary{ border-top:1px solid var(--line-strong); padding-top:1.25rem; margin-top:auto; }
.cart-summary .total-row{ display:flex; justify-content:space-between; font-family:var(--font-display); font-size:1.25rem; margin-bottom:1.1rem; }

/* ============================= REVEAL ON SCROLL ============================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============================= UTIL ============================= */
.divider-line{ height:1px; background:var(--line); border:none; margin:0; }
.text-accent{ color:var(--accent); }
.text-soft{ color:var(--ink-soft); }

@media (max-width: 991px){
  :root{ --nav-offset:80px; }
  .nav-links{ display:none; }
  .craft-grid{ grid-template-columns:1fr 1fr; }
}

/* ============================= CONDICIONES DE COMPRA (detalle del producto) ============================= */
.purchase-benefits{
  list-style:none;
  margin:1.1rem 0 0;
  padding:.95rem .5rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.4rem;
  background:var(--bg-alt);
  border:1px solid var(--line);
  font-size:.8rem;
}
.purchase-benefits li{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.35rem;
  padding-inline:.25rem;
  color:var(--ink-soft);
  line-height:1.25;
}
.purchase-benefits li + li{ border-left:1px solid var(--line); }
.purchase-benefits i{
  color:var(--accent);
  font-size:1.25rem;
  line-height:1;
}