/* ============================================================
   CATÁLOGO VIRTUAL - ESTILOS GLOBALES
   Paleta: Blanco / Azul / Naranja - Diseño profesional
   ============================================================ */

:root{
  --color-primario: #0057b7;
  --color-primario-oscuro: #003d82;
  --color-primario-claro: #e8f0fc;
  --color-secundario: #f5a623;
  --color-secundario-oscuro: #d6870a;
  --color-blanco: #ffffff;
  --color-fondo: #f7f9fc;
  --color-texto: #1c2430;
  --color-texto-suave: #5c6b7a;
  --color-borde: #e3e8f0;
  --color-exito: #1e9e5b;
  --sombra-suave: 0 2px 12px rgba(20,40,80,0.07);
  --sombra-media: 0 8px 28px rgba(20,40,80,0.12);
  --radio: 14px;
  --radio-chico: 8px;
  --fuente: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --ancho-maximo: 1240px;
  --altura-header: 118px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--fuente);
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 66px; /* espacio para nav móvil */
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; }
input, textarea, select{ font-family: inherit; }

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

.enlace-saltar{ position:absolute; left:-999px; top:0; background:var(--color-primario); color:#fff; padding:10px 16px; z-index:9999; }
.enlace-saltar:focus{ left:10px; top:10px; }

/* ============ BOTONES ============ */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: 50px; font-weight:600; font-size:15px;
  transition: all .2s ease; cursor:pointer; border:2px solid transparent; white-space:nowrap;
}
.boton-primario{ background: var(--color-primario); color:#fff; }
.boton-primario:hover{ background: var(--color-primario-oscuro); transform: translateY(-2px); }
.boton-secundario{ background: var(--color-secundario); color:#fff; }
.boton-secundario:hover{ background: var(--color-secundario-oscuro); transform: translateY(-2px); }
.boton-contorno{ background: transparent; border-color: var(--color-primario); color: var(--color-primario); }
.boton-contorno:hover{ background: var(--color-primario); color:#fff; }
.boton-whatsapp{ background:#1e9e5b; color:#fff; }
.boton-whatsapp:hover{ background:#178048; transform: translateY(-2px); }
.boton-bloque{ width:100%; }
.boton-chico{ padding: 9px 18px; font-size:13.5px; }

/* ============ CABECERA ============ */
.cabecera{ position: sticky; top:0; z-index:200; background:#fff; box-shadow: var(--sombra-suave); }
.cabecera-superior{ background: var(--color-primario-oscuro); color:#fff; font-size:13px; }
.cabecera-superior-inner{ display:flex; justify-content:space-between; align-items:center; padding:7px 20px; }
.cabecera-dato{ display:flex; align-items:center; gap:6px; opacity:.95; }
.cabecera-redes{ display:flex; gap:14px; }
.cabecera-redes a{ opacity:.9; } .cabecera-redes a:hover{ opacity:1; color: var(--color-secundario); }

.cabecera-principal{ display:flex; align-items:center; gap:24px; padding: 14px 20px; }
.logo-marca{ flex-shrink:0; }
.logo-marca img{ height:64px; width:auto; object-fit:contain; }

.nav-principal{ display:flex; gap:6px; margin-left:10px; flex:1; }
.nav-principal a{
  padding:10px 16px; font-weight:600; font-size:15px; color: var(--color-texto); border-radius: 50px;
  transition: all .2s ease;
}
.nav-principal a:hover, .nav-principal a.activo{ background: var(--color-primario-claro); color: var(--color-primario); }

.cabecera-acciones{ display:flex; align-items:center; gap:14px; }
.form-buscador{ display:flex; align-items:center; background: var(--color-fondo); border:1px solid var(--color-borde); border-radius:50px; padding: 6px 6px 6px 18px; }
.form-buscador input{ border:none; background:transparent; outline:none; width:170px; font-size:14px; }
.form-buscador button{ background: var(--color-primario); color:#fff; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.boton-pedido{ position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background: var(--color-primario-claro); color: var(--color-primario); flex-shrink:0; }
.boton-pedido:hover{ background: var(--color-primario); color:#fff; }
.contador-pedido{ position:absolute; top:-4px; right:-4px; background: var(--color-secundario); color:#fff; font-size:11px; font-weight:700; width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

.boton-buscar-movil{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background: var(--color-primario-claro); color: var(--color-primario); flex-shrink:0; }
.boton-buscar-movil:hover, .boton-buscar-movil.activo{ background: var(--color-primario); color:#fff; }

.buscador-movil-fila{ display:none; padding:0 20px 14px; }
.buscador-movil-fila.abierto{ display:block; }
.buscador-movil-fila form{ display:flex; align-items:center; background: var(--color-fondo); border:1px solid var(--color-borde); border-radius:50px; padding:6px 6px 6px 18px; }
.buscador-movil-fila input{ border:none; background:transparent; outline:none; flex:1; font-size:14.5px; }
.buscador-movil-fila button{ background: var(--color-primario); color:#fff; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.boton-menu-movil{ display:none; color: var(--color-primario); }

@media (max-width: 980px){
  .cabecera-superior{ display:none; }
  .nav-principal{ position: fixed; top:0; right:-300px; height:100vh; width:280px; background:#fff; flex-direction:column; padding: 90px 24px 24px; gap:4px; box-shadow: -8px 0 30px rgba(0,0,0,.15); transition: right .3s ease; z-index: 300; }
  .nav-principal.abierto{ right:0; }
  .nav-principal a{ width:100%; }
  .form-buscador{ display:none; }
  .boton-buscar-movil{ display:flex; }
  .boton-menu-movil{ display:flex; }
  .logo-marca img{ height:50px; }
}

/* ============ SLIDER (solo imágenes, sin flechas, 100% ancho) ============ */
.slider-hero{ position:relative; width:100%; overflow:hidden; background:#eef2f8; }
.slider-hero-track{ display:flex; width:100%; transition: transform .6s ease; }
.slider-hero-slide{ min-width:100%; }
.slider-hero-slide img{ width:100%; height:auto; display:block; object-fit:cover; }
.slider-hero-slide a{ display:block; }
.slider-hero-dots{ position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.slider-hero-dots button{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.1); }
.slider-hero-dots button.activo{ background: var(--color-secundario); width:26px; border-radius:6px; }

/* ============ SECCIONES ============ */
.seccion{ padding: 56px 0; }
.seccion-fondo-alterno{ background:#fff; }
.titulo-seccion{ text-align:center; margin-bottom:38px; }
.titulo-seccion h2{ font-size: 32px; font-weight:800; color: var(--color-texto); }
.titulo-seccion p{ color: var(--color-texto-suave); font-size:16px; margin-top:8px; }
.titulo-seccion .linea{ width:60px; height:4px; background: var(--color-secundario); margin: 14px auto 0; border-radius:4px; }

/* ============ CATEGORÍAS INTERACTIVAS ============ */
.grid-categorias{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap:22px; }
.tarjeta-categoria{
  position:relative; border-radius: var(--radio); overflow:hidden; height:200px; box-shadow: var(--sombra-suave);
  transition: transform .3s ease, box-shadow .3s ease;
}
.tarjeta-categoria:hover{ transform: translateY(-6px); box-shadow: var(--sombra-media); }
.tarjeta-categoria img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.tarjeta-categoria:hover img{ transform: scale(1.08); }
.tarjeta-categoria-overlay{
  position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,40,90,.82) 0%, rgba(0,40,90,.15) 55%, rgba(0,40,90,0) 100%);
  display:flex; align-items:flex-end; padding:18px;
}
.tarjeta-categoria-overlay h3{ color:#fff; font-size:19px; font-weight:700; }
.tarjeta-categoria-overlay span{ color: var(--color-secundario); font-size:12.5px; font-weight:600; display:block; margin-top:4px; }

/* ============ CARRUSEL PRODUCTOS ============ */
.carrusel-wrap{ position:relative; }
.carrusel{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type: x mandatory; padding: 6px 4px 20px; scrollbar-width: thin; }
.carrusel::-webkit-scrollbar{ height:6px; }
.carrusel::-webkit-scrollbar-thumb{ background: var(--color-borde); border-radius:6px; }
.carrusel .tarjeta-producto{ scroll-snap-align:start; flex: 0 0 260px; }
.carrusel .tarjeta-categoria{ scroll-snap-align:start; flex: 0 0 280px; height:230px; }
@media (max-width: 600px){ .carrusel .tarjeta-categoria{ flex: 0 0 220px; height:190px; } }
.carrusel-controles{ display:flex; justify-content:center; gap:12px; margin-top:6px; }
.carrusel-boton{ width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--color-borde); display:flex; align-items:center; justify-content:center; color: var(--color-primario); box-shadow: var(--sombra-suave); }
.carrusel-boton:hover{ background: var(--color-primario); color:#fff; }

/* ============ TARJETA PRODUCTO ============ */
.grid-productos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap:24px; }
.tarjeta-producto{
  background:#fff; border-radius: var(--radio); overflow:hidden; box-shadow: var(--sombra-suave); border:1px solid var(--color-borde);
  display:flex; flex-direction:column; transition: transform .25s ease, box-shadow .25s ease;
}
.tarjeta-producto:hover{ transform: translateY(-5px); box-shadow: var(--sombra-media); }
.tarjeta-producto-imagen{ position:relative; aspect-ratio: 1/1; overflow:hidden; background:#f2f5fa; }
.tarjeta-producto-imagen img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.tarjeta-producto:hover .tarjeta-producto-imagen img{ transform: scale(1.06); }
.etiqueta-destacado{ position:absolute; top:12px; left:12px; background: var(--color-secundario); color:#fff; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:50px; }
.tarjeta-producto-cuerpo{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tarjeta-producto-categoria{ font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color: var(--color-primario); font-weight:700; }
.tarjeta-producto-cuerpo h3{ font-size:16.5px; font-weight:700; line-height:1.35; }
.tarjeta-producto-cuerpo h3 a:hover{ color: var(--color-primario); }
.tarjeta-producto-desc{ font-size:13.5px; color: var(--color-texto-suave); flex:1; }
.tarjeta-producto-acciones{ display:flex; gap:8px; margin-top:6px; }
.tarjeta-producto-acciones .boton{ flex:1; padding:10px 12px; font-size:13px; }

/* ============ PROMOCIONES ============ */
.grid-promociones{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:24px; }
.tarjeta-promocion{ background:#fff; border-radius: var(--radio); overflow:hidden; box-shadow: var(--sombra-suave); border:1px solid var(--color-borde); }
.tarjeta-promocion img{ width:100%; aspect-ratio: 16/9; object-fit:cover; }
.tarjeta-promocion-cuerpo{ padding:18px; }
.tarjeta-promocion-cuerpo h3{ font-size:18px; font-weight:700; margin-bottom:8px; color: var(--color-primario-oscuro); }
.tarjeta-promocion-cuerpo p{ color: var(--color-texto-suave); font-size:14px; }

/* ============ BANNER GENERAL DE PÁGINA ============ */
.banner-pagina{ background: linear-gradient(120deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%); color:#fff; padding: 46px 0; text-align:center; }
.banner-pagina h1{ font-size: 34px; font-weight:800; }
.banner-pagina p{ margin-top:8px; opacity:.9; font-size:15.5px; }
.migas-pan{ font-size:13px; margin-top:14px; opacity:.85; }
.migas-pan a:hover{ text-decoration:underline; }

/* ============ NOSOTROS ============ */
.seccion-nosotros{ display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:center; }
.seccion-nosotros-texto{ font-size:15.5px; color: var(--color-texto-suave); }
.seccion-nosotros-texto h2{ color: var(--color-texto); font-size:28px; margin-bottom:16px; font-weight:800; }
.seccion-nosotros-imagen img{ border-radius: var(--radio); box-shadow: var(--sombra-media); width:100%; }
@media (max-width: 860px){ .seccion-nosotros{ grid-template-columns:1fr; } }

/* ============ CATÁLOGO: FILTROS ============ */
.catalogo-layout{ display:grid; grid-template-columns: 270px 1fr; gap:32px; align-items:start; }
.filtros-panel{ background:#fff; border:1px solid var(--color-borde); border-radius: var(--radio); padding:22px; position:sticky; top:100px; }
.filtros-panel h4{ font-size:15px; margin-bottom:14px; color: var(--color-primario-oscuro); }
.filtro-categoria{ margin-bottom:6px; }
.filtro-categoria-titulo{ display:flex; justify-content:space-between; align-items:center; padding:10px 4px; font-weight:600; font-size:14.5px; cursor:pointer; border-radius:8px; }
.filtro-categoria-titulo:hover{ background: var(--color-primario-claro); }
.filtro-categoria-titulo svg{ transition: transform .2s ease; flex-shrink:0; }
.filtro-categoria.abierta .filtro-categoria-titulo svg{ transform: rotate(180deg); }
.filtro-subcategorias{ max-height:0; overflow:hidden; transition: max-height .3s ease; padding-left:12px; }
.filtro-categoria.abierta .filtro-subcategorias{ max-height:400px; }
.filtro-subcategorias a{ display:block; padding:7px 6px; font-size:13.5px; color: var(--color-texto-suave); border-radius:6px; }
.filtro-subcategorias a:hover, .filtro-subcategorias a.activo{ color: var(--color-primario); background: var(--color-primario-claro); }
.filtro-categoria-titulo a{ flex:1; }
.filtro-categoria-titulo a.activo{ color: var(--color-primario); }
.filtros-toggle-movil{ display:none; }
@media (max-width: 900px){
  .catalogo-layout{ grid-template-columns:1fr; }
  .filtros-panel{ position:static; padding:0; overflow:hidden; margin-bottom:22px; }
  .filtros-toggle-movil{
    display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 18px;
    background:#fff; border:1px solid var(--color-borde); border-radius: var(--radio); font-weight:700; font-size:14.5px; color: var(--color-primario-oscuro);
  }
  .filtros-toggle-movil span{ display:flex; align-items:center; gap:10px; }
  .filtros-toggle-flecha{ transition: transform .25s ease; }
  .filtros-toggle-movil.abierto .filtros-toggle-flecha{ transform: rotate(180deg); }
  .filtros-panel-contenido{ max-height:0; overflow:hidden; transition: max-height .3s ease; background:#fff; border:1px solid var(--color-borde); border-top:none; border-radius:0 0 var(--radio) var(--radio); }
  .filtros-panel-contenido.abierto{ max-height:1400px; padding:16px; }
}

.catalogo-resultados-barra{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.catalogo-resultados-barra p{ font-size:14px; color: var(--color-texto-suave); }

.sin-resultados{ text-align:center; padding:60px 20px; color: var(--color-texto-suave); }

/* ============ PAGINACIÓN ============ */
.paginacion{ display:flex; justify-content:center; gap:8px; margin-top:36px; flex-wrap:wrap; }
.paginacion a, .paginacion span{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--color-borde); font-size:14px; }
.paginacion a:hover{ background: var(--color-primario); color:#fff; border-color: var(--color-primario); }
.paginacion .activo{ background: var(--color-primario); color:#fff; border-color: var(--color-primario); }

/* ============ PÁGINA DE PRODUCTO INDIVIDUAL ============ */
.producto-detalle{ display:grid; grid-template-columns: 1fr 1fr; gap:46px; }
.producto-galeria-principal{ border-radius: var(--radio); overflow:hidden; background:#f2f5fa; aspect-ratio:1/1; margin-bottom:14px; }
.producto-galeria-principal img{ width:100%; height:100%; object-fit:cover; }
.producto-galeria-miniaturas{ display:flex; gap:10px; flex-wrap:wrap; }
.producto-galeria-miniaturas button{ width:70px; height:70px; border-radius:8px; overflow:hidden; border:2px solid transparent; opacity:.7; }
.producto-galeria-miniaturas button.activa{ border-color: var(--color-primario); opacity:1; }
.producto-galeria-miniaturas img{ width:100%; height:100%; object-fit:cover; }

.producto-info-categoria{ color: var(--color-primario); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
.producto-info h1{ font-size:28px; font-weight:800; margin:8px 0 14px; }
.producto-info-desc-corta{ color: var(--color-texto-suave); font-size:15.5px; margin-bottom:20px; }
.producto-info-precio{ font-size:22px; font-weight:800; color: var(--color-primario-oscuro); margin-bottom:20px; }
.producto-acciones-principales{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.producto-cantidad{ display:flex; align-items:center; border:1px solid var(--color-borde); border-radius:50px; overflow:hidden; }
.producto-cantidad button{ width:40px; height:44px; font-size:18px; color: var(--color-primario); }
.producto-cantidad input{ width:46px; text-align:center; border:none; font-weight:700; }

.producto-descripcion-larga{ margin-top:20px; border-top:1px solid var(--color-borde); padding-top:20px; font-size:15px; color: var(--color-texto); }
.producto-descripcion-larga h2{ font-size:20px; margin-bottom:12px; font-weight:700; }

.formulario-cotizar{ background:#fff; border:1px solid var(--color-borde); border-radius: var(--radio); padding:24px; margin-top:26px; }
.formulario-cotizar h3{ font-size:18px; margin-bottom:16px; font-weight:700; color: var(--color-primario-oscuro); }

@media (max-width: 900px){ .producto-detalle{ grid-template-columns:1fr; gap:26px; } }

/* ============ FORMULARIOS ============ */
.grupo-campo{ margin-bottom:16px; }
.grupo-campo label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color: var(--color-texto); }
.grupo-campo input, .grupo-campo textarea, .grupo-campo select{
  width:100%; padding:12px 14px; border:1px solid var(--color-borde); border-radius: var(--radio-chico); font-size:14.5px; outline:none;
  transition: border-color .2s ease;
}
.grupo-campo input:focus, .grupo-campo textarea:focus, .grupo-campo select:focus{ border-color: var(--color-primario); }
.grupo-campo-fila{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .grupo-campo-fila{ grid-template-columns:1fr; } }

.mensaje-alerta{ padding:14px 18px; border-radius: var(--radio-chico); font-size:14px; margin-bottom:18px; }
.mensaje-alerta.exito{ background:#e7f7ee; color: var(--color-exito); border:1px solid #b8ecd0; }
.mensaje-alerta.error{ background:#fdeceb; color:#c0392b; border:1px solid #f5c6c2; }

/* ============ PEDIDO / CARRITO ============ */
.tabla-pedido{ width:100%; border-collapse:collapse; background:#fff; border-radius: var(--radio); overflow:hidden; box-shadow: var(--sombra-suave); }
.tabla-pedido th{ background: var(--color-primario-claro); text-align:left; padding:14px 16px; font-size:13px; color: var(--color-primario-oscuro); }
.tabla-pedido td{ padding:14px 16px; border-top:1px solid var(--color-borde); font-size:14px; vertical-align:middle; }
.fila-pedido-producto{ display:flex; align-items:center; gap:12px; }
.fila-pedido-producto img{ width:56px; height:56px; border-radius:8px; object-fit:cover; background:#f2f5fa; }
.fila-pedido-cantidad{ display:flex; align-items:center; border:1px solid var(--color-borde); border-radius:50px; width:fit-content; }
.fila-pedido-cantidad button{ width:30px; height:30px; }
.fila-pedido-cantidad input{ width:36px; text-align:center; border:none; font-weight:700; }
.fila-pedido-eliminar{ color:#c0392b; }
.pedido-vacio{ text-align:center; padding:70px 20px; }
.pedido-vacio svg{ color: var(--color-borde); margin-bottom:16px; }
.pedido-resumen{ background:#fff; border:1px solid var(--color-borde); border-radius: var(--radio); padding:24px; margin-top:24px; }
.pedido-acciones-finales{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
@media (max-width:700px){ .tabla-pedido, .tabla-pedido thead{ display:none; } .tabla-pedido tbody, .tabla-pedido tr, .tabla-pedido td{ display:block; width:100%; } .tabla-pedido tr{ padding:14px 0; border-top:1px solid var(--color-borde); } }

/* ============ PIE DE PÁGINA ============ */
.pie-pagina{ background: var(--color-primario-oscuro); color: #dce6f5; margin-top:40px; }
.pie-pagina-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:36px; padding: 50px 20px 34px; }
.pie-columna h4{ color:#fff; font-size:15px; margin-bottom:16px; }
.pie-columna a{ display:block; padding:5px 0; font-size:14px; opacity:.85; }
.pie-columna a:hover{ opacity:1; color: var(--color-secundario); }
.pie-logo{ height:52px; margin-bottom:12px; background:#fff; border-radius:8px; padding:6px; }
.pie-marca p{ font-weight:600; margin-bottom:14px; }
.pie-redes{ display:flex; gap:14px; }
.pie-redes a{ opacity:.9; padding:0; }
.pie-redes a:hover{ color: var(--color-secundario); }
.pie-dato{ display:flex; align-items:center; gap:8px; font-size:13.5px; opacity:.9; padding:5px 0; }
.pie-texto-tenue{ font-size:13px; opacity:.6; }
.pie-inferior{ border-top: 1px solid rgba(255,255,255,.12); padding:16px 0; text-align:center; font-size:12.5px; opacity:.75; }
@media (max-width:860px){ .pie-pagina-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .pie-pagina-grid{ grid-template-columns: 1fr; } }

/* ============ MENÚ INFERIOR MÓVIL TIPO APP ============ */
.nav-movil{ display:none; }
@media (max-width: 980px){
  .nav-movil{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:250; background:#fff;
    box-shadow: 0 -4px 18px rgba(0,0,0,.08); padding: 6px 4px calc(env(safe-area-inset-bottom,0) + 6px);
  }
  .nav-movil a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px; color: var(--color-texto-suave); font-size:11px; font-weight:600; position:relative; }
  .nav-movil a.activo{ color: var(--color-primario); }
  .nav-movil-pedido .contador-pedido{ position:absolute; top:2px; right:22%; }
}

/* ============ BOTÓN FLOTANTE WHATSAPP ============ */
.whatsapp-flotante{
  position:fixed; bottom:84px; right:20px; z-index:260; background:#1e9e5b; color:#fff; width:58px; height:58px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 18px rgba(30,158,91,.45);
  transition: transform .2s ease;
}
.whatsapp-flotante:hover{ transform: scale(1.08); }
@media (min-width: 981px){ .whatsapp-flotante{ bottom:26px; } }

/* ============ UTILIDADES ============ */
.texto-centro{ text-align:center; }
.mt-20{ margin-top:20px; } .mb-20{ margin-bottom:20px; }
.oculto{ display:none !important; }