/* Café Z — hoja de estilos principal
   Un solo archivo para todo el sitio. Inspirado en las líneas, el minimalismo
   y los efectos del sitio de referencia que mandó Nel (mismo lenguaje de
   topbar fino + subrayado animado + reveal al scroll), con la tipografía y
   la paleta propias de Café Z. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,400..600&family=Work+Sans:wght@400;500;600&display=swap');

@font-face{
  font-family:'Piola Bungee';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/piola-bungee.woff2') format('woff2');
}

:root{
  --bg:#FBF9F5;
  --ink:#241C17;
  --ink-soft:#7A6D5F;
  --line:#E9E1D4;
  --accent:#BB5247;
  --tag-bg:#F1E4D3;
  --tag-ink:#7A4B2A;
  --dark-bg:#3E3733;
  --dark-ink:#F3ECE1;
  --dark-ink-soft:#C9B9A8;
  --dark-accent:#E3937A;
  /* contenedor más ancho: en pantallas grandes/4K la página se sentía
     chica en el medio de mucho aire de sobra a los costados */
  --maxw:1600px;
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  height:100%;
  scrollbar-gutter:stable;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  margin:0;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif;
}
img{max-width:100%;}
a{color:inherit; text-decoration:none;}
main{flex:1 0 auto;}
/* Títulos en la misma familia que el menú (Work Sans), no en la serif —
   la serif italic queda reservada para los dos momentos "de marca": el
   hero grande y la franja roja de WhatsApp (ver más abajo). */
h1,h2,h3{font-family:'Work Sans', system-ui, sans-serif; font-weight:600; letter-spacing:-0.01em; margin:0;}
.hero h1,
.cta-band h2{font-family:'Fraunces', serif; font-weight:500; letter-spacing:normal;}

/* ---------- barra superior ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  padding:0.45rem 0;
  border-bottom:1px solid var(--line);
  transition:box-shadow 0.35s ease;
}
.topbar.scrolled{
  box-shadow:0 8px 24px -18px rgba(36,28,23,0.20);
}
/* el contenido de la barra se alinea con el mismo ancho de columna que
   el resto del sitio (--maxw): en pantallas normales esto no cambia nada
   (el padding lateral hace lo mismo de siempre), pero en pantallas muy
   grandes / 4K evita que el menú quede pegado al borde de la pantalla
   mientras el resto del contenido está centrado. */
.topbar-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 3vw;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.6rem 2rem;
}
.brand{display:flex; align-items:center; gap:0.6rem;}
.brand img{height:43px; display:block;}

nav.mainnav{margin-left:auto; display:flex; align-items:center; gap:1.6rem;}
nav.mainnav ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  align-items:center;
  gap:1.6rem;
  flex-wrap:wrap;
}
nav.mainnav a,
.dropdown-trigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  background:none;
  border:none;
  margin:0;
  padding:0.2rem 0;
  font-family:'Work Sans', system-ui, sans-serif;
  font-weight:500;
  color:var(--ink-soft);
  text-transform:uppercase;
  font-size:0.72rem;
  letter-spacing:0.09em;
  cursor:pointer;
  transition:color 0.25s ease;
}
nav.mainnav a::after,
.dropdown-trigger::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.3s ease;
}
nav.mainnav a:hover,
.dropdown-trigger:hover,
nav.mainnav a[aria-current="page"],
.dropdown-trigger[aria-current="true"]{color:var(--ink);}
nav.mainnav a:hover::after,
.dropdown-trigger:hover::after,
nav.mainnav a[aria-current="page"]::after,
.dropdown-trigger[aria-current="true"]::after{transform:scaleX(1);}
li.has-dropdown{position:relative;}

.dropdown-trigger .arrow-icon{width:10px; height:10px; flex:none; transform:rotate(90deg); transition:transform 0.25s ease;}
li.has-dropdown.open .dropdown-trigger .arrow-icon{transform:rotate(270deg);}

nav.mainnav .submenu{
  list-style:none;
  margin:0.9rem 0 0;
  padding:0.25rem;
  position:absolute;
  top:100%;
  left:0;
  width:200px;
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:0 24px 48px -22px rgba(36,28,23,0.22);
  display:grid;
  gap:0;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.22s ease, transform 0.22s ease;
  transform:translateY(-4px);
  z-index:30;
}
li.has-dropdown.open .submenu{opacity:1; transform:translateY(0); pointer-events:auto;}
.submenu li:not(:last-child){border-bottom:1px solid var(--line);}
nav.mainnav .submenu a{
  display:flex;
  width:100%;
  padding:0.65rem 0.8rem;
  font-size:0.68rem;
}
nav.mainnav .submenu a::after{display:none;}
nav.mainnav .submenu a:hover{color:var(--ink); background:#F5EFE3;}

/* ---------- carrito: ícono + contador en el menú ---------- */
.cart-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:0.3rem;
  margin:0;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color 0.25s ease;
}
.cart-btn:hover{color:var(--ink);}
.cart-btn svg{width:19px; height:19px;}
.cart-badge{
  position:absolute;
  top:-3px; right:-5px;
  min-width:16px; height:16px; padding:0 3px;
  border-radius:999px;
  background:var(--accent);
  color:#FBF9F5;
  font-size:0.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}
/* mismo motivo que .product-card[hidden] más abajo: display:flex explícito
   le gana al display:none de [hidden] si no lo reforzamos acá. */
.cart-badge[hidden]{display:none;}

/* ---------- carrito: panel lateral ---------- */
.cart-overlay{
  position:fixed; inset:0; z-index:90;
  background:rgba(24,17,12,0.5);
  opacity:0;
  transition:opacity 0.25s ease;
}
.cart-overlay.open{opacity:1;}
.cart-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 100vw);
  background:var(--bg);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.3s cubic-bezier(.2,.7,.2,1);
  box-shadow:-24px 0 48px -24px rgba(36,28,23,0.35);
}
.cart-overlay.open .cart-panel{transform:translateX(0);}
@media (prefers-reduced-motion: reduce){
  .cart-overlay,.cart-panel{transition:none;}
}
.cart-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 1.6rem;
  border-bottom:1px solid var(--line);
  flex:none;
}
.cart-panel-head h2{font-size:1.15rem;}
.cart-panel-close{
  background:none; border:none; cursor:pointer;
  font-size:1.6rem; line-height:1; color:var(--ink-soft); padding:0.2rem;
}
.cart-panel-close:hover{color:var(--ink);}
.cart-panel-body{flex:1; overflow-y:auto; padding:1rem 1.6rem;}
.cart-empty{color:var(--ink-soft); font-size:0.92rem; padding:2rem 0; text-align:center;}
.cart-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.1rem 0; border-bottom:1px solid var(--line);
}
.cart-item-info h4{font-size:0.94rem; font-weight:600; margin-bottom:0.2rem;}
.cart-item-info p{margin:0 0 0.6rem; font-size:0.8rem; color:var(--ink-soft);}
.cart-item-qty{display:inline-flex; align-items:center; gap:0.6rem; border:1px solid var(--line); border-radius:999px; padding:0.2rem 0.4rem;}
.cart-qty-btn{
  width:20px; height:20px; border-radius:50%; border:none; background:none;
  font-size:0.9rem; line-height:1; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.cart-qty-btn:hover{background:var(--line);}
.cart-item-side{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:0.5rem; flex:none;}
.cart-item-price{font-size:0.9rem; font-weight:600;}
.cart-item-remove{
  background:none; border:none; padding:0; cursor:pointer;
  font-size:0.72rem; color:var(--ink-soft); text-decoration:underline;
}
.cart-item-remove:hover{color:var(--accent);}
.cart-panel-footer{
  flex:none; padding:1.2rem 1.6rem 1.5rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:0.9rem;
}
.cart-panel-footer[hidden]{display:none;}
.cart-total-row{display:flex; align-items:baseline; justify-content:space-between; font-size:0.98rem;}
.cart-total-row strong{font-size:1.2rem;}
.cart-panel-footer .btn{width:100%;}
.cart-clear-link{
  background:none; border:none; padding:0; cursor:pointer;
  font-size:0.78rem; color:var(--ink-soft); text-decoration:underline; align-self:center;
}
.cart-clear-link:hover{color:var(--accent);}

/* ---------- botones (sin pegada IA: rectos, chatos, sin sombra) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.78rem 1.6rem;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  font-family:'Work Sans', system-ui, sans-serif;
  font-weight:500;
  font-size:0.76rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:background 0.25s ease, color 0.25s ease;
  cursor:pointer;
}
.btn:hover{background:var(--ink); color:var(--bg);}
.btn.on-dark{border-color:var(--dark-ink); color:var(--dark-ink);}
.btn.on-dark:hover{background:var(--dark-ink); color:var(--dark-bg);}
.btn.small{padding:0.55rem 1.1rem; font-size:0.68rem;}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-size:0.82rem;
  font-weight:600;
  color:var(--accent);
  position:relative;
}
.text-link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--accent);
  transform:scaleX(1);
  transition:transform 0.25s ease;
}
.text-link:hover::after{transform:scaleX(0.4);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:74vh;
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center;
  padding:4rem 0;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(24,17,12,0.08) 0%, rgba(24,17,12,0.62) 100%);
}
/* la imagen del hero sigue a sangre completa (ancho total de la pantalla);
   el texto de arriba se alinea con la misma columna que el resto del
   sitio, igual que se hizo en .topbar-inner más arriba. */
.hero-wrap{position:relative; max-width:var(--maxw); margin:0 auto; padding:0 3vw; width:100%;}
.hero-inner{position:relative; max-width:640px; color:#FBF9F5;}
.hero-eyebrow{
  font-size:0.74rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:#F0C6A6; margin-bottom:1rem;
}
.hero h1{font-style:italic; font-size:clamp(2.2rem, 4.4vw, 3.4rem); line-height:1.08; color:#FBF9F5; margin-bottom:1.1rem;}
.hero p{font-size:1.05rem; line-height:1.6; max-width:460px; color:#F1EAE0; margin:0 0 1.8rem;}
.hero .hero-cta{font-size:1.05rem; gap:0.55rem;}
.hero.short{min-height:46vh;}
.hero.short h1{font-size:clamp(2rem, 3.6vw, 2.8rem);}

/* ---------- grilla de productos ---------- */
.products{padding:5rem 3vw; max-width:var(--maxw); margin:0 auto;}
.products-head{max-width:900px; margin:0 auto 3rem; text-align:center;}
.eyebrow{font-size:0.74rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:0.8rem;}
/* una sola línea siempre, de mobile a 4K: el tamaño de letra escala con el
   viewport pero el contenedor tiene ancho de sobra para que el texto no
   tenga que partirse en dos renglones en ningún tamaño de pantalla. */
.products-head h2{font-size:clamp(1.25rem, 3.6vw, 2.2rem); margin-bottom:0.9rem; white-space:nowrap;}
.products-head p{color:var(--ink-soft); font-size:1rem; line-height:1.65; margin:0;}

.product-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2.6rem;}

/* ---------- Tienda: catálogo único con filtro lateral ---------- */
.tienda-layout{max-width:var(--maxw); margin:0 auto; padding:1rem 3vw 5rem; display:flex; align-items:flex-start; gap:3rem;}
.tienda-filters{flex:0 0 168px; width:168px; position:sticky; top:88px;}
.filter-group{margin-bottom:2rem;}
.filter-group h3{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:0.9rem;}
.filter-check{display:flex; align-items:center; gap:0.55rem; font-size:0.88rem; padding:0.35rem 0; cursor:pointer; user-select:none;}
.filter-check input{width:15px; height:15px; accent-color:var(--ink); cursor:pointer; flex:none;}
.sort-select{
  width:100%;
  padding:0.6rem 0.7rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.84rem;
  cursor:pointer;
}
.sort-select:focus{outline:1px solid var(--ink);}
.tienda-products{flex:1; min-width:0;}
.filter-empty{text-align:center; color:var(--ink-soft); font-size:0.94rem; padding:2.5rem 0;}

/* en la Tienda (catálogo completo) las fotos se sentían muy grandes:
   tres columnas más angostas (la columna de filtros les resta ancho),
   con textos y tarjetas algo más chicos. La grilla de 4 productos de
   la Home queda como estaba (2 por fila, sin filtro al lado). */
.tienda-products .product-grid{
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.5rem;
}
.tienda-products .product-grid .product-body{padding:1.2rem 1.3rem 1.5rem; gap:0.55rem;}
.tienda-products .product-grid .product-body h3{font-size:1.05rem;}
.tienda-products .product-grid .tag{font-size:0.6rem; padding:0.24rem 0.55rem;}
.tienda-products .product-grid .note{font-size:0.82rem;}
.tienda-products .product-grid .price{font-size:0.92rem;}
.product-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow 0.3s ease, transform 0.3s ease;
}
/* el atributo HTML "hidden" no alcanza para ocultar la tarjeta: como
   .product-card ya define su propio "display:flex", esa regla (con más
   especificidad) gana por sobre el "display:none" del navegador para
   [hidden]. Sin esta línea, el filtro tilda/destilda las casillas pero
   las tarjetas nunca se ocultan de verdad. */
.product-card[hidden]{display:none;}
.product-card:hover{box-shadow:0 20px 40px -28px rgba(36,28,23,0.28); transform:translateY(-2px);}
.product-card .thumb{aspect-ratio:4/3.1; overflow:hidden; background:var(--line);}
.product-card .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .thumb img{transform:scale(1.03);}
.product-body{padding:1.8rem 2rem 2.2rem; display:flex; flex-direction:column; gap:0.9rem; flex:1;}
.tag{
  align-self:flex-start;
  background:var(--tag-bg); color:var(--tag-ink);
  font-size:0.66rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.3rem 0.75rem;
  border-radius:999px;
}
.product-body h3{font-size:1.35rem;}
.product-body .note{font-style:italic; color:var(--ink-soft); font-size:0.9rem; margin:0;}
.product-row{display:flex; align-items:baseline; justify-content:space-between; margin-top:auto; padding-top:0.4rem;}
.price{font-size:1.05rem; font-weight:600;}
.weight{font-size:0.82rem; color:var(--ink-soft);}

/* ---------- página de producto ---------- */
.product-detail{padding:1rem 3vw 5rem; max-width:var(--maxw); margin:0 auto;}
.product-detail .wrap{display:flex; gap:4rem; flex-wrap:wrap; align-items:flex-start;}
.pd-media{flex:1 1 380px; min-width:0; max-width:520px;}
.pd-media img{width:100%; aspect-ratio:4/3.4; object-fit:cover; border-radius:22px; display:block; background:var(--line);}
.pd-info{flex:1 1 360px; min-width:0; max-width:480px;}
.pd-info h1{font-size:1.9rem; margin:0.6rem 0 0.7rem;}
.pd-info .note{font-style:italic; color:var(--ink-soft); font-size:0.98rem; margin:0 0 1rem;}
.pd-price{font-size:1.5rem; font-weight:600; margin-bottom:1.8rem;}
.pd-field{margin-bottom:1.6rem;}
.pd-field h3{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:0.8rem;}
.pd-weight-options{display:flex; gap:0.6rem; flex-wrap:wrap;}
.pd-option{
  padding:0.55rem 1.2rem;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:0.86rem; font-weight:500;
  border-radius:999px;
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.pd-option:hover{border-color:var(--ink);}
.pd-option[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg);}
.pd-qty{display:inline-flex; align-items:center; gap:1rem; border:1px solid var(--line); border-radius:999px; padding:0.4rem 0.6rem;}
.pd-qty button{
  width:30px; height:30px; border-radius:50%; border:none; background:none;
  font-size:1.1rem; line-height:1; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.pd-qty button:hover{background:var(--line);}
.pd-qty span{min-width:1.2rem; text-align:center; font-size:0.96rem;}
.pd-added-msg{margin-top:0.9rem; font-size:0.86rem; color:var(--ink-soft);}
.pd-added-msg a{color:var(--accent); font-weight:600; text-decoration:underline;}
.pd-specs{margin-top:2.2rem; padding-top:2rem; border-top:1px solid var(--line);}
.pd-specs h3{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:1rem;}

/* ---------- secciones de texto (Nosotros, Contacto) ---------- */
.section-title{padding:4.2rem 3vw 1.4rem; max-width:var(--maxw); margin:0 auto;}
.section-title h1{font-size:clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom:0.7rem;}
.section-title p.lede{max-width:56ch; color:var(--ink-soft); font-size:1rem; line-height:1.6; margin:0;}

.text-block{padding:3.4rem 3vw 2.2rem; max-width:var(--maxw); margin:0 auto; display:flex; gap:4.5rem; flex-wrap:wrap;}
.text-block .col{flex:1 1 320px; min-width:0;}
.text-block h2{font-size:1.4rem; margin-bottom:1rem;}
.text-block p{font-size:1rem; line-height:1.75; color:#4B3F35; margin:0 0 1rem;}
.spec-list{list-style:none; margin:0; padding:0; display:grid; gap:0.6rem;}
.spec-list li{display:flex; justify-content:space-between; gap:1rem; font-size:0.92rem; padding:0.55rem 0; border-bottom:1px solid var(--line);}
.spec-list span:first-child{color:var(--ink-soft);}

.dark-band{background:var(--dark-bg); color:var(--dark-ink); padding:4.5rem 0;}
.dark-band .wrap{max-width:var(--maxw); margin:0 auto; padding:0 3vw; display:flex; gap:4rem; flex-wrap:wrap; align-items:center;}
.dark-band img{flex:1 1 380px; width:100%; max-width:460px; height:400px; object-fit:cover; border-radius:22px;}
.dark-band .col{flex:1 1 320px; min-width:0;}
.dark-band .eyebrow{color:var(--dark-accent);}
.dark-band h2{color:var(--dark-ink); font-size:1.6rem; margin-bottom:1rem;}
.dark-band p{color:var(--dark-ink-soft); font-size:0.98rem; line-height:1.75; margin:0 0 1.2rem;}
.dark-band .text-link{color:var(--dark-accent);}
.dark-band .text-link::after{background:var(--dark-accent);}

/* ---------- galería ---------- */
.gallery{padding:4.5rem 3vw; max-width:var(--maxw); margin:0 auto;}
.gallery h2{text-align:center; font-size:1.5rem; margin-bottom:2.2rem;}
.gallery-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
.gallery-grid img{width:100%; height:220px; object-fit:cover; display:block; cursor:pointer; border-radius:14px; transition:transform 0.6s cubic-bezier(.2,.7,.2,1), filter 0.6s ease;}
.gallery-grid img:hover{transform:scale(1.02); filter:brightness(1.03);}
.gallery-grid img:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

/* ---------- CTA de contacto/whatsapp ---------- */
.cta-band{background:var(--accent); color:#FBF9F5; padding:3.6rem 0;}
.cta-band .wrap{max-width:var(--maxw); margin:0 auto; padding:0 3vw; display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap;}
.cta-band h2{color:#FBF9F5; font-style:italic; font-size:1.7rem; margin-bottom:0.5rem;}
.cta-band p{margin:0; color:#FFFFFF; font-size:0.95rem;}
.cta-band .side{text-align:right;}

/* ---------- Contacto: pasos fusionados en las tarjetas de info ----------
   cada tarjeta es un paso del proceso: el número, el título y el detalle
   viven todos dentro de la misma tarjeta (antes el número estaba en una
   fila separada arriba, sin relación visual directa con la info). */
.info-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.6rem; max-width:var(--maxw); margin:0 auto; padding:3.4rem 3vw 4rem;}
.info-card{border:1px solid var(--line); border-radius:20px; padding:1.9rem 2rem 2.1rem;}
.step-num{
  flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--accent); color:#FBF9F5;
  display:flex; align-items:center; justify-content:center;
  font-family:'Work Sans', system-ui, sans-serif; font-weight:600; font-size:0.92rem;
  margin-bottom:1.1rem;
}
.info-card h3{font-size:1.05rem; font-weight:600; letter-spacing:normal; text-transform:none; margin-bottom:0.5rem; color:var(--ink);}
.info-card > p{font-size:0.92rem; line-height:1.6; color:var(--ink-soft); margin:0 0 1.1rem;}
.info-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:0.5rem; font-size:0.88rem; color:#4B3F35;}
.map-link{margin-top:0.9rem; display:inline-block;}

/* nota de ventas mayoristas: vive en la página de Contacto, en la zona
   blanca (sin franjas oscuras), justo antes del pie de página. Tratada
   como tarjeta destacada para que combine con las .info-card de arriba. */
.mayorista-note{max-width:var(--maxw); margin:0 auto; padding:0 3vw 5rem;}
.mayorista-note .wrap{
  max-width:640px; margin:0 auto; text-align:center;
  background:var(--tag-bg); border-radius:20px; padding:2.4rem 2.6rem;
}
.mayorista-note h3{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.8rem; color:var(--tag-ink);}
.mayorista-note p{color:#4B3F35; font-size:0.96rem; line-height:1.65; margin:0 0 1rem;}

/* enlace "volver al sitio" — usado arriba del título en páginas que no
   forman parte de la navegación principal (Privacidad). */
.back-link{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.76rem; font-weight:600; letter-spacing:0.03em;
  color:var(--ink-soft); margin-bottom:1.4rem;
  transition:color 0.2s ease;
}
.back-link:hover{color:var(--ink);}

/* ---------- página de privacidad (texto legal + índice lateral) ---------- */
.legal-layout{max-width:var(--maxw); margin:0 auto; padding:0.5rem 3vw 5rem; display:flex; align-items:flex-start; gap:3.5rem;}
.legal-nav{flex:0 0 190px; width:190px; position:sticky; top:88px;}
.legal-nav h3{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:0.9rem;}
.legal-nav ul{list-style:none; margin:0; padding:0; display:grid; gap:0.6rem;}
.legal-nav a{font-size:0.86rem; color:var(--ink-soft); line-height:1.4;}
.legal-nav a:hover{color:var(--ink);}
.legal{flex:1; min-width:0; max-width:68ch;}
.legal h2{font-size:1.15rem; margin:2.4rem 0 0.8rem; scroll-margin-top:96px;}
.legal h2:first-child{margin-top:0;}
.legal p{color:#4B3F35; font-size:0.98rem; line-height:1.75; margin:0 0 1rem;}
.legal ul{margin:0 0 1rem; padding-left:1.3rem; display:grid; gap:0.4rem;}
.legal li{color:#4B3F35; font-size:0.98rem; line-height:1.65;}
.legal .updated{color:var(--ink-soft); font-size:0.84rem; margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--line);}

/* ---------- reveal al scroll ----------
   Oculto solo cuando el JS confirma que puede animarlo (clase "js" en
   <html>, agregada por un script inline en el <head>): si el script.js de
   más abajo no llega a cargar por lo que sea, el contenido queda visible
   de una, nunca escondido para siempre en opacity:0. */
.js .reveal{opacity:0; transform:translateY(16px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* ---------- pie de página ---------- */
footer.site-footer{border-top:1px solid var(--line); padding:2.6rem 0 1.4rem;}
footer.site-footer .wrap{max-width:var(--maxw); margin:0 auto; padding:0 3vw; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.4rem;}
footer.site-footer .brand-col img{height:32px; margin-bottom:1rem; display:block;}
footer.site-footer .brand-col p{font-size:0.86rem; color:var(--ink-soft); max-width:260px; margin:0;}
footer.site-footer h4{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.9rem; color:var(--ink);}
footer.site-footer .links{display:flex; flex-direction:column; gap:0.55rem; font-size:0.86rem; color:var(--ink-soft);}
footer.site-footer .links a:hover{color:var(--ink);}
.social-links{display:flex; gap:0.7rem; margin-top:0.9rem;}
.social-links a{color:var(--ink-soft); display:inline-flex; transition:color 0.2s ease;}
.social-links a:hover{color:var(--ink);}
.foot-bottom{
  max-width:var(--maxw); margin:0 auto;
  padding:1.2rem 3vw 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  font-size:0.78rem; color:var(--ink-soft);
}

/* crédito Sitio Piola — no tocar salvo para traducir el texto del span */
.piola-credit{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Piola Bungee', system-ui, sans-serif;
  font-size:10px; letter-spacing:.02em; text-transform:uppercase;
  color:inherit; text-decoration:none;
  opacity:.7; transition:opacity .2s ease;
}
.piola-credit:hover{opacity:1;}
.piola-credit svg{width:15px; height:auto; flex:none; color:#c6ff3d;}

.foot-right{display:flex; align-items:center; gap:1.4rem;}
.privacy-link{font-size:0.78rem; color:var(--ink-soft); transition:color 0.2s ease;}
.privacy-link:hover,
.privacy-link[aria-current="page"]{color:var(--ink);}

/* ---------- lightbox de la galería (Nosotros) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:80;
  background:rgba(24,17,12,0.92);
  display:flex; align-items:center; justify-content:center;
  padding:5vh 5vw;
  cursor:zoom-out;
}
.lightbox[hidden]{display:none;}
.lightbox img{
  max-width:100%; max-height:100%;
  border-radius:14px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.55);
  cursor:default;
}
.lightbox-close{
  position:fixed; top:20px; right:22px; z-index:81;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(0,0,0,0.25);
  color:#FBF9F5;
  font-size:1.7rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background 0.2s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,0.18);}

/* ---------- botón flotante de WhatsApp ---------- */
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:40;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px -8px rgba(20,60,40,0.45);
}
.whatsapp-float svg{width:26px; height:26px;}
.whatsapp-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid #25D366;
  opacity:0.55;
  animation:wa-pulse 2.8s ease-out infinite;
}
@keyframes wa-pulse{
  0%{transform:scale(1); opacity:0.5;}
  100%{transform:scale(1.85); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float::before{animation:none; display:none;}
}
@media (max-width:780px){
  .whatsapp-float{right:16px; bottom:16px; width:52px; height:52px;}
}

@media (max-width:1100px){
  .tienda-products .product-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .info-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 900px){
  .product-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2, 1fr);}
  footer.site-footer .wrap{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .tienda-layout{flex-direction:column; gap:0.4rem;}
  .tienda-filters{position:static; width:100%; flex:none; display:flex; gap:2.5rem; flex-wrap:wrap; padding-bottom:1.6rem; margin-bottom:1.4rem; border-bottom:1px solid var(--line);}
  .filter-group{margin-bottom:0;}
  .tienda-products .product-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .legal-layout{flex-direction:column; gap:0.4rem;}
  .legal-nav{position:static; width:100%; flex:none; padding-bottom:1.4rem; margin-bottom:0.6rem; border-bottom:1px solid var(--line);}
  .legal-nav ul{display:flex; flex-wrap:wrap; gap:0.5rem 1.4rem;}
}
@media (max-width:600px){
  .tienda-products .product-grid{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr; gap:1.4rem;}
}
@media (max-width:400px){
  .products-head h2{font-size:1.05rem;}
}
@media (max-width: 780px){
  .topbar{padding:0.5rem 0;}
  .topbar-inner{padding:0 1.2rem;}
  nav.mainnav ul{gap:1.1rem;}
  .hero-wrap{padding-left:1.2rem; padding-right:1.2rem;}
  .products,.text-block,.gallery,.mayorista-note,.tienda-layout,.product-detail{padding-left:1.2rem; padding-right:1.2rem;}
  .dark-band .wrap,.cta-band .wrap{padding-left:1.2rem; padding-right:1.2rem;}
  .section-title,.legal-layout,.info-grid{padding-left:1.2rem; padding-right:1.2rem;}
  .dark-band .wrap{flex-direction:column;}
  .dark-band img{max-width:100%; height:280px;}
  footer.site-footer{padding:2.2rem 0 1.2rem;}
  footer.site-footer .wrap{grid-template-columns:1fr 1fr; gap:2rem; padding-left:1.2rem; padding-right:1.2rem;}
  .foot-bottom{padding-left:1.2rem; padding-right:1.2rem;}
}