/* =========================================================
   FAST NUTRITION — Hoja de estilos principal
   Direccion: HARDCORE AMERICANO (Redcon1 / Ghost / military)
   Negro + rojo alto contraste, tipografia ultra-condensada,
   texturas rasgadas, badges tipo sello militar.
   ========================================================= */

:root {
  --negro: #0a0a0a;
  --negro-suave: #131313;
  --carbon: #1c1c1c;
  --carbon-claro: #292929;
  --blanco: #fafafa;
  --rojo: #e0121f;
  --rojo-oscuro: #9c0a14;
  --dorado: #c9a227;
  --dorado-claro: #e6c75a;
  --gris-texto: #6b6b6b;
  --gris-claro: #9a9a92;
  --gris-borde: #d9d6cc;
  --crema: #efece2;

  --fuente-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif;
  --fuente-cuerpo: 'Barlow', 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --radio: 3px;
  --sombra: 0 14px 34px rgba(0, 0, 0, 0.35);
  --contenedor: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

/* Móvil: evita el zoom por doble-tap al clickear rápido (mantiene el pinch-zoom) */
a, button, .boton, input, select, textarea, label, .cd-qty__btn, .cantidad-btn, .selector-sabores button, .miniaturas button {
  touch-action: manipulation;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-weight: 500;
  color: var(--negro);
  background: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
  margin: 0 0 0.5em;
  line-height: 0.98;
}

p { margin: 0 0 1em; }

.contenedor {
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- Badge tipo sello militar ---------- */
.sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fuente-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1.5px solid currentColor;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  font-weight: 400;
  padding: 15px 30px 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.boton:active { transform: scale(0.97); }

.boton-rojo {
  background: var(--rojo);
  color: var(--blanco);
}
.boton-rojo:hover { background: var(--rojo-oscuro); }

.boton-contorno {
  background: transparent;
  border-color: var(--blanco);
  color: var(--blanco);
}
.boton-contorno:hover { background: var(--blanco); color: var(--negro); }

.boton-contorno-oscuro {
  background: transparent;
  border-color: var(--negro);
  color: var(--negro);
}
.boton-contorno-oscuro:hover { background: var(--negro); color: var(--blanco); }

.boton-dorado {
  background: var(--dorado);
  color: var(--negro);
}
.boton-dorado:hover { background: var(--dorado-claro); }

.boton-bloque { width: 100%; justify-content: center; }

/* ---------- Cenefa (marquee de anuncios sobre el header) ---------- */
.cenefa {
  background: #242424;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--fuente-cuerpo);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cenefa__track {
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  animation: cenefaScroll 90s linear infinite;
  will-change: transform;
}
.cenefa__item { display: inline-flex; align-items: center; gap: 9px; padding: 0 40px; }
.cenefa__ico { display: inline-flex; }
.cenefa__ico svg { width: 16px; height: 16px; display: block; }
@keyframes cenefaScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.cenefa:hover .cenefa__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cenefa__track { animation: none; }
}

/* ---------- Header ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--negro);
  border-bottom: 3px solid var(--rojo);
}
.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.cabecera__logo img { height: 44px; }
.cabecera__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.cabecera__nav a {
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.15s, color 0.15s;
  position: relative;
}
.cabecera__nav a:hover { opacity: 1; color: var(--rojo); }
.cabecera__acciones { display: flex; align-items: center; gap: 12px; }
.cabecera__movil { display: none; align-items: center; gap: 16px; }

/* ---------- Login desplegable (dropdown en el header) ---------- */
.login-desplegable { position: relative; }
.login-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 310px;
  max-width: 86vw;
  background: var(--blanco);
  color: var(--negro);
  border: 1px solid var(--gris-borde);
  border-top: 3px solid var(--rojo);
  box-shadow: var(--sombra);
  padding: 22px 20px;
  z-index: 300;
  text-align: left;
  cursor: default;
}
.login-panel .campo { margin-bottom: 14px; }
.login-panel .campo label { font-size: 12px; }
.login-panel__errores { margin-bottom: 14px; }
.login-panel__pie {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--gris-texto);
  text-align: center;
}
.login-panel__pie a { color: var(--rojo); font-weight: 500; text-transform: none; white-space: nowrap; }

@media (max-width: 880px) {
  .login-desplegable { width: 100%; }
  .login-panel {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    box-shadow: none;
  }
}

/* ---------- Menú "Mi cuenta" (cliente logueado) ---------- */
.cuenta-desplegable { position: relative; }
.cabecera__cuenta-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background 0.15s, color 0.15s;
}
.cabecera__cuenta-trigger:hover { background: var(--blanco); color: var(--negro); }
.cabecera__cuenta-chevron { font-size: 10px; }
.cuenta-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 230px;
  max-width: 86vw;
  background: var(--blanco);
  color: var(--negro);
  border: 1px solid var(--gris-borde);
  border-top: 3px solid var(--rojo);
  box-shadow: var(--sombra);
  padding: 10px;
  z-index: 300;
  text-align: left;
}
.cuenta-panel__saludo {
  display: block;
  font-size: 12px;
  color: var(--gris-texto);
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--gris-borde);
  margin-bottom: 6px;
}
.cuenta-panel a {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--negro);
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.cuenta-panel a:hover { background: var(--crema); color: var(--rojo); }
.cuenta-panel__salir {
  border-top: 1px solid var(--gris-borde);
  margin-top: 6px;
  color: var(--rojo) !important;
  font-weight: 600;
}

@media (max-width: 880px) {
  .cuenta-desplegable { width: 100%; }
  .cuenta-panel {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    box-shadow: none;
  }
}

/* ---------- "Mis datos" (mi-cuenta.php) ---------- */
.datos-cuenta { margin: 0; }
.datos-cuenta__fila {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 4px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gris-borde);
}
.datos-cuenta__fila:last-child { border-bottom: none; }
.datos-cuenta dt {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-texto);
}
.datos-cuenta dd { margin: 0; font-size: 15px; font-weight: 500; }
@media (max-width: 520px) {
  .datos-cuenta__fila { grid-template-columns: 1fr; gap: 2px; }
}

/* Bloques y direcciones de "Mi cuenta" editable */
.cuenta-bloque {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-top: 3px solid var(--rojo);
  padding: 22px 24px 26px;
  margin-bottom: 22px;
}
.cuenta-bloque__titulo {
  font-size: 18px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gris-borde);
}
.cuenta-bloque .formulario { padding: 0; border: none; }
.cuenta-bloque .campo { margin-bottom: 14px; }

/* Datos del negocio + Facturación lado a lado; direcciones a lo ancho */
.cuenta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.cuenta-grid .cuenta-bloque { margin-bottom: 22px; }
@media (max-width: 820px) {
  .cuenta-grid { grid-template-columns: 1fr; gap: 0; }
}

.direcciones-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.direccion-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid var(--gris-borde);
  padding: 14px 16px;
  border-radius: var(--radio);
}
.direccion-card.es-predeterminada { border-color: var(--rojo); background: #fdf4f4; }
.direccion-card__info strong { font-size: 15px; }
.direccion-card__info p { margin: 4px 0 0; color: var(--gris-texto); font-size: 14px; }
.direccion-badge {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--fuente-display);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rojo);
  border: 1px solid var(--rojo);
  padding: 1px 7px;
  border-radius: 20px;
  vertical-align: middle;
}
.direccion-card__acciones { display: flex; gap: 8px; flex-shrink: 0; }
.boton-mini {
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--gris-borde);
  background: var(--blanco);
  border-radius: 5px;
  cursor: pointer;
  color: var(--negro);
  font-family: var(--fuente-cuerpo);
}
.boton-mini:hover { border-color: var(--negro); }
.boton-mini--rojo { color: var(--rojo); border-color: #f3b9b4; }
.boton-mini--rojo:hover { background: #fdeceb; border-color: var(--rojo); }
@media (max-width: 560px) {
  .direccion-card { flex-direction: column; }
  .direccion-card__acciones { width: 100%; }
}

/* ---------- Carrito: ícono del header ---------- */
.cabecera__carrito {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--blanco);
  padding: 4px;
}
.cabecera__carrito:hover { color: var(--rojo); }
.cabecera__carrito svg { width: 24px; height: 24px; }
.cabecera__carrito-num {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--rojo);
  color: #fff;
  border-radius: 10px;
  font-family: var(--fuente-cuerpo);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---------- Agregar al carrito (ficha) ---------- */
.detalle-producto__comprar { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-top: 6px; }
.cantidad-selector {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--gris-borde);
  border-radius: 5px;
  overflow: hidden;
}
.cantidad-btn { width: 40px; border: none; background: var(--crema); cursor: pointer; font-size: 18px; color: var(--negro); }
.cantidad-btn:hover { background: var(--gris-borde); }
.cantidad-selector input {
  width: 56px;
  border: none;
  border-left: 1px solid var(--gris-borde);
  border-right: 1px solid var(--gris-borde);
  text-align: center;
  font-size: 15px;
  font-family: var(--fuente-cuerpo);
  -moz-appearance: textfield;
}
.cantidad-selector input::-webkit-outer-spin-button,
.cantidad-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.agregar-carrito { flex: 1; min-width: 180px; }
.agregar-feedback { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; color: #27500a; }
.agregar-feedback a { color: var(--rojo); font-weight: 600; }

/* ---------- Página del carrito ---------- */
.carrito-items { background: var(--blanco); border: 1px solid var(--gris-borde); }
.carrito-item {
  display: grid;
  grid-template-columns: 72px 1fr 90px 110px 32px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gris-borde);
}
.carrito-item:last-child { border-bottom: none; }
.carrito-item__img { background: var(--crema); display: flex; align-items: center; justify-content: center; }
.carrito-item__img img { mix-blend-mode: multiply; max-height: 72px; width: auto; }
.carrito-item__info { display: flex; flex-direction: column; gap: 2px; }
.carrito-item__nombre { font-weight: 700; font-size: 15px; color: var(--negro); }
.carrito-item__sabor, .carrito-item__precio { font-size: 13px; color: var(--gris-texto); }
.carrito-item__stock-alerta { display: block; font-size: 12px; font-weight: 600; color: #b9760a; margin-top: 3px; }
.carrito-item__cant { width: 72px; padding: 8px; border: 1px solid var(--gris-borde); border-radius: 5px; text-align: center; }
.carrito-item__subtotal { font-family: var(--fuente-display); font-size: 18px; text-align: right; }
.carrito-item__quitar { border: none; background: none; font-size: 22px; color: var(--gris-claro); cursor: pointer; line-height: 1; }
.carrito-item__quitar:hover { color: var(--rojo); }
.carrito-acciones { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 28px; flex-wrap: wrap; gap: 12px; }
.boton-link { color: var(--gris-texto); font-weight: 600; font-size: 14px; }
.boton-link:hover { color: var(--rojo); }
.carrito-resumen { background: var(--blanco); border: 1px solid var(--gris-borde); border-top: 3px solid var(--rojo); padding: 22px 24px; }
.carrito-resumen__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.carrito-resumen__total strong { font-family: var(--fuente-display); font-size: 30px; }
@media (max-width: 620px) {
  .carrito-item {
    grid-template-columns: 60px 1fr auto;
    grid-template-areas: "img info quitar" "img cant subtotal";
    gap: 10px 12px;
  }
  .carrito-item__img { grid-area: img; }
  .carrito-item__info { grid-area: info; }
  .carrito-item__cant { grid-area: cant; }
  .carrito-item__subtotal { grid-area: subtotal; text-align: right; align-self: center; }
  .carrito-item__quitar { grid-area: quitar; }
}

/* ---------- Mis pedidos ---------- */
.pedidos-lista { display: flex; flex-direction: column; gap: 16px; }
.pedido-card { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 18px 20px; }
.pedido-card__cab { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gris-borde); padding-bottom: 12px; margin-bottom: 12px; }
.pedido-card__fecha { color: var(--gris-texto); font-size: 13px; margin-left: 10px; }
.pedido-card__items { list-style: none; margin: 0; padding: 0; }
.pedido-card__items li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.pedido-card__total { display: flex; justify-content: space-between; border-top: 1px solid var(--gris-borde); margin-top: 10px; padding-top: 10px; font-size: 15px; }
.pedido-card__total strong { font-family: var(--fuente-display); font-size: 18px; }
.pedido-estado { font-family: var(--fuente-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 20px; }
.pedido-estado--solicitado { background: #faeeda; color: #854f0b; }
.pedido-estado--confirmado { background: #e0eefb; color: #0b4a85; }
.pedido-estado--despachado { background: #eae0fb; color: #4a0b85; }
.pedido-estado--entregado { background: #eaf3de; color: #27500a; }
.pedido-estado--cancelado { background: #fdeceb; color: #a3141f; }

/* ---------- Carrito drawer (sale por la derecha) ---------- */
body.sin-scroll { overflow: hidden; }
.carrito-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 400; }
.carrito-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 400px;
  max-width: 90vw;
  background: var(--blanco);
  z-index: 401;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  box-shadow: -12px 0 34px rgba(0, 0, 0, 0.25);
}
.carrito-drawer.abierto { transform: translateX(0); }
.carrito-drawer__cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--gris-borde); }
.carrito-drawer__cab h3 { margin: 0; font-size: 18px; }
.carrito-drawer__cerrar { border: none; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--gris-texto); }
.carrito-drawer__cerrar:hover { color: var(--rojo); }
.carrito-drawer__cuerpo { flex: 1; overflow-y: auto; padding: 8px 18px; }
.cd-cargando { text-align: center; color: var(--gris-texto); padding: 30px 0; }
.cd-vacio { text-align: center; padding: 32px 10px; color: var(--gris-texto); }
.cd-vacio__cat { margin-top: 8px; }
/* Recomendación del producto estrella cuando el carrito está vacío */
.cd-recom { margin-top: 24px; border-top: 1px solid var(--gris-borde); padding-top: 18px; text-align: left; }
.cd-recom__gancho { font-size: 12.5px; font-weight: 700; color: #b8860b; text-align: center; margin: 0 0 12px; line-height: 1.35; }
.cd-recom__card { display: flex; gap: 12px; align-items: center; background: var(--crema); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.cd-recom__card img { width: 54px; height: 54px; object-fit: contain; flex: 0 0 54px; mix-blend-mode: multiply; }
.cd-recom__info strong { display: block; font-size: 14px; line-height: 1.25; margin-bottom: 4px; color: var(--negro); }
.cd-recom__precio { font-size: 12.5px; color: var(--gris-texto); line-height: 1.4; }
.cd-recom__precio b { color: var(--negro); }
.cd-recom__mg { color: #1a7f37; }
.cd-item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gris-borde); }
.cd-item__img { background: var(--crema); display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.cd-item__img img { mix-blend-mode: multiply; max-height: 52px; width: auto; }
.cd-item__nombre { font-weight: 700; font-size: 14px; line-height: 1.25; }
.cd-item__sabor { font-size: 12px; color: var(--gris-texto); margin-top: 2px; }
.cd-item__ctrls { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cd-qty { display: inline-flex; align-items: center; border: 1px solid var(--gris-borde); border-radius: 5px; }
.cd-qty__btn { width: 28px; height: 28px; border: none; background: var(--crema); cursor: pointer; font-size: 15px; color: var(--negro); }
.cd-qty__btn:hover { background: var(--gris-borde); }
.cd-qty__val { min-width: 30px; text-align: center; font-size: 14px; }
.cd-item__sub { font-family: var(--fuente-display); font-size: 15px; margin-left: auto; }
.cd-item__del { border: none; background: none; font-size: 18px; color: var(--gris-claro); cursor: pointer; }
.cd-item__del:hover { color: var(--rojo); }
.carrito-drawer__pie { padding: 16px 22px 22px; border-top: 1px solid var(--gris-borde); }
.carrito-drawer__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.carrito-drawer__total strong { font-family: var(--fuente-display); font-size: 24px; }
.carrito-drawer__pie textarea { width: 100%; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--gris-borde); border-radius: 5px; font-family: var(--fuente-cuerpo); font-size: 14px; resize: vertical; }
.carrito-drawer__exito { text-align: center; padding: 50px 24px; }

/* Progreso hacia el pedido mínimo */
.carrito-minimo { margin-bottom: 14px; }
.carrito-minimo__barra { height: 7px; border-radius: 99px; background: var(--gris-borde); overflow: hidden; }
.carrito-minimo__relleno { display: block; height: 100%; width: 0; background: var(--rojo, #e2231a); border-radius: 99px; transition: width .35s ease, background .35s ease; }
.carrito-minimo--medio .carrito-minimo__relleno { background: #f5a623; }
.carrito-minimo--ok .carrito-minimo__relleno { background: #1a9d4b; }
.carrito-minimo__texto { margin: 7px 0 0; font-family: var(--fuente-cuerpo); font-size: 12.5px; color: var(--gris-texto); }
.carrito-minimo--medio .carrito-minimo__texto { color: #b9760a; }
.carrito-minimo--ok .carrito-minimo__texto { color: #1a9d4b; font-weight: 600; }

/* Errores al confirmar (mínimo / stock) */
.carrito-drawer__error { background: #fdecea; border: 1px solid #f5c2c0; color: #a01813; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; font-family: var(--fuente-cuerpo); font-size: 13px; }
.carrito-drawer__error ul { margin: 6px 0; padding-left: 18px; }
.carrito-drawer__error li { margin: 2px 0; }

@media (max-width: 480px) { .carrito-drawer { width: 100%; max-width: 100%; } }
.cabecera__usuario {
  color: var(--dorado-claro);
  font-size: 13px;
  margin-right: 8px;
  font-family: var(--fuente-cuerpo);
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 26px;
  cursor: pointer;
}

@media (max-width: 880px) {
  .cabecera__nav {
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--negro);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    gap: 18px;
    display: none;
    border-bottom: 3px solid var(--rojo);
  }
  .cabecera__nav.abierto { display: flex; }
  .menu-toggle { display: block; font-size: 34px; line-height: 1; }
  /* Grupo móvil: carrito + hamburguesa siempre visibles en la barra */
  .cabecera__movil { display: flex; }
  /* Logo más chico */
  .cabecera__logo img { height: 30px; width: auto; }
  /* Evita el carrito duplicado dentro del menú desplegable */
  .cabecera__acciones .cabecera__carrito { display: none; }
  /* Acciones apiladas y full-width dentro del menú */
  .cabecera__acciones { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; }
  .cabecera__acciones .login-desplegable { width: 100%; }
  .cabecera__acciones .login-trigger { width: 100%; justify-content: center; }
  /* En móvil "Ingresar" va a login.php: el dropdown no se muestra */
  .cabecera__acciones .login-panel { display: none !important; }
  /* El registro ya está accesible desde login.php: quitamos el botón redundante */
  .cabecera__dealer { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--negro);
  color: var(--blanco);
  position: relative;
  overflow: hidden;
  padding: 56px 0 64px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(224,18,31,0.22), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dorado-claro);
  font-family: var(--fuente-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero__eyebrow .rayo { color: var(--rojo); font-size: 16px; }
.hero h1 {
  font-size: clamp(42px, 5.6vw, 68px);
  margin-bottom: 22px;
  letter-spacing: 0;
}
.hero h1 em {
  font-style: normal;
  color: var(--rojo);
  -webkit-text-stroke: 0;
}
.hero p.lead {
  font-size: 18px;
  font-weight: 500;
  color: rgba(250,250,250,0.78);
  max-width: 520px;
  margin-bottom: 32px;
}
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__stats {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero__stat strong {
  display: block;
  font-family: var(--fuente-display);
  font-size: 34px;
  color: var(--blanco);
}
.hero__stat span {
  font-size: 12px;
  color: rgba(250,250,250,0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--fuente-display);
}
.hero__visual {
  display: grid;
  grid-template-columns: 1fr 0fr;
  gap: 16px;
}
.hero__visual img {
  width: 100%;
  height: auto;
  background: var(--blanco);
  border: 0px solid rgba(255,255,255,0.08);
}
.hero__visual .grande { grid-column: span 2; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 420px; margin: 0 auto; }
  .hero__stats { flex-wrap: wrap; gap: 24px; }
}

/* ---------- Hero slider (banner administrable) ---------- */
.hero-slider { position: relative; overflow: hidden; background: var(--negro); }
.hero-slider__track { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.hero-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 470px;   /* altura fija */
  background-image: var(--bg-d);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
}
.hero-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.05) 100%); }
.hero-slide .contenedor { position: relative; z-index: 1; width: 100%; }
.hero-slide__box { max-width: 560px; color: #fff; }
.hero-slide__box .hero__eyebrow { color: rgba(255,255,255,0.85); }
.hero-slide__box h1 { font-size: clamp(28px, 4vw, 46px); line-height: 1.05; color: #fff; margin: 0 0 14px; }
.hero-slide__box h1 em { font-style: normal; color: var(--rojo); font-size: 1.45em; line-height: 1; }
.hero-slide__box h1 strong { color: var(--rojo); }
.hero-slide__box .lead { color: rgba(255,255,255,0.9); font-size: clamp(15px, 1.6vw, 18px); margin: 0 0 20px; max-width: 520px; }
.hero-slider__dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; z-index: 2; }
.hero-slider__dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.25s; }
.hero-slider__dot.activo { background: var(--rojo); width: 28px; border-radius: 6px; }
.hero-slider__flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(0,0,0,0.4); color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.hero-slider__flecha:hover { background: var(--rojo); }
.hero-slider__flecha--prev { left: 14px; }
.hero-slider__flecha--next { right: 14px; }
@media (max-width: 768px) {
  .hero-slide { background-image: var(--bg-m, var(--bg-d)); height: clamp(340px, 82vw, 460px); }
  .hero-slide::before { background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.75) 100%); }
  .hero-slide__box { max-width: 100%; text-align: center; }
  .hero-slide__box .lead { margin-left: auto; margin-right: auto; }
  .hero-slide__box .hero__cta { justify-content: center; }
  .hero-slider__flecha { display: none; }
}

/* Encabezado del catálogo: título corto a la izquierda + claims al lado */
.catalogo-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
.catalogo-hero__titulo { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; margin: 4px 0 0; }
.catalogo-hero__titulo em { color: var(--rojo); font-style: normal; }
.catalogo-hero__claims { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.catalogo-hero__claims li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(250, 250, 250, 0.9); font-weight: 500; }
.catalogo-hero__claims svg { width: 21px; height: 21px; color: var(--rojo); flex: none; }

/* ---------- Franja de sellos (vernacular del packaging) ---------- */
.franja-sellos {
  background: var(--negro);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 18px 0;
}
.franja-sellos__lista {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0; padding: 0;
}
.franja-sellos__lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blanco);
}
.franja-sellos__lista li::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--rojo);
  display: inline-block;
}

/* ---------- Secciones generales ---------- */
.seccion { padding: 60px 0; }
.seccion--oscura { background: var(--negro); color: var(--blanco); }
.seccion--crema { background: var(--crema); }
.seccion__cabecera { max-width: 640px; margin-bottom: 34px; }
.seccion__eyebrow {
  display: block;
  color: var(--rojo);
  font-family: var(--fuente-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.seccion__cabecera h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 16px; }
.seccion__cabecera p { color: var(--gris-texto); font-size: 17px; }
.seccion--oscura .seccion__cabecera p { color: rgba(250,250,250,0.72); }

/* ---------- Nosotros / por que trabajar con nosotros ---------- */
.razones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.razon {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-top: 3px solid var(--rojo);
  padding: 28px 24px;
}
.seccion--oscura .razon {
  background: var(--carbon);
  border-color: rgba(255,255,255,0.08);
  border-top: 3px solid var(--rojo);
}
.razon__numero {
  font-family: var(--fuente-display);
  font-size: 12px;
  color: var(--rojo);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  display: block;
}
.razon h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: 0; }
.razon p { color: var(--gris-texto); font-size: 15px; margin: 0; font-weight: 400; }
.seccion--oscura .razon p { color: rgba(250,250,250,0.68); }

/* ---------- Catalogo ---------- */
.categoria-bloque { margin-bottom: 44px; }
.categoria-bloque__titulo {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--negro);
}
.categoria-bloque__titulo h2 {
  font-size: 26px;
  margin: 0;
}
.categoria-bloque__titulo span {
  font-size: 14px;
  color: var(--gris-texto);
  font-family: var(--fuente-cuerpo);
  text-transform: none;
}

.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px;
}

/* ---------- Carrusel de productos (home) ---------- */
.carrusel { position: relative; padding: 0 54px; }   /* espacio propio para las flechas */
.carrusel__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrusel__track::-webkit-scrollbar { display: none; }
.carrusel__track > * {
  flex: 0 0 calc((100% - 66px) / 4);   /* 4 visibles (3 gaps de 22px = 66px) */
  scroll-snap-align: start;
}
.carrusel__track.arrastrando { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.carrusel__flecha {
  position: absolute; top: 46%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--negro); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 16px rgba(0,0,0,0.28); transition: background .15s, opacity .15s;
}
.carrusel__flecha:hover { background: var(--rojo); }
.carrusel__flecha--prev { left: 0; }
.carrusel__flecha--next { right: 0; }
.carrusel__flecha[disabled] { opacity: 0.25; cursor: default; }
.carrusel__flecha[disabled]:hover { background: var(--negro); }
@media (max-width: 1024px) { .carrusel__track > * { flex: 0 0 calc((100% - 44px) / 3); } }
/* Móvil / tablet: SIN carrusel, vuelve al grid apilado como antes (carrusel solo en PC). */
@media (max-width: 768px) {
  .carrusel { padding: 0; }
  .carrusel__track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    overflow: visible;
    scroll-snap-type: none;
    scroll-behavior: auto;
    cursor: default;
  }
  .carrusel__track > * { flex: none; }
  .carrusel__flecha { display: none; }
  .carrusel__track .solo-pc { display: none; }   /* móvil: solo estrellas + con stock */
}

.tarjeta-producto {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}
.tarjeta-producto:hover {
  box-shadow: var(--sombra);
  transform: translateY(-3px);
  border-color: var(--negro);
}
.tarjeta-producto__imagen {
  background: var(--crema);
  padding: 20px;
  text-align: center;
  position: relative;
}

/* Distintivo "Producto estrella" (Creatina 1kg) */
.badge-estrella {
  display: inline-block;
  background: var(--dorado);
  color: var(--negro);
  font-family: var(--fuente-display);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  vertical-align: middle;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.tarjeta-producto__imagen .badge-estrella,
.estrella-card__imagen .badge-estrella {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* ---------- Categoría con producto estrella destacado ---------- */
.cat-estrella {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  align-items: stretch;
}
.cat-estrella__resto { grid-template-columns: 1fr; align-content: start; align-items: start; gap: 20px; }

/* Producto estrella como hero a todo el ancho (colección unificada) */
.estrella-destacada { margin-bottom: 34px; }
@media (max-width: 900px) {
  .cat-estrella { grid-template-columns: 1fr; }
}

.estrella-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--negro);
  color: var(--blanco);
  border: 1px solid var(--carbon-claro);
  border-left: 4px solid var(--dorado);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.estrella-card__imagen {
  position: relative;
  background: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  min-height: 0;
}
.estrella-card__imagen img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.estrella-card__cuerpo { padding: 28px 30px; display: flex; flex-direction: column; }
.estrella-card__cuerpo .tarjeta-producto__categoria { color: var(--dorado-claro); }
.estrella-card__nombre {
  font-size: 23px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  margin: 6px 0 8px;
}
.estrella-card__cuerpo .tarjeta-producto__formato { color: rgba(250, 250, 250, 0.7); }
.estrella-card__desc { color: rgba(250, 250, 250, 0.82); font-size: 14px; font-weight: 400; margin-bottom: 16px; }
.estrella-card__cuerpo .tarjeta-producto__destacados span { background: var(--carbon-claro); color: var(--blanco); }
.estrella-card__pie {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.estrella-card__pie .precio-pvp__valor { color: var(--blanco); }
.estrella-card__pie .precio-pvp__label { color: rgba(250, 250, 250, 0.6); }
.estrella-card__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* Meta: badge de stock a la izquierda del nombre de categoría */
.estrella-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.estrella-card__meta .tarjeta-producto__categoria { margin: 0; }

/* Estrellas de reseña */
.estrella-card__rating { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.estrella-card__stars { color: #ffd23f; font-size: 16px; letter-spacing: 2px; line-height: 1; }
.estrella-card__reviews { font-size: 12.5px; color: rgba(250, 250, 250, 0.62); }

/* Bloque de precios publicitario (tarjeta destacada) */
.promo-precios {
  display: flex; align-items: stretch; justify-content: space-between; gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
}
.promo-precios__cols { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; min-width: 0; }
.promo-precios__pvp, .promo-precios__ganas { margin-left: 13px; padding-left: 13px; border-left: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; justify-content: flex-end; }
.promo-precios__cap {
  display: block; font-family: var(--fuente-cuerpo);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: rgba(250, 250, 250, 0.55); margin-bottom: 4px; white-space: nowrap;
}
.promo-precios__num { font-family: var(--fuente-cuerpo); font-weight: 800; font-size: 26px; line-height: 1; color: #fff; letter-spacing: 0.3px; white-space: nowrap; }
.promo-precios__pvp { padding-bottom: 4px; }
.promo-precios__pvpnum { font-family: var(--fuente-cuerpo); font-weight: 700; font-size: 17px; color: rgba(250, 250, 250, 0.7); letter-spacing: 0.2px; white-space: nowrap; }
.promo-precios__ganas { padding-bottom: 4px; }
.promo-precios__ganasnum { font-family: var(--fuente-cuerpo); font-weight: 800; font-size: 18px; color: #ffce33; letter-spacing: 0.2px; white-space: nowrap; }
.promo-precios__margen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffd23f, #f5a623);
  color: #1a1a1a; border-radius: 10px; padding: 7px 12px; min-width: 72px; flex: none;
  box-shadow: 0 6px 16px rgba(245, 166, 35, 0.32);
}
.promo-precios__margen-num { font-family: var(--fuente-display); font-size: 26px; line-height: 1; }
.promo-precios__margen-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }

/* Fila de paquete (x12 · descuento) sobre los precios */
.promo-pack {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: rgba(255, 206, 51, 0.08);
  border: 1px dashed rgba(255, 206, 51, 0.45);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.promo-pack__txt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.promo-pack__badge { background: #ffce33; color: #1a1a1a; font-family: var(--fuente-display); font-size: 15px; line-height: 1; padding: 4px 10px; border-radius: 6px; }
.promo-pack__desc { color: #ffce33; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.promo-pack__precio { color: #fff; font-family: var(--fuente-cuerpo); font-weight: 800; font-size: 16px; letter-spacing: 0.3px; }
.promo-pack__precio small { font-weight: 500; color: rgba(255, 255, 255, 0.6); font-size: 12px; }
.promo-pack__cta { background: transparent; border: 1.5px solid #ffce33; color: #ffce33; padding: 8px 16px; font-size: 12.5px; white-space: nowrap; }
.promo-pack__cta:hover { background: #ffce33; color: #1a1a1a; }

/* Pack en versión clara (ficha de producto, fondo gris claro) */
.promo-pack--claro { background: #fff7df; border-color: #e2b100; }
.promo-pack--claro .promo-pack__desc { color: #9a6b00; }
.promo-pack--claro .promo-pack__precio { color: var(--negro); }
.promo-pack--claro .promo-pack__precio small { color: var(--gris-texto); }
.promo-pack--claro .promo-pack__cta { border-color: #c9970a; color: #8a6300; }
.promo-pack--claro .promo-pack__cta:hover { background: #ffce33; color: #1a1a1a; border-color: #ffce33; }

/* Etiquetas de descuento por pack en el carrito */
.cd-item__pack { font-size: 11.5px; color: #1a9d4b; font-weight: 700; margin-top: 2px; }
.carrito-item__pack { font-size: 11px; color: #1a9d4b; font-weight: 700; }
@media (max-width: 480px) {
  .promo-precios { flex-direction: column; gap: 14px; padding: 13px 13px; }
  /* Las 3 columnas de precio deben caber dentro del cuerpo: si se pasan,
     el overflow:hidden de la tarjeta recortaba la columna "Tu ganas". */
  .promo-precios__cols { justify-content: space-between; gap: 6px; min-width: 0; }
  .promo-precios__costo, .promo-precios__pvp, .promo-precios__ganas { min-width: 0; }
  .promo-precios__pvp, .promo-precios__ganas { margin-left: 8px; padding-left: 8px; }
  .promo-precios__cap { font-size: 9.5px; }
  .promo-precios__num { font-size: 22px; }
  .promo-precios__pvpnum { font-size: 15px; }
  .promo-precios__ganasnum { font-size: 16px; }
}

@media (max-width: 620px) {
  .estrella-card { grid-template-columns: 1fr; }
  .estrella-card__imagen img { max-height: 260px; }
  .estrella-card__cuerpo { padding: 24px 20px; }
}
.tarjeta-producto__imagen img {
  margin: 0 auto;
  max-height: 220px;
  width: auto;
  mix-blend-mode: multiply;
}
.tarjeta-producto__cuerpo {
  padding: 15px 18px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tarjeta-producto__categoria {
  font-family: var(--fuente-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: 6px;
}
/* Badge de stock a la izquierda de la categoría (misma línea, sin sumar altura) */
.tarjeta-producto__meta { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.tarjeta-producto__meta .tarjeta-producto__categoria { margin: 0; }
.tarjeta-producto h3 {
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1.2;
}
.tarjeta-producto__formato {
  font-size: 12.5px;
  color: var(--gris-texto);
  margin-bottom: 9px;
  font-weight: 400;
}
.tarjeta-producto__destacados {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.tarjeta-producto__destacados span {
  font-size: 11px;
  font-family: var(--fuente-display);
  letter-spacing: 0.02em;
  background: var(--negro);
  color: var(--blanco);
  padding: 4px 9px;
}
.tarjeta-producto__sabores {
  font-size: 12.5px;
  color: var(--gris-texto);
  margin-bottom: 10px;
  font-weight: 400;
}
.tarjeta-producto__pie {
  margin-top: auto;
  border-top: 1px solid var(--gris-borde);
  padding-top: 12px;
}

/* Bloque de precios (PVP sugerido · Tu costo · Margen) */
.precios-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: nowrap; }
.precio-col { line-height: 1.15; }
.precio-col__label {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin-bottom: 3px;
}
.precio-col__valor { font-family: var(--fuente-cuerpo); font-weight: 500; font-size: 16.5px; color: var(--negro); line-height: 1; white-space: nowrap; }
/* "Tu costo": recuadro negro con letra blanca */
.precio-col--costo { background: var(--negro); padding: 5px 9px; border-radius: 5px; }
.precio-col--costo .precio-col__label { color: rgba(255, 255, 255, 0.7); }
.precio-col--costo .precio-col__valor { color: #fff; font-size: 18px; font-weight: 600; letter-spacing: 0.2px; }
.precio-col--margen { margin-left: auto; text-align: right; padding-left: 2px; }
.precio-col--margen .precio-col__valor { color: #2f8a12; }
/* En la card destacada (fondo oscuro): PVP/margen claros, "Tu costo" recuadro translúcido */
.estrella-card .precio-col__valor { color: var(--blanco); }
.estrella-card .precio-col--costo { background: rgba(255, 255, 255, 0.12); }
.estrella-card .precio-col--costo .precio-col__valor { color: #fff; }
.estrella-card .precio-col--margen .precio-col__valor { color: #7ed957; }

/* Móvil: tarjetas con nombre y precios más grandes, "Tu costo" destacado y centrado */
@media (max-width: 600px) {
  .tarjeta-producto h3 { font-size: 23px; line-height: 1.15; }
  .tarjeta-producto .precios-row { gap: 12px; align-items: center; }
  .tarjeta-producto .precio-col__label { font-size: 12px; }
  .tarjeta-producto .precio-col__valor { font-size: 21px; }
  .tarjeta-producto .precio-col--costo { padding: 10px 16px; text-align: center; }
  .tarjeta-producto .precio-col--costo .precio-col__label { font-size: 12px; }
  .tarjeta-producto .precio-col--costo .precio-col__valor { font-size: 26px; }
  .tarjeta-producto .precio-col--margen .precio-col__valor { font-size: 22px; }
  /* CTA "Agregar al carrito" con texto más grande */
  .card-agregar, .agregar-carrito { font-size: 17px; padding: 16px 20px; }
}

/* Botón "Agregar al carrito" en las tarjetas */
.tarjeta-producto__cuerpo .card-agregar { margin-top: 11px; }
.precio-pvp { line-height: 1.2; }
.precio-pvp__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-texto);
  font-family: var(--fuente-display);
}
.precio-pvp__valor {
  font-family: var(--fuente-display);
  font-size: 20px;
  color: var(--negro);
}
.precio-mayorista-tag {
  display: block;
  font-size: 11px;
  color: var(--rojo);
  font-family: var(--fuente-display);
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.precio-bloqueado-tag {
  display: block;
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: 2px;
}
.tarjeta-producto__pie a.boton {
  padding: 10px 18px 9px;
  font-size: 11px;
}

/* CTA de precios bloqueados */
.cta-registro-inline {
  background: var(--negro);
  color: var(--blanco);
  border-radius: var(--radio);
  padding: 40px;
  text-align: center;
  margin-top: 8px;
}
.cta-registro-inline h3 { color: var(--blanco); margin-bottom: 10px; }
.cta-registro-inline p { color: rgba(250,250,250,0.7); margin-bottom: 24px; }

/* ---------- Pasos / como funciona ---------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.paso { position: relative; padding-left: 4px; }
.paso__numero {
  font-family: var(--fuente-display);
  font-size: 42px;
  color: var(--rojo);
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}
.paso h3 { font-size: 18px; margin-bottom: 8px; }
.paso p { color: var(--gris-texto); font-size: 15px; margin: 0; }

/* ---------- Formularios ---------- */
.formulario {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 40px;
  box-shadow: var(--sombra);
}
.formulario--angosto { max-width: 560px; margin: 0 auto; }

/* Layout de dos columnas (info + formulario), estilo contacto */
.form-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.form-split__info { padding-top: 6px; }
.beneficios-dealer { list-style: none; margin: 0 0 30px; padding: 0; }
.beneficios-dealer li { position: relative; padding-left: 30px; margin-bottom: 16px; }
.beneficios-dealer li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--rojo); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.beneficios-dealer strong { display: block; font-size: 15px; color: var(--negro); }
.beneficios-dealer span { display: block; font-size: 13.5px; color: var(--gris-texto); }
.form-split__contacto { border-top: 1px solid var(--gris-borde); padding-top: 20px; font-size: 14px; color: var(--gris-texto); }
@media (max-width: 860px) {
  .form-split { grid-template-columns: 1fr; gap: 34px; }
  .form-split__info { text-align: left; }
}
.campo { margin-bottom: 20px; }
.campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--negro);
}
.campo .opcional { color: var(--gris-texto); font-weight: 400; }
.campo-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--gris-texto); }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gris-borde);
  border-radius: 5px;
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  background: var(--blanco);
  color: var(--negro);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px rgba(216,30,44,0.12);
}

/* Ojo para mostrar/ocultar contraseña (se agrega por JS a los campos password) */
.clave-wrap { position: relative; display: block; }
.clave-wrap input { padding-right: 44px; }
.toggle-clave {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gris-texto);
  display: flex;
  align-items: center;
  justify-content: center;
}
.toggle-clave:hover { color: var(--rojo); }
.toggle-clave svg { width: 20px; height: 20px; display: block; }
.toggle-clave .ojo-off { display: none; }
.toggle-clave.activo .ojo { display: none; }
.toggle-clave.activo .ojo-off { display: block; }
.campo-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .campo-fila { grid-template-columns: 1fr; }
}
.mensaje-alerta {
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 24px;
}
.mensaje-alerta--error {
  background: #fdeceb;
  border: 1px solid #f3b9b4;
  color: #a3141f;
}
.mensaje-alerta--exito {
  background: #eaf3de;
  border: 1px solid #c0dd97;
  color: #27500a;
}
/* ---------- Etiquetas de disponibilidad (stock Bsale) ---------- */
.stock-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fuente-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
}
.stock-tag::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.stock-tag--in { background: #eaf3de; color: #27500a; }
.stock-tag--in::before { background: #3f9d17; }
.stock-tag--out { background: #fdeceb; color: #a3141f; }
.stock-tag--out::before { background: #e0121f; }
/* "Bajo pedido" — neutro/ámbar, invita a pedir en vez de frenar (made-to-order) */
.stock-tag--pedido { background: #fdf3dc; color: #8a6300; }
.stock-tag--pedido::before { background: #d9a30a; }

/* ---------- Bloque de confianza / respaldo (home) ---------- */
.confianza__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.confianza__item svg { width: 34px; height: 34px; color: var(--rojo); margin-bottom: 12px; }
.confianza__item h3 { font-size: 16px; margin: 0 0 6px; line-height: 1.25; }
.confianza__item p { color: var(--gris-claro); font-size: 14px; line-height: 1.5; margin: 0; }
@media (max-width: 900px) { .confianza__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 520px) { .confianza__grid { grid-template-columns: 1fr; } }

/* Sabor "bajo pedido" en el selector: leve énfasis menor, pero SÍ se puede pedir
   (no tachado, no muy apagado — es fabricación bajo pedido, no agotado real). */
.selector-sabores button.agotado,
.miniaturas button.agotado {
  opacity: 0.75;
}
.sabor-agotado-nota { color: #8a6300; font-weight: 600; }

/* Campo trampa anti-spam (honeypot): invisible para humanos, los bots lo llenan */
.hp-campo {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__pie {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--gris-texto);
}
.formulario__pie a { color: var(--rojo); font-weight: 600; }

/* ---------- Footer ---------- */
.pie {
  background: var(--negro);
  color: rgba(250,250,250,0.7);
  padding: 48px 0 24px;
}
.pie__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.pie__marca img { height: 34px; margin-bottom: 16px; }
.pie__marca p { font-size: 14px; max-width: 280px; }
.pie h4 {
  color: var(--blanco);
  font-size: 14px;
  margin-bottom: 18px;
  letter-spacing: 0.06em;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 10px; font-size: 14px; }
.pie a:hover { color: var(--rojo); }
.pie__base {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(250,250,250,0.5);
}
@media (max-width: 880px) {
  .pie__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .pie__grid { grid-template-columns: 1fr; }
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  background: #25D366;
  color: #fff;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  font-size: 28px;
  transition: transform 0.2s;
}
.whatsapp-flotante:hover { transform: scale(1.08); }
.whatsapp-flotante svg { width: 30px; height: 30px; }

/* ---------- Pagina de detalle de producto ---------- */
.detalle-producto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) {
  .detalle-producto { grid-template-columns: 1fr; }
}
.detalle-producto__galeria-principal {
  background: var(--crema);
  border-radius: var(--radio);
  padding: 32px;
  text-align: center;
  margin-bottom: 16px;
  position: relative;
}

/* Estrella "guardar como favorito" sobre la foto del producto (discreta, sin círculo) */
.fav-estrella {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.15s ease;
}
.fav-estrella:hover { transform: scale(1.15); }
.fav-estrella:disabled { opacity: 0.6; cursor: default; }
.fav-estrella svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--gris-claro);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.fav-estrella:hover svg { stroke: var(--dorado); }
.fav-estrella.activa svg { fill: var(--dorado); stroke: var(--dorado); }

/* =========================================================
   Animaciones de entrada — modernas pero livianas.
   Solo opacity/transform (GPU). La imagen del hero (LCP) NO se
   anima para no afectar la velocidad. Se desactivan si el usuario
   pidió menos movimiento (prefers-reduced-motion).
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* ---- Hero: animación CSS pura al cargar (no depende de JS, siempre
     termina visible; la imagen del hero NO se anima para no tocar el LCP) ---- */
  @keyframes fnEntradaUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  .anim-ready .hero__eyebrow,
  .anim-ready .hero h1,
  .anim-ready .hero p.lead,
  .anim-ready .hero__cta,
  .anim-ready .hero__stats {
    animation: fnEntradaUp 0.6s ease both;
  }
  .anim-ready .hero__eyebrow { animation-delay: 0.04s; }
  .anim-ready .hero h1       { animation-delay: 0.10s; }
  .anim-ready .hero p.lead   { animation-delay: 0.16s; }
  .anim-ready .hero__cta     { animation-delay: 0.22s; }
  .anim-ready .hero__stats   { animation-delay: 0.28s; }

  /* ---- Resto: reveal al hacer scroll (JS agrega .is-visible; hay una red
     de seguridad en el footer que revela todo a los 2,5s pase lo que pase) ---- */
  .anim-ready .seccion__cabecera,
  .anim-ready .tarjeta-producto,
  .anim-ready .razon,
  .anim-ready .paso,
  .anim-ready .categoria-bloque__titulo,
  .anim-ready .franja-sellos__lista li {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .anim-ready .is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
  .anim-ready .grid-productos > .tarjeta-producto:nth-child(2) { transition-delay: 0.05s; }
  .anim-ready .grid-productos > .tarjeta-producto:nth-child(3) { transition-delay: 0.10s; }
  .anim-ready .grid-productos > .tarjeta-producto:nth-child(4) { transition-delay: 0.15s; }

  /* Cargador amigable: las imágenes diferidas aparecen con un fade suave */
  .anim-ready .tarjeta-producto__imagen img,
  .anim-ready .detalle-producto__galeria-principal img,
  .anim-ready .miniaturas img {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .anim-ready img.cargada { opacity: 1; }
}
.detalle-producto__galeria-principal img {
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 380px;
  mix-blend-mode: multiply;
}
.miniaturas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.miniaturas button {
  background: var(--crema);
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  width: 64px;
  height: 64px;
}
.miniaturas button.activa { border-color: var(--rojo); }
.miniaturas img { mix-blend-mode: multiply; }

.migas {
  font-size: 13px;
  color: var(--gris-texto);
  margin-bottom: 16px;
}
.migas a:hover { color: var(--rojo); }

.detalle-producto__categoria {
  color: var(--rojo);
  font-family: var(--fuente-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Fila: badge de stock a la izquierda de la categoría */
.detalle-producto__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.detalle-producto__sku {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--gris-claro);
  white-space: nowrap;
}
.detalle-producto__sku span { color: var(--gris-texto); }
.detalle-producto h1 { font-size: 30px; margin: 4px 0 4px; }
.detalle-producto__formato { color: var(--gris-texto); margin-bottom: 12px; }
.detalle-producto__destacados {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 16px;
}
.detalle-producto__destacados span {
  font-size: 12px;
  background: var(--crema);
  border: 1px solid var(--gris-borde);
  padding: 6px 12px;
  border-radius: 20px;
}
.detalle-producto__precio-box {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 24px;
  margin-bottom: 14px;
}
/* Caja de precios estilo tarjeta destacada — versión clara (fondo gris claro) */
.detalle-producto__precio-box--destacado {
  background: var(--crema);
  border-color: var(--gris-borde);
  padding: 18px;
}
.detalle-producto__precio-box--destacado .promo-precios {
  background: #fff;
  border-color: var(--gris-borde);
}
.detalle-producto__precio-box--destacado .promo-precios__cap { color: var(--gris-texto); }
.detalle-producto__precio-box--destacado .promo-precios__num { color: var(--negro); }
.detalle-producto__precio-box--destacado .promo-precios__pvpnum { color: var(--gris-texto); }
.detalle-producto__precio-box--destacado .promo-precios__ganasnum { color: #1a7f37; }
.detalle-producto__precio-box--destacado .promo-precios__pvp,
.detalle-producto__precio-box--destacado .promo-precios__ganas { border-left-color: rgba(0, 0, 0, 0.12); }
.detalle-producto__precio-nota { font-size: 12.5px; color: var(--gris-texto); margin: 12px 0 0; }
/* Descripción movida debajo del botón de compra */
.detalle-producto__descripcion { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--gris-borde); }
.detalle-producto__descripcion h2 { font-size: 18px; margin-bottom: 10px; }
.detalle-producto__descripcion p { color: var(--gris-texto); line-height: 1.7; margin: 0; }
.detalle-producto__descripcion .detalle-producto__destacados { margin: 0 0 20px; }

/* Botón de compra deshabilitado (sabor agotado) */
.boton:disabled, .boton.agotado { background: #b9b9b3; border-color: #b9b9b3; color: #fff; cursor: not-allowed; }
.boton:disabled:hover, .boton.agotado:hover { background: #b9b9b3; border-color: #b9b9b3; }
.detalle-producto__sabores label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.selector-sabores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.selector-sabores button {
  border: 1px solid var(--gris-borde);
  background: var(--blanco);
  padding: 9px 16px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
}
.selector-sabores button.activa {
  border-color: var(--rojo);
  background: #fdeceb;
  color: var(--rojo-oscuro);
  font-weight: 600;
}

/* ---------- Tablas admin ---------- */
.admin-body { background: #f4f4f6; }
.panel-admin { padding: 40px 0 80px; min-height: 70vh; }
.panel-admin table {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}
.panel-admin th, .panel-admin td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gris-borde);
  text-align: left;
}
.panel-admin th {
  background: var(--crema);
  font-family: var(--fuente-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.etiqueta-estado {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.etiqueta-estado--pendiente { background: #faeeda; color: #854f0b; }
.etiqueta-estado--aprobado { background: #eaf3de; color: #27500a; }
.etiqueta-estado--rechazado { background: #fdeceb; color: #a3141f; }
.acciones-fila { display: flex; gap: 8px; }
.acciones-fila button, .acciones-fila a {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid var(--gris-borde);
  cursor: pointer;
  background: var(--blanco);
}
.boton-aprobar { color: #27500a !important; border-color: #c0dd97 !important; }
.boton-rechazar { color: #a3141f !important; border-color: #f3b9b4 !important; }

.barra-admin {
  background: var(--negro);
  color: var(--blanco);
  padding: 18px 0;
}
.barra-admin .contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.barra-admin a { font-size: 14px; }
.barra-admin a:hover { color: var(--rojo); }

/* ---------- Panel admin: layout con sidebar estilo Shopify ---------- */
.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }
.admin-side {
  width: 232px; flex: 0 0 232px;
  background: #0f0f10; color: #cfcfcf;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; align-self: flex-start;
}
.admin-side__top { padding: 20px 20px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.admin-side__logo { font-family: var(--fuente-display); font-size: 20px; letter-spacing: .04em; color: #fff; }
.admin-side__logo span { color: var(--rojo); }
.admin-side__user { display: block; font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 5px; }
.admin-side__nav { flex: 1; padding: 8px 10px; overflow-y: auto; }
.admin-side__grupo { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,0.35); padding: 14px 10px 6px; }
.admin-side__link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 7px; margin-bottom: 2px;
  color: #cfcfcf; font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background .12s, color .12s;
}
.admin-side__link svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .8; }
.admin-side__link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-side__link.activo { background: var(--rojo); color: #fff; }
.admin-side__link.activo svg { opacity: 1; }
.admin-side__pie { padding: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.admin-side__salir { color: #ff8a8a; }
.admin-side__salir:hover { background: rgba(224,18,31,0.16); color: #fff; }
.admin-side__toggle { display: none; }
.admin-main { flex: 1; min-width: 0; padding: 30px 0; }
.admin-main .contenedor { max-width: 1120px; width: 100%; margin: 0; padding: 0 34px; }

@media (max-width: 860px) {
  .admin-shell { display: block; }
  .admin-side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
    transform: translateX(-100%); transition: transform .22s ease; width: 240px;
  }
  .admin-side.abierto { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .admin-side__toggle {
    display: block; position: fixed; top: 12px; left: 12px; z-index: 290;
    background: #0f0f10; color: #fff; border: none; border-radius: 7px;
    font-size: 20px; line-height: 1; padding: 7px 13px; cursor: pointer;
  }
  .admin-main { padding: 0; }
  .admin-main .contenedor { padding: 56px 16px 28px; }
}

/* ---------- Admin: pedidos / ventas ---------- */
.ped-card { background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.ped-card__cab { display: grid; grid-template-columns: 1fr 1.5fr auto auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--gris-borde); }
.ped-card__id strong { display: block; font-size: 15px; }
.ped-card__fecha { font-size: 12px; color: var(--gris-texto); }
.ped-card__cliente strong { display: block; font-size: 14px; }
.ped-card__cliente span { display: block; font-size: 12px; color: var(--gris-texto); }
.ped-card__contacto a { color: var(--rojo); }
.ped-card__total { font-family: var(--fuente-display); font-size: 20px; }
.ped-card__estado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ped-estado { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.ped-estado--solicitado { background: #fdf3dc; color: #8a6300; }
.ped-estado--confirmado { background: #e0edfb; color: #1a5aa8; }
.ped-estado--despachado { background: #eee6fb; color: #6b3fa0; }
.ped-estado--entregado { background: #eaf3de; color: #27500a; }
.ped-estado--cancelado { background: #f1f1f1; color: #888; }
.ped-estado-form select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--gris-borde); border-radius: 6px; }
.ped-items { padding: 10px 18px; }
.ped-item { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; padding: 3px 0; }
.ped-item__cant { font-weight: 700; color: var(--rojo); flex: 0 0 34px; }
.ped-item__nom { flex: 1; }
.ped-item__precio { color: var(--gris-texto); font-size: 12.5px; white-space: nowrap; }
.ped-notas { padding: 10px 18px; background: var(--crema); font-size: 13px; color: var(--gris-texto); }
@media (max-width: 700px) { .ped-card__cab { grid-template-columns: 1fr 1fr; } }

/* ---------- Admin: toggle "Producto estrella" (editor) ---------- */
.adm-startoggle {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--gris-borde); border-radius: 8px;
  cursor: pointer; margin-bottom: 18px;
  transition: border-color .15s, background .15s;
}
.adm-startoggle input { position: absolute; opacity: 0; pointer-events: none; }
.adm-startoggle__ico { font-size: 22px; color: #cfcfcf; transition: color .15s; }
.adm-startoggle__txt { flex: 1; line-height: 1.35; }
.adm-startoggle__txt strong { display: block; font-size: 14px; }
.adm-startoggle__txt span { font-size: 12px; color: var(--gris-texto); }
.adm-startoggle__sw { position: relative; flex: 0 0 42px; width: 42px; height: 23px; border-radius: 23px; background: #cfcfcf; transition: background .15s; }
.adm-startoggle__sw span { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .15s; }
.adm-startoggle input:checked ~ .adm-startoggle__sw { background: var(--rojo); }
.adm-startoggle input:checked ~ .adm-startoggle__sw span { transform: translateX(19px); }
.adm-startoggle input:checked ~ .adm-startoggle__ico { color: var(--dorado); }
.adm-startoggle:has(input:checked) { border-color: var(--dorado); background: #fdf9ec; }

/* ---------- Modal imán de leads (lista de precios) ---------- */
.lp-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lp-modal[hidden] { display: none; }   /* respeta el atributo hidden (si no, no cierra) */
.lp-modal__overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.6); }
.lp-modal__box { position: relative; background: #fff; border-radius: 14px; max-width: 400px; width: 100%; padding: 30px 26px 26px; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.lp-modal__x { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--gris-texto); cursor: pointer; }
.lp-modal__x:hover { color: var(--negro); }
.lp-modal__tit { font-size: 21px; margin-bottom: 8px; line-height: 1.2; }
.lp-modal__sub { font-size: 14px; color: var(--gris-texto); margin-bottom: 18px; line-height: 1.45; }
.lp-campo { margin-bottom: 11px; }
.lp-campo input { width: 100%; padding: 12px 14px; font-size: 16px; border: 1px solid var(--gris-borde); border-radius: 8px; font-family: var(--fuente-cuerpo); }
.lp-campo input:focus { border-color: var(--rojo); outline: none; }
#lpError { margin-bottom: 12px; }
.lp-nota { font-size: 11.5px; color: var(--gris-claro); text-align: center; margin-top: 10px; }
.lp-modal__exito { text-align: center; padding: 8px 0; }

.vacio-tabla {
  text-align: center;
  padding: 48px 24px;
  color: var(--gris-texto);
}

/* Acceso directo exclusivo al Super Admin (en Mi cuenta) */
.super-admin-acceso {
  display: flex; align-items: center; gap: 14px;
  background: var(--negro); color: var(--blanco);
  border: 1px solid var(--carbon-claro); border-left: 4px solid var(--dorado);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 22px;
  box-shadow: var(--sombra);
}
.super-admin-acceso:hover { border-left-color: var(--dorado-claro); }
.super-admin-acceso__ico { font-size: 24px; color: var(--dorado-claro); line-height: 1; }
.super-admin-acceso__txt { display: flex; flex-direction: column; gap: 2px; }
.super-admin-acceso__txt strong { font-family: var(--fuente-display); letter-spacing: .03em; font-size: 16px; }
.super-admin-acceso__txt span { font-size: 12.5px; color: rgba(250, 250, 250, 0.6); }
.super-admin-acceso__flecha { margin-left: auto; font-size: 22px; color: var(--dorado-claro); }

/* ---------- Admin: vista de productos estilo Shopify ---------- */
.adm-prod__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 4px; flex-wrap: wrap; }
.adm-prod__titulo { font-size: 26px; margin: 0; }
.adm-prod__sub { color: var(--gris-texto); font-size: 14px; margin: 4px 0 0; }
.adm-prod__sync { font-size: 13px; font-weight: 600; color: var(--rojo); border: 1px solid var(--gris-borde); border-radius: 6px; padding: 8px 14px; white-space: nowrap; cursor: pointer; background: #fff; }
.adm-prod__sync:hover { background: var(--crema); }
.adm-prod__sync:disabled { opacity: 0.6; cursor: default; }
.adm-sync { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-sync-estado { font-size: 12.5px; color: var(--gris-texto); display: inline-flex; align-items: center; }
.adm-sync-estado--ok { color: #1a7f37; font-weight: 600; }
.adm-sync-estado--err { color: #a01813; font-weight: 600; }
.adm-spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid var(--gris-borde);
  border-top-color: var(--rojo);
  border-radius: 50%;
  margin-right: 8px;
  animation: admSpin 0.7s linear infinite;
}
@keyframes admSpin { to { transform: rotate(360deg); } }
.adm-prod__stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 18px; font-size: 13px; color: var(--gris-texto); }
.adm-prod__stat strong { color: #1a7f37; font-size: 15px; }
.adm-prod__stat--out strong { color: #a01813; }
.adm-prod__stat--muted strong { color: var(--gris-claro); }
.adm-card { background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px; overflow: hidden; }
.adm-tabla-wrap { overflow-x: auto; }
.adm-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris-texto); padding: 12px 14px; border-bottom: 1px solid var(--gris-borde); background: var(--crema); white-space: nowrap; }
.adm-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--gris-borde); vertical-align: middle; }
.adm-tabla tr:last-child td { border-bottom: none; }
.adm-tabla tbody tr:hover td { background: #fafafa; }
.adm-tabla .adm-num, .adm-tabla th.adm-num { text-align: right; white-space: nowrap; }
.adm-prod__cel { display: flex; align-items: center; gap: 12px; }
.adm-prod__thumb { border: 1px solid var(--gris-borde); border-radius: 6px; object-fit: contain; background: var(--crema); flex: none; }
.adm-prod__nombre { font-weight: 600; color: var(--negro); }
.adm-prod__slug { font-size: 12px; color: var(--gris-texto); }
.adm-prod__vars { font-size: 11px; color: var(--gris-claro); }
.adm-estrella { color: #e6b800; }
.adm-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.adm-pill--ok { background: #e3f5e9; color: #1a7f37; }
.adm-pill--out { background: #fdecea; color: #a01813; }
.adm-pill--muted { background: #eeeeee; color: #777; }
.adm-costo { font-weight: 700; }
.adm-margen { color: #1a7f37; font-weight: 600; }
.adm-margen--bajo { color: #c0261d; }
.adm-pack { display: inline-block; font-size: 11px; font-weight: 700; color: #8a6300; background: #fff7df; border: 1px solid #e2b100; border-radius: 5px; padding: 2px 7px; margin: 1px 2px; white-space: nowrap; }
.adm-ver { color: var(--rojo); font-weight: 600; }
.adm-linkbtn { background: none; border: none; color: var(--gris-texto); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.adm-linkbtn:hover { color: var(--negro); text-decoration: underline; }
.adm-linkbtn--rojo { color: #c0261d; }
/* Toggle de visibilidad con ícono de ojo */
.adm-ojo { background: none; border: none; cursor: pointer; padding: 2px; vertical-align: middle; line-height: 0; }
.adm-ojo svg { width: 20px; height: 20px; display: block; }
.adm-ojo--on { color: #1a7f37; }
.adm-ojo--off { color: var(--gris-claro); }
.adm-ojo:hover { color: var(--rojo); }

/* Cargador / barra de progreso del admin (subidas) */
.adm-progreso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.adm-progreso.activo { opacity: 1; }
.adm-progreso__barra { height: 100%; width: 0; background: var(--rojo); box-shadow: 0 0 8px rgba(224,18,31,0.6); transition: width 0.25s ease; }
.adm-progreso__barra.indeterminado { width: 100%; background: linear-gradient(90deg, var(--rojo) 25%, #ff7a6e 50%, var(--rojo) 75%); background-size: 200% 100%; animation: admProgAnim 1.1s linear infinite; }
@keyframes admProgAnim { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Mini vistas previas del banner (PC + móvil) en el editor */
.hero-mini { border: 1px solid var(--gris-borde); border-radius: 8px; overflow: hidden; }
.hero-mini .hero-slide { background-color: var(--negro); background-size: cover; background-position: center; }
.hero-mini--pc .hero-slide { height: 120px; }
.hero-mini--movil { max-width: 190px; }
.hero-mini--movil .hero-slide { height: 250px; }
.hero-mini--movil .hero-slide::before { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.72) 100%); }
.hero-mini--movil .hero-slide__box { text-align: center; }
.hero-mini .hero-slide__box { position: relative; z-index: 1; max-width: 100%; padding: 0 14px; }
.hero-mini .hero-slide__box .hero__eyebrow { font-size: 8.5px; margin-bottom: 2px; letter-spacing: 0.02em; }
.hero-mini .hero-slide__box h1 { font-size: 14px; line-height: 1.1; margin: 0 0 3px; }
.hero-mini .hero-slide__box .lead { font-size: 9px; line-height: 1.3; margin: 0 0 6px; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-mini .hero-slide__box .hero__cta { gap: 6px; }
.hero-mini .boton { font-size: 8px; padding: 5px 9px; border-width: 1px; letter-spacing: 0.02em; }
.hero-mini--movil .hero__cta { justify-content: center; flex-wrap: wrap; }
.adm-prod__nota { font-size: 12.5px; color: var(--gris-texto); margin: 16px 0 0; }
.adm-prod__nota code { background: var(--crema); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.adm-prod__cel--link { text-decoration: none; }
.adm-prod__cel--link:hover .adm-prod__nombre { color: var(--rojo); }

/* Editor de producto (super admin) */
.adm-edit__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
@media (max-width: 800px) { .adm-edit__grid { grid-template-columns: 1fr; } }
.adm-edit__col { padding: 20px; }
.adm-edit__h { font-size: 16px; margin: 0 0 16px; }
.adm-edit__nota { font-size: 12.5px; color: var(--gris-texto); margin: 12px 0 8px; }
.adm-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 6px; cursor: pointer; }
.adm-check input { width: auto; }
.adm-fotos { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-foto { position: relative; width: 84px; }
.adm-foto img { width: 84px; height: 84px; object-fit: contain; background: var(--crema); border: 1px solid var(--gris-borde); border-radius: 8px; display: block; }
.adm-foto__del { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #a01813; margin-top: 3px; cursor: pointer; }
.adm-foto__del input { width: auto; }
.adm-edit__pie { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.campo-readonly { background: #f1f1f3; color: var(--gris-texto); cursor: default; }
.adm-margen-vivo { font-size: 13px; color: var(--gris-texto); margin: 2px 0 4px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.adm-margen-vivo strong { color: var(--negro); }
.adm-margen-badge { display: inline-block; font-family: var(--fuente-cuerpo); font-weight: 800; font-size: 16px; padding: 3px 12px; border-radius: 7px; background: linear-gradient(135deg, #ffd23f, #f5a623); color: #1a1a1a; box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3); }
.adm-margen-badge--bajo { background: #fdecea; color: #c0261d; box-shadow: none; }

/* ---------- Compactado vertical en móvil ---------- */
@media (max-width: 640px) {
  .seccion { padding: 40px 0; }
  .hero { padding: 36px 0 44px; }
  .seccion__cabecera { margin-bottom: 26px; }
  .categoria-bloque { margin-bottom: 34px; }
  .pie { padding: 36px 0 22px; }
  .pie__grid { margin-bottom: 28px; }
  .hero__stats { margin-top: 26px; padding-top: 20px; }
}

/* ============================================================
   Asistente con IA "Fast" — botón flotante + panel de chat
   ============================================================ */
.fn-chat-lanzador {
  position: fixed;
  right: 24px;
  bottom: 92px;               /* justo encima del botón de WhatsApp */
  z-index: 210;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: var(--rojo);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  transition: transform 0.2s, background 0.2s;
  touch-action: manipulation;
}
.fn-chat-lanzador:hover { transform: scale(1.08); background: var(--rojo-oscuro); }
.fn-chat-lanzador svg { width: 28px; height: 28px; }
.fn-chat-lanzador__cerrar { display: none; }
.fn-chat-lanzador.activo .fn-chat-lanzador__abrir { display: none; }
.fn-chat-lanzador.activo .fn-chat-lanzador__cerrar { display: block; }
.fn-chat-lanzador__punto {
  position: absolute;
  top: 2px; right: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #34d058;          /* verde "conectado" */
  border: 2px solid #fff;
}

.fn-chat {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 209;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 130px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.fn-chat.abierto {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fn-chat__cab {
  background: var(--rojo);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fn-chat__cab-info { display: flex; align-items: center; gap: 11px; }
.fn-chat__avatar {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--rojo);
  font-family: var(--fuente-display);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fn-chat__cab-info strong { display: block; font-size: 15px; }
.fn-chat__estado {
  font-size: 11.5px;
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
}
.fn-chat__estado::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d058;
  margin-right: 6px;
  display: inline-block;
}
.fn-chat__cerrar {
  background: none;
  border: none;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  padding: 0 4px;
}
.fn-chat__cerrar:hover { opacity: 1; }

.fn-chat__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f5f4f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fn-msg {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.fn-msg--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--negro);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.fn-msg--user {
  align-self: flex-end;
  background: var(--rojo);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.fn-msg--typing {
  display: flex;
  gap: 4px;
  padding: 13px 15px;
}
.fn-msg--typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gris-texto);
  opacity: 0.5;
  animation: fnTyping 1s infinite ease-in-out;
}
.fn-msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.fn-msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes fnTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.fn-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}
.fn-chat__chip {
  background: #fff;
  border: 1px solid var(--gris-borde);
  color: var(--negro);
  border-radius: 16px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.fn-chat__chip:hover { border-color: var(--rojo); color: var(--rojo); }

.fn-chat__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--rojo);
  color: #fff;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(224,18,31,0.28);
  transition: background 0.15s, transform 0.15s;
}
.fn-chat__cta:hover { background: var(--rojo-oscuro); transform: translateY(-1px); }
.fn-chat__cta svg { width: 16px; height: 16px; }

.fn-chat__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--gris-borde);
  background: #fff;
}
.fn-chat__input {
  flex: 1;
  border: 1px solid var(--gris-borde);
  border-radius: 22px;
  padding: 10px 15px;
  font-size: 14px;
  font-family: var(--fuente-cuerpo);
  outline: none;
}
.fn-chat__input:focus { border-color: var(--rojo); }
.fn-chat__enviar {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--rojo);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.fn-chat__enviar:hover { background: var(--rojo-oscuro); }
.fn-chat__enviar svg { width: 19px; height: 19px; }

@media (max-width: 480px) {
  .fn-chat {
    right: 12px;
    left: 12px;
    bottom: 84px;
    width: auto;
    max-width: none;
    height: calc(100vh - 150px);
  }
  /* Mismo right que el botón de WhatsApp (24px) para que queden alineados
     verticalmente, apilado justo encima con ~10px de separación. */
  .fn-chat-lanzador { right: 24px; bottom: 92px; }
}