/* =====================================================================
   VIBRA URBANA — Navegacion movil, Visitanos, enlaces sociales
   ===================================================================== */

/* Barra inferior (solo celular/tablet) */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--color-bg); border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav a, .bottom-nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 58px; background: none; border: 0; color: var(--color-text-muted);
  font: 600 0.68rem/1 var(--font-body); position: relative;
}
.bottom-nav [aria-current="page"], .bottom-nav [aria-expanded="true"] { color: var(--color-text); }
.bottom-nav [aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
  background: var(--color-accent); border-radius: 0 0 3px 3px;
}
body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

/* Menu desplegable: baja desde la hamburguesa del encabezado */
.mobile-nav {
  top: var(--header-h); bottom: auto; max-height: calc(100svh - var(--header-h) - 58px); overflow-y: auto;
  border-top: 0; border-bottom: 1px solid var(--color-border);
  border-radius: 0 0 14px 14px; box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
.mobile-nav a { font-size: 1rem; }

/* WhatsApp flotante: solo en la ficha; sube para no tapar la barra */
.wa-float { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

/* Enlaces sociales */
.social-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.social-links a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-4);
  border: 1px solid var(--color-border); border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; color: var(--color-text);
}
.social-links a:hover { border-color: var(--color-accent); }
.site-footer__contact-btn--sec { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); margin-bottom: var(--space-4); }
.site-footer__column p a { text-decoration: underline 2px var(--color-accent); text-underline-offset: 3px; color: var(--color-text); font-weight: 700; }

/* Boton WhatsApp solido (verde 5:1 con texto blanco) */
.btn--wa { background: var(--color-wa); color: #fff; }
.btn--wa:hover { background: #166f35; }

/* Visitanos + confianza */
.visit { display: grid; gap: var(--space-5); padding-block: var(--space-7); }
.visit__card {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-5);
}
.visit__card h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-h1); margin: 0 0 var(--space-3); }
.visit__card p { margin: 0 0 var(--space-2); }
.visit__hours { color: var(--color-text-muted); }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.trust-list li { padding-left: var(--space-4); border-left: 3px solid var(--color-accent); }
.trust-list strong { display: block; font-size: 0.92rem; }
.trust-list span { font-size: 0.82rem; color: var(--color-text-muted); }
.section--tight { padding-top: 0; }
@media (min-width: 1024px) {
  .visit { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-7); }
}

/* Escritorio: sin barra inferior, WhatsApp flotante vuelve a su sitio */
@media (min-width: 1024px) {
  .bottom-nav { display: none; }
  body { padding-bottom: 0; }
  .mobile-nav { display: none !important; }
  .wa-float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* Banda gris: separa "Nuevos ingresos" de "Destacados" */
.band { background: var(--color-skeleton); border-block: 1px solid var(--color-border); }
.band .section { padding-block: var(--space-6); }
.band .product-card { box-shadow: 0 1px 0 rgba(0,0,0,.05); }

/* Como comprar (compacto, claro) */
.how { padding-block: var(--space-6); }
.how__steps { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.how__steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.how__num {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent);
  color: var(--color-accent-text); display: grid; place-items: center; font: 800 0.95rem var(--font-display);
}
.how__steps strong { display: block; font-size: 0.95rem; }
.how__steps span:not(.how__num) { font-size: 0.84rem; color: var(--color-text-muted); }
@media (min-width: 768px) { .how__steps { grid-template-columns: repeat(4, 1fr); } }

.site-header__menu-btn { margin-left: -8px; }
.site-header__menu-btn svg { display: block; }
.site-header__menu-btn [hidden] { display: none; }

/* Tarjeta: tallas disponibles */
.product-card__sizes { display: block; margin-top: 6px; font-size: 0.72rem; line-height: 1.3; color: var(--color-text-muted); font-weight: 600; }
.catalogo-vermas { display: flex; margin: var(--space-5) auto 0; }

/* Catalogo en celular: la barra de filtros se acomoda en filas (sin desborde) */
.catalogo-toolbar { position: relative; flex-wrap: wrap; }
.catalogo-toolbar__filtros { flex-wrap: wrap; }
.filtro-pop__swatch { border-color: rgba(0,0,0,.25); }
@media (max-width: 639px) {
  .catalogo-toolbar__filtros { width: 100%; }
  .catalogo-toolbar__count { width: 100%; }
  .catalogo-toolbar .filtro-pop { position: static; }
  .catalogo-toolbar .filtro-pop__panel { left: 0; right: 0; top: auto; margin-top: 8px; min-width: 0; }
  .filtro-pop__opciones { max-width: none; }
}

/* Ficha: guia de tallas, nota, compartir, similares */
.selector-block__guia { background: none; border: 0; padding: 0; font: inherit; font-size: 0.78rem; color: var(--color-text); text-decoration: underline 2px var(--color-accent); text-underline-offset: 3px; cursor: pointer; }
.selector-block__guia[hidden] { display: none; }
.producto-info__nota { margin: var(--space-3) 0 0; font-size: 0.8rem; color: var(--color-text-muted); }
.compartir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.compartir__label { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); margin-right: var(--space-1); }
.compartir__btn { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg-elevated); color: var(--color-text); font: 700 0.78rem var(--font-body); cursor: pointer; }
.compartir__btn:hover { border-color: var(--color-accent); }
.similares { padding-block: var(--space-6); }
.similares[hidden] { display: none; }
.guia-tallas { border: 0; border-radius: var(--radius-md); padding: var(--space-5); max-width: min(92vw, 420px); }
.guia-tallas::backdrop { background: rgba(0,0,0,.6); }
.guia-tallas h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); }
.guia-tallas p { margin: 0 0 var(--space-4); }

/* Carrito: pedido enviado */
.cart-sent { text-align: center; padding: var(--space-7) var(--space-4); border: 1px solid var(--color-border); border-left: 5px solid var(--color-wa); border-radius: var(--radius-md); background: var(--color-bg-card); }
.cart-sent[hidden] { display: none; }
.cart-sent strong { display: block; font: 800 1.3rem var(--font-display); margin-bottom: var(--space-2); }
.cart-sent p { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
.cart-sent .btn { margin-top: var(--space-2); }

/* Rejilla de tarjetas disponible en todas las paginas (ficha: productos similares) */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

/* Carrito: lo oculto debe quedar oculto; aviso sobre la barra inferior; sin flecha "atras" junto a la hamburguesa */
.cart-list[hidden], .cart-summary[hidden], [data-cart-vacio][hidden] { display: none; }
.toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 1023px) { .producto-header__back { display: none; } }
@media (min-width: 1024px) { .toast { bottom: 24px; } }
body .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 1023px) { .site-header .producto-header__back { display: none; } }
@media (min-width: 1024px) { body .toast { bottom: 24px; } }