/* ============ base.css (unido en sitio.css v8, 2026-10-08) ============ */
/* ============================================================
   CHIMBOTE AL DÍA — CSS BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ====== MARCA (Granate + Crema) ====== */
:root {
    --marca-granate: #6d071a;        /* rojo oscuro / vino intenso */
    --marca-granate-osc: #4a0512;    /* hover más profundo */
    --marca-crema: #f7efe2;          /* crema muy claro */
    --marca-marron: #7a5230;         /* líneas / destellos */
    --marca-naranja: #ea6a12;        /* llamados a la acción */
    --marca-naranja-osc: #c8550a;
    --marca-link: #123c6b;           /* azul noche para enlaces */
    --texto-negro: #171717;          /* textos siempre negro */

    --color-primario: #6d071a;
    --color-acento: #ea6a12;
    --color-fondo-app: #f7efe2;
    --color-fondo-tarjeta: #ffffff;
    --color-texto: #171717;
    --color-texto-claro: #5b5b5b;
    --color-borde: #e6dbc8;
    --color-exito: #16a34a;
    --color-warning: #f59e0b;
    --color-error: #dc2626;
    --color-wsp: #25d366;

    --radio-borde: 12px;
    --sombra-tarjeta: 0 4px 12px rgba(109,7,26,0.08);
    --sombra-hover: 0 8px 24px rgba(109,7,26,0.14);
    --max-ancho: 1200px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-texto);
    background: var(--color-fondo-app);
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ====== PALETAS (sobrescribibles por data-color) ====== */
/* Paleta de marca por defecto del sitio: granate + crema */
body[data-color="granate"] { --color-primario: #6d071a; --color-acento: #ea6a12; --color-fondo-app: #f7efe2; }
/* Paletas elegibles para la FICHA de cada negocio (elección del dueño) */
body[data-color="azul"]   { --color-primario: #1e40af; --color-acento: #3b82f6; --color-fondo-app: #f1f5f9; }
body[data-color="verde"]  { --color-primario: #15803d; --color-acento: #22c55e; --color-fondo-app: #f0fdf4; }
body[data-color="rojo"]   { --color-primario: #b91c1c; --color-acento: #ef4444; --color-fondo-app: #fef2f2; }
body[data-color="dorado"] { --color-primario: #b45309; --color-acento: #f59e0b; --color-fondo-app: #fffbeb; }

/* Enlaces en azul noche */
a:not([class]) { color: var(--marca-link); }
.topbar a, .footer a { color: inherit; }


/* ============ components.css (unido en sitio.css v8, 2026-10-08) ============ */
/* ============================================================
   CHIMBOTE AL DÍA — COMPONENTES (topbar, footer, cards, etc.)
   ============================================================ */

/* ====== BANDA DE LA MARCA (va ARRIBA de la cabecera fija) ======
   Pedido del jefe (2026-09-10): al bajar, arriba deben quedar SOLO el buscador y los rubros.
   La marca "DeChimbote.com" y el menú ☰ viven aquí, en una banda que NO es fija (no lleva
   position: sticky), así que se van solas con el scroll y vuelven al subir. Mientras tanto
   <header class="topbar"> sí es fija y mantiene el buscador + la marquesina de rubros. */
.marca-banda {
    background: linear-gradient(135deg, var(--marca-granate) 0%, var(--marca-granate-osc) 100%);
    color: #fff;
}
.marca-banda .topbar__barra {
    max-width: var(--max-ancho);
    margin: 0 auto;
    padding: 10px 14px;
}

/* ====== TOPBAR ====== */
.topbar {
    background: linear-gradient(135deg, var(--marca-granate) 0%, var(--marca-granate-osc) 100%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 6px rgba(74,5,18,0.35);
}

/* ====== CABECERA (rediseño 2026-09-10, pedido del jefe) ======
   La cabecera FIJA lleva solo el buscador grande y la marquesina de rubros; la marca y el menú
   hamburguesa van en la banda de arriba (.marca-banda), que se va con el scroll.
   Antes la barra tenía 5 botones con iconos: en móvil no cabían y "Salir" ni se veía. */
.topbar__inner {
    max-width: var(--max-ancho);
    margin: 0 auto;
    padding: 8px 14px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.topbar__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}

/* La marca es el LOGO EN IMAGEN (2026-09-15, orden del jefe): aquí decía el texto
   "📍 Chimbote.xyz" y se anuló. El archivo es blanco CON TRANSPARENCIA (el fondo granate
   del recorte se volvió transparente), así que se apoya en esta banda —que es un degradado
   de granates— sin que se vea el rectángulo del recorte.
   El logo es muy apaisado (593 × 67), por eso en escritorio manda el ALTO y en móvil el ANCHO. */
.topbar__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.topbar__logo-img { display: block; height: 44px; width: auto; }

/* Botón del menú hamburguesa */
.topbar__burger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    color: #fff;
    font: 700 14px/1 inherit;
    /* ⚡ UX 2026-10-08: alto táctil 48px (guía web.dev tap targets) */
    padding: 17px 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease;
}
.topbar__burger:hover { background: rgba(255,255,255,.2); }
.topbar__burger:active { transform: scale(.97); }
.topbar__burger-lineas { display: inline-flex; flex-direction: column; gap: 4px; }
.topbar__burger-lineas span {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff;
    transition: transform .18s ease, opacity .18s ease;
}
.topbar__burger.is-abierto .topbar__burger-lineas span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar__burger.is-abierto .topbar__burger-lineas span:nth-child(2) { opacity: 0; }
.topbar__burger.is-abierto .topbar__burger-lineas span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.topbar__burger-txt { font-size: 14px; }

/* ⚠️ HAY DOS COPIAS DE LA MARCA Y DOS BOTONES ☰ (2026-09-20): la de CELULAR, que vive en la banda
   de arriba (.marca-banda), y la de PC, que va en la MISMA FILA del buscador. De fábrica (celular)
   solo se pinta la de la banda; la de PC la enciende la media query de escritorio (más abajo).
   Las dos clases --pc van DESPUÉS de sus reglas base a propósito: así las apagan sin `!important`. */
.topbar__logo--pc,
.topbar__burger--pc { display: none; }

/* Buscador grande y centrado */
.topbar__search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: 999px;
    padding: 5px 6px 5px 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,.16);
}

.topbar__search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: #3a3a3a;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
    outline: none;
}

.topbar__search input::placeholder { color: #9d8c88; }

/* Botón de ENTER invisible: mantiene el envío con ENTER en todos los navegadores
   aunque la lupa ya no se muestre (pedido del jefe: la lupa sobraba). */
.sr-solo {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.topbar__search .sr-solo { padding: 0; color: transparent; background: transparent; }

/* ====== BUSCADOR PREDICTIVO ====== */
.pred-wrap { position: relative; }
.topbar__search .pred-wrap { flex: 1; display: flex; min-width: 0; }
.pred-wrap input { width: 100%; }
.pred-sug {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
  background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden; text-align: left; max-height: 70vh; overflow-y: auto;
}
.pred-sug__grupo { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing:.05em; color: var(--marca-granate); padding: 8px 12px 2px; background:#fdf6f3; }
.pred-item {
  display: block; padding: 9px 12px; color: var(--color-texto); font-size: 14px;
  border-top: 1px solid var(--color-borde); cursor: pointer; text-decoration: none;
}
.pred-item:hover { background: var(--marca-crema); }
.pred-item .pre { font-weight:600; color:var(--color-texto); }
.pred-item .meta { font-size:11px; color:var(--color-texto-claro); display:block; }
.pred-item .precio { color:var(--marca-granate); font-weight:700; }
.pred-item em { background:#ffe9a8; font-style:normal; }
.pred-vacio { padding: 12px; color: var(--color-texto-claro); font-size: 13px; }

/* ====== BUSCADOR FUZZY (Fuse.js) — buscador_fuzzy.js ====== */
.dropdown-fuzzy { /* hereda el aspecto de .pred-sug */ }
.dropdown-fuzzy__item.is-sel,
.dropdown-fuzzy__item:hover { background: var(--marca-crema); }
.dropdown-fuzzy__item.is-sel { box-shadow: inset 3px 0 0 var(--marca-granate); }
.dropdown-fuzzy__item .meta { font-size: 12px; }
.dropdown-fuzzy__ver {
  display: block; padding: 11px 12px; font-size: 13px; font-weight: 700;
  color: var(--marca-granate); background: #fdf6f3; text-decoration: none;
  border-top: 1px solid var(--color-borde);
}
.dropdown-fuzzy__ver:hover { background: var(--marca-crema); }
/* Bloque "¿Buscabas alguno de estos?" que se pinta en la página sin resultados */
.dropdown-fuzzy__sugerencias {
  background: #fff; border: 1px solid var(--color-borde); border-radius: 12px;
  box-shadow: var(--sombra-tarjeta); padding: 12px 12px 6px; margin: 0 0 16px;
}
.dropdown-fuzzy__sug-titulo { font-size: 15px; font-weight: 700; color: var(--color-texto); margin: 0 0 10px; }
.dropdown-fuzzy__lista .dropdown-fuzzy__item { border: 1px solid var(--color-borde); border-radius: 10px; margin-bottom: 8px; }
.dropdown-fuzzy__sug-pie { margin: 2px 0 8px; font-size: 13px; font-weight: 700; }
.dropdown-fuzzy__sug-pie a { color: var(--marca-granate); text-decoration: none; }
/* Móvil-primero: 16 px evita el zoom automático de iOS al tocar el campo */
@media (max-width: 640px) {
  .topbar__search input { font-size: 16px; }
  .dropdown-fuzzy__item { font-size: 15px; }
}


.topbar__search button {
    background: transparent;
    color: #fff;
    padding: 0 12px;
    font-size: 16px;
}

.topbar__nav {
    display: flex;
    gap: 6px;
    align-items: center;
}

.topbar__btn {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.topbar__btn:hover { background: rgba(255,255,255,0.2); }

.topbar__btn--primary { background: var(--marca-naranja); color: #fff; }
.topbar__btn--primary:hover { background: var(--marca-naranja-osc); }

.topbar__btn--salir { background: rgba(255,255,255,0.08); color: #ffe3e8; }
.topbar__btn--salir:hover { background: rgba(220,38,38,0.9); color: #fff; }
/* En móvil el botón Salir siempre se ve como ícono circular táctil */
.topbar__btn--salir .topbar__btn-icon { font-size: 15px; line-height: 1; }

.topbar__btn--admin { background: var(--marca-granate-osc); color: var(--marca-crema); border:1px solid rgba(255,255,255,.3); }
.topbar__btn--admin:hover { background: #7c3aed; }

.topbar__cats {
    max-width: var(--max-ancho);
    margin: 0 auto;
    padding: 0 10px 8px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.topbar__cats::-webkit-scrollbar { display: none; }

.topbar__cats a {
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.topbar__cats a:hover { background: rgba(255,255,255,0.2); }

.topbar__cats a.is-active {
    background: var(--marca-crema);
    color: var(--marca-granate);
    font-weight: 600;
}

/* ====== (2026-09-13) AQUÍ VIVÍA LA BANDA DEL CHAT COMUNITARIO ======
   El jefe ordenó retirar del sitio ese chat completo, así que la regla de esa franja
   granate (la que pintaba includes/chat_mini.php desde header.php) ya no existe.
   No volver a añadirla. */

/* ====== MAIN ====== */
.main {
    max-width: var(--max-ancho);
    margin: 0 auto;
    padding: 16px;
    min-height: 60vh;
}

/* ====== FLASH MESSAGES ====== */
.flash-container {
    max-width: var(--max-ancho);
    margin: 8px auto 0;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flash {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border-left: 4px solid;
}

.flash--info    { background: #eff6ff; color: #1e40af; border-color: #3b82f6; }
.flash--exito   { background: #f0fdf4; color: #15803d; border-color: #22c55e; }
.flash--error   { background: #fef2f2; color: #b91c1c; border-color: #ef4444; }
.flash--warning { background: #fffbeb; color: #b45309; border-color: #f59e0b; }

/* ====== CARDS DE NEGOCIO (portada, buscador, categoría) ====== */
.grid-negocios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.card-negocio {
    background: var(--color-fondo-tarjeta);
    border-radius: var(--radio-borde);
    overflow: hidden;
    box-shadow: var(--sombra-tarjeta);
    transition: transform 0.15s, box-shadow 0.15s;
    border: 1px solid var(--color-borde);
    display: flex;
    flex-direction: column;
}

.card-negocio:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover);
}

.card-negocio__imagen {
    aspect-ratio: 16 / 10;
    background: #f3f4f6;
    position: relative;
    overflow: hidden;
}

.card-negocio__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-negocio__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--color-acento);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.card-negocio__destacado {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #fbbf24;
    color: #78350f;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.card-negocio__body {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-negocio__titulo {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-texto);
    line-height: 1.25;
}

.card-negocio__categoria {
    font-size: 12px;
    color: var(--color-texto-claro);
    margin-bottom: 8px;
}

.card-negocio__categoria .icono {
    margin-right: 4px;
}

.card-negocio__meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--color-texto-claro);
    margin-top: auto;
}

.card-negocio__rating {
    color: #f59e0b;
    font-weight: 600;
}

/* ====== GRID DE PRODUCTOS EN PORTADA (5x2) ====== */
.grid-productos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.card-producto {
    background: var(--color-fondo-tarjeta);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-borde);
    box-shadow: var(--sombra-tarjeta);
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    color: inherit;
}
.card-producto:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.card-producto__img {
    position: relative;
    /* Foto más baja a propósito (pedido del jefe 2026-09-10): antes era cuadrada (1/1) y
       ocupaba mucho; ahora la altura es el 70 % del ancho, así la tarjeta es más compacta. */
    aspect-ratio: 10 / 7;
    background: #f3f4f6;
    overflow: hidden;
}
.card-producto__img img { width:100%; height:100%; object-fit:cover; }
.card-producto__img .tag-top {
    position:absolute; top:6px; left:6px; background:#fbbf24; color:#78350f;
    font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px;
}
.card-producto__body { padding:8px 9px; display:flex; flex-direction:column; flex:1; }
.card-producto__titulo { font-size:13px; font-weight:600; line-height:1.25; color:var(--color-texto);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-producto__negocio { font-size:11px; color:var(--color-texto-claro); margin-top:2px;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.card-producto__precio { margin-top:auto; padding-top:5px; font-weight:700; color:var(--color-primario); font-size:14px; }
.card-producto__precio .uni { font-weight:400; color:var(--color-texto-claro); font-size:11px; }

@media (max-width: 900px){ .grid-productos{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .grid-productos{ grid-template-columns: repeat(2,1fr); gap:9px; } }

/* ====== CARRUSEL DE PRODUCTOS EN PORTADA (6 por fila, con scroll lateral) ======
   Pedido del jefe (2026-09-10): en vez de la cuadrícula, cada fila lleva 6 productos y se
   desliza de lado. En CELULAR se ven 2 completos y un pedazo del 3.º (44 % cada uno), para que
   se entienda que hay más al costado; en escritorio entran los 6 justos y no hace falta scroll.
   Lo pinta index.php: 4 filas = 24 productos, con banners de publicidad en medio. */
.carrusel-productos {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 6px;
}
.carrusel-productos::-webkit-scrollbar { display: none; }
.carrusel-productos > .card-producto {
    flex: 0 0 42%;                 /* celular: 2 completos + un pedazo del tercero (~2 y 1/3) */
    scroll-snap-align: start;
}
@media (min-width: 560px) { .carrusel-productos > .card-producto { flex: 0 0 31%; } }
@media (min-width: 760px) { .carrusel-productos > .card-producto { flex: 0 0 calc((100% - 50px) / 6); } }

/* ====== NEGOCIOS EN DOS COLUMNAS TAMBIÉN EN CELULAR (solo portada) ======
   Pedido del jefe: "Negocios para ti" y "Más vistos" siempre en DOS columnas. Se usa la clase
   extra .grid-negocios--dos SOLO en la portada: las demás páginas (buscador, categoría) siguen
   con su rejilla actual. Lleva las dos clases juntas para ganar a la regla de móvil global. */
.grid-negocios.grid-negocios--dos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 640px) {
    .grid-negocios--dos .card-negocio__body { padding: 9px; }
    .grid-negocios--dos .card-negocio__titulo { font-size: 14px; }
    .grid-negocios--dos .card-negocio__categoria,
    .grid-negocios--dos .card-negocio__meta { font-size: 11px; }
}

/* ====== CARRUSEL DE TIENDAS RECOMENDADAS (fichas apaisadas) ====== */
/* 🚫 SIN BARRA DESLIZADORA (orden del jefe, 2026-09-16, textual): *«abajo de cada scroll has puesto
   como una especie de barra deslizadora que no es necesario que vaya»*. Antes llevaba
   `scrollbar-width: thin` y en PC se veía una barra fina debajo de CADA fila (el bloque de «Nuevos
   ingresos» tiene dos, y las filas de productos del ciclo también). Ahora va como el carrusel de
   productos (`.carrusel-productos`): **sin barra en ningún navegador**. El bloque se sigue deslizando
   con el dedo, la rueda o el trackpad — solo se quita el adorno.
   ⚠️ Fue el CSS de `components.css`: este archivo se sirve con marca de versión, así que el cambio
   solo se ve al subir con su `?v=` nuevo. */
.carrusel-tiendas {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.carrusel-tiendas::-webkit-scrollbar { display: none; }
.card-tienda-h {
    flex: 0 0 240px;
    scroll-snap-align: start;
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-tarjeta);
    display: flex;
    flex-direction: row;          /* apaisada: imagen izquierda + info derecha */
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
}
.card-tienda-h:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.card-tienda-h__img { position: relative; width: 108px; flex: 0 0 108px; background:#f3f4f6; overflow:hidden; }
.card-tienda-h__img img { width:100%; height:100%; object-fit:cover; }
.card-tienda-h__badge { position:absolute; top:5px; left:5px; background:rgba(109,7,26,.9); color:#fff; width:24px;height:24px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:13px; }
.card-tienda-h__body { flex:1; padding:8px 10px; display:flex; flex-direction:column; min-width:0; }
.card-tienda-h__titulo { font-size:13px; font-weight:700; line-height:1.25; color:var(--color-texto);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-tienda-h__meta { font-size:11px; color:var(--color-texto-claro); margin-top:3px;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.card-tienda-h__meta2 { margin-top:auto; padding-top:6px; font-size:11px; color:var(--color-texto-claro); }
@media (max-width: 480px){ .card-tienda-h{ flex-basis: 205px; } .card-tienda-h__img{ width:90px; flex-basis:90px; } }

/* ====== SECCIONES PORTADA ====== */
.seccion {
    margin-bottom: 32px;
}

/* Versión compacta (portada): las filas de productos van más juntas entre sí y con los banners,
   para que la página se vea apretada y no con tanto aire (pedido del jefe 2026-09-10). */
.seccion--compacta { margin-bottom: 10px; }

.seccion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.seccion__titulo {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-texto);
}

.seccion__ver-todas {
    font-size: 13px;
    color: var(--color-acento);
    font-weight: 600;
}

/* ====== HERO PORTADA ====== */
.hero {
    background: linear-gradient(135deg, var(--marca-granate) 0%, var(--marca-granate-osc) 100%);
    color: var(--marca-crema);
    border: 1px solid rgba(247,239,226,.25);
    border-radius: 16px;
    padding: 24px 20px;
    margin-bottom: 24px;
    text-align: center;
}

.hero__titulo {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #fff;
}

.hero__sub {
    font-size: 15px;
    opacity: 0.95;
    margin-bottom: 16px;
}

.hero__cta {
    display: inline-block;
    padding: 12px 24px;
    background: var(--marca-naranja);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
}
.hero__cta:hover { background: var(--marca-naranja-osc); }

/* ====== FORMULARIOS ====== */
.form {
    max-width: 400px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radio-borde);
    padding: 24px;
    box-shadow: var(--sombra-tarjeta);
}

.form__group {
    margin-bottom: 16px;
}

.form__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-texto);
}

.form__input,
.form__select,
.form__textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    font-size: 15px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.form__textarea {
    resize: vertical;
    min-height: 80px;
}

.form__checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    background: var(--color-acento);
    color: #fff;
    transition: background 0.15s;
    border: 0;
    cursor: pointer;
}

.btn:hover { background: var(--color-primario); }

.btn--block { width: 100%; }
.btn--outline { background: transparent; color: var(--color-primario); border: 1px solid var(--color-primario); }
.btn--wsp { background: var(--color-wsp); }

/* ====== EMPTY STATE ====== */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-texto-claro);
}

.empty-state__icono {
    font-size: 48px;
    margin-bottom: 12px;
}

.empty-state__titulo {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 6px;
}

/* ====== FOOTER ====== */
.footer {
    background: linear-gradient(135deg, var(--marca-granate-osc) 0%, var(--marca-granate) 100%);
    color: var(--marca-crema);
    margin-top: 40px;
    padding: 32px 16px 16px;
}

.footer__inner {
    max-width: var(--max-ancho);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(247,239,226,.2);
}

.footer__col h4 {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}

.footer__col p {
    font-size: 13px;
    line-height: 1.5;
}

.footer__col ul li {
    margin-bottom: 6px;
}

.footer__col ul li a {
    font-size: 13px;
    color: var(--marca-crema);
    opacity: .85;
}

.footer__col ul li a:hover { color: #fff; opacity: 1; }

.footer__copy {
    max-width: var(--max-ancho);
    margin: 16px auto 0;
    text-align: center;
    font-size: 12px;
    color: var(--marca-crema);
    opacity: .7;
}

/* ====== BUSCADOR POR VOZ (Web Speech API) — buscador_voz.js ======
   El micrófono lo pinta el JS al lado de cada buscador (#buscador-fuzzy / [data-fuzzy]).
   Si el navegador no soporta la Web Speech API, el botón NO existe (nunca un botón muerto). */
.pred-wrap--voz input { padding-right: 54px; }
.topbar__search .pred-wrap--voz input { padding-right: 56px; }

.btn-voz {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; min-width: 42px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: var(--marca-naranja, #ea6a12); color: #fff;
    line-height: 1; cursor: pointer; z-index: 2;
    box-shadow: 0 2px 7px rgba(0,0,0,.28);
    transition: background .15s ease, transform .12s ease;
}
/* El dibujo del micrófono (SVG) — igual en celular, tablet y PC. Nunca un emoji:
   el emoji lo pinta el aparato y en Windows salía gris apagado sobre el naranja. */
.btn-voz svg { display: block; width: 22px; height: 22px; }
/* La barra superior tiene su propia regla para sus botones: esta la gana. */
.topbar__search .btn-voz { background: var(--marca-naranja, #ea6a12); color: #fff; padding: 0; }
.btn-voz:hover { background: var(--marca-naranja-osc, #c8550a); }
.btn-voz:active { transform: translateY(-50%) scale(.92); }
.btn-voz:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn-voz__icono { display: block; pointer-events: none; }

/* Escuchando: late en rojo para que se vea de un vistazo (se usa caminando, en la calle) */
.btn-voz.is-escuchando { background: #c1121f; animation: voz-latido 1.1s ease-in-out infinite; }
@keyframes voz-latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(193,18,31,.65); }
    50%      { box-shadow: 0 0 0 7px rgba(193,18,31,0); }
}
@media (prefers-reduced-motion: reduce) { .btn-voz.is-escuchando { animation: none; } }

/* El campo mientras se dicta */
input.voz-escuchando::placeholder { color: var(--color-error, #dc2626); font-weight: 700; }
.topbar__search input.voz-escuchando::placeholder { color: var(--marca-granate); }

/* Aviso del micrófono: permiso denegado, "no te escuché", sin conexión… */
.voz-aviso {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 320;
    display: none; text-align: left;
    background: #fff; color: var(--color-texto);
    border-left: 4px solid var(--marca-naranja, #ea6a12); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    padding: 10px 12px; font-size: 14px; line-height: 1.35;
}
.voz-aviso--visible { display: block; }
.voz-aviso--error { border-left-color: var(--color-error, #dc2626); }
/* Mientras hay aviso, el desplegable fuzzy no debe taparlo */
.pred-wrap.voz-con-aviso .dropdown-fuzzy { display: none !important; }

/* ====== ESCRITORIO: LA CABECERA EN UNA SOLA FILA (logo · buscador · ☰ Menú) ======
   Orden del jefe (2026-09-20): *«reduce el ancho del buscador en el modo PC… debe verse el menú
   hamburguesa y debe verse el logo al costado, ocupando los tres una sola fila»*.
   Cómo queda:
     · La banda de la marca (.marca-banda) NO se pinta en PC: su logo y su ☰ se mudan a esta fila.
     · El buscador BAJA de 760 px a 560 px y queda centrado entre el logo y el botón.
     · El ☰ va al extremo derecho y las tres piezas caben en los 1200 px de --max-ancho.
   ⚠️ EN EL CELULAR NO CAMBIA NADA: sigue la banda arriba (que se va con el scroll) y el buscador
   abajo, ancho, dentro de la cabecera fija. Por eso el corte está en 900 px: por debajo de eso el
   logo (336 px) + el buscador + el ☰ no caben con holgura en una sola fila. */
@media (min-width: 900px) {
    .marca-banda { display: none; }
    .topbar__inner {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 10px 14px 6px;
    }
    .topbar__logo--pc { display: inline-flex; flex: 0 0 auto; }
    /* El logo es muy apaisado (593 × 67): a 38 px de alto mide 336 px de ancho */
    .topbar__logo--pc .topbar__logo-img { height: 38px; width: auto; }
    .topbar__burger--pc { display: inline-flex; flex: 0 0 auto; }
    /* flex + `margin: 0 auto`: el buscador se queda centrado entre el logo y el ☰ */
    .topbar__search { flex: 1 1 auto; max-width: 560px; }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 640px) {
    .topbar__inner { gap: 6px; padding: 7px 12px 2px; }
    .marca-banda .topbar__barra { padding: 8px 12px; }
    /* En celular el logo se mide por ANCHO: al costado va el botón ☰ y en un teléfono de
       320 px tienen que entrar los dos. 56vw deja aire suficiente para el botón "Menú".
       La primera línea es el respaldo para navegadores viejos que no entienden min(). */
    .topbar__logo-img { height: auto; width: 56vw; width: min(56vw, 300px); }
    .topbar__burger { padding: 9px 13px; }
    .topbar__burger-txt { font-size: 13px; }
    .topbar__search { padding: 4px 5px 4px 16px; }
    .topbar__search input { padding: 11px 0; }
    .hero__titulo { font-size: 22px; }
    .grid-negocios { grid-template-columns: 1fr; }
    .seccion__titulo { font-size: 18px; }
    /* El micrófono no se achica: se toca con el dedo, muchas veces en la calle */
    /* ⚡ UX 2026-10-08: 48px mínimo (guía web.dev tap targets) */
    .btn-voz { width: 48px; height: 48px; min-width: 48px; }
    .pred-wrap--voz input,
    .topbar__search .pred-wrap--voz input { padding-right: 60px; }
}

/* ==========================================================================
   ZOOM DE GALERÍA — la foto se ve pequeña y se amplía al tocarla
   Motor: assets/js/imagen_zoom.js · Se activa con la clase .cz-zoom
   (o con el atributo data-full) en el <img>.
   ES UNA GALERÍA (arreglo del 2026-09-14): al abrir una foto se abre toda la
   galería del negocio y se pasa de una a otra deslizando ← →, con los botones
   ‹ › o con las flechas del teclado. Arriba a la izquierda va el contador
   «3 / 8». Pensado para MÓVIL: ✕ grande, cierre tocando el fondo, con Esc o
   deslizando ↓, y se permite el pellizco para acercar.
   ========================================================================== */
.cz-zoom { cursor: zoom-in; }

body.cz-zoom-abierto { overflow: hidden; }

.cz-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 12, .96);
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.cz-zoom-overlay--visible { display: flex; }

.cz-zoom-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    /* la opacidad y el desplazamiento: al pasar de foto una se va y la otra entra */
    transition: opacity .18s ease, transform .18s ease;
    touch-action: pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.cz-zoom-img--lista { opacity: 1; }

/* 🔢 EL CONTADOR «3 / 8» (arriba a la izquierda): dice por dónde vas */
.cz-zoom-contador {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    left: calc(16px + env(safe-area-inset-left));
    display: none;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .3px;
    z-index: 2;
}
.cz-zoom-overlay--multiple .cz-zoom-contador { display: block; }

/* ‹ › PASAR DE FOTO: se pintan SOLO si la galería tiene más de una foto */
.cz-zoom-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #171717;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.cz-zoom-overlay--multiple .cz-zoom-nav { display: flex; }
.cz-zoom-nav--ant { left: calc(8px + env(safe-area-inset-left)); }
.cz-zoom-nav--sig { right: calc(8px + env(safe-area-inset-right)); }
.cz-zoom-nav:active { background: #fff; }

.cz-zoom-cerrar {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #171717;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.cz-zoom-cargando {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    opacity: .85;
}

.cz-zoom-pista {
    position: absolute;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 600;
    pointer-events: auto;
}

/* ==========================================================================
   MENÚ PRINCIPAL (hamburguesa) — 2026-09-10, pedido del jefe
   Lo pinta includes/header.php y lo abre/cierra el script de ese mismo archivo.
   Reemplaza a los botones con iconos de la barra (en móvil no cabían).
   Sirve igual para el visitante sin cuenta y para el usuario logueado.

   📏 COMPACTO (orden del jefe, 2026-09-21): *«lo vas a hacer un poco más compacto»*.
   Al entrar la sección «Nosotros» (tres opciones más) el panel se hacía muy largo, así que
   se apretó el ritmo vertical SIN quitar nada: se recortaron los rellenos y los márgenes
   (cabecera 13/15 → 10/12 px, renglón 11/12 → 8/10 px, grupo 16/6 → 11/3 px), el logo del
   panel (250 → 205 px), la ✕ (38 → 34 px) y los chips de rubro (13 → 12 px). Los TÍTULOS se
   quedan en 15,5 px (16 px en celular) y las descripciones en 11,5 px: lo que se aprieta es el
   aire, no la letra. Si hay que apretarlo más, se sigue por los rellenos, nunca por la fuente.
   ========================================================================== */
.menu-principal { position: fixed; inset: 0; z-index: 1200; }

.menu-principal__fondo {
    position: absolute; inset: 0;
    background: rgba(28, 3, 10, .58);
    backdrop-filter: blur(2px);
    animation: menuFondo .18s ease-out;
}

/* Panel FLOTANTE: no llega a los bordes (deja ver la página detrás, efecto 3D) y ocupa como
   mucho el 80 % del ancho en celular / 480 px en escritorio. Pedido del jefe 2026-09-10. */
.menu-principal__caja {
    position: absolute; top: 10px; right: 10px; bottom: 10px;
    width: min(80vw, 480px);
    background: #fff;
    display: flex; flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: -16px 0 46px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.3);
    animation: menuEntra .24s ease-out;
}

@keyframes menuFondo { from { opacity: 0 } to { opacity: 1 } }
@keyframes menuEntra { from { transform: translateX(26px); opacity: .35 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
    .menu-principal__fondo, .menu-principal__caja { animation: none; }
}

.menu-principal__head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--marca-granate) 0%, var(--marca-granate-osc) 100%);
    color: #fff;
}

.menu-principal__marca {
    display: inline-flex; align-items: center;
    color: #fff; text-decoration: none;
}
/* En el cajón del menú manda el ANCHO: a la derecha va la ✕ y en celular el cajón mide 80vw.
   La primera línea es el respaldo para navegadores viejos que no entienden min(). */
.menu-principal__marca-img { display: block; width: 40vw; width: min(40vw, 205px); height: auto; }

.menu-principal__x {
    /* ⚡ UX 2026-10-08: 48px mínimo (guía web.dev tap targets) */
    width: 48px; height: 48px; min-width: 48px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.14); color: #fff;
    font-size: 15px; line-height: 1; cursor: pointer;
}
.menu-principal__x:hover { background: rgba(255,255,255,.26); }

.menu-principal__cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 10px 12px;
}

.menu-principal__grupo {
    margin: 11px 0 3px;
    font-size: 11px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--marca-granate); opacity: .82;
}

.menu-principal__item {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 8px 10px; border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none; color: var(--color-texto);
}
.menu-principal__item:hover { background: #fdf3ee; border-color: #f0dcd2; }
.menu-principal__item--destacado { background: #fff4e6; border-color: #f2d1a8; }
.menu-principal__item--destacado:hover { background: #ffedd8; }

.menu-principal__ico { flex: 0 0 auto; font-size: 17px; line-height: 1.3; }
.menu-principal__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-principal__t { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.menu-principal__s { font-size: 11.5px; line-height: 1.3; color: var(--color-texto-claro, #6b6b6b); }

.menu-principal__rubros { display: flex; flex-wrap: wrap; gap: 5px; padding: 3px 0 1px; }
.menu-principal__rubros a {
    font-size: 12px; font-weight: 600; text-decoration: none;
    color: var(--marca-granate);
    background: #f8ece7; border: 1px solid #ecd9cf;
    border-radius: 999px; padding: 5px 9px;
}
.menu-principal__rubros a:hover { background: var(--marca-crema); }

.menu-principal__pie {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 11px; color: #7a7a7a;
    background: #faf7f4; border-top: 1px solid #eee;
}

/* El botón "Negocios cerca de mí" (módulo includes/btn_cerca.php) entra en el menú
   como una opción más: verde, ancho completo y con su propio aviso de ubicación. */
.menu-principal .btc-cerca { margin: 0; max-width: none; }
.menu-principal .btc-cerca__btn { border-radius: 10px; padding: 10px 12px; }
.menu-principal .btc-cerca__t { font-size: 15px; }
.menu-principal .btc-cerca__s { font-size: 11.5px; }
.menu-principal .btc-cerca__estado { font-size: 12.5px; margin-top: 6px; }

@media (max-width: 640px) {
    .menu-principal__caja { width: 80vw; top: 8px; right: 8px; bottom: 8px; }
    /* En celular el título se queda en 16 px (manda la legibilidad): lo compacto es el aire. */
    .menu-principal__t { font-size: 16px; }
}

/* ===================================================================
   ✍️ COPY ENRIQUECIDO DE LA FICHA — clases .cz-* (opt-in)
   -------------------------------------------------------------------
   Para qué sirve: que la descripción de una ficha ("Sobre nosotros") se
   pueda escribir como una publicación PRESENTABLE: títulos de sección con
   color, listas con viñeta de color y llamadas a la acción destacadas.

   Cómo se usa (dentro de la descripción del negocio):

       <h3 class="cz-tit">🍽️ Título de la ficha</h3>
       <p>Texto…</p>
       <h3 class="cz-sub">📋 Título de sección (salto de pantalla)</h3>
       <ul class="cz-lista"><li>punto uno</li><li>punto dos</li></ul>
       <p class="cz-cta">👉 Llamada a la acción normal</p>
       <p class="cz-cta-final">🎉 Llamada a la acción de cierre</p>

   Tres cosas importantes:
   1) El color NO va en el HTML: sale de la PALETA del dueño (--color-primario
      / --color-acento, que base.css define por `body[data-color]`). Por eso la
      misma clase se ve roja en un restaurante, verde en un colegio o azul en
      una iglesia, sin tocar una línea de CSS.
   2) Es OPT-IN: solo cambia lo que lleve la clase. Las fichas que no la usan
      se ven exactamente igual que antes (ninguna de las ~1 500 se altera).
   3) Las etiquetas permitidas en la descripción son h3 p strong b em i ul ol
      li br (limpiar_html_descripcion(), includes/helpers.php). Los ATRIBUTOS
      —como class— sí se conservan; <span> o <div> NO se permiten, así que el
      diseño se resuelve aquí y no en el HTML del negocio.
   =================================================================== */

.ficha-A__descripcion-contenido .cz-tit,
.ficha-B__descripcion-contenido .cz-tit,
.ficha-C__info-bloque-contenido .cz-tit {
    display: block;
    background: linear-gradient(100deg, var(--color-primario) 0%, var(--color-acento) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.01em;
    margin: 18px 0 10px;
    padding: 9px 12px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.ficha-A__descripcion-contenido .cz-tit:first-child,
.ficha-B__descripcion-contenido .cz-tit:first-child,
.ficha-C__info-bloque-contenido .cz-tit:first-child { margin-top: 0; }

/* Subtítulo de sección: el "salto de pantalla" del copy. Barra de color a la
   izquierda + texto en el color de la paleta, para separar bloques de
   información sin repetir el degradado del título. */
.ficha-A__descripcion-contenido .cz-sub,
.ficha-B__descripcion-contenido .cz-sub,
.ficha-C__info-bloque-contenido .cz-sub {
    display: block;
    margin: 16px 0 8px;
    padding: 7px 11px;
    border-left: 4px solid var(--color-acento);
    border-radius: 0 8px 8px 0;
    background: var(--color-fondo-app);
    color: var(--color-primario);
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.35;
}

.ficha-A__descripcion-contenido .cz-lista,
.ficha-B__descripcion-contenido .cz-lista,
.ficha-C__info-bloque-contenido .cz-lista {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.ficha-A__descripcion-contenido .cz-lista li,
.ficha-B__descripcion-contenido .cz-lista li,
.ficha-C__info-bloque-contenido .cz-lista li {
    position: relative;
    padding: 6px 0 6px 20px;
    line-height: 1.55;
    border-bottom: 1px dashed var(--color-borde);
}
.ficha-A__descripcion-contenido .cz-lista li:last-child,
.ficha-B__descripcion-contenido .cz-lista li:last-child,
.ficha-C__info-bloque-contenido .cz-lista li:last-child { border-bottom: 0; }
.ficha-A__descripcion-contenido .cz-lista li::before,
.ficha-B__descripcion-contenido .cz-lista li::before,
.ficha-C__info-bloque-contenido .cz-lista li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--color-acento);
}

.ficha-A__descripcion-contenido .cz-cta,
.ficha-B__descripcion-contenido .cz-cta,
.ficha-C__info-bloque-contenido .cz-cta {
    margin: 0 0 10px;
    padding: 11px 13px;
    border-left: 4px solid var(--color-primario);
    border-radius: 0 10px 10px 0;
    background: var(--color-fondo-app);
    font-size: 14px;
    line-height: 1.55;
}
.ficha-A__descripcion-contenido .cz-cta-final,
.ficha-B__descripcion-contenido .cz-cta-final,
.ficha-C__info-bloque-contenido .cz-cta-final {
    margin: 16px 0 4px;
    padding: 13px 14px;
    border-radius: 12px;
    background: linear-gradient(100deg, var(--color-primario) 0%, var(--color-acento) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.ficha-A__descripcion-contenido .cz-cta-final strong,
.ficha-B__descripcion-contenido .cz-cta-final strong,
.ficha-C__info-bloque-contenido .cz-cta-final strong { color: #fff; }

/* ===================================================================
   COLORES Y BOTONES DEL COPY DE LA TIENDA (2026-09-14 — pedido del jefe:
   «procura usar colores y varios botones dentro del copyright con enlaces
   para que puedan dar clic y puedan ir al WhatsApp de la persona»)
   -------------------------------------------------------------------
   La descripción solo admite h3 p strong b em i ul ol li br, así que el
   color y los botones se resuelven con CLASES dentro de esas etiquetas:
     · <p class="cz-precio">S/ 80 a S/ 140</p>   → precio grande, destacado
     · <strong class="cz-ok">sin dolor</strong>  → verde (beneficio)
     · <strong class="cz-alerta">urgencia</strong> → rojo (aviso)
     · <p class="cz-caja">…</p>                  → recuadro de acento
     · <p class="cz-nota">…</p>                  → letra chica de aclaración
     · <p class="cz-btn cz-wa" data-msg="…">📲 Pedir mi cita</p>
                                       → PHP lo convierte en <a> de WhatsApp
                                         (descripcion_negocio_html(), helpers.php)
     · <p class="cz-btn cz-tel">📞 Llamar</p>    → <a> de llamada (tel:)
   Reglas del sitio: móvil primero, texto ≥16 px y botón táctil ≥44 px.
   =================================================================== */
.ficha-A__descripcion-contenido .cz-precio,
.ficha-B__descripcion-contenido .cz-precio,
.ficha-C__info-bloque-contenido .cz-precio {
    display: block;
    margin: 12px 0 8px;
    padding: 10px 13px;
    border: 1px dashed var(--color-acento);
    border-radius: 10px;
    background: #fff;
    color: var(--color-primario);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}
.ficha-A__descripcion-contenido .cz-ok,
.ficha-B__descripcion-contenido .cz-ok,
.ficha-C__info-bloque-contenido .cz-ok { color: #15803d; font-weight: 800; }

.ficha-A__descripcion-contenido .cz-alerta,
.ficha-B__descripcion-contenido .cz-alerta,
.ficha-C__info-bloque-contenido .cz-alerta { color: #b91c1c; font-weight: 800; }

.ficha-A__descripcion-contenido .cz-caja,
.ficha-B__descripcion-contenido .cz-caja,
.ficha-C__info-bloque-contenido .cz-caja {
    margin: 12px 0;
    padding: 11px 13px;
    border-left: 4px solid var(--color-acento);
    border-radius: 0 10px 10px 0;
    background: var(--color-fondo-app);
    line-height: 1.55;
}
.ficha-A__descripcion-contenido .cz-nota,
.ficha-B__descripcion-contenido .cz-nota,
.ficha-C__info-bloque-contenido .cz-nota {
    margin: 8px 0;
    color: var(--color-texto-claro);
    font-size: 13.5px;
    line-height: 1.5;
}

/* Botones del copy: ancho cómodo en el celular, verdes para WhatsApp y con el hueco
   (gap) del ícono oficial que mete wa_icono_svg(). */
.ficha-A__descripcion-contenido a.cz-btn,
.ficha-B__descripcion-contenido a.cz-btn,
.ficha-C__info-bloque-contenido a.cz-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 440px;
    min-height: 48px;
    margin: 12px auto;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
}
.ficha-A__descripcion-contenido a.cz-btn svg,
.ficha-B__descripcion-contenido a.cz-btn svg,
.ficha-C__info-bloque-contenido a.cz-btn svg { flex: 0 0 auto; }

.ficha-A__descripcion-contenido a.cz-btn--wa,
.ficha-B__descripcion-contenido a.cz-btn--wa,
.ficha-C__info-bloque-contenido a.cz-btn--wa { background: var(--color-wsp); color: #fff; }
.ficha-A__descripcion-contenido a.cz-btn--wa:hover,
.ficha-B__descripcion-contenido a.cz-btn--wa:hover,
.ficha-C__info-bloque-contenido a.cz-btn--wa:hover { background: #1eb257; }

.ficha-A__descripcion-contenido a.cz-btn--tel,
.ficha-B__descripcion-contenido a.cz-btn--tel,
.ficha-C__info-bloque-contenido a.cz-btn--tel { background: var(--color-primario); color: #fff; }

.ficha-A__descripcion-contenido a.cz-btn:active,
.ficha-B__descripcion-contenido a.cz-btn:active,
.ficha-C__info-bloque-contenido a.cz-btn:active { transform: translateY(1px); }

/* ===================================================================
   EMPLEOS Y ANUNCIOS (módulo nuevo, 2026-09-12 · contrato aprobado)
   -------------------------------------------------------------------
   Reglas de este módulo, tal como las aprobó el jefe:
     1) El aviso de empleo es SOLO TEXTO: nada de fotos ni de capturas.
     2) Móvil primero: el texto principal nunca baja de 16 px y todo
        botón táctil mide 44 px de alto como mínimo.
     3) Se reutilizan los tokens de base.css (--marca-*, --color-*,
        --radio-borde, --sombra-tarjeta, --color-wsp) y las mismas
        fórmulas de tarjeta que .card-producto / .card-negocio.
     4) Los tres tipos (ofrezco · busco · anuncio) se pintan con un
        color sobrio por tarjeta: fondo tenue + texto oscuro, la misma
        receta de .flash--info/--exito/--warning (líneas 283-286).
   =================================================================== */

/* ====== REJILLA DE EMPLEOS (2 columnas → 4 desde 900 px) ======
   El gap es el mismo de .grid-negocios (14px, línea 292) para que el bloque del index no
   desentone con las demás filas de tarjetas de la portada. */
.grid-empleos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* celular: 2 columnas */
    gap: 14px;
}
@media (min-width: 900px) {
    .grid-empleos { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* escritorio: 4 columnas */
}

/* Recorte del BLOQUE DEL INDEX sin JavaScript (pedido expreso del jefe: 8 en celular, 16 en PC):
   index.php pinta SIEMPRE las 16 tarjetas —así Google las indexa todas— y aquí se ocultan de la
   9.ª en adelante. En celular la rejilla es de 2 columnas → 8 visibles (2 × 4); desde 900 px es de
   4 columnas → las 16 visibles (4 × 4). Las tarjetas ocultas siguen en el HTML. */
@media (max-width:899px) {
    .grid-empleos > *:nth-child(n+9) { display: none; }
    /* ⚠️ Excepción de la PÁGINA /empleos: ahí el recorte NO sirve (se perderían los avisos 9 a 24 de
       cada página y la paginación no tendría sentido). Esa página lleva las dos clases juntas
       .grid-empleos.grid-empleos--completa y así se ven todos sus avisos. */
    .grid-empleos.grid-empleos--completa > *:nth-child(n+9) { display: block; }
}

/* ====== TARJETA DEL AVISO (texto, sin imagen) ====== */
.card-empleo {
    --empleo-pad: 10px;                 /* margen interno lateral (se aprieta en celular) */
    display: flex;
    flex-direction: column;
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde);
    border-top: 4px solid var(--empleo-color, var(--color-borde));   /* franja superior del tipo */
    border-radius: 12px;                /* el mismo radio de .card-producto (línea 395) */
    box-shadow: var(--sombra-tarjeta);
    overflow: hidden;                   /* recorta la franja contra el radio */
    color: var(--color-texto);
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.card-empleo:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }

/* 🖼️ LA FOTO DE PORTADA DE LA TARJETA (2026-09-17, orden del jefe: «mantén la imagen en el
   anuncio»): SOLO la llevan los avisos que traen AFICHE (clase .card-empleo--afiche). Se enseña
   recortada a 16:10 y ANCLADA ARRIBA, que es donde el cartel pone el nombre del negocio y el
   titular («ESTAMOS BUSCANDO…»); el cartel completo se ve en la ficha del aviso. Las tarjetas sin
   afiche no cambian absolutamente nada: siguen siendo de solo texto. */
.card-empleo__foto { position: relative; aspect-ratio: 16 / 10; background: #f4f4f5; overflow: hidden; }
.card-empleo__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Color por tipo: variables en la tarjeta (--empleo-color se hereda a la franja, al chip y al
   sueldo). Sobrios y del sitio: verde de .flash--exito, azul noche --marca-link y marrón
   --marca-marron; la ficha del aviso usa los mismos valores con su propio sufijo --tipo. */
.card-empleo--ofrezco, .empleo-ficha--ofrezco { --empleo-color: #15803d; --empleo-fondo: #f0fdf4; --empleo-borde: #bbf7d0; }
.card-empleo--busco,   .empleo-ficha--busco   { --empleo-color: #123c6b; --empleo-fondo: #eff6ff; --empleo-borde: #bfdbfe; }
.card-empleo--anuncio, .empleo-ficha--anuncio { --empleo-color: var(--marca-marron); --empleo-fondo: var(--marca-crema); --empleo-borde: #e7d5bb; }

/* Tira superior: etiqueta del tipo a la izquierda y "hace 2 días" a la derecha.
   Lleva flex-wrap para que en la tarjeta estrecha de celular la fecha baje a una segunda línea. */
.card-empleo__franja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 6px var(--empleo-pad);
    background: var(--empleo-fondo, #f4f4f5);
    border-bottom: 1px solid var(--empleo-borde, var(--color-borde));
}
.card-empleo__tipo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--empleo-borde, var(--color-borde));
    color: var(--empleo-color, var(--color-texto));
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-empleo__cuando {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-texto-claro);
    white-space: nowrap;
}

/* El puesto: negrita y como MUCHO dos líneas (misma receta de line-clamp que
   .card-producto__titulo, líneas 420-421). */
.card-empleo__titulo {
    padding: 9px var(--empleo-pad) 0;
    font-size: 16px;                    /* texto principal: nunca por debajo de 16 px */
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-texto);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-empleo__entidad {
    padding: 3px var(--empleo-pad) 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-texto-claro);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-empleo__zona {
    padding: 3px var(--empleo-pad) 0;
    font-size: 12.5px;
    line-height: 1.55;                  /* deja respirar el chip cuando la línea se parte */
    color: var(--color-texto-claro);
}
.card-empleo__texto {
    padding: 6px var(--empleo-pad) 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-texto-claro);
    display: -webkit-box;
    -webkit-line-clamp: 2;              /* dos líneas máximo, igual que el titular */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Chip del oficio (🧱 Construcción): va DENTRO de la línea de la zona —después del "·"—, tal
   como lo pinta empleo_card_html() (helpers.php:2481-2483): por eso es un inline-block y no un
   bloque con márgenes propios. */
.card-empleo__chip {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--empleo-fondo, #f4f4f5);
    border: 1px solid var(--empleo-borde, var(--color-borde));
    color: var(--empleo-color, var(--color-texto-claro));
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pie: sueldo destacado a la izquierda y botón de WhatsApp a la derecha. Ocupa siempre el fondo
   de la tarjeta (margin-top:auto, como .card-negocio__meta) y se separa con la línea de puntos
   que ya usa el sitio (.cz-lista li, línea 1047). */
.card-empleo__pie {
    margin-top: auto;
    padding: 9px var(--empleo-pad) 10px;
    border-top: 1px dashed var(--color-borde);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.card-empleo__sueldo {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-primario);       /* el destacado en granate, como .card-producto__precio */
}
/* Botón de WhatsApp: verde del sitio (--color-wsp), nunca menos de 44 px de alto y con hueco
   (gap) para el SVG del ícono que mete wa_icono_svg(). */
.card-empleo__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--color-wsp);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
}
.card-empleo__wa:hover { background: #1eb257; }
.card-empleo__wa:active { transform: translateY(1px); }
.card-empleo__wa svg { flex: 0 0 auto; }        /* el ícono no se encoge nunca */

/* CELULAR: la tarjeta mide la mitad del ancho, así que el botón de WhatsApp pasa a su propia
   fila (ancho completo) y se aprieta un poco el margen interno, como .grid-negocios--dos.
   La franja se pone en columna porque las etiquetas del tipo son largas ("💼 Ofrezco trabajo",
   "🙋 Busco trabajo", "📌 Anuncio") y así el chip dispone de todo el ancho de la tarjeta. */
@media (max-width:899px) {
    .card-empleo__franja { flex-direction: column; align-items: flex-start; gap: 3px; }
    .card-empleo__tipo { font-size: 10px; letter-spacing: 0; }
    .card-empleo__cuando { margin-left: 0; }
    .card-empleo__pie { flex-direction: column; align-items: stretch; gap: 7px; }
    .card-empleo__wa { width: 100%; }
}
@media (max-width:640px) {
    .card-empleo { --empleo-pad: 8px; }
    .card-empleo__texto { font-size: 12.5px; }
}

/* ====== BARRA DE FILTROS DE EMPLEOS ====== */
.empleos-toolbar {
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-tarjeta);
    padding: 12px;
    margin-bottom: 14px;
}
.empleos-toolbar__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.empleos-toolbar__fila + .empleos-toolbar__fila { margin-top: 8px; }
.empleos-toolbar__lbl {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-texto-claro);
    white-space: nowrap;
}
/* Buscador y desplegables de empleos: 16 px (en iOS un campo de menos de 16 px hace zoom solo
   al enfocarlo) y 44 px de alto para el dedo. */
.empleos-toolbar input[type="search"],
.empleos-toolbar select {
    flex: 1 1 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: #fff;
    color: var(--color-texto);
    font-size: 16px;
}
.empleos-toolbar input[type="search"]:focus,
.empleos-toolbar select:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
/* Los chips de filtro REUTILIZAN .filtro-chip (vive en buscar.php:395-408, no está en este
   archivo): aquí NO se redefine su aspecto, solo se le da la altura táctil de 44 px que pide el
   proyecto y una fila que se desliza de lado —como .carrusel-productos— cuando hay muchos oficios.
   Desde 900 px sobra sitio y los chips pasan a varias filas. */
.empleos-toolbar__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 2px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.empleos-toolbar__chips::-webkit-scrollbar { display: none; }
.empleos-toolbar .filtro-chip > span { min-height: 44px; }
@media (min-width: 900px) {
    .empleos-toolbar__chips { flex-wrap: wrap; overflow-x: visible; }
}

/* Contador "42 avisos activos" */
.empleos-count {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-texto-claro);
}
.empleos-count b,
.empleos-count strong { font-size: 15px; color: var(--color-primario); }

/* ====== PAGINADOR (el sitio no tenía: se estrena aquí) ======
   Números de página en una fila centrada; cada botón mide 44 × 44 px como mínimo para que se
   pueda tocar con el dedo. */
.paginador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 6px;
}
.paginador__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1.5px solid var(--color-borde);
    border-radius: 10px;
    background: #fff;
    color: var(--color-primario);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.paginador__btn:hover { background: var(--marca-crema); }
/* Página actual (y "siguiente/anterior" sin destino): se queda encendida en granate. */
.paginador__btn--activo,
.paginador__btn--activo:hover {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
}
.paginador__btn--off { opacity: .45; pointer-events: none; }
.paginador__puntos { min-width: 22px; text-align: center; font-weight: 700; color: var(--color-texto-claro); }
.paginador__info { flex: 1 1 100%; margin-top: 4px; text-align: center; font-size: 12.5px; color: var(--color-texto-claro); }

/* ====== FICHA DEL AVISO (/empleo/<slug>) ======
   El tipo se marca con las clases .empleo-ficha--ofrezco / --busco / --anuncio, que comparten
   los mismos colores que las tarjetas de empleo. */
.empleo-ficha {
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde);
    border-top: 5px solid var(--empleo-color, var(--color-borde));
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-tarjeta);
    padding: 16px 14px 18px;
    margin-bottom: 18px;
    color: var(--color-texto);
}
.empleo-ficha__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}
.empleo-ficha__tipo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--empleo-fondo, #f4f4f5);
    border: 1px solid var(--empleo-borde, var(--color-borde));
    color: var(--empleo-color, var(--color-texto));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.empleo-ficha__cuando {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-texto-claro);
}
.empleo-ficha__titulo {
    font-size: 24px;                    /* título grande: es el h1 de la página */
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-texto);
    margin-bottom: 6px;
}
.empleo-ficha__entidad { font-size: 15px; font-weight: 700; color: var(--marca-granate); margin-bottom: 3px; }
.empleo-ficha__meta { font-size: 14px; color: var(--color-texto-claro); margin-bottom: 12px; }

/* Caja del sueldo: lo primero que mira quien busca trabajo. Ojo: NUNCA se inventa el sueldo
   (si el aviso no lo dice, va "A convenir"); el CSS solo lo destaca. */
.empleo-ficha__sueldo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid var(--empleo-borde, var(--color-borde));
    border-radius: 10px;
    background: var(--empleo-fondo, var(--marca-crema));
}
.empleo-ficha__sueldo-t {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-texto-claro);
}
.empleo-ficha__sueldo-v,
.empleo-ficha__sueldo b,
.empleo-ficha__sueldo strong {
    font-size: 19px;
    font-weight: 800;
    color: var(--empleo-color, var(--color-primario));
}

/* 🖼️ EL AFICHE DEL AVISO EN LA FICHA (2026-09-17): el cartel COMPLETO, sin recortar y centrado
   (se abre en grande al tocarlo). El marco usa los colores del tipo de aviso, igual que la caja
   del sueldo. En celular ocupa el ancho entero; en escritorio se queda en su tamaño natural. */
.empleo-ficha__afiche {
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid var(--empleo-borde, var(--color-borde));
    border-radius: 12px;
    background: var(--empleo-fondo, #f7f7f8);
    text-align: center;
}
.empleo-ficha__afiche a { display: block; }
.empleo-ficha__afiche img {
    display: block;
    width: 100%;
    max-width: 512px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: var(--sombra-tarjeta);
}
.empleo-ficha__afiche figcaption {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-texto-claro);
}

/* Filas de datos (entidad, zona, jornada, duración, requisitos, teléfono). */
.empleo-ficha__datos { margin: 0 0 14px; }
.empleo-ficha__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-borde);
    font-size: 15px;
}
.empleo-ficha__fila:last-child { border-bottom: 0; }
.empleo-ficha__etiqueta {
    flex: 0 0 118px;
    padding-top: 2px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-texto-claro);
}
.empleo-ficha__valor { flex: 1 1 160px; min-width: 0; font-weight: 600; color: var(--color-texto); }
@media (max-width:560px) {
    .empleo-ficha__etiqueta { flex: 0 0 100%; }   /* en celular la etiqueta va arriba del dato */
}

/* Descripción del aviso: es texto de usuario (se limpia en PHP con e()/limpiar_html). */
.empleo-ficha__texto { font-size: 16px; line-height: 1.55; color: var(--color-texto); margin-bottom: 14px; }
.empleo-ficha__texto p { margin-bottom: 10px; }
.empleo-ficha__texto h3 { margin: 14px 0 6px; font-size: 17px; font-weight: 800; color: var(--marca-granate); }
.empleo-ficha__texto ul { margin: 0 0 10px; padding-left: 20px; list-style: disc; }  /* base.css quita los puntos */
.empleo-ficha__texto li { margin-bottom: 4px; }

/* Aviso de seguridad: la misma receta de .flash--warning (línea 286). Nunca pagar por un trabajo. */
.empleo-ficha__seguridad {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-left: 4px solid var(--color-warning);
    border-radius: 8px;
    background: #fffbeb;
    color: #b45309;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

/* Botón grande de WhatsApp + reportar el aviso. */
.empleo-ficha__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.empleo-ficha__wa {
    flex: 1 1 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 13px 18px;
    border-radius: 12px;
    background: var(--color-wsp);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}
.empleo-ficha__wa:hover { background: #1eb257; }
.empleo-ficha__wa svg { flex: 0 0 auto; }
.empleo-ficha__reportar {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-texto-claro);
    text-decoration: underline;
}
.empleo-ficha__reportar:hover { color: var(--color-error); }

/* ====== FORMULARIO PÚBLICO DE PUBLICACIÓN ======
   Aquí SOLO vive la rejilla propia del formulario: los campos llevan las clases que ya usa todo
   el sitio (.form__input · .form__label · .form__select · .form__textarea, líneas 576-607) y no
   se tocan. En celular una columna; desde 900 px, dos. */
.empleo-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.empleo-form > .form__group { margin-bottom: 0; }   /* el aire lo da el gap, no el margen viejo */
.empleo-form__ancho { grid-column: 1 / -1; }        /* campos que van a todo lo ancho (descripción) */
.empleo-form__ayuda { font-size: 12.5px; line-height: 1.4; color: var(--color-texto-claro); }
.empleo-form__acciones {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.empleo-form__acciones .btn { min-height: 48px; font-size: 16px; }
@media (min-width: 900px) {
    .empleo-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ====== EMPLEOS SIN AVISOS ====== */
.empleo-bloque-vacio {
    background: var(--color-fondo-tarjeta);
    border: 1.5px dashed var(--color-borde);
    border-radius: 14px;
    box-shadow: var(--sombra-tarjeta);
    padding: 22px 16px;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-texto-claro);
}
.empleo-bloque-vacio__ico { display: block; margin-bottom: 8px; font-size: 34px; line-height: 1; }
.empleo-bloque-vacio__t { margin-bottom: 6px; font-size: 17px; font-weight: 800; color: var(--color-texto); }
.empleo-bloque-vacio__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--marca-naranja);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.empleo-bloque-vacio__btn:hover { background: var(--marca-naranja-osc); }

/* ====== LÍNEA DE DATOS DE LA TARJETA (jornada · edad · experiencia · formación) ======
   La pinta `empleo_card_html()` desde el 2026-09-12: son los datos que el asistente de
   publicación pide con CLICS. Va debajo de la zona, en letra pequeña y tono suave, para que
   quien busca trabajo sepa de un vistazo si el aviso le encaja sin abrir la ficha. */
.card-empleo__datos {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--color-texto-claro);
}

/* ==========================================================================
   BOTONES 3D — LA CLASE `.b3d` (orden del jefe, 2026-09-21)
   --------------------------------------------------------------------------
   Textual del jefe: *«reviso que los botones no parecen botones, necesitan el efecto 3D para que se
   vean como botones cliqueables»*. Aquí vive el estilo UNA sola vez, en la hoja común, porque lo usan
   el **área Nosotros** (`includes/nosotros_area.php`) y la **documentación oficial**
   (`includes/doc_vista.php`).

   Cómo se logra el volumen (el truco clásico de la «tecla»):
     · una **sombra sólida debajo** (el canto del botón: `0 5px 0 0 var(--b3c)`),
     · un **brillo diagonal** encima (el `::after`),
     · **luces interiores** (arriba claro, abajo oscuro) y
     · al pulsar, el botón **baja** (`translateY`) y la sombra se acorta: se hunde de verdad.

   Los colores se pasan por variables, así el mismo botón sirve para cualquier tarjeta:
     `--b3a` = luz de arriba · `--b3b` = color base · `--b3c` = canto oscuro de abajo.
   Los pone el PHP con `paleta_tono_boton()` (`includes/paleta.php`).
   ========================================================================== */
.b3d{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  box-sizing:border-box;border:0;border-radius:12px;padding:13px 18px;font-family:inherit;
  font-size:16px;font-weight:800;line-height:1.2;text-decoration:none;text-align:center;color:#fff;
  cursor:pointer;
  background:linear-gradient(180deg,var(--b3a,#9c1030) 0%,var(--b3b,#6d071a) 100%);
  box-shadow:0 5px 0 0 var(--b3c,#3d040f),0 9px 18px rgba(0,0,0,.22),
    inset 0 2px 0 rgba(255,255,255,.42),inset 0 -3px 0 rgba(0,0,0,.16);
  transition:transform .1s ease,box-shadow .1s ease,filter .12s ease}
.b3d::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 42%,rgba(255,255,255,0) 66%)}
.b3d>span,.b3d>svg{position:relative;z-index:1}
.b3d:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 6px 0 0 var(--b3c,#3d040f),0 12px 22px rgba(0,0,0,.26),
    inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.16)}
.b3d:active{transform:translateY(4px);
  box-shadow:0 1px 0 0 var(--b3c,#3d040f),0 3px 8px rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.3)}
.b3d:focus-visible{outline:3px solid #fbd7a4;outline-offset:2px}
/* Colores de fábrica (los de la marca). Cualquier tarjeta puede cambiarlos por variables. */
.b3d--granate{--b3a:#9c1030;--b3b:#6d071a;--b3c:#3d040f}
.b3d--naranja{--b3a:#f59e0b;--b3b:#c2410c;--b3c:#7c2d12}
.b3d--wa{--b3a:#5ce08a;--b3b:#25d366;--b3c:#128c4a}
.b3d--verde{--b3a:#22c55e;--b3b:#15803d;--b3c:#0b5227}
.b3d--azul{--b3a:#3b82f6;--b3b:#1d4ed8;--b3c:#122e7c}
.b3d--violeta{--b3a:#8b5cf6;--b3b:#6d28d9;--b3c:#42188c}
.b3d--rosa{--b3a:#ec4899;--b3b:#be185d;--b3c:#7c0b3c}
.b3d--crema{--b3a:#ffffff;--b3b:#f4ece6;--b3c:#cbb9ad;color:#6d071a}
.b3d--gris{--b3a:#ffffff;--b3b:#f4f4f5;--b3c:#d4d4d8;color:#3f3f46}
/* Tamaños: chico (los atajos) y ancho completo (los botones de acción) */
.b3d--sm{padding:10px 14px;font-size:14.5px;border-radius:10px;
  box-shadow:0 4px 0 0 var(--b3c,#d4d4d8),0 6px 12px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.42)}
.b3d--sm:hover{box-shadow:0 5px 0 0 var(--b3c,#d4d4d8),0 9px 16px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.45)}
.b3d--sm:active{transform:translateY(3px);box-shadow:0 1px 0 0 var(--b3c,#d4d4d8),0 2px 6px rgba(0,0,0,.16)}
.b3d--full{width:100%}



/* 🎵 HIMNO (2026-10-08): reproductor simple tras los banners de portada. */
.himno-bloque { display: flex; justify-content: center; margin: 2px 0 14px; padding: 0 12px; }
.himno-bloque audio { width: min(100%, 340px); height: 44px; }

/* ============ plantilla-a.css (unido en sitio.css v8, 2026-10-08) ============ */
/* ============================================================
   PLANTILLA A — CLÁSICA VERTICAL
   ============================================================ */
body[data-plantilla="A"] .ficha-A { display: block; }
.ficha-A { display: none; }

.ficha-A__cabecera {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radio-borde);
    overflow: hidden;
    background: #1f2937;
    margin-bottom: 16px;
}

.ficha-A__cabecera img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

/* 🔁 2026-09-14 (lo reportó el jefe): la banda oscura del título va ENCIMA de la portada y se
   comía el toque, así que la portada no se podía abrir. La portada es la 1.ª foto de la tienda
   y ahora entra en la misma galería que el resto (negocio.php le pone `data-galeria`).
   Dentro de esta banda solo hay TEXTO (título y etiquetas), ningún enlace: por eso se puede
   dejar «transparente al dedo».
   ⚠️ Si algún día se pone un botón o un enlace aquí dentro, hay que sacarle este
   `pointer-events: none` o no se podrá tocar. */
.ficha-A__cabecera-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    display: flex; align-items: flex-end; padding: 16px;
    pointer-events: none;
}

.ficha-A__cabecera-info { color: #fff; }
.ficha-A__cabecera-info h1 {
    font-size: 24px; font-weight: 700; margin-bottom: 6px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.ficha-A__cabecera-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px;
}

.ficha-A__badge {
    background: var(--color-acento); color: #fff;
    padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}

.ficha-A__rating { color: #fff; }
.ficha-A__rating .estrellas { color: #fbbf24; letter-spacing: 2px; }

.ficha-A__acciones {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px;
}

.ficha-A__datos {
    background: var(--color-fondo-tarjeta);
    border-radius: var(--radio-borde); padding: 16px;
    margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
    border-left: 4px solid var(--color-acento);
}

.ficha-A__dato {
    display: flex; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--color-borde); font-size: 14px;
}
.ficha-A__dato:last-child { border: 0; }

.ficha-A__dato-icono { width: 20px; color: var(--color-primario); flex-shrink: 0; }

.ficha-A__dato-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-texto-claro); margin-bottom: 2px;
}

.ficha-A__dato-valor { font-weight: 500; }

.ficha-A__descripcion,
.ficha-A__galeria,
.ficha-A__productos {
    background: var(--color-fondo-tarjeta);
    border-radius: var(--radio-borde); padding: 16px;
    margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
}

.ficha-A__descripcion h2,
.ficha-A__galeria h2,
.ficha-A__productos h2 {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-primario); margin-bottom: 12px;
    display: flex; justify-content: space-between; align-items: center;
}

.ficha-A__productos-contador {
    background: var(--color-acento); color: #fff;
    font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600;
}

.ficha-A__descripcion-contenido {
    font-size: 14px; line-height: 1.6; white-space: pre-line;
}

/* GALERÍA — orden del jefe (2026-09-14): *«la galería se está presentando en una cuadrícula de dos
   columnas: cámbiala a 6 columnas en escritorio y a 3 en móvil»*. Cada celda sigue siendo cuadrada,
   las fotos se recortan con object-fit: cover y al tocarlas se abren en grande con el visor del sitio
   (imagen_zoom.js: las pinta img_tag() con la clase .cz-zoom y el data-full a la versión completa).
   ✂️ RECORTE A LA GRILLA (orden del jefe, 2026-09-18): *«cuando una tienda tenía más de 9 fotos en su
   galería, automáticamente la galería se recortaba a una grilla de 3 × 3 (tres columnas por tres filas)
   en formato móvil y a 5 × 5 en formato PC, y cuando alguien daba clic en cualquiera de las fotos se
   abría una ventana modal y ahí sí se veían todas las fotos que podía tener; la idea era para no llenar
   la página con muchas fotos»*.
   🔢 CIFRAS DE HOY (orden del jefe, 2026-09-25, textual: *«debería tener una galería de 24 fotos máximo
   en modo PC 6x4 filas y 12 en modo móvil 3x4 filas»*): **3 columnas × 4 filas = 12** en celular y
   **6 columnas × 4 filas = 24** desde 900 px; el resto de las fotos NO se pinta en la grilla, pero
   **viaja en el HTML con `data-galeria-oculta`** y el visor las cuenta todas (imagen_zoom.js). */
.ficha-A__galeria-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}

/* Móvil: 3 × 4 = 12 fotos y las demás escondidas (siguen en el visor). */
.ficha-A__galeria-grid > .ficha-A__galeria-img:nth-child(n+13) { display: none; }

@media (min-width: 900px) {
    .ficha-A__galeria-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; }
    /* PC: 6 × 4 = 24 fotos. */
    .ficha-A__galeria-grid > .ficha-A__galeria-img:nth-child(-n+24) { display: block; }
    .ficha-A__galeria-grid > .ficha-A__galeria-img:nth-child(n+25) { display: none; }
}

.ficha-A__galeria-img {
    aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #f3f4f6;
}
.ficha-A__galeria-img img { width: 100%; height: 100%; object-fit: cover; }

.ficha-A__producto {
    display: grid; grid-template-columns: 90px 1fr; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--color-borde);
}
.ficha-A__producto:first-child { padding-top: 0; }
.ficha-A__producto:last-child { border: 0; padding-bottom: 0; }

.ficha-A__producto-img {
    width: 90px; height: 90px; border-radius: 8px; overflow: hidden; background: #f3f4f6;
}
.ficha-A__producto-img img { width: 100%; height: 100%; object-fit: cover; }

.ficha-A__producto-info h3 {
    font-size: 14px; font-weight: 600; margin-bottom: 4px; line-height: 1.3;
}

.ficha-A__producto-desc {
    font-size: 12px; color: var(--color-texto-claro); margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ficha-A__producto-precio {
    display: inline-flex; align-items: baseline; gap: 4px;
    background: var(--color-fondo-app); padding: 4px 8px; border-radius: 6px; font-size: 13px;
}

.ficha-A__producto-monto { font-weight: 700; color: var(--color-primario); }
.ficha-A__producto-unidad { color: var(--color-texto-claro); font-size: 11px; }

/* ============ plantilla-b.css (unido en sitio.css v8, 2026-10-08) ============ */
/* ============================================================
   PLANTILLA B — GALERÍA ARRIBA (sin auto-rotación)
   ============================================================ */
body[data-plantilla="B"] .ficha-B { display: block; }
.ficha-B { display: none; }

.ficha-B__hero {
    position: relative; aspect-ratio: 4 / 5;
    border-radius: var(--radio-borde); overflow: hidden;
    background: #1f2937; margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
}

/* Ficha SIN fotos (p. ej. cuando se retiró una captura de pantalla por seguridad):
   el hero se achica para que NO quede un bloque vacío, y el nombre sigue viéndose abajo. */
.ficha-B__hero--sin-fotos { aspect-ratio: auto; min-height: 118px; background: var(--color-principal, #1f2937); }

.ficha-B__hero-slide {
    position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease;
}
.ficha-B__hero-slide.activo { opacity: 1; }
.ficha-B__hero-slide img { width: 100%; height: 100%; object-fit: cover; }

.ficha-B__hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
    pointer-events: none;
}

/* 🔁 2026-09-14: este bloque va ENCIMA del carrusel de fotos (abajo, con el nombre y las
   etiquetas) y se comía el toque: la mitad de abajo de la foto no se podía abrir en la
   galería. Dentro solo hay texto, ningún enlace, así que se deja «transparente al dedo».
   ⚠️ Si algún día se pone un botón o un enlace aquí dentro, hay que sacarle este
   `pointer-events: none` o no se podrá tocar. */
.ficha-B__hero-info {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 20px 16px; color: #fff;
    pointer-events: none;
}

.ficha-B__hero-info h1 {
    font-size: 24px; font-weight: 700; margin-bottom: 6px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.ficha-B__hero-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px;
}

.ficha-B__hero-meta .badge { background: var(--color-acento); color: #fff; }
.ficha-B__hero-meta .rating { color: #fff; }
.ficha-B__hero-meta .estrellas { color: #fbbf24; letter-spacing: 2px; }

/* Navegación manual: flechas + dots clickeables */
.ficha-B__hero-nav {
    position: absolute; top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    display: flex; justify-content: space-between;
    padding: 0 8px; pointer-events: none;
}

.ficha-B__hero-nav-btn {
    pointer-events: auto;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,0.45); color: #fff;
    font-size: 22px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); user-select: none;
}
.ficha-B__hero-nav-btn:active { background: rgba(0,0,0,0.7); transform: scale(0.92); }

.ficha-B__hero-dots {
    position: absolute; top: 12px; right: 12px;
    display: flex; gap: 4px;
}

.ficha-B__hero-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.2s;
}
.ficha-B__hero-dot.activo { background: var(--color-acento); width: 20px; border-radius: 3px; }

.ficha-B__datos {
    background: var(--color-fondo-tarjeta);
    border-radius: var(--radio-borde); padding: 12px;
    margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
    border-top: 3px solid var(--color-acento);
}

.ficha-B__datos-fila {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}

.ficha-B__dato-mini {
    padding: 8px; background: var(--color-fondo-app); border-radius: 8px; text-align: center;
}

.ficha-B__dato-mini-icono { font-size: 18px; margin-bottom: 4px; color: var(--color-primario); }

.ficha-B__dato-mini-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-texto-claro); margin-bottom: 2px;
}

.ficha-B__dato-mini-valor { font-size: 13px; font-weight: 600; }

.ficha-B__acciones-principales {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}

.ficha-B__descripcion {
    background: var(--color-fondo-tarjeta); border-radius: var(--radio-borde);
    padding: 16px; margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
}

.ficha-B__descripcion-toggle {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--color-primario);
    cursor: pointer; margin-bottom: 8px;
}
.ficha-B__descripcion-toggle::after { content: "▼"; font-size: 10px; color: var(--color-acento); }

.ficha-B__descripcion-contenido {
    font-size: 14px; line-height: 1.6; white-space: pre-line;
    max-height: 100px; overflow: hidden; position: relative;
}
.ficha-B__descripcion-contenido::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0;
    height: 30px;
    background: linear-gradient(to bottom, transparent, var(--color-fondo-tarjeta));
}
.ficha-B__descripcion.expandida .ficha-B__descripcion-contenido { max-height: none; }
.ficha-B__descripcion.expandida .ficha-B__descripcion-contenido::after { display: none; }

.ficha-B__productos {
    background: var(--color-fondo-tarjeta); border-radius: var(--radio-borde);
    padding: 16px; margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
}

.ficha-B__productos-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}

.ficha-B__productos-header h2 {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-primario);
}

.ficha-B__productos-contador {
    background: var(--color-acento); color: #fff;
    font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600;
}

.ficha-B__productos-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

.ficha-B__producto-card {
    background: var(--color-fondo-app); border-radius: 10px; overflow: hidden;
}

.ficha-B__producto-card-img {
    aspect-ratio: 1; background: #f3f4f6; position: relative; overflow: hidden;
}

.ficha-B__producto-card-img img { width: 100%; height: 100%; object-fit: cover; }

.ficha-B__producto-card-precio-overlay {
    position: absolute; bottom: 6px; left: 6px;
    background: rgba(0,0,0,0.85); color: #fff;
    padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;
}

.ficha-B__producto-card-body { padding: 8px 10px; }

.ficha-B__producto-card-body h3 {
    font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 32px;
}

.ficha-B__producto-card-unidad {
    font-size: 10px; color: var(--color-texto-claro); text-transform: uppercase;
}

.ficha-B__mapa {
    background: var(--color-fondo-tarjeta); border-radius: var(--radio-borde);
    overflow: hidden; margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
}

.ficha-B__mapa iframe { width: 100%; height: 180px; border: 0; display: block; }

.ficha-B__mapa-info {
    padding: 10px 12px; font-size: 13px; color: var(--color-texto);
}
.ficha-B__mapa-info strong { color: var(--color-primario); }

/* ============ plantilla-c.css (unido en sitio.css v8, 2026-10-08) ============ */
/* ============================================================
   PLANTILLA C — CATÁLOGO GRILLA (con tabs)
   ============================================================ */
body[data-plantilla="C"] .ficha-C { display: block; }
.ficha-C { display: none; }

.ficha-C__header {
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-acento) 100%);
    color: #fff; border-radius: var(--radio-borde); padding: 16px;
    margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
}

.ficha-C__header-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; margin-bottom: 12px;
}

.ficha-C__header-info h1 {
    font-size: 20px; font-weight: 700; line-height: 1.2; margin-bottom: 6px;
}

.ficha-C__header-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; opacity: 0.95;
}

.ficha-C__header-meta .badge {
    background: rgba(255,255,255,0.2); color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

.ficha-C__header-meta .rating { color: #fff; }
.ficha-C__header-meta .estrellas { color: #fbbf24; letter-spacing: 2px; }

.ficha-C__header-logo {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px;
    background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: #fff;
}

.ficha-C__header-acciones {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}

.ficha-C__header-accion {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px; background: rgba(255,255,255,0.12);
    border-radius: 8px; font-size: 11px; font-weight: 600; color: #fff; text-align: center;
}
.ficha-C__header-accion:hover { background: rgba(255,255,255,0.25); }
.ficha-C__header-accion-icono { font-size: 16px; line-height: 1; }

.ficha-C__tabs {
    display: flex; background: var(--color-fondo-tarjeta);
    border-radius: var(--radio-borde); padding: 4px;
    margin-bottom: 16px; box-shadow: var(--sombra-tarjeta); gap: 2px;
}

.ficha-C__tab {
    flex: 1; padding: 10px 8px;
    font-size: 12px; font-weight: 600; color: var(--color-texto-claro);
    border-radius: 8px; text-align: center; cursor: pointer;
}

.ficha-C__tab--activo {
    background: var(--color-acento); color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.ficha-C__panel { display: none; }
.ficha-C__panel--activo { display: block; }

.ficha-C__panel-productos {
    background: var(--color-fondo-tarjeta); border-radius: var(--radio-borde);
    padding: 12px; margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
}

.ficha-C__panel-productos-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}

.ficha-C__panel-productos-header h2 {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--color-primario);
}

.ficha-C__panel-productos-orden {
    font-size: 11px; color: var(--color-texto-claro);
    background: var(--color-fondo-app); padding: 4px 10px; border-radius: 999px;
}

.ficha-C__productos-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

.ficha-C__producto-card {
    background: var(--color-fondo-app); border-radius: 10px;
    overflow: hidden; border: 1px solid var(--color-borde);
}

.ficha-C__producto-card-img {
    aspect-ratio: 1; background: #f3f4f6; position: relative;
}

.ficha-C__producto-card-img img { width: 100%; height: 100%; object-fit: cover; }

.ficha-C__producto-card-destacado {
    position: absolute; top: 6px; left: 6px;
    background: var(--color-acento); color: #fff;
    font-size: 9px; font-weight: 700; padding: 2px 6px;
    border-radius: 4px; text-transform: uppercase;
}

.ficha-C__producto-card-body { padding: 8px; }

.ficha-C__producto-card-body h3 {
    font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 32px;
}

.ficha-C__producto-card-precio {
    font-size: 14px; font-weight: 700; color: var(--color-primario); margin-bottom: 2px;
}

.ficha-C__producto-card-unidad {
    font-size: 10px; color: var(--color-texto-claro);
    text-transform: uppercase; letter-spacing: 0.03em;
}

.ficha-C__panel-info {
    background: var(--color-fondo-tarjeta); border-radius: var(--radio-borde);
    padding: 16px; margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
}

.ficha-C__info-bloque {
    margin-bottom: 16px; padding-bottom: 16px;
    border-bottom: 1px solid var(--color-borde);
}
.ficha-C__info-bloque:last-child { border: 0; margin: 0; padding: 0; }

.ficha-C__info-bloque-titulo {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--color-acento);
    margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}

.ficha-C__info-bloque-contenido {
    font-size: 14px; line-height: 1.6; white-space: pre-line;
}

.ficha-C__info-fila {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 6px 0; font-size: 14px;
}

.ficha-C__info-fila-icono { width: 20px; text-align: center; color: var(--color-primario); flex-shrink: 0; }

.ficha-C__panel-galeria {
    background: var(--color-fondo-tarjeta); border-radius: var(--radio-borde);
    padding: 12px; margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
}

/* Mosaico de fotos: 3 columnas en celular y 5 en escritorio (orden del jefe, 2026-09-14 y 2026-09-18),
   como la galería de la plantilla A. Las fotos se abren en grande al tocarlas (imagen_zoom.js).
   ✂️ El mismo RECORTE de la A (orden del jefe, 2026-09-18): 9 celdas en móvil (3 × 3) y 25 en PC
   (5 × 5); las demás siguen viajando en el HTML con `data-galeria-oculta` y el visor las muestra todas. */
.ficha-C__galeria-mosaic {
    display: grid; grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 80px; gap: 6px;
}
.ficha-C__galeria-mosaic > .ficha-C__galeria-item:nth-child(n+10) { display: none; }
@media (min-width: 900px) {
    .ficha-C__galeria-mosaic { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 74px; gap: 8px; }
    .ficha-C__galeria-mosaic > .ficha-C__galeria-item:nth-child(-n+25) { display: block; }
    .ficha-C__galeria-mosaic > .ficha-C__galeria-item:nth-child(n+26) { display: none; }
}

.ficha-C__galeria-item {
    border-radius: 8px; overflow: hidden; background: #f3f4f6; position: relative;
}

.ficha-C__galeria-item--grande { grid-column: span 2; grid-row: span 2; }
.ficha-C__galeria-item img { width: 100%; height: 100%; object-fit: cover; }

.ficha-C__mapa {
    background: var(--color-fondo-tarjeta); border-radius: var(--radio-borde);
    overflow: hidden; margin-bottom: 16px; box-shadow: var(--sombra-tarjeta);
}

.ficha-C__mapa iframe { width: 100%; height: 200px; border: 0; display: block; }

.ficha-C__mapa-info {
    padding: 10px 12px; font-size: 13px; color: var(--color-texto);
    border-top: 1px solid var(--color-borde);
}
.ficha-C__mapa-info strong { color: var(--color-primario); }

/* ============ banners-v2.css (unido en sitio.css v8, 2026-10-08) ============ */
/* ============================================================
   Módulo de publicidad — banners y modal de negocios
   Regla responsive: PC hasta 3 banners por fila · MÓVIL: los banners de la fila se apilan
   uno debajo de otro (pedido del jefe 2026-09-10: antes en móvil se ocultaban el 2.º y el 3.º
   y él quiere verlos todos, apilados).
   Fila apilada a propósito: añadir la clase `banners-fila--uno`.
   ============================================================ */

/* --- Fila de banners --- */
.banners-fila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 14px 0;
}
/* 🐑 2026-10-08 (pedido del jefe): las filas de banners rompen el padding lateral del
   .main (16px) para que los banners toquen los bordes de la pantalla. */
.main .banners-fila { margin-left: -11px; margin-right: -11px; } /* 5px del borde (pedido del jefe: respetar las esquinas redondeadas) */
/* Versión compacta (portada): menos aire arriba y abajo para que la página quede más junta */
.banners-fila--compacta { margin: 8px 0; }
.main .banners-fila--compacta { margin-left: -11px; margin-right: -11px; }
@media (min-width: 769px) {
    .banners-fila              { grid-template-columns: repeat(3, 1fr); }
    .banners-fila--uno         { grid-template-columns: 1fr; }
    .banners-fila--dos         { grid-template-columns: repeat(2, 1fr); }
    .banners-fila--tres        { grid-template-columns: repeat(3, 1fr); }
}
/* ⚠️ Aquí estaba la regla que OCULTABA el 2.º y 3.er banner en móvil:
      @media (max-width: 768px) { .banners-fila > .banner-anuncio:nth-child(n+2) { display: none; } }
   El jefe pidió verlos todos apilados, así que se quitó (2026-09-10). Si algún día se quiere
   volver a mostrar solo el primero en móvil, esa es la regla que hay que reponer. */

.banner-anuncio {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    background: #fff;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.banner-anuncio:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}
.banner-anuncio img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}

/* --- Modal "¿qué necesitas? -> negocios" --- */
.bn-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
.bn-modal[hidden] { display: none; }
.bn-modal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(23, 10, 4, .62);
    backdrop-filter: blur(2px);
}
.bn-modal__caja {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: min(88vh, 820px);
    display: flex;
    flex-direction: column;
    background: #fdfaf3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    animation: bn-pop .18s ease;
}
@keyframes bn-pop { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.bn-modal__head {
    background: linear-gradient(135deg, #6d071a, #4a0512);
    color: #fff;
    padding: 14px 16px 12px;
    position: relative;
}
/* La ✕: estaba posicionada (absolute) igual que el encabezado, y como el encabezado
   viene DESPUÉS en el HTML y los dos tenían z-index auto, el encabezado guinda se
   pintaba ENCIMA: la ✕ era invisible y el clic lo recibía el encabezado (el modal no
   cerraba). Se comprobó en vivo con document.elementsFromPoint → devolvía el
   encabezado. Por eso lleva z-index propio. Sesión 2026-09-10. */
.bn-modal__cerrar {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 3;
    border: 1.5px solid rgba(255, 255, 255, .6);
    background: rgba(0, 0, 0, .25);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.bn-modal__cerrar:hover { background: rgba(255, 255, 255, .3); }

.bn-modal__titulo {
    font-size: 16px;
    font-weight: 800;
    margin: 0 46px 2px 0;   /* deja libre la ✕ de 36 px */
    line-height: 1.3;
}
.bn-modal__sub { font-size: 12.5px; opacity: .85; margin: 0 46px 0 0; }

/* Selector de zona (distrito o "📍 Cerca de mí") */
.bn-modal__filtro {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #e8e0d2;
}
.bn-modal__filtro label { font-size: 12.5px; font-weight: 700; color: #7a5230; white-space: nowrap; }
.bn-modal__select {
    flex: 1;
    font: inherit;
    font-size: 16px;   /* ≥16 px: en el celular el navegador no hace zoom al abrirlo */
    padding: 8px 10px;
    border: 1.5px solid #d9cfc0;
    border-radius: 10px;
    background: #fffdf8;
    color: #171717;
    cursor: pointer;
}
.bn-modal__select:focus { outline: none; border-color: #6d071a; }

/* Cuerpo: mensajes + lista */
.bn-modal__cuerpo { overflow-y: auto; padding: 12px 16px 14px; flex: 1; }
.bn-modal__msg { font-size: 13.5px; color: #5b4a35; margin: 4px 0 10px; line-height: 1.5; }
.bn-modal__vacio { text-align: center; color: #8a7a63; padding: 26px 8px; font-size: 14px; line-height: 1.6; }

.bn-lista { display: grid; gap: 10px; }
.bn-item {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    border: 1px solid #ece5d8;
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bn-item:hover { border-color: #d9cfc0; box-shadow: 0 6px 18px rgba(0, 0, 0, .10); }
/* TODA la celda es clicable: capa transparente que cubre la celda completa (foto,
   textos y zona blanca) y abre la tienda. Los botones de .bn-item__acciones van
   por encima con z-index: 2 para seguir funcionando por separado. */
.bn-item__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.bn-item__img {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    object-fit: cover;
    border-radius: 12px;
    background: #f1e9da;
}
.bn-item__info { flex: 1; min-width: 0; }
.bn-item__nombre {
    font-weight: 800;
    font-size: 14.5px;
    color: #171717;
    text-decoration: none;
    display: block;
    line-height: 1.25;
}
.bn-item__nombre:hover,
.bn-item:hover .bn-item__nombre { color: #6d071a; }
.bn-item__meta { font-size: 12px; color: #8a7a63; margin-top: 2px; line-height: 1.4; }
.bn-item__acciones { position: relative; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.bn-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}
.bn-btn--ver { background: #6d071a; color: #fff; }
.bn-btn--ver:hover { background: #4a0512; }
.bn-btn--wa { background: #25d366; color: #fff; }
.bn-btn--tel { background: #123c6b; color: #fff; }
.bn-modal__pie {
    padding: 8px 16px 12px;
    text-align: center;
    font-size: 11.5px;
    color: #9a8a72;
    border-top: 1px dashed #e0d6c4;
}

/* Carga */
.bn-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(109, 7, 26, .25);
    border-top-color: #6d071a;
    border-radius: 50%;
    animation: bn-gira .7s linear infinite;
    vertical-align: -3px;
    margin-right: 6px;
}
@keyframes bn-gira { to { transform: rotate(360deg); } }

/* ===== 🧭 CERCA DE MÍ: botón del medio, barrita de estado y distancia =====
   (2026-09-10, pedido del jefe Jimmy). El botón va DESPUÉS del 3.er resultado y
   ordena por cercanía LO MISMO que ya se está mostrando: no cambia el criterio
   del banner, solo el orden. Se pinta como "plus" (crema punteado) para que no
   se confunda con los botones de la tienda (WhatsApp / Llamar / Ver tienda). */
.bn-cerca-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0;
    background: #fff7ed;
    border: 1.5px dashed #f97316;
    color: #9a3412;
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}
.bn-cerca-btn:hover { background: #ffedd5; }
.bn-cerca-btn:active { transform: scale(.99); }
.bn-cerca-btn.is-busy { opacity: .65; pointer-events: none; }
.bn-cerca-btn__t { font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.bn-cerca-btn__s { font-size: 12.5px; font-weight: 500; opacity: .9; }

/* Barrita cuando la cercanía YA está activa (reemplaza al botón del medio). */
.bn-cerca-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 8px 10px;
    margin: 2px 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #14532d;
}
.bn-volver {
    background: #fff;
    border: 1px solid #14532d;
    color: #14532d;
    border-radius: 999px;
    padding: 5px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.bn-volver:hover { background: #14532d; color: #fff; }

/* Distancia en cada resultado (solo cuando está activo "cerca de mí"). */
.bn-item__dist {
    display: inline-block;
    margin-top: 4px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #15803d;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 800;
}

/* Avisos cortos dentro del modal (ubicación negada, negocios sin mapa). */
.bn-modal__msg--aviso {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 10px;
    padding: 8px 10px;
}
.bn-nota { font-size: 11.5px; color: #9a8a72; margin: 10px 0 0; text-align: center; line-height: 1.5; }

/* 🐑 EFECTO OVEJA (2026-10-08): pastilla "vistas" color crema sobre el banner. */
.banner-vistas {
    position: absolute;
    bottom: 4px; left: 8px;
    z-index: 5;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(20, 16, 8, .62);
    color: #ffffff; /* blanco 100% sobre fondo oscuro (pedido del jefe) */
    font-size: 12px; font-weight: 600; line-height: 1.4;
    letter-spacing: .2px;
    white-space: nowrap;
    pointer-events: none; /* no interfiere con el clic del banner */
}

/* ============ carrito.css (unido en sitio.css v8, 2026-10-08) ============ */
/* ============================================================
   carrito.css — CARRITO "ME INTERESA" + "VISTOS RECIENTEMENTE"
   ============================================================
   Módulo: carrito por tienda con memoria local (localStorage).
   Motor JS: assets/js/carrito.js · Guía: GUIA_RECOMENDACIONES_Y_FICHA_PRODUCTO.md §8

   Móvil-primero (Regla de Oro n.º 2):
     - botones de 34-46 px de alto (se tocan con el dedo),
     - campos con font-size 16px (evita el zoom automático de iOS),
     - el cajón es una hoja inferior (bottom sheet) y nunca tapa la barra del móvil,
     - el botón flotante va a la IZQUIERDA porque la derecha es del chat de ayuda.
   ============================================================ */

/* ====== BOTÓN FLOTANTE (izquierda: la derecha es del chat de ayuda) ====== */
.cz-fab {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100vw - 132px);          /* deja sitio al botón del chat de ayuda */
    background: var(--color-primario, #6d071a);
    color: #fff;
    border: 0;
    border-radius: 999px;
    /* ⚡ UX 2026-10-08: alto táctil 48px (guía web.dev tap targets) */
    padding: 15px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    cursor: pointer;
}
.cz-fab[hidden] { display: none; }
.cz-fab:active { transform: scale(.96); }
.cz-fab__icon { font-size: 17px; line-height: 1; }
.cz-fab__txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cz-fab__n {
    background: var(--color-acento, #ea6a12);
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 12.5px;
    margin-right: 2px;
}
.cz-fab--latido { animation: czLatido .5s ease 2; }
@keyframes czLatido {
    0%, 100% { transform: scale(1); }
    40%      { transform: scale(1.09); }
}
@media (min-width: 640px) { .cz-fab { padding: 14px 20px; font-size: 15px; } }

/* ====== AVISO FLOTANTE (toast) ====== */
.cz-toast {
    position: fixed;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%) translateY(14px);
    z-index: 1010;
    background: #171717;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
    max-width: calc(100vw - 32px);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
.cz-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ====== CAJÓN DEL PEDIDO (hoja inferior) ====== */
.cz-drawer {
    position: fixed;
    inset: 0;
    z-index: 1002;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(23, 23, 23, .55);
}
.cz-drawer[hidden] { display: none; }
.cz-drawer__caja {
    background: #fff;
    width: 100%;
    max-width: 560px;
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
}
@media (min-width: 560px) {
    .cz-drawer { align-items: center; }
    .cz-drawer__caja { border-radius: 18px; margin: 0 12px; }
}
.cz-drawer__cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 16px 8px;
}
.cz-drawer__tit { font-size: 17px; font-weight: 800; }
.cz-drawer__sub { font-size: 12.5px; color: var(--color-texto-claro); margin-top: 2px; }
.cz-drawer__sub a { text-decoration: underline; text-underline-offset: 2px; }
.cz-x {
    background: #f3f4f6;
    border: 0;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    font-size: 15px;
    color: #374151;
    flex-shrink: 0;
    cursor: pointer;
    line-height: 1;
}
.cz-drawer__chips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 0 16px 6px;
}
.cz-chip {
    flex: 0 0 auto;
    border: 1px solid var(--color-borde);
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-texto);
    cursor: pointer;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cz-chip--activo {
    background: var(--color-primario, #6d071a);
    border-color: var(--color-primario, #6d071a);
    color: #fff;
}
.cz-drawer__lista { overflow: auto; padding: 4px 12px 0; flex: 1; }
.cz-drawer__env {
    margin: 4px 16px 0;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #14532d;
    border-radius: 10px;
    padding: 8px 11px;
    font-size: 12.5px;
    line-height: 1.4;
}
.cz-drawer__vacio {
    text-align: center;
    padding: 26px 18px 10px;
    color: var(--color-texto-claro);
    font-size: 13.5px;
    line-height: 1.5;
}
.cz-drawer__vacio b { display: block; font-size: 15px; color: var(--color-texto); margin-bottom: 6px; }

/* ====== RENGLÓN DE UN PRODUCTO DENTRO DEL CAJÓN ====== */
.cz-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 4px;
    border-bottom: 1px solid #f1f5f9;
}
.cz-item:last-child { border-bottom: 0; }
.cz-item__img {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 10px;
    object-fit: cover;
    background: #f3f4f6;
}
.cz-item__info { flex: 1; min-width: 0; }
.cz-item__t {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-texto);
}
.cz-item__u { font-size: 11.5px; color: var(--color-texto-claro); margin-top: 2px; }
.cz-item__q { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.cz-qbtn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid var(--color-borde);
    background: #fff;
    font-size: 16px;
    font-weight: 800;
    color: var(--color-texto);
    line-height: 1;
    cursor: pointer;
}
.cz-qbtn:active { background: #f3f4f6; }
.cz-qn { min-width: 22px; text-align: center; font-size: 14.5px; font-weight: 800; }
.cz-item__del {
    margin-left: auto;
    border: 0;
    background: none;
    color: #b91c1c;
    font-size: 14px;
    padding: 4px 6px;
    cursor: pointer;
}
.cz-item__sub {
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color-primario, #6d071a);
    padding-top: 2px;
}

/* ====== PIE DEL CAJÓN (total + nota + enviar) ====== */
.cz-drawer__pie {
    border-top: 1px solid var(--color-borde);
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #fff;
}
.cz-drawer__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--color-texto-claro);
}
.cz-drawer__total b { font-size: 19px; color: var(--color-primario, #6d071a); }
.cz-drawer__lbl {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-texto-claro);
    margin: 10px 0 5px;
}
.cz-drawer__nota {
    width: 100%;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;                          /* 16px: sin zoom automático en iOS */
    font-family: inherit;
    color: var(--color-texto);
    resize: vertical;
    outline: none;
}
.cz-drawer__nota:focus { border-color: var(--color-acento); box-shadow: 0 0 0 3px rgba(249, 115, 22, .15); }
.cz-drawer__prev { margin-top: 9px; }
.cz-drawer__prev summary {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--marca-link, #123c6b);
    cursor: pointer;
}
.cz-drawer__prev pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    font-size: 12.5px;
    line-height: 1.45;
    margin-top: 7px;
    font-family: inherit;
    color: var(--color-texto);
    max-height: 190px;
    overflow: auto;
}
.cz-btn {
    display: block;
    width: 100%;
    border: 1px solid var(--color-primario, #6d071a);
    background: var(--color-primario, #6d071a);
    color: #fff;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 15.5px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    margin-top: 11px;
}
.cz-btn--wsp { background: #25d366; border-color: #25d366; color: #06301a; }
.cz-btn--wsp:active { background: #1eb955; }
.cz-drawer__acciones { display: flex; gap: 8px; margin-top: 8px; }
.cz-btn--ghost {
    background: #fff;
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
    font-weight: 700;
    font-size: 13.5px;
    margin-top: 0;
    padding: 10px 12px;
}
.cz-drawer__aviso {
    font-size: 11.5px;
    color: var(--color-texto-claro);
    line-height: 1.45;
    margin-top: 10px;
}

/* ====== FICHA RÁPIDA DEL PRODUCTO (se abre al tocar una tarjeta) ====== */
.cz-sheet {
    position: fixed;
    inset: 0;
    z-index: 1003;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(23, 23, 23, .55);
}
.cz-sheet[hidden] { display: none; }
.cz-sheet__caja {
    background: #fff;
    width: 100%;
    max-width: 520px;
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
}
@media (min-width: 560px) {
    .cz-sheet { align-items: center; }
    .cz-sheet__caja { border-radius: 18px; margin: 0 12px; }
}
.cz-sheet__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f3f4f6; }
.cz-sheet__cuerpo { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.cz-sheet__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cz-sheet__t { font-size: 18px; font-weight: 800; line-height: 1.25; }
.cz-sheet__u { font-size: 12.5px; color: var(--color-texto-claro); margin-top: 3px; }
.cz-sheet__p { font-size: 20px; font-weight: 800; color: var(--color-primario, #6d071a); margin-top: 8px; }
.cz-sheet__d { font-size: 14px; color: #374151; line-height: 1.55; margin-top: 10px; white-space: pre-line; }
.cz-sheet__tienda {
    font-size: 12.5px;
    color: var(--color-texto-claro);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 9px 11px;
    margin-top: 12px;
    line-height: 1.45;
}
.cz-sheet__tienda a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cz-sheet__fila { display: flex; gap: 8px; margin-top: 12px; }
.cz-sheet__fila .cz-btn { margin-top: 0; }
.cz-btn--suave {
    background: #fff;
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
}
/* 🔴 EL BOTÓN DE CONSULTAR DEL PRODUCTO ES UNA IMAGEN (2026-09-16, orden del jefe): la imagen
   del botón rojo «CONSULTAR PRODUCTO» (WebP de 15 KB con transparencia) sustituye al botón
   blanco de texto de la ficha rápida. Caja sin fondo, sin borde y sin relleno: SOLO la imagen,
   centrada y con un tope de ancho para que no se vea gigante en la computadora. */
.cz-btnimg {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 14px auto 0;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
}
.cz-btnimg img { display: block; width: 100%; height: auto; }
.cz-btnimg:active { transform: scale(.98); }
.cz-btn--activo { background: var(--color-primario, #6d071a); border-color: var(--color-primario, #6d071a); color: #fff; }
.cz-btn__n { font-weight: 800; }

/* ====== TARJETAS DE PRODUCTO CON "ME INTERESA" ====== */
.cz-prod { cursor: pointer; }
.cz-prod--en { box-shadow: 0 0 0 2px var(--color-primario, #6d071a) inset; }
.cz-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-borde);
    background: #fff;
    color: var(--color-texto);
    border-radius: 999px;
    padding: 10px 14px;                       /* 10px: dedo, no ratón */
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    margin-top: 8px;
    min-height: 38px;
}
.cz-add:active { transform: scale(.97); }
.cz-add--en {
    background: var(--color-primario, #6d071a);
    border-color: var(--color-primario, #6d071a);
    color: #fff;
}
/* Botón redondo sobre la foto (portada y "Ofertas de última hora")
   ── Rediseñado el 2026-09-10 a pedido del jefe: antes era el emoji ❤️ (rojo y lleno), que
   parecía YA ELEGIDO. Ahora por defecto es un corazón VACÍO gris apagado (esperando el clic) y
   al pulsarlo se enciende: círculo ROJO con el corazón BLANCO. */
.cz-add--flotante {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    margin: 0;
    justify-content: center;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: #b6b6b6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    z-index: 2;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.cz-add--flotante svg { display: block; width: 21px; height: 21px; }
.cz-add--flotante .cz-add__lleno { display: none; }   /* el corazón lleno solo aparece al pulsar */
.cz-add--flotante:hover { color: #8d8d8d; }
.cz-add--flotante.cz-add--en {
    background: #e11d48;
    color: #fff;
    box-shadow: 0 3px 12px rgba(225, 29, 72, .45);
    animation: czCorazonLate .45s ease-out;
}
.cz-add--flotante.cz-add--en .cz-add__vacio { display: none; }
.cz-add--flotante.cz-add--en .cz-add__lleno { display: block; }
@keyframes czCorazonLate {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.24); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .cz-add--flotante.cz-add--en { animation: none; }
}

.cz-aviso-meinteresa {
    font-size: 12.5px;
    color: var(--color-texto-claro);
    line-height: 1.5;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 10px;
    padding: 9px 11px;
    margin-bottom: 12px;
}

/* ====== FILA "VISTOS RECIENTEMENTE" ====== */
.cz-vistos[hidden] { display: none; }
.cz-vistos .carrusel-tiendas { padding-bottom: 6px; }
.cz-vcard { flex: 0 0 146px; scroll-snap-align: start; }
.cz-vcard__img { position: relative; }
/* En estas tarjetas el jefe pidió (2026-09-10) que el PROTAGONISTA sea el nombre de la tienda,
   más grande, y que NO se ponga el precio. Debajo va el producto en letra chica (decisión de
   diseño del agente: sin eso la tarjeta no dice qué oferta es). */
.cz-vcard__tienda {
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-texto);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cz-vcard__prod {
    font-size: 12px;
    line-height: 1.3;
    color: var(--color-texto-claro);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   BLOQUE "⚡ OFERTAS DE ÚLTIMA HORA" CON CONTADOR
   Pedido del jefe (2026-09-10): un bloque con borde y de UN SOLO COLOR, con el título arriba y
   abajo el contador de días, horas, minutos y segundos, con los números girando al cambiar.
   Lo pinta assets/js/carrito.js (sección 7.bis).
   ========================================================================== */
.cz-oferta {
    background: linear-gradient(135deg, var(--color-primario, #6d071a) 0%, #4a0512 100%);
    border: 2px solid #e6c37a;
    border-radius: 16px;
    padding: 12px 14px 14px;
    color: #fff;
    margin-bottom: 12px;
    box-shadow: var(--sombra-tarjeta);
}
.cz-oferta__titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: 10px;
}
.cz-oferta__reloj { display: flex; gap: 8px; justify-content: center; max-width: 520px; margin: 0 auto; }
.cz-oferta__caja {
    flex: 1 1 0;
    min-width: 0;
    max-width: 118px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 11px;
    padding: 7px 4px 6px;
    text-align: center;
    perspective: 320px;        /* para que el número "gire" en 3D */
}
.cz-oferta__n {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) { .cz-oferta__n { font-size: 30px; } }
.cz-oferta__u {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .82;
}
.cz-oferta__caja--gira .cz-oferta__n { animation: czGira .42s ease-out; }
@keyframes czGira {
    0%   { transform: rotateX(-90deg); opacity: .2; }
    60%  { transform: rotateX(14deg);  opacity: 1; }
    100% { transform: rotateX(0deg);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cz-oferta__caja--gira .cz-oferta__n { animation: none; }
}
@media (max-width: 420px) {
    .cz-oferta__n { font-size: 20px; }
    .cz-oferta__u { font-size: 9.5px; }
}
.cz-vcard__quitar {
    border: 0;
    background: none;
    color: var(--marca-link, #123c6b);
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0;
}
.cz-vcard__hecho {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(109, 7, 26, .92);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
}
.cz-vcard__hecho[hidden] { display: none; }
.cz-aviso-meinteresa[hidden] { display: none; }
.cz-privacidad {
    font-size: 11.5px;
    color: var(--color-texto-claro);
    margin-top: 6px;
    line-height: 1.45;
}