/* =========================================================
   QueBuscasRD — Sistema de diseño (app.css)

   Dirección visual: guía local, con aire de periódico de barrio.
   Sale de los dos colores del logo (azul marino #18334E y
   turquesa #3DB3B7) más un amarillo cálido que se usa poco y
   solo para señalar ("como un letrero de colmado").

   Letras:
     · Schibsted Grotesk  — todo el sitio (títulos y texto)
     · Instrument Serif   — solo en itálica, para resaltar una
                            frase dentro de un título grande
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKENS DE DISEÑO
   Cambia un color aquí y cambia en todo el sitio.
--------------------------------------------------------- */
:root {
    /* Marca (salen del logo) */
    --marino:          #18334E;
    --marino-hondo:    #0F2438;
    --turquesa:        #3DB3B7;   /* decorativo: no usar para texto sobre blanco */
    --amarillo:        #F2BE4B;   /* señal: botón de buscar, marcadores */
    --amarillo-hondo:  #D9A12C;

    --primario:        #18334E;
    --primario-oscuro: #0F2438;
    --primario-suave:  #EAEFF4;

    --acento:          #1D7B7F;   /* turquesa con contraste suficiente para texto */
    --acento-suave:    #E2F1F1;

    /* Éxito / alerta / peligro (apagados, no de semáforo) */
    --exito:           #1E8A55;
    --exito-suave:     #E6F4EC;
    --alerta:          #C98314;
    --alerta-suave:    #F4F4F9;
    --peligro:         #C8412F;
    --peligro-suave:   #FBEAE6;

    /* Texto y superficies: papel, no gris azulado */
    --texto:           #172331;
    --texto-suave:     #56616D;
    --texto-tenue:     #8B939C;

    --fondo:           #FFFFFF;
    --fondo-alt:       #F4F4F9;   /* fondo de página y de sección */
    --fondo-suave:     #EDEDF5;   /* estados chicos: pasar el mouse, etiquetas, filas */
    --papel:           #F6F6FA;
    --blanco:          #FFFFFF;
    --borde:           #D9D9E5;
    --borde-fuerte:    #BDBDCF;

    /* Color sólido de marca (botones principales, bloques) */
    --degradado: var(--primario);

    /* Tipografía */
    --fuente:        'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fuente-titulo: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fuente-serif:  'Instrument Serif', Georgia, 'Times New Roman', serif;

    /* Escala de tamaños */
    --txt-xs:  0.75rem;   /* 12 */
    --txt-sm:  0.875rem;  /* 14 */
    --txt-md:  1rem;      /* 16 */
    --txt-lg:  1.125rem;  /* 18 */
    --txt-xl:  1.375rem;  /* 22 */
    --txt-2xl: 1.75rem;   /* 28 */
    --txt-3xl: 2.25rem;   /* 36 */
    --txt-4xl: 3rem;      /* 48 */

    /* Radios: sobrios. Nada de píldoras por defecto. */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 18px;
    --r-full: 999px;

    /* Sombras neutras y cortas */
    --sombra-sm: 0 1px 2px rgba(64, 60, 120, .06);
    --sombra-md: 0 4px 14px -4px rgba(64, 60, 120, .12);
    --sombra-lg: 0 18px 38px -16px rgba(64, 60, 120, .2);
    --sombra-color: none;

    /* Layout */
    --ancho-max: 1200px;
    --gutter: 20px;

    --transicion: .18s cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------
   2. RESET + BASE
--------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: var(--txt-md);
    font-weight: 400;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01' on;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* El pie se pega abajo cuando la pagina tiene poco contenido.
   Se excluye la pagina del negocio, que trae su propio maquetado. */
body:not(.pagina-negocio) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body:not(.pagina-negocio) main { flex: 1 0 auto; }
.pie { margin-top: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------
   3. TIPOGRAFÍA
   Títulos en tinta, apretados y sin degradados.
--------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.022em;
    color: var(--texto);
    margin: 0 0 .5em;
    text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, var(--txt-4xl)); font-weight: 800; letter-spacing: -0.032em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; letter-spacing: -0.028em; }
h3 { font-size: var(--txt-xl); }
h4 { font-size: var(--txt-lg); }

p { margin: 0 0 1rem; color: var(--texto-suave); text-wrap: pretty; }

/* La frase resaltada dentro de un título: itálica serif */
.resalte, h1 em, h2 em {
    font-family: var(--fuente-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.resalte { color: inherit; -webkit-text-fill-color: currentColor; }

/* Antetítulo pequeño sobre un título ("kicker" de periódico) */
.antetitulo {
    display: inline-flex; align-items: center; gap: .6rem;
    margin: 0 0 .9rem;
    font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--acento);
}
.antetitulo::before { content: ''; width: 22px; height: 2px; background: currentColor; }

.titulo-seccion {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.028em;
    text-align: center;
    margin-bottom: .25em;
}
.subtitulo-seccion {
    text-align: center;
    color: var(--texto-suave);
    font-size: var(--txt-lg);
    max-width: 620px;
    margin: 0 auto 2.5rem;
}
.gradiente-texto { color: inherit; }

::selection { background: var(--amarillo); color: var(--marino-hondo); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------------------------------------------------------
   4. LAYOUT
--------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); }
.seccion-alt { background: var(--fondo-alt); }
.seccion-contadores {
    background: var(--primario-suave);
}

/* ---------------------------------------------------------
   5. BOTONES
--------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    font-weight: 600;
    font-size: var(--txt-sm);
    line-height: 1;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn i, .btn svg { width: 18px; height: 18px; }

.btn-primario { background: var(--degradado); color: #fff; }
.btn-primario:hover { background: var(--primario-oscuro); }

.btn-secundario { background: var(--primario-suave); color: var(--primario-oscuro); }
.btn-secundario:hover { background: color-mix(in srgb, var(--primario) 14%, #fff); }

.btn-fantasma { background: transparent; color: var(--texto); border: 1px solid var(--borde-fuerte); }
.btn-fantasma:hover { border-color: var(--texto); }

.btn-lg { padding: 1rem 2rem; font-size: var(--txt-md); }
.btn-bloque { width: 100%; }

/* ---------------------------------------------------------
   6. HEADER + NAV
--------------------------------------------------------- */
.header {
    position: sticky; top: 0; z-index: 70;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--borde);
}
.header-contenido { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.marca { display: flex; align-items: center; gap: .55rem; font-family: 'Nunito', var(--fuente); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.02em; }
.marca-texto {
    font-family: 'Roboto', var(--fuente); font-weight: 700;
    color: var(--primario);
}
.marca-icono { width: 48px; height: 48px; border-radius: 9px; object-fit: contain; }

.menu { display: flex; align-items: center; gap: .35rem; }
.menu a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem .8rem; font-size: var(--txt-sm); font-weight: 500;
    color: var(--texto-suave); border-radius: var(--r-sm);
    white-space: nowrap;
    transition: color var(--transicion), background var(--transicion);
}
.menu a:hover { color: var(--primario); background: var(--primario-suave); }
.menu a i, .menu a svg { width: 18px; height: 18px; }
.menu-separador { width: 1px; height: 24px; background: var(--borde); margin-inline: .4rem; }
.menu .boton-empresa {
    background: var(--degradado); color: #fff; font-weight: 600;
    padding: .6rem 1.2rem; border-radius: var(--r-full); box-shadow: var(--sombra-color);
}
.menu .boton-empresa:hover { color: #fff; transform: translateY(-1px); }

.menu-toggle {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--texto); cursor: pointer;
}
.menu-toggle:hover { background: var(--primario-suave); color: var(--primario); }
.menu-toggle i, .menu-toggle svg { width: 22px; height: 22px; }
.menu a.menu-solo-movil { display: none; }

/* ---------------------------------------------------------
   7. HERO
--------------------------------------------------------- */
.hero {
    position: relative; min-height: 560px;
    display: flex; align-items: center; color: #fff;
    overflow: hidden; isolation: isolate;
    /* Deja aire abajo para que las categorías ancladas al piso del
       hero (.hero-pie-categorias, position:absolute) no se encimen
       con el buscador cuando la pantalla es baja. */
    padding-bottom: 148px;
}
@media (max-width: 560px) { .hero { padding-bottom: 180px; } }
.hero-video-fondo, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Solo el video .activo se ve. Sin esto, el video de arriba en el
   DOM tapaba al que estaba reproduciéndose y parecía congelado. */
.hero-video { opacity: 0; transition: opacity 1s ease; }
.hero-video.activo { opacity: 1; }
.hero-video-capa { position: absolute; inset: 0; z-index: -1; background: rgba(27,35,80,.72); }
.hero-contenido { max-width: 720px; padding-block: 4rem; }
.hero h1 {
    background: none; -webkit-text-fill-color: #fff; color: #fff;
    font-size: clamp(2.2rem, 5.2vw, 3.4rem);
}
.hero p { color: rgba(255,255,255,.9); font-size: var(--txt-lg); max-width: 560px; }

.hero-entrada {
    opacity: 0; animation: hero-entrada-anim .7s ease forwards;
}
@keyframes hero-entrada-anim {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-entrada { animation: none; opacity: 1; }
}

.hero-scroll-abajo {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
    display: grid; place-items: center; color: rgba(255,255,255,.8);
    animation: hero-scroll-bounce 2s ease-in-out infinite; z-index: 1;
}
.hero-scroll-abajo:hover { border-color: #fff; color: #fff; }
.hero-scroll-abajo i, .hero-scroll-abajo svg { width: 18px; height: 18px; }
@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}
@media (max-width: 640px) { .hero-scroll-abajo { display: none; } }

.hero-buscador { margin-top: 1.75rem; }
.hero-buscador-caja {
    display: flex; align-items: center; background: #fff;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: var(--r-full); padding: .4rem .4rem .4rem 1.25rem;
    box-shadow: 0 2px 8px rgba(31,39,93,.08); max-width: 640px;
    transition: box-shadow var(--transicion), border-color var(--transicion);
}
.hero-buscador-caja:focus-within {
    border-color: var(--primario);
    box-shadow: 0 2px 8px rgba(31,39,93,.08), 0 4px 16px rgba(31,39,93,.12);
}
.hero-buscador-caja input[type="search"] {
    flex: 1; border: none; outline: none; background: transparent;
    color: var(--texto); font-size: var(--txt-md); min-width: 0;
}
.hero-buscador-caja input::placeholder { color: var(--texto-tenue); }
.hero-buscador-divisor { width: 1px; height: 26px; background: var(--borde); margin-inline: .5rem; }
.hero-buscador-categoria {
    border: none; outline: none; background: transparent;
    color: var(--texto-suave); font-size: var(--txt-sm); font-weight: 500;
    max-width: 160px; cursor: pointer;
}
.hero-buscador-caja button {
    display: inline-flex; align-items: center; gap: .45rem;
    background: transparent; color: var(--primario);
    border: 1.5px solid var(--primario);
    border-radius: var(--r-full); padding: .7rem 1.35rem;
    font-weight: 600; cursor: pointer;
    transition: box-shadow var(--transicion), background var(--transicion);
}
.hero-buscador-caja button:hover {
    background: var(--primario-suave);
    box-shadow: 0 2px 8px rgba(31,39,93,.08), 0 4px 16px rgba(31,39,93,.12);
}
.ayuda-busqueda { margin-top: .9rem; font-size: var(--txt-sm); color: rgba(255,255,255,.8); }

.hero-categorias-grandes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.hero-categoria-grande {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.28);
    color: #fff; font-weight: 500; font-size: var(--txt-sm);
    padding: .55rem 1rem; border-radius: var(--r-full);
    transition: background var(--transicion), transform var(--transicion);
}
.hero-categoria-grande:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); }

/* Categorías como "pie" del hero: antes eran su propia franja
   blanca debajo del hero; ahora viven DENTRO del hero, ancladas
   abajo sobre el video (position:absolute respecto a .hero, que
   es position:relative). Un degradado oscuro de piso les da
   contraste sin tapar el video, y las mini-tarjetas a color ya
   funcionan solas sobre cualquier fondo porque cada una lleva su
   propio tinte sólido. */
.hero-pie-categorias {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 2.4rem 0 .6rem;
    background: linear-gradient(to top, rgba(12, 17, 46, .55), rgba(12, 17, 46, 0));
}
.hero-pie-categorias .carrusel { margin-top: 0; justify-content: center; }
.hero-pie-categorias .carrusel-pista {
    padding: .25rem .25rem .25rem;
    justify-content: safe center;
}

/* Mini-tarjetas de categoría: nada de fondos a color que rotan ni
   manchas decorativas en la esquina — eso se leía como plantilla
   genérica. Ahora todas comparten el mismo vidrio esmerilado sobre
   el video del hero (un solo lenguaje, no un arcoíris), y lo único
   que distingue a cada categoría es su propio ícono. */
.hero-pie-categorias .hero-categoria-grande {
    flex-direction: column; align-items: flex-start; justify-content: flex-end;
    gap: .55rem; text-align: left;
    position: relative; overflow: hidden;
    width: 132px; height: 112px; padding: .85rem .95rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    color: #fff; font-weight: 700; font-size: 13px; line-height: 1.25;
    transition: transform var(--transicion), background var(--transicion), border-color var(--transicion);
}
.hero-pie-categorias .hero-categoria-grande:hover {
    background: rgba(255,255,255,.17);
    border-color: rgba(255,255,255,.3);
    transform: translateY(-3px);
}
.hero-pie-categorias .hero-categoria-grande:active { transform: translateY(-1px) scale(.97); }
.hero-pie-categorias .cat-ic {
    position: relative; z-index: 1;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.16);
    color: #fff;
    transition: transform var(--transicion), background var(--transicion);
}
.hero-pie-categorias .hero-categoria-grande:hover .cat-ic { background: rgba(255,255,255,.24); }
.hero-pie-categorias .hero-categoria-grande > span:last-child { position: relative; z-index: 1; }
/* Ícono Phosphor Duotono: fuente de íconos, no SVG — se dimensiona con font-size.
   El tono secundario del duotono usa menos opacidad automáticamente. */
.hero-pie-categorias .cat-ic i { font-size: 20px; line-height: 1; color: #fff; --ph-duotone-secondary-opacity: .5; }
.hero-pie-categorias .hero-categoria-grande:hover .cat-ic { transform: scale(1.1) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) {
    .hero-pie-categorias .hero-categoria-grande:hover .cat-ic { transform: none; }
}

@media (max-width: 560px) {
    .hero-pie-categorias .hero-categoria-grande { width: 108px; height: 100px; padding: .75rem .8rem; }
    .hero-pie-categorias .cat-ic { width: 32px; height: 32px; }
}

/* ---------------------------------------------------------
   8. TARJETAS
--------------------------------------------------------- */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }

.tarjeta {
    background: var(--blanco); border: 1px solid var(--borde);
    border-radius: var(--r-lg); overflow: hidden;
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: transparent; }
.tarjeta-media { position: relative; aspect-ratio: 16/10; background: var(--fondo-suave); }
.tarjeta-media img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-cuerpo { padding: 1.1rem 1.2rem 1.3rem; }
.tarjeta-titulo { font-size: var(--txt-lg); font-weight: 700; margin: 0 0 .25rem; }
.tarjeta-meta { display: flex; align-items: center; gap: .4rem; color: var(--texto-suave); font-size: var(--txt-sm); }

.categoria-chip {
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    padding: 1.4rem 1rem; text-align: center;
    background: var(--blanco); border: 1px solid var(--borde);
    border-radius: var(--r-md); transition: transform var(--transicion), box-shadow var(--transicion);
}
.categoria-chip:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.categoria-chip-icono {
    width: 56px; height: 56px; display: grid; place-items: center;
    border-radius: var(--r-md); background: var(--primario-suave); color: var(--primario);
}
.categoria-chip-icono i, .categoria-chip-icono svg { width: 26px; height: 26px; }
.categoria-chip span { font-weight: 600; font-size: var(--txt-sm); }

/* ---------------------------------------------------------
   9. BADGES
--------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--r-full); font-size: var(--txt-xs); font-weight: 600; }
.badge-abierto { background: var(--exito-suave); color: var(--exito); }
.badge-cerrado { background: var(--peligro-suave); color: var(--peligro); }
.badge-neutro  { background: var(--fondo-suave); color: var(--texto-suave); }
.badge-acento  { background: var(--acento-suave); color: var(--acento); }

/* ---------------------------------------------------------
   10. FORMULARIOS
--------------------------------------------------------- */
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-weight: 600; font-size: var(--txt-sm); margin-bottom: .4rem; }
.input, .select, .textarea {
    width: 100%; padding: .8rem 1rem; background: var(--fondo);
    border: 1.5px solid var(--borde); border-radius: var(--r-sm);
    font-size: var(--txt-md); transition: border-color var(--transicion), box-shadow var(--transicion);
}
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--primario); box-shadow: 0 0 0 4px var(--primario-suave);
}

/* ---------------------------------------------------------
   11. NAV MÓVIL INFERIOR
--------------------------------------------------------- */
.nav-movil {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: none;
    background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
    border-top: 1px solid var(--borde);
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); justify-content: space-around;
}
.nav-movil a {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    font-size: var(--txt-xs); font-weight: 500; color: var(--texto-suave);
    padding: .4rem .6rem; border-radius: var(--r-sm);
}
.nav-movil a.activo { color: var(--primario); }
.nav-movil a i, .nav-movil a svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------
   12. UTILIDADES
--------------------------------------------------------- */
.text-center { text-align: center; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-1{gap:.5rem}.gap-2{gap:1rem}
.oculto{display:none}

/* ---------------------------------------------------------
   13. RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 860px) {
    .menu-toggle { display: flex; }
    .nav-movil { display: flex; }
    body { padding-bottom: 68px; }

    /*
        El menú de arriba ya no se oculta sin reemplazo: se
        convierte en un desplegable que abre el botón de
        hamburguesa. La barra inferior (nav-movil) solo cubre
        Inicio/Buscar/Categorías/Pedidos — carrito, cuenta y
        "Registrar empresa" solo viven aquí.
    */
    .menu {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: .2rem;
        background: #fff; border-bottom: 1px solid var(--borde);
        box-shadow: 0 16px 28px rgba(15,23,42,.10);
        padding: .6rem; max-height: 0; overflow: hidden;
        opacity: 0; visibility: hidden;
        transition: max-height .22s ease, opacity .18s ease, visibility .22s ease;
    }
    .menu.abierto {
        max-height: calc(100vh - 68px); overflow-y: auto;
        opacity: 1; visibility: visible;
    }
    .menu a { width: 100%; padding: .75rem .8rem; }
    .menu-separador { width: 100%; height: 1px; margin-inline: 0; margin-block: .3rem; }
    .menu .boton-empresa { width: 100%; justify-content: center; }
    .menu-duplicado-movil { display: none; }
    .menu-solo-movil { display: inline-flex; }
    .hero { min-height: 480px; }
    .hero-buscador-caja { flex-wrap: wrap; border-radius: var(--r-lg); padding: .75rem; gap: .5rem; }
    .hero-buscador-divisor { display: none; }
    .hero-buscador-caja input[type="search"] { flex: 1 1 100%; padding: .3rem .25rem; }
    .hero-buscador-caja button { flex: 1 1 100%; justify-content: center; padding: .8rem; }
    .hero-buscador-categoria { max-width: none; flex: 1; }
}


/* =========================================================
   ══════════════════════════════════════════════════════════
   AMPLIACIÓN v1.1 — componentes que faltaban
   ══════════════════════════════════════════════════════════

   Todo lo de abajo son piezas que hoy están repetidas dentro
   del <style> de cada página. Al estar aquí, se escriben una
   vez y se borran de los 47 archivos.
   ========================================================= */


/* ---------------------------------------------------------
   14. ALIAS DE COMPATIBILIDAD
   Varias páginas usan --oscuro y --terracota, que no existían
   en este archivo. Se definen aquí para que nada se rompa
   mientras migras. Cuando ya no queden usos, bórralos.
--------------------------------------------------------- */
:root {
    --oscuro:    #1B2159;
    --terracota: var(--acento);
    --boton:     var(--primario);
    --gris:      var(--texto-suave);
    --gris-claro:var(--fondo-suave);
}


/* ---------------------------------------------------------
   15. ALERTAS Y MENSAJES FLASH
--------------------------------------------------------- */
.alerta {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 1rem 0;
    padding: .9rem 1.1rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--txt-sm);
    font-weight: 500;
    animation: alerta-entra .28s ease both;
}
.alerta i, .alerta svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.alerta span { flex: 1; }

.alerta-exito { background: var(--exito-suave);   color: #0E7A41; border-color: #BFEFD4; }
.alerta-error { background: var(--peligro-suave); color: #B42318; border-color: #FBD5D5; }
.alerta-aviso { background: var(--alerta-suave);  color: #9A6200; border-color: #E6B455; }
.alerta-info  { background: var(--primario-suave);color: var(--primario-oscuro); border-color: #D5DCFF; }

.alerta-cerrar {
    background: none; border: none; cursor: pointer;
    opacity: .55; padding: 0; line-height: 0;
    transition: opacity var(--transicion);
}
.alerta-cerrar:hover { opacity: 1; }

.alerta-lista { margin: 0; padding-left: 1.1rem; }
.alerta-lista li { margin-bottom: .2rem; }

@keyframes alerta-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------
   16. MENÚ: ESTADO ACTIVO Y CARRITO
--------------------------------------------------------- */
.menu a.activo { color: var(--primario); background: var(--primario-suave); font-weight: 600; }

.menu-carrito { position: relative; }
.menu-carrito-globo {
    position: absolute; top: 2px; right: 2px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center;
    background: var(--peligro); color: #fff;
    border-radius: var(--r-full);
    font-size: 11px; font-weight: 700; line-height: 1;
}


/* ---------------------------------------------------------
   17. PIE DE PÁGINA
   Simple a propósito: el texto y los enlaces sociales salen
   de admin/pie.php (tabla configuracion), no están fijos aquí.
--------------------------------------------------------- */
.pie {
    margin-top: 3.5rem;
    background: var(--oscuro);
    color: rgba(255,255,255,.65);
}
.pie-simple {
    padding: 2.5rem 0;
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 1.75rem;
}
.pie-marca-bloque { max-width: 320px; }
.pie-marca {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
    font-family: 'Nunito', var(--fuente); font-weight: 400; font-size: var(--txt-xl); color: #fff;
    letter-spacing: -0.01em; line-height: 1;
}
.pie-marca-icono { width: 40px; height: 40px; object-fit: contain; }
.pie-marca-texto {
    color: #9DB0FF;
}
.pie-marca-bloque p {
    margin: 0; font-size: var(--txt-sm); line-height: 1.65;
    color: rgba(255,255,255,.65);
}
.pie-enlaces {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
.pie-enlaces a {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--txt-sm); color: rgba(255,255,255,.65);
    transition: color var(--transicion);
}
.pie-enlaces a i, .pie-enlaces a svg { width: 15px; height: 15px; opacity: .8; }
.pie-enlaces a:not(:first-child) { position: relative; }
.pie-enlaces a:not(:first-child)::before {
    content: ''; position: absolute; left: -.75rem; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 14px; background: rgba(255,255,255,.22);
}
.pie-enlaces a:hover { color: #fff; }
.pie-social { display: flex; gap: .6rem; }
.pie-social a {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: var(--r-full); background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.8); transition: background var(--transicion), color var(--transicion);
}
.pie-social a:hover { background: rgba(255,255,255,.18); color: #fff; }
.pie-social a svg { width: 17px; height: 17px; }
.pie-abajo {
    padding: 1.1rem 0;
    display: flex; align-items: center; justify-content: center;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: var(--txt-xs);
}


/* ---------------------------------------------------------
   18. PANELES Y SECCIONES DE FORMULARIO
--------------------------------------------------------- */
.panel {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    padding: 1.5rem;
}
.panel + .panel { margin-top: 1.25rem; }
.panel-encabezado {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--borde);
}
.panel-titulo { margin: 0; font-size: var(--txt-lg); font-weight: 700; }
.panel-sub { margin: .15rem 0 0; font-size: var(--txt-sm); color: var(--texto-suave); }

.panel-vacio {
    padding: 3rem 1.5rem; text-align: center; color: var(--texto-suave);
}
.panel-vacio i, .panel-vacio svg {
    width: 44px; height: 44px; margin-bottom: .75rem;
    color: var(--texto-tenue);
}


/* ---------------------------------------------------------
   19. TABLAS
--------------------------------------------------------- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabla { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); }
.tabla th {
    text-align: left; padding: .75rem 1rem;
    font-weight: 600; font-size: var(--txt-xs);
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-tenue);
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}
.tabla td { padding: .9rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--fondo-suave); }
.tabla .num { text-align: right; font-variant-numeric: normal; }


/* ---------------------------------------------------------
   20. ESTADOS DE PEDIDO / CITA
   Los mismos colores en todo el sistema, siempre.
--------------------------------------------------------- */
.estado {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem; border-radius: var(--r-full);
    font-size: var(--txt-xs); font-weight: 600; white-space: nowrap;
}
.estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.estado-pendiente  { background: var(--alerta-suave);   color: #9A6200; }
.estado-revision   { background: var(--acento-suave);   color: #0E7C8F; }
.estado-confirmado { background: var(--primario-suave); color: var(--primario-oscuro); }
.estado-preparando { background: var(--primario-suave); color: var(--primario-oscuro); }
.estado-listo      { background: var(--acento-suave);   color: #0E7C8F; }
.estado-en_camino  { background: var(--acento-suave);   color: #0E7C8F; }
.estado-entregado  { background: var(--exito-suave);    color: #0E7A41; }
.estado-completada { background: var(--exito-suave);    color: #0E7A41; }
.estado-cancelado,
.estado-cancelada  { background: var(--peligro-suave);  color: #B42318; }
.estado-ausente    { background: var(--fondo-suave);      color: var(--texto-suave); }


/* ---------------------------------------------------------
   21. FORMULARIOS: PIEZAS QUE FALTABAN
--------------------------------------------------------- */
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo-ayuda { margin-top: .3rem; font-size: var(--txt-xs); color: var(--texto-tenue); }
.campo-error { margin-top: .3rem; font-size: var(--txt-xs); color: var(--peligro); font-weight: 500; }
.campo.tiene-error .input,
.campo.tiene-error .select,
.campo.tiene-error .textarea { border-color: var(--peligro); }

.campo label .obligatorio { color: var(--peligro); margin-left: 2px; }

.textarea { min-height: 120px; resize: vertical; }

.check {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: var(--txt-sm); cursor: pointer;
}
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primario); }

.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none;
}
.btn-peligro { background: var(--peligro); color: #fff; }
.btn-peligro:hover { background: #D92D20; }
.btn-exito { background: var(--exito); color: #fff; }
.btn-sm { padding: .5rem 1rem; font-size: var(--txt-xs); }
.btn-icono { padding: .55rem; border-radius: var(--r-sm); }


/* ---------------------------------------------------------
   22. MIGAS DE PAN Y PAGINACIÓN
--------------------------------------------------------- */
.migas {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    padding: 1rem 0; font-size: var(--txt-sm); color: var(--texto-suave);
}
.migas a:hover { color: var(--primario); }
.migas .separador { color: var(--texto-tenue); }

.paginacion { display: flex; justify-content: center; gap: .35rem; margin-top: 2rem; }
.paginacion a, .paginacion span {
    min-width: 38px; height: 38px; padding: 0 .6rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--borde); border-radius: var(--r-sm);
    font-size: var(--txt-sm); font-weight: 500;
    transition: all var(--transicion);
}
.paginacion a:hover { border-color: var(--primario); color: var(--primario); }
.paginacion .actual { background: var(--primario); border-color: var(--primario); color: #fff; }


/* ---------------------------------------------------------
   23. MODALES
--------------------------------------------------------- */
.modal-fondo {
    position: fixed; inset: 0; z-index: 100;
    display: none; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(31,39,93,.5); backdrop-filter: blur(3px);
}
.modal-fondo.abierto { display: flex; }
.modal {
    width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
    background: var(--blanco); border-radius: var(--r-lg);
    box-shadow: var(--sombra-lg);
    animation: modal-entra .22s ease both;
}
.modal-encabezado {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--borde);
}
.modal-cuerpo { padding: 1.5rem; }
.modal-pie {
    display: flex; justify-content: flex-end; gap: .6rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--borde);
    background: var(--fondo-suave);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
@keyframes modal-entra {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------
   24. ESQUELETOS DE CARGA
--------------------------------------------------------- */
.esqueleto {
    background: var(--fondo-suave);
    animation: esqueleto 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
}
@keyframes esqueleto {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}


/* ---------------------------------------------------------
   25. UTILIDADES ADICIONALES
--------------------------------------------------------- */
.pila { display: flex; flex-direction: column; }
.pila-1 { gap: .5rem; } .pila-2 { gap: 1rem; } .pila-3 { gap: 1.5rem; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.items-start { align-items: flex-start; }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.texto-suave { color: var(--texto-suave); }
.texto-tenue { color: var(--texto-tenue); }
.texto-sm { font-size: var(--txt-sm); }
.texto-xs { font-size: var(--txt-xs); }
.negrita { font-weight: 700; }
.num { font-variant-numeric: normal; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visible solo para lectores de pantalla */
.solo-lectores {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------
   26. IMPRESIÓN
   Para los comprobantes y facturas.
--------------------------------------------------------- */
@media print {
    .header, .pie, .nav-movil, .alerta, .btn, .no-imprimir { display: none !important; }
    body { padding: 0; background: #fff; }
    .panel { border: none; padding: 0; }
    a[href]::after { content: ''; }
}


/* ---------------------------------------------------------
   27. RESPONSIVE DE LO NUEVO
--------------------------------------------------------- */
@media (max-width: 860px) {
    .campo-fila { grid-template-columns: 1fr; }
    .panel { padding: 1.15rem; }
    .panel-encabezado { flex-direction: column; align-items: flex-start; gap: .5rem; }

    /*
        Versión reducida y centrada del pie: se queda la marca +
        la frase y los íconos sociales (lo único que no está ya
        en el menú de arriba o en la barra inferior). Los enlaces
        se ocultan porque duplican esos dos.
    */
    .pie { margin-top: 2rem; }
    .pie-simple {
        padding: 1.5rem 0; gap: .75rem;
        flex-direction: column; align-items: center; text-align: center;
    }
    .pie-marca { font-size: var(--txt-lg); }
    .pie-marca-bloque { max-width: none; }
    .pie-marca-bloque p { font-size: var(--txt-xs); }
    .pie-social { justify-content: center; }
    .pie-enlaces { display: none; }
    .pie-abajo { padding: .75rem 0; font-size: 10.5px; }
}

@media (max-width: 560px) {
    .modal-pie { flex-direction: column-reverse; }
    .modal-pie .btn { width: 100%; }
}


/* ---------------------------------------------------------
   28. RESPETAR PREFERENCIA DE MENOS MOVIMIENTO
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   ══════════════════════════════════════════════════════════
   29. COMPONENTES DEL DIRECTORIO
   ══════════════════════════════════════════════════════════

   Estas piezas venían del <style> de index.php. Las mismas
   tarjetas y encabezados se usan en buscar.php y en
   categorias.php, así que aquí sirven para las tres.
   ========================================================= */


/* ---------------------------------------------------------
   29.1 HERO CENTRADO (portada con video)
--------------------------------------------------------- */
.hero-centrado {
    position: relative; z-index: 2;
    max-width: 760px; margin-inline: auto;
    text-align: center;
}
.hero-centrado h1 {
    margin: 0 0 1.25rem;
    background: none; -webkit-text-fill-color: #fff; color: #fff;
    font-size: clamp(2.25rem, 5vw, 3.6rem);
    line-height: 1.08;
}
.hero-centrado h1 .resalte { color: var(--acento); -webkit-text-fill-color: var(--acento); }
.hero-centrado > p {
    max-width: 600px; margin: 0 auto 2.5rem;
    color: rgba(255,255,255,.82);
    font-size: var(--txt-lg); line-height: 1.7;
}
.hero-centrado .hero-buscador-caja { margin-inline: auto; }


/* ---------------------------------------------------------
   29.2 ENCABEZADO DE SECCIÓN
--------------------------------------------------------- */
.seccion-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.25rem; margin-bottom: 1.75rem;
}
.seccion-cabecera-texto { display: flex; align-items: center; gap: 1rem; }
.seccion-icono {
    flex-shrink: 0; width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--primario-suave); color: var(--primario);
}
.seccion-icono i, .seccion-icono svg { width: 24px; height: 24px; }
.seccion-cabecera h2 { margin: 0 0 .3rem; font-size: var(--txt-2xl); }
.seccion-cabecera p { margin: 0; color: var(--texto-suave); font-size: var(--txt-sm); }
.seccion-linea { flex: 1; height: 1px; background: var(--borde); }

.nuevos-spotlight { display: flex; gap: 16px; align-items: stretch; }

.nuevos-spotlight-grande {
    flex: 1.3; position: relative; min-height: 220px; border-radius: var(--r-lg);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
    overflow: hidden; text-decoration: none;
}
.nuevos-spotlight-velo {
    position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: rgba(0,0,0,.50);
}
.nuevos-spotlight-icono {
    position: absolute; top: 50%; right: 24px; transform: translateY(-50%);
    width: 96px; height: 96px; color: rgba(255,255,255,.18); stroke-width: 1.4;
}
.nuevos-spotlight-cat {
    position: relative; color: rgba(255,255,255,.85); font-size: var(--txt-xs); font-weight: 700;
    letter-spacing: .04em; margin-bottom: 6px;
}
.nuevos-spotlight-nombre {
    position: relative; color: #fff; font-size: 1.35rem; font-weight: 700; line-height: 1.2;
}

.nuevos-spotlight-lista { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.nuevos-spotlight-item {
    display: flex; align-items: center; gap: 10px; background: var(--blanco);
    border: 1px solid var(--borde); border-radius: var(--r-md); padding: 14px 16px;
    font-size: var(--txt-sm); font-weight: 600; color: var(--texto); text-decoration: none;
    transition: border-color var(--transicion), transform var(--transicion);
}
.nuevos-spotlight-item i, .nuevos-spotlight-item svg { width: 18px; height: 18px; color: var(--primario); flex-shrink: 0; }
.nuevos-spotlight-item:hover { border-color: var(--primario); transform: translateX(2px); }
.nuevos-spotlight-mas {
    display: flex; align-items: center; justify-content: center; flex: 1;
    border: 1px dashed var(--borde); border-radius: var(--r-md); color: var(--texto-suave);
    font-size: var(--txt-sm); font-weight: 600; text-decoration: none; min-height: 44px;
}
.nuevos-spotlight-mas:hover { border-color: var(--primario); color: var(--primario); }

@media (max-width: 760px) {
    .nuevos-spotlight { flex-direction: column; }
    .nuevos-spotlight-grande { min-height: 160px; }
}

/* Variantes de color del ícono de sección */
.seccion-icono.tono-acento { background: var(--acento-suave);   color: var(--acento); }
.seccion-icono.tono-exito  { background: var(--exito-suave);    color: var(--exito); }
.seccion-icono.tono-alerta { background: var(--alerta-suave);   color: var(--alerta); }
.seccion-icono.tono-morado { background: #F6EEFE;               color: #9855FE; }

.ver-todo {
    display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
    padding: .6rem 1.15rem;
    border: 1px solid var(--borde); border-radius: var(--r-full);
    font-size: var(--txt-sm); font-weight: 600; white-space: nowrap;
    transition: border-color var(--transicion), color var(--transicion), gap var(--transicion);
}
.ver-todo i, .ver-todo svg { width: 16px; height: 16px; }
.ver-todo:hover { gap: .65rem; border-color: var(--primario); color: var(--primario); }


/* ---------------------------------------------------------
   29.3 TARJETA DE NEGOCIO
--------------------------------------------------------- */
.negocios {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
}

.negocio {
    display: block; min-width: 0;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color var(--transicion);
}
.negocio:hover { border-color: var(--primario); }

.negocio-imagen {
    position: relative; aspect-ratio: 16/9;
    display: grid; place-items: center; overflow: hidden;
    background: var(--fondo-suave);
    border-bottom: 1px solid var(--borde);
}
.negocio-imagen img { width: 100%; height: 100%; object-fit: cover; }

.negocio-imagen-icono { width: 48px; height: 48px; }
.negocio-imagen-icono i, .negocio-imagen-icono svg {
    width: 100%; height: 100%; stroke-width: 1.3;
}

.negocio-imagen-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 6px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(31,39,93,.08);
}
.negocio-imagen-badge i, .negocio-imagen-badge svg { width: 17px; height: 17px; }

.negocio-logo {
    position: absolute; left: 14px; bottom: 14px;
    width: 44px; height: 44px;
    display: grid; place-items: center; overflow: hidden;
    background: var(--blanco);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 6px;
}
.negocio-logo img { width: 100%; height: 100%; object-fit: cover; }
.negocio-logo span { font-size: var(--txt-md); font-weight: 800; }

.negocio-info { padding: 1.05rem 1.05rem 1.15rem; }
.negocio-categoria {
    margin-bottom: .35rem;
    color: var(--primario);
    font-size: 12px; font-weight: 700;
}
.negocio h3 { margin: 0 0 .4rem; font-size: var(--txt-lg); }
.negocio p {
    min-height: 40px; margin: 0 0 .8rem;
    color: var(--texto-suave); font-size: var(--txt-sm); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.negocio-pie {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; flex-wrap: wrap;
    padding-top: .75rem;
    border-top: 1px solid var(--borde);
}
.negocio-ubicacion {
    display: inline-flex; align-items: center; gap: .25rem;
    color: var(--texto-tenue); font-size: var(--txt-xs);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.negocio-ubicacion i, .negocio-ubicacion svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Etiqueta del tipo de negocio */
.tipo {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .55rem; border-radius: 5px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.tipo i, .tipo svg { width: 13px; height: 13px; }
.tipo-comercio    { background: var(--primario-suave); color: var(--primario-oscuro); }
.tipo-servicios   { background: var(--acento-suave);   color: #0E7C8F; }
.tipo-mixto       { background: #F6EEFE;               color: #7B33D6; }
.tipo-restaurante { background: var(--alerta-suave);   color: #9A6200; }
.tipo-colmado     { background: var(--exito-suave);    color: #0E7A41; }
.tipo-barberia    { background: #FEEEF5;               color: #B02C6F; }
.tipo-salon       { background: #FEEEF5;               color: #B02C6F; }
.tipo-salud       { background: var(--acento-suave);   color: #0E7C8F; }


/* ---------------------------------------------------------
   29.4 CARRUSELES
   Un solo patrón para el de categorías y el de negocios.
   El JS los maneja por  data-carrusel.
--------------------------------------------------------- */
.carrusel { position: relative; display: flex; align-items: center; gap: .6rem; }

.carrusel-pista {
    flex: 1;
    display: flex; gap: 1.15rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: .5rem .25rem 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Cuando lleva tarjetas de negocio, ancho fijo */
.carrusel-pista.de-negocios > * { flex: 0 0 280px; max-width: 280px; }

/* Variante "grande": para secciones donde queremos que las
   tarjetas se vean más protagonistas (p. ej. "Nuevos en el
   directorio"), sin tocar el tamaño de las demás. */
.carrusel-pista.de-negocios-grande > * { flex: 0 0 340px; max-width: 340px; }

.carrusel-flecha {
    flex-shrink: 0;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid var(--borde); border-radius: 50%;
    background: var(--blanco); color: var(--primario);
    box-shadow: var(--sombra-md);
    cursor: pointer;
    transition: transform var(--transicion), background var(--transicion), border-color var(--transicion), box-shadow var(--transicion), color var(--transicion);
}
.carrusel-flecha:hover {
    transform: scale(1.08);
    background: var(--primario);
    border-color: var(--primario);
    color: #fff;
    box-shadow: 0 10px 24px rgba(85,117,254,.28);
}
.carrusel-flecha:active { transform: scale(.94); }
.carrusel-flecha i, .carrusel-flecha svg { width: 22px; height: 22px; }
.carrusel-flecha[disabled] { opacity: .3; cursor: default; pointer-events: none; }

/* Sobre el video del hero, las flechas van translúcidas
   (sin backdrop-filter: desenfocar el video en cada frame
   ahogaba la reproducción). */
.hero .carrusel-flecha {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.22);
    color: #fff; box-shadow: none;
}
.hero .carrusel-flecha:hover {
    background: #fff;
    border-color: #fff;
    color: var(--primario);
    box-shadow: none;
}

.carrusel-puntos { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 1.4rem; }
.carrusel-puntos button {
    width: 8px; height: 8px; padding: 0; border: 0;
    border-radius: var(--r-full);
    background: rgba(31,39,93,.22); cursor: pointer;
    transition: width var(--transicion), background var(--transicion), transform var(--transicion);
}
.carrusel-puntos button.activo { width: 26px; background: var(--primario); }
.carrusel-puntos button:not(.activo):hover { background: rgba(85,117,254,.45); transform: scale(1.2); }

/* Variante "elegante": sin círculo, sin sombra, casi invisible
   hasta que pasas el mouse por encima. La tarjeta que se asoma
   al borde ya avisa que hay más — no hace falta más adorno. */
.carrusel.elegante .carrusel-flecha {
    width: 34px; height: 34px;
    border: 1px solid var(--borde);
    background: transparent;
    box-shadow: none;
    color: var(--texto-suave);
}
.carrusel.elegante .carrusel-flecha:hover {
    background: transparent;
    border-color: var(--primario);
    color: var(--primario);
    transform: none;
    box-shadow: none;
}
.carrusel.elegante .carrusel-flecha:active { transform: scale(.92); }
.carrusel.elegante .carrusel-flecha i,
.carrusel.elegante .carrusel-flecha svg { width: 18px; height: 18px; }
.carrusel.elegante .carrusel-flecha[disabled] { opacity: 0; }
.hero .carrusel-puntos button { background: rgba(255,255,255,.4); }
.hero .carrusel-puntos button.activo { background: #fff; }

/* =========================================================
   PROMO — carrusel con MARCO DE CELULAR (slides a los lados)
========================================================= */
.promo-fono-seccion {
    padding: 4rem 0 4.5rem;
    background: var(--fondo-alt);
    overflow: hidden;
}
.promo-fono-cab { text-align: center; max-width: 620px; margin: 0 auto 2.6rem; }
.promo-fono-cab h2 { font-size: var(--txt-2xl); margin: 0 0 .5rem; }
.promo-fono-cab p { color: var(--texto-suave); margin: 0; }

.pfono { position: relative; height: 540px; }
.pfono-slides { position: absolute; inset: 0; }

.pfono-slide {
    position: absolute; top: 50%; left: 50%;
    width: 220px; height: 474px;
    margin: -237px 0 0 -110px;
    border-radius: 32px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 30px 22px 34px; color: #fff; text-align: left;
    box-shadow: 0 24px 60px rgba(20,25,60,.30);
    transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
    will-change: transform, opacity; cursor: pointer;
}
.pfono-slide::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,.28);
    z-index: 0;
}
.pfono-slide > * { position: relative; z-index: 1; }
.pfono-ic {
    width: 46px; height: 46px; border-radius: 14px;
    background: rgba(255,255,255,.20);
    display: grid; place-items: center;
}
.pfono-ic i, .pfono-ic svg { width: 24px; height: 24px; }
.pfono-t { font-size: 26px; font-weight: 800; line-height: 1.08; }
.pfono-s { margin-top: 8px; font-size: 13.5px; opacity: .95; line-height: 1.42; }

.pfono-mock { width: 100%; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }

.pfono-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pmg-item {
    aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.16);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.pmg-item i, .pmg-item svg { width: 20px; height: 20px; opacity: .85; }
.pmg-item span { width: 65%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); }

.pfono-mock-chat { display: flex; flex-direction: column; gap: 8px; }
.pmc-bubble {
    max-width: 82%; padding: 8px 12px; border-radius: 14px;
    font-size: 12px; line-height: 1.35;
}
.pmc-in { align-self: flex-start; background: rgba(255,255,255,.20); border-bottom-left-radius: 4px; }
.pmc-out { align-self: flex-end; background: rgba(255,255,255,.92); color: #14532d; border-bottom-right-radius: 4px; }

.pfono-mock-cal {
    background: rgba(255,255,255,.14); border-radius: 16px; padding: 12px;
}
.pmcal-head { font-size: 12px; font-weight: 700; margin-bottom: 8px; opacity: .9; }
.pmcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pmcal-grid span {
    aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
}
.pmcal-grid span.activo { background: #fff; color: #7C3AED; font-weight: 800; }
.pmcal-linea {
    margin-top: 10px; display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; opacity: .9;
}
.pmcal-linea i, .pmcal-linea svg { width: 13px; height: 13px; }

.pfono-mock-recibo {
    background: rgba(255,255,255,.95); color: #1F275D; border-radius: 16px;
    padding: 16px 14px; display: flex; flex-direction: column; gap: 9px;
}
.pmr-linea { height: 7px; border-radius: 4px; background: rgba(31,39,93,.14); width: 100%; }
.pmr-linea.corta { width: 60%; }
.pmr-total { margin-top: 4px; font-size: 15px; font-weight: 800; }
.pmr-check {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; color: #16a34a;
}
.pmr-check i, .pmr-check svg { width: 13px; height: 13px; }

.pfono-marco {
    position: absolute; top: 50%; left: 50%;
    width: 236px; height: 488px; margin: -244px 0 0 -118px;
    border: 11px solid #14161f; border-radius: 40px;
    z-index: 60; pointer-events: none;
    box-shadow: 0 34px 80px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.05);
}
.pfono-marco::before {
    content: ""; position: absolute; top: -1px; left: 50%;
    transform: translateX(-50%);
    width: 92px; height: 20px; background: #14161f;
    border-radius: 0 0 16px 16px;
}

.pfono-puntos { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.pfono-puntos button {
    width: 9px; height: 9px; border: 0; border-radius: 50%;
    background: #c7cfe4; cursor: pointer; padding: 0; transition: .25s;
}
.pfono-puntos button.activo { width: 26px; border-radius: 6px; background: var(--primario); }

@media (max-width: 600px) { .pfono { height: 500px; } }


/* ---------------------------------------------------------
   29.5 VENTAJAS
--------------------------------------------------------- */
.ventajas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ventaja {
    padding: 1.75rem; border-radius: var(--r-lg); background: var(--blanco);
    border: 1px solid var(--borde); transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.ventaja:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); border-color: transparent; }
.ventaja-icono {
    width: 46px; height: 46px; margin-bottom: 1rem;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--primario-suave); color: var(--primario);
    transition: transform var(--transicion);
}
.ventaja:hover .ventaja-icono { transform: scale(1.12) rotate(-4deg); }
.ventaja-icono i, .ventaja-icono svg { width: 22px; height: 22px; }
.ventaja h3 { margin: 0 0 .35rem; font-size: var(--txt-lg); }
.ventaja p { margin: 0; color: var(--texto-suave); font-size: var(--txt-sm); line-height: 1.6; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.hero-mini-stats {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    margin-top: 1.1rem; color: rgba(255,255,255,.75); font-size: var(--txt-sm);
}
.hero-mini-stats strong { color: #fff; }
.hero-mini-punto { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4); }
@media (max-width: 560px) { .hero-mini-stats { flex-wrap: wrap; } }


/* ---------------------------------------------------------
   29.6 LLAMADA A LA ACCIÓN
--------------------------------------------------------- */
.cta {
    position: relative; overflow: hidden;
    padding: 2.75rem 2.4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    border-radius: var(--r-xl);
    background: var(--oscuro); color: #fff;
}
.cta::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.12) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    mask-image: linear-gradient(115deg, #000 20%, transparent 65%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 {
    margin: 0 0 .5rem; background: none; -webkit-text-fill-color: #fff; color: #fff;
    font-size: var(--txt-2xl);
}
.cta p { margin: 0; max-width: 620px; color: rgba(255,255,255,.7); line-height: 1.6; }
.cta .btn { flex-shrink: 0; }


/* ---------------------------------------------------------
   29.7 ESTADO VACÍO
--------------------------------------------------------- */
.vacio {
    padding: 2.2rem;
    border: 1px dashed var(--borde); border-radius: var(--r-md);
    background: var(--blanco); text-align: center;
    color: var(--texto-suave); font-size: var(--txt-sm);
}
.vacio strong { display: block; margin-bottom: .4rem; color: var(--texto); }


/* ---------------------------------------------------------
   29.8 CONTADORES
--------------------------------------------------------- */
.contadores {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1rem; text-align: center;
}
.contador-numero {
    font-size: var(--txt-3xl); font-weight: 800;
    letter-spacing: -0.02em; line-height: 1;
    font-variant-numeric: normal;
}
.contador-texto { margin-top: .35rem; color: var(--texto-suave); font-size: var(--txt-sm); }


/* ---------------------------------------------------------
   29.9 RESPONSIVE DEL DIRECTORIO
--------------------------------------------------------- */
@media (max-width: 1024px) {
    .negocios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .seccion-cabecera { align-items: flex-start; flex-wrap: wrap; }
    .seccion-linea { display: none; }
    .seccion-icono { width: 40px; height: 40px; }
    .seccion-icono i, .seccion-icono svg { width: 20px; height: 20px; }
    .seccion-cabecera h2 { font-size: var(--txt-xl); }
    .ventajas { grid-template-columns: 1fr; gap: 1.75rem; }
    .cta { padding: 1.7rem 1.4rem; display: block; }
    .cta h2 { font-size: var(--txt-xl); }
    .cta .btn { width: 100%; margin-top: 1.25rem; }
}

@media (max-width: 640px) {
    .negocios { grid-template-columns: 1fr; }
    .carrusel-flecha { display: none; }
    .carrusel-pista.de-negocios > * { flex: 0 0 78%; max-width: 78%; }
    .carrusel-pista.de-negocios-grande > * { flex: 0 0 84%; max-width: 84%; }
    .contadores { grid-template-columns: 1fr; gap: 1.5rem; }
}


/* ---------------------------------------------------------
   30. BÚSQUEDA Y FILTROS
   Vienen de buscar.php y categorias.php.
--------------------------------------------------------- */

/* Barra de búsqueda compacta (páginas internas) */
.buscador-compacto {
    display: flex; align-items: center;
    max-width: 560px; margin-inline: auto;
    background: var(--blanco);
    border: 1.5px solid var(--borde);
    border-radius: var(--r-full);
    padding: .3rem .3rem .3rem 1.15rem;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.buscador-compacto:focus-within {
    border-color: var(--primario);
    box-shadow: 0 0 0 4px var(--primario-suave);
}
.buscador-compacto input[type="search"] {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    font-size: var(--txt-md);
}
.buscador-compacto input::placeholder { color: var(--texto-tenue); }
.buscador-compacto button {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .65rem 1.3rem;
    border: none; border-radius: var(--r-full);
    background: var(--degradado); color: #fff;
    font-weight: 600; cursor: pointer;
    transition: transform var(--transicion);
}
.buscador-compacto button:hover { transform: translateY(-1px); }
.buscador-compacto button i, .buscador-compacto button svg { width: 17px; height: 17px; }


/* Fila de filtros por categoría */
.filtros {
    display: flex; gap: .55rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    -ms-overflow-style: none; scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }

.filtro-chip {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem;
    border: 1px solid var(--borde); border-radius: var(--r-full);
    background: var(--blanco);
    font-size: var(--txt-sm); font-weight: 500;
    white-space: nowrap;
    transition: all var(--transicion);
}
.filtro-chip i, .filtro-chip svg { width: 16px; height: 16px; }
.filtro-chip:hover { border-color: var(--primario); color: var(--primario); }
.filtro-chip.activo {
    background: var(--primario); border-color: var(--primario);
    color: #fff; font-weight: 600;
}

.cerca-de-mi-fila { margin-bottom: 1rem; display: flex; }
.btn-cerca-de-mi {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: var(--r-full);
    border: 1px solid var(--borde); background: var(--blanco);
    color: var(--texto-suave); font-size: var(--txt-sm); font-weight: 600;
    cursor: pointer; transition: all var(--transicion);
}
.btn-cerca-de-mi i, .btn-cerca-de-mi svg { width: 16px; height: 16px; }
.btn-cerca-de-mi:hover { border-color: var(--primario); color: var(--primario); }
.btn-cerca-de-mi.activo {
    background: var(--primario); border-color: var(--primario); color: #fff;
}
.btn-cerca-de-mi.cargando { opacity: .65; pointer-events: none; }

.filtros-colapsable {
    max-height: 88px;
    overflow: hidden !important;
    transition: max-height .25s ease;
}
.filtros-colapsable.expandido { max-height: 600px; }

.filtros-ver-mas {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .6rem; padding: 0; border: 0; background: none;
    color: var(--primario); font-size: var(--txt-sm); font-weight: 600;
    cursor: pointer;
}
.filtros-ver-mas i, .filtros-ver-mas svg {
    width: 16px; height: 16px; transition: transform var(--transicion);
}
.filtros-ver-mas.expandido i, .filtros-ver-mas.expandido svg { transform: rotate(180deg); }


/* Encabezado de página interna */
.cabecera-pagina {
    padding-block: 2.5rem;
    text-align: center;
    background: var(--fondo-alt);
    border-bottom: 1px solid var(--borde);
}
.cabecera-pagina h1 {
    margin-bottom: .4rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.cabecera-pagina .resumen {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-bottom: 1.5rem;
    color: var(--texto-suave); font-size: var(--txt-sm);
}
.cabecera-pagina .resumen i, .cabecera-pagina .resumen svg { width: 16px; height: 16px; }


/* Resultado vacío con ícono */
.vacio i, .vacio svg {
    width: 38px; height: 38px;
    margin-bottom: .6rem;
    color: var(--texto-tenue);
}
.vacio p { margin: .4rem 0 0; font-size: var(--txt-sm); }


@media (max-width: 640px) {
    .buscador-compacto { padding: .5rem; flex-wrap: wrap; border-radius: var(--r-lg); }
    .buscador-compacto input[type="search"] { flex: 1 1 100%; padding: .3rem .25rem; }
    .buscador-compacto button { flex: 1 1 100%; justify-content: center; padding: .75rem; }
}


/* ---------------------------------------------------------
   31. CUADRÍCULA DE CATEGORÍAS
--------------------------------------------------------- */
.categorias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .9rem;
}

.categoria-tarjeta {
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.1rem;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.categoria-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-md);
    border-color: transparent;
}
.categoria-tarjeta:hover .categoria-tarjeta-flecha { transform: translateX(3px); }

.categoria-tarjeta-icono {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
}
.categoria-tarjeta-icono i, .categoria-tarjeta-icono svg { width: 24px; height: 24px; }

.categoria-tarjeta-texto { flex: 1; min-width: 0; }
.categoria-tarjeta-texto strong {
    display: block;
    font-size: var(--txt-md); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.categoria-tarjeta-texto span {
    display: block; margin-top: .1rem;
    color: var(--texto-tenue); font-size: var(--txt-xs);
}

.categoria-tarjeta-flecha {
    flex-shrink: 0;
    width: 18px; height: 18px;
    color: var(--texto-tenue);
    transition: transform var(--transicion);
}


/* =========================================================
   32. PORTADAS PREDISEÑADAS
   ═════════════════════════════════════════════════════════

   Ocho fondos que se dibujan solos con CSS, usando los
   colores que el negocio ya eligió. Cero imágenes, cero
   descargas, y cada negocio se ve distinto sin diseñar nada.

   Se usan poniendo dos clases juntas:

       <section class="portada preset-ondas">

   Están en app.css y no en negocio.css porque también sirven
   para las tarjetas del directorio y para la vista previa
   dentro del panel de la empresa.
   ========================================================= */

.preset {
    position: relative;
    background-color: var(--primario);
}


/* 1. Degradado diagonal — ya no es un degradado difuminado;
      es un corte limpio en dos tonos, como una bandera */
.preset-degradado {
    background-image: linear-gradient(
        135deg,
        var(--primario) 0%,
        var(--primario) 52%,
        var(--acento) 52%,
        var(--acento) 100%
    );
}


/* 2. Ondas — color sólido con un triángulo de acento en la
      esquina, sin ninguna mezcla de color difuminada */
.preset-ondas {
    background-image: linear-gradient(
        135deg,
        transparent 0%,
        transparent 65%,
        var(--acento) 65%,
        var(--acento) 100%
    );
    background-color: var(--primario);
}


/* 3. Puntos — ordenado, va bien con ferreterías y talleres */
.preset-puntos {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.22) 1.5px, transparent 1.6px);
    background-size: 20px 20px;
    background-color: var(--primario);
}


/* 4. Rayas diagonales — dinámico, bueno para delivery y transporte */
.preset-rayas {
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.10) 0px,
            rgba(255,255,255,.10) 12px,
            transparent 12px,
            transparent 34px
        );
    background-color: var(--primario);
}


/* 5. Cuadrícula — técnico, bueno para informática y servicios */
.preset-cuadricula {
    background-image:
        linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
    background-size: 34px 34px, 34px 34px;
    background-color: var(--primario);
}


/* 6. Destello — color sólido oscuro con una esquina recortada
      en tono claro, sin brillo difuminado */
.preset-destello {
    background-image: linear-gradient(
        135deg,
        rgba(255,255,255,.14) 0%,
        rgba(255,255,255,.14) 18%,
        transparent 18%,
        transparent 100%
    );
    background-color: var(--primario-oscuro, var(--primario));
}


/* 7. Abanico — ya no es un arcoíris cónico; es un bloque de
      color sólido con un segundo tono entrando por la esquina */
.preset-abanico {
    background-image: linear-gradient(
        205deg,
        var(--acento) 0%,
        var(--acento) 30%,
        var(--primario) 30%,
        var(--primario) 100%
    );
}


/* 8. Sólido — el más sobrio, solo el color de la marca */
.preset-solido {
    background-image: none;
    background-color: var(--primario);
}


/* Icono con buen contraste sobre cualquier patrón prediseñado
   (antes el icono usaba el mismo color que el fondo y, al pasar
   de un tinte muy claro a un patrón a color completo, quedaba
   casi invisible). */
.negocio-imagen.preset .negocio-imagen-icono {
    color: #ffffff !important;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.25));
}


/* ---------------------------------------------------------
   32.1 SELECTOR DE PORTADA (panel de la empresa)
--------------------------------------------------------- */
.portadas-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .8rem;
}

.portada-opcion { position: relative; cursor: pointer; }

/* El radio real se oculta, pero sigue ahí para el teclado */
.portada-opcion input {
    position: absolute; opacity: 0;
    width: 1px; height: 1px;
}

.portada-opcion-muestra {
    display: block;
    aspect-ratio: 16/9;
    border-radius: var(--r-sm);
    border: 2px solid var(--borde);
    overflow: hidden;
    transition: border-color var(--transicion), transform var(--transicion);
}
.portada-opcion:hover .portada-opcion-muestra { transform: translateY(-2px); }

.portada-opcion input:checked + .portada-opcion-muestra {
    border-color: var(--primario);
    box-shadow: 0 0 0 3px var(--primario-suave);
}
.portada-opcion input:focus-visible + .portada-opcion-muestra {
    outline: 2px solid var(--primario);
    outline-offset: 2px;
}

.portada-opcion-nombre {
    display: block;
    margin-top: .35rem;
    text-align: center;
    font-size: var(--txt-xs);
    color: var(--texto-suave);
}
.portada-opcion input:checked ~ .portada-opcion-nombre {
    color: var(--primario);
    font-weight: 600;
}

/* ============================================================
   FAVORITOS
   ============================================================ */

.favorito-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(31,39,93,.08);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .12s;
}
.favorito-btn:hover { transform: scale(1.08); }
.favorito-btn:active { transform: scale(.92); }
.favorito-btn svg { width: 18px; height: 18px; color: var(--texto-suave); transition: color .15s, fill .15s; }
.favorito-btn.activo { background: var(--peligro-suave); }
.favorito-btn.activo svg { color: var(--peligro); fill: var(--peligro); }
@keyframes favoritoPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.4); }
    60%  { transform: scale(.88); }
    100% { transform: scale(1); }
}
.favorito-btn.pop svg { animation: favoritoPop .4s ease; }

.favoritos-burbuja {
    position: fixed;
    right: 20px;
    bottom: 88px;
    z-index: 940;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fondo);
    border: 1px solid var(--borde);
    box-shadow: 0 6px 18px rgba(20, 25, 50, .16);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.favoritos-burbuja svg { width: 22px; height: 22px; color: var(--peligro); }
.favoritos-burbuja .fb-conteo {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    background: var(--primario);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
}
.favoritos-burbuja[hidden] { display: none; }

.favoritos-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 40, .35);
    z-index: 945;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.favoritos-overlay.abierto { opacity: 1; pointer-events: auto; }

.favoritos-panel {
    position: fixed;
    top: 0;
    right: -380px;
    width: min(380px, 92vw);
    height: 100vh;
    z-index: 950;
    background: var(--fondo);
    /* Sin sombra por defecto: con el panel "cerrado" (fuera de
       pantalla a la derecha), su borde izquierdo queda justo en
       el borde derecho de la página, así que el difuminado de la
       sombra se colaba como una franja gris en TODAS las páginas
       del sitio. Solo debe verse cuando el panel está abierto. */
    box-shadow: none;
    transition: right .22s ease, box-shadow .22s ease;
    display: flex;
    flex-direction: column;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
}
.favoritos-panel.abierto {
    right: 0;
    box-shadow: -8px 0 24px rgba(20, 25, 50, .15);
}
.favoritos-panel .fp-head {
    padding: 20px 20px 18px;
    background: var(--primario-oscuro);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.favoritos-panel .fp-head-info { display: flex; align-items: center; gap: 10px; }
.favoritos-panel .fp-head-icono {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: grid; place-items: center; flex: none;
}
.favoritos-panel .fp-head-icono svg { width: 19px; height: 19px; }
.favoritos-panel .fp-head h3 { margin: 0; font-size: 15.5px; color: #fff; }
.favoritos-panel .fp-head p { margin: 2px 0 0; font-size: 12px; color: #fff; opacity: .85; }
.favoritos-panel .fp-cerrar {
    border: 0; background: rgba(255, 255, 255, .18); cursor: pointer; color: #fff;
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
}
.favoritos-panel .fp-cerrar svg { width: 15px; height: 15px; }
.favoritos-panel .fp-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.favoritos-panel .fp-row {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--borde);
    border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.favoritos-panel .fp-row:hover { border-color: var(--primario); box-shadow: 0 2px 8px rgba(20, 25, 50, .08); }
.favoritos-panel .fp-item-link {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 10px;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    color: inherit;
}
.favoritos-panel .fp-item-link img { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; background: var(--fondo-suave); flex: none; }
.favoritos-panel .fp-item-link .fp-icono {
    width: 50px; height: 50px; border-radius: 12px;
    display: grid; place-items: center; flex: none;
}
.favoritos-panel .fp-item-link .fp-icono svg { width: 21px; height: 21px; }
.favoritos-panel .fp-icono.tipo-negocio  { background: #E6F1FB; color: #0C447C; }
.favoritos-panel .fp-icono.tipo-producto { background: #EAF3DE; color: #27500A; }
.favoritos-panel .fp-icono.tipo-servicio { background: #EEEDFE; color: #3C3489; }
.favoritos-panel .fp-texto { min-width: 0; }
.favoritos-panel .fp-item-link strong { display: block; font-size: 13.5px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favoritos-panel .fp-badge {
    display: inline-block;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}
.favoritos-panel .fp-badge.tipo-negocio  { background: #E6F1FB; color: #0C447C; }
.favoritos-panel .fp-badge.tipo-producto { background: #EAF3DE; color: #27500A; }
.favoritos-panel .fp-badge.tipo-servicio { background: #EEEDFE; color: #3C3489; }
.favoritos-panel .fp-sub {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.favoritos-panel .fp-quitar {
    flex: none;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.favoritos-panel .fp-quitar:hover { background: var(--peligro-suave); color: var(--peligro); }
.favoritos-panel .fp-quitar svg { width: 17px; height: 17px; }
.favoritos-panel .fp-vacio { padding: 50px 24px; text-align: center; color: var(--texto-suave); font-size: 13px; }
.favoritos-panel .fp-vacio svg { width: 34px; height: 34px; margin-bottom: 10px; color: var(--borde); }
.favoritos-panel .fp-cargando { padding: 30px; text-align: center; color: var(--texto-suave); font-size: 13px; }

.fav-prompt-fondo {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 40, .45);
    z-index: 960;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.fav-prompt { background: var(--fondo); border-radius: 16px; padding: 22px; max-width: 320px; width: 100%; }
.fav-prompt h4 { margin: 0 0 6px; font-size: 15px; }
.fav-prompt p { margin: 0 0 14px; font-size: 12.5px; color: var(--texto-suave); }
.fav-prompt input {
    width: 100%; box-sizing: border-box; padding: 11px 13px;
    border: 1.5px solid var(--borde); border-radius: 10px; font-size: 14px; margin-bottom: 6px;
}
.fav-prompt .fp-error { font-size: 11.5px; color: var(--peligro); min-height: 15px; margin-bottom: 8px; }
.fav-prompt .fp-botones { display: flex; gap: 8px; }
.fav-prompt button { flex: 1; padding: 10px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 700; font-size: 13.5px; }
.fav-prompt .fp-guardar { background: var(--primario); color: #fff; }
.fav-prompt .fp-cancelar { background: var(--fondo-suave); color: var(--texto-suave); }


/* =========================================================
   ══════════════════════════════════════════════════════════
   33. CAPA EDITORIAL (rediseño 2026)
   ══════════════════════════════════════════════════════════

   Va al final a propósito: ajusta las piezas de arriba sin
   tener que reescribirlas. Reglas de la casa:

     · Nada de títulos con un iconito en una cajita de color.
     · Las secciones se separan con una raya de tinta arriba,
       como en un periódico, no con tarjetas flotando.
     · Un solo color fuerte por pantalla. El amarillo solo
       aparece donde hay que actuar (buscar, registrarse).
     · Esquinas de 6 a 14 px. Las píldoras quedan para las
       etiquetas pequeñas de estado.
   ========================================================= */


/* ---------------------------------------------------------
   33.1 ENCABEZADO Y MENÚ
--------------------------------------------------------- */
.header {
    background: #fff;
    backdrop-filter: none;
    border-bottom: 1px solid var(--borde);
    box-shadow: none;
}
.header-contenido { height: 72px; }

.marca.marca-nueva { flex: 0 0 auto; display: flex; align-items: center; margin-right: 24px; }
.marca-chica { display: none; }

.menu { gap: .15rem; }
.menu a {
    padding: .5rem .75rem;
    border-radius: var(--r-sm);
    font-size: 15px; font-weight: 500;
    color: var(--texto-suave);
}
.menu a:hover { color: var(--texto); background: var(--fondo-suave); }
.menu a.activo {
    color: var(--texto); background: transparent; font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--turquesa);
    text-decoration-thickness: 2px;
    text-underline-offset: 9px;
}
.menu-separador { height: 20px; background: var(--borde); margin-inline: .5rem; }

.menu .boton-empresa {
    margin-left: .4rem;
    padding: .62rem 1.05rem;
    border-radius: 8px;
    background: var(--marino); color: #fff;
    font-weight: 600;
    box-shadow: none;
}
.menu .boton-empresa:hover { background: var(--marino-hondo); color: #fff; transform: none; }

/* En escritorio el menú es solo texto: los íconos se quedan
   para el menú desplegable del celular. */
@media (min-width: 861px) {
    .menu > a:has(.menu-txt) > i,
    .menu > a:has(.menu-txt) > svg { display: none; }
}
@media (min-width: 861px) and (max-width: 1080px) {
    .marca-grande { display: none; }
    .marca-chica { display: inline-flex; }
    .menu a { padding: .5rem .55rem; font-size: 14px; }
}
@media (max-width: 960px) {
    .header-contenido { height: 64px; }
    .marca-grande { display: none; }
    .marca-chica { display: inline-flex; }
    .marca.marca-nueva { margin-right: 16px; }
}
@media (max-width: 860px) {
    .menu { padding: .5rem var(--gutter) 1rem; }
    .menu a { font-size: 16px; padding: .8rem .4rem; border-radius: 0; border-bottom: 1px solid var(--borde); }
    .menu a.activo { text-decoration: none; color: var(--acento); }
    .menu .boton-empresa { margin: .8rem 0 0; border-bottom: 0; border-radius: 8px; justify-content: center; }
    .menu-toggle:hover { background: var(--fondo-suave); color: var(--texto); }
}


/* ---------------------------------------------------------
   33.2 PORTADA DEL INICIO
--------------------------------------------------------- */
.hero.portada {
    display: block;
    min-height: 0;
    padding: 0;
    color: #fff;
    background: var(--marino-hondo);
}
.portada .hero-video-capa {
    background:
        linear-gradient(90deg, rgba(12, 30, 47, .94) 0%, rgba(12, 30, 47, .82) 42%, rgba(12, 30, 47, .5) 100%);
}
.portada-contenido {
    padding-top: clamp(56px, 9vw, 112px);
    padding-bottom: clamp(44px, 6vw, 72px);
}
.portada .antetitulo { color: var(--amarillo); }

.portada h1 {
    max-width: 14ch;
    margin: 0 0 1.25rem;
    font-size: clamp(2.5rem, 6.4vw, 4.6rem);
    line-height: 1.0;
    letter-spacing: -0.04em;
    color: #fff; -webkit-text-fill-color: #fff;
}
.portada h1 em {
    color: var(--amarillo); -webkit-text-fill-color: var(--amarillo);
    font-size: 1.08em;
    letter-spacing: -0.02em;
}
.portada-bajada {
    max-width: 46ch;
    margin: 0 0 2rem;
    font-size: 1.125rem; line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

.portada .hero-buscador { margin: 0; max-width: 740px; }
.portada .hero-buscador-caja {
    gap: .6rem;
    max-width: none;
    padding: 6px 6px 6px 16px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6);
}
.portada .hero-buscador-caja:focus-within { box-shadow: 0 0 0 3px rgba(242, 190, 75, .55), 0 24px 48px -24px rgba(0, 0, 0, .6); }
.hero-buscador-lupa { flex: 0 0 auto; width: 20px; height: 20px; color: var(--texto-tenue); }
.portada .hero-buscador-caja input[type="search"] { padding: 12px 0; font-size: 16px; }
.portada .hero-buscador-divisor { margin-inline: .25rem; background: var(--borde); }
.portada .hero-buscador-categoria { max-width: 200px; color: var(--texto); font-size: 14.5px; font-weight: 500; }
.portada .hero-buscador-caja button {
    height: 50px; padding: 0 28px;
    border: 0; border-radius: 7px;
    background: var(--amarillo); color: var(--marino-hondo);
    font-size: 15px; font-weight: 700;
    box-shadow: none;
}
.portada .hero-buscador-caja button:hover { background: var(--amarillo-hondo); box-shadow: none; }

.portada-populares {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 22px;
    margin-top: 28px;
    font-size: 14.5px;
}
.portada-populares-titulo {
    margin-right: 2px;
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.portada-populares a {
    display: inline-flex; align-items: center; gap: 7px;
    padding-bottom: 2px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    transition: border-color var(--transicion), color var(--transicion);
}
.portada-populares a:hover { border-color: var(--amarillo); color: var(--amarillo); }
.portada-populares a i { font-size: 17px; color: var(--turquesa); --ph-duotone-secondary-opacity: .35; }
.portada-populares-mas { color: rgba(255, 255, 255, .7) !important; }

.portada-franja {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(8, 22, 35, .55);
}
.portada-franja-fila {
    display: flex; flex-wrap: wrap; gap: 8px 40px;
    padding-top: 15px; padding-bottom: 15px;
    font-size: 13.5px; color: rgba(255, 255, 255, .66);
}
.portada-franja-fila strong { color: #fff; font-weight: 700; font-variant-numeric: normal; }

@media (max-width: 860px) {
    .portada .hero-buscador-caja { flex-wrap: wrap; padding: 8px; gap: 6px; }
    .hero-buscador-lupa { display: none; }
    .portada .hero-buscador-caja input[type="search"] {
        flex: 1 1 100%; padding: 10px 8px;
        border-bottom: 1px solid var(--borde);
    }
    .portada .hero-buscador-categoria { flex: 1 1 auto; max-width: none; padding: 8px 6px; }
    .portada .hero-buscador-caja button { flex: 0 0 auto; height: 46px; padding: 0 22px; }
    .portada-franja-fila span:nth-child(n+3) { display: none; }
}
@media (max-width: 560px) {
    .portada h1 { font-size: 2.55rem; }
    .portada-bajada { font-size: 1rem; }
    .portada-populares { gap: 10px 16px; font-size: 14px; }
    .portada-populares-titulo { flex-basis: 100%; }
}


/* ---------------------------------------------------------
   33.3 ENCABEZADOS DE SECCIÓN
   Raya de tinta arriba, antetítulo, título y enlace a la
   derecha. .seccion-cabecera (el formato viejo, que aún usan
   otras páginas) se ve igual sin tocar su HTML.
--------------------------------------------------------- */
.encabezado,
.seccion-cabecera {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 16px 32px;
    margin-bottom: 32px;
    padding-top: 18px;
    border-top: 2px solid var(--texto);
}
.encabezado h2,
.seccion-cabecera h2 { margin: 0 0 6px; color: var(--texto); }
.encabezado p:not(.antetitulo),
.seccion-cabecera p { margin: 0; max-width: 60ch; font-size: 15.5px; color: var(--texto-suave); }

.seccion-cabecera .seccion-icono,
.seccion-cabecera .seccion-linea,
.top-titulo .seccion-icono { display: none; }
.seccion-cabecera-texto { display: block; }

.encabezado-enlace,
.ver-todo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 0 2px; border: 0; border-radius: 0;
    border-bottom: 1.5px solid currentColor;
    background: none;
    font-size: 14.5px; font-weight: 600;
    color: var(--texto);
    white-space: nowrap;
}
.encabezado-enlace svg, .ver-todo svg { width: 16px; height: 16px; transition: transform var(--transicion); }
.encabezado-enlace:hover, .ver-todo:hover { color: var(--acento); border-color: var(--acento); gap: 6px; }
.encabezado-enlace:hover svg, .ver-todo:hover svg { transform: translateX(3px); }

.seccion-alt { background: var(--fondo-alt); }


/* ---------------------------------------------------------
   33.4 "CÓMO FUNCIONA" (inicio)
--------------------------------------------------------- */
.porque { background: #fff; }
.porque-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px 72px;
    align-items: start;
}
.porque-intro h2 { max-width: 15ch; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.08; }
.porque-intro p:not(.antetitulo) { max-width: 40ch; font-size: 17px; }

.porque-lista {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
}
.porque-item {
    display: flex; flex-direction: column;
    padding: 22px 0 28px;
    border-top: 1px solid var(--borde);
}
.porque-num {
    margin-bottom: 12px;
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    color: var(--acento);
    font-variant-numeric: normal;
}
.porque-item h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.015em; }
.porque-item p { flex: 1; margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.porque-link {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    font-size: 14.5px; font-weight: 600; color: var(--texto);
}
.porque-link svg { width: 15px; height: 15px; color: var(--acento); transition: transform var(--transicion); }
.porque-link:hover { color: var(--acento); }
.porque-link:hover svg { transform: translateX(3px); }
.porque-link[aria-busy="true"] { opacity: .6; pointer-events: none; }
.porque-link-par { display: flex; flex-wrap: wrap; gap: 6px 20px; }

@media (max-width: 960px) {
    .porque-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
    .porque-lista { grid-template-columns: 1fr; }
    .porque-item { padding: 18px 0 22px; }
}


/* ---------------------------------------------------------
   33.5 NUEVOS EN EL DIRECTORIO (inicio)
--------------------------------------------------------- */
.nuevos { background: #fff; }

/* Tablón: lista compacta de recién llegados, tres columnas con
   filas separadas por líneas finas y una foto redonda. */
.nv-lista {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 44px;
}
/* Líneas: cada fila lleva la suya abajo y solo la primera fila
   lleva una arriba. Así cada columna cierra bien sin importar
   cuántos negocios haya (antes una fila incompleta quedaba abierta). */
.nv-item { min-width: 0; border-bottom: 1px solid var(--borde); }
.nv-item:nth-child(-n+3) { border-top: 1px solid var(--borde); }

.nv-enlace {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 0;
    color: var(--texto);
}

.nv-avatar {
    flex: 0 0 60px; width: 60px; height: 60px;
    border-radius: 50%; overflow: hidden;
    display: grid; place-items: center;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(23, 35, 49, .07);
    transition: box-shadow .2s ease;
}
.nv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nv-avatar-logo img { object-fit: contain; padding: 9px; }
.nv-avatar-color { background: #EEF1F3; background: color-mix(in srgb, var(--c) 11%, #fff); color: var(--c); }
.nv-avatar-color i { font-size: 26px; --ph-duotone-secondary-opacity: .25; }
.nv-enlace:hover .nv-avatar { box-shadow: 0 0 0 2px var(--c); }

.nv-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nv-nombre {
    font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.012em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nv-enlace:hover .nv-nombre { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.nv-cat { margin-top: 2px; font-size: 13.5px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-cat .nv-sep { margin: 0 3px; color: var(--texto-tenue); }
.nv-cuando { margin-top: 4px; font-size: 12px; color: var(--texto-tenue); }

@media (max-width: 900px) {
    .nv-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .nv-item:nth-child(3) { border-top: 0; }
}
@media (max-width: 560px) {
    .nv-lista { grid-template-columns: minmax(0, 1fr); }
    .nv-item:nth-child(2) { border-top: 0; }
    .nv-enlace { padding: 15px 0; gap: 14px; }
    .nv-avatar { flex-basis: 52px; width: 52px; height: 52px; }
}

.nv-cifras {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 44px 0 0;
    border-top: 1px solid var(--borde);
}
.nv-cifra {
    display: flex; flex-direction: column-reverse; gap: 4px;
    padding: 22px 0 0 24px;
    border-left: 1px solid var(--borde);
}
.nv-cifra:first-child { padding-left: 0; border-left: 0; }
.nv-cifra dt { font-size: 14px; color: var(--texto-suave); }
.nv-cifra dd {
    margin: 0;
    font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 800; line-height: 1;
    letter-spacing: -.035em; color: var(--texto);
    font-variant-numeric: normal;
}

@media (max-width: 640px) {
    .nv-cifra { padding-left: 14px; }
    .nv-cifra dt { font-size: 12.5px; }
}


/* ---------------------------------------------------------
   33.6 INVITACIÓN A NEGOCIOS (inicio)
--------------------------------------------------------- */
.neg3-seccion {
    padding: clamp(56px, 8vw, 104px) 0;
    background: var(--fondo-alt);
    border-top: 1px solid var(--borde);
}
.neg3 {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 40px 72px;
    align-items: center;
}
.neg3 h2 { max-width: 13ch; margin-bottom: 1rem; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.038em; }
.neg3 h2 em { color: var(--acento); }
.neg3-texto p:not(.antetitulo) { max-width: 44ch; margin-bottom: 28px; font-size: 17px; }

.neg3-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.neg3-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 52px; padding: 0 24px;
    border-radius: 8px;
    background: var(--marino); color: #fff;
    font-size: 15.5px; font-weight: 700;
    transition: background var(--transicion);
}
.neg3-btn svg { width: 17px; height: 17px; transition: transform var(--transicion); }
.neg3-btn:hover { background: var(--marino-hondo); }
.neg3-btn:hover svg { transform: translateX(3px); }
.neg3-link { padding-bottom: 2px; border-bottom: 1.5px solid currentColor; font-weight: 600; color: var(--texto); }
.neg3-link:hover { color: var(--acento); }

.neg3-puntos {
    list-style: none; margin: 0; padding: 0;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 14px;
}
.neg3-puntos li { display: grid; gap: 4px; padding: 22px 26px; border-top: 1px solid var(--borde); }
.neg3-puntos li:first-child { border-top: 0; }
.neg3-puntos strong { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--texto); }
.neg3-puntos strong::before {
    content: ''; flex: 0 0 auto; width: 9px; height: 9px;
    border-radius: 2px; background: var(--amarillo);
}
.neg3-puntos span { padding-left: 19px; font-size: 14.5px; line-height: 1.55; color: var(--texto-suave); }

@media (max-width: 900px) {
    .neg3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .neg3-acciones { flex-direction: column; align-items: stretch; text-align: center; }
    .neg3-btn { justify-content: center; }
    .neg3-link { align-self: center; }
    .neg3-puntos li { padding: 18px 20px; }
}


/* ---------------------------------------------------------
   33.7 TARJETA DE NEGOCIO (buscar, categorías)
--------------------------------------------------------- */
.negocio {
    border-radius: 12px;
    border-color: var(--borde);
    box-shadow: none;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.negocio:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-md); transform: none; }
.negocio-imagen-badge { display: none; }
.negocio-logo { border-radius: 8px; border: 2px solid #fff; box-shadow: var(--sombra-sm); }
.negocio-categoria { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.negocio h3 { font-size: 18px; letter-spacing: -.018em; color: var(--texto); }
.negocio:hover h3 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.negocio p { font-size: 14.5px; }

/* Las etiquetas de tipo dejan de ser un arcoíris: todas iguales,
   discretas. El color ya lo pone la portada de cada negocio. */
.tipo,
.tipo-comercio, .tipo-servicios, .tipo-mixto, .tipo-restaurante,
.tipo-colmado, .tipo-barberia, .tipo-salon, .tipo-salud {
    border-radius: 4px;
    background: var(--fondo-suave);
    color: var(--texto-suave);
    font-size: 11.5px; font-weight: 600;
}


/* ---------------------------------------------------------
   33.8 PIE DE PÁGINA
--------------------------------------------------------- */
.pie {
    margin-top: auto;
    background: var(--marino-hondo);
    color: rgba(255, 255, 255, .7);
}
.pie2 { padding-top: 64px; }
.pie2-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.2fr);
    gap: 40px;
    padding-bottom: 52px;
}
.pie2-logo { display: inline-block; }
.pie2-marca p { margin: 16px 0 20px; max-width: 32ch; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .62); }
.pie2-social { display: flex; gap: 8px; }
.pie2-social a {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .85);
    transition: border-color var(--transicion), color var(--transicion);
}
.pie2-social a:hover { border-color: var(--amarillo); color: var(--amarillo); }
.pie2-social svg { width: 17px; height: 17px; }

.pie2 h3 {
    margin: 4px 0 16px;
    font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: rgba(255, 255, 255, .45); -webkit-text-fill-color: currentColor;
}
.pie2-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.pie2-col a { font-size: 15px; color: rgba(255, 255, 255, .86); transition: color var(--transicion); }
.pie2-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--amarillo); }

.pie2-cta { align-self: start; padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .14); }
.pie2-cta h3 {
    margin: 0 0 8px;
    font-size: 21px; font-weight: 700; letter-spacing: -.02em; text-transform: none;
    color: #fff;
}
.pie2-cta p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .66); }
.pie2-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 18px;
    border-radius: 8px;
    background: var(--amarillo); color: var(--marino-hondo);
    font-size: 14.5px; font-weight: 700;
    transition: background var(--transicion);
}
.pie2-btn svg { width: 16px; height: 16px; }
.pie2-btn:hover { background: var(--amarillo-hondo); }

.pie2-abajo {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 10px 24px;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px; color: rgba(255, 255, 255, .5);
}
.pie2-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.pie2-legal a { color: rgba(255, 255, 255, .66); }
.pie2-legal a:hover { color: #fff; }

/* En el inicio ya hay una sección grande para negocios */
.pagina-inicio .pie2-cta { display: none; }
@media (min-width: 1025px) {
    .pagina-inicio .pie2-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
    .pie2-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
    .pie2-cta { padding-left: 0; border-left: 0; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); }
}
@media (max-width: 640px) {
    .pie2 { padding-top: 44px; }
    .pie2-cols { gap: 30px 18px; }
    .pie2-marca, .pie2-cta { grid-column: 1 / -1; }
    .pie2-abajo { flex-direction: column; align-items: flex-start; }
}


/* ---------------------------------------------------------
   33.9 PÁGINAS INTERNAS: ENCABEZADO, BUSCADOR, FILTROS
--------------------------------------------------------- */
.cabecera-pagina {
    padding-block: clamp(36px, 6vw, 64px) clamp(28px, 4vw, 44px);
    text-align: left;
    background: var(--fondo-alt);
    border-bottom: 1px solid var(--borde);
}
.cabecera-pagina h1 {
    margin-bottom: .5rem;
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    color: var(--texto);
}
.cabecera-pagina .resumen { margin-bottom: 1.4rem; font-size: 15px; color: var(--texto-suave); }
.cabecera-pagina .resumen svg { display: none; }
.cabecera-pagina .buscador-compacto { margin-inline: 0; }

.buscador-compacto {
    max-width: 620px;
    padding: 5px 5px 5px 16px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 10px;
    background: #fff;
}
.buscador-compacto:focus-within { border-color: var(--texto); box-shadow: 0 0 0 3px var(--primario-suave); }
.buscador-compacto input[type="search"] { padding: 10px 0; }
.buscador-compacto button {
    height: 44px; padding: 0 20px;
    border-radius: 7px;
    background: var(--marino); color: #fff;
}
.buscador-compacto button:hover { background: var(--marino-hondo); transform: none; }
.buscador-compacto button svg { display: none; }

.filtro-chip,
.btn-cerca-de-mi {
    padding: .45rem .85rem;
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    background: #fff;
    font-size: 14px; font-weight: 500;
    color: var(--texto);
}
.filtro-chip svg, .btn-cerca-de-mi svg { color: var(--texto-tenue); }
.filtro-chip:hover, .btn-cerca-de-mi:hover { border-color: var(--texto); color: var(--texto); }
.filtro-chip.activo, .btn-cerca-de-mi.activo {
    background: var(--texto); border-color: var(--texto); color: #fff;
}
.filtro-chip.activo svg, .btn-cerca-de-mi.activo svg { color: #fff; }
.filtros-ver-mas { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }

.categoria-tarjeta { border-radius: 10px; }
.categoria-tarjeta:hover { transform: none; box-shadow: none; border-color: var(--texto); }
.categoria-tarjeta-icono { border-radius: 8px; }
.categoria-tarjeta-texto strong { font-weight: 700; letter-spacing: -.01em; }
.categoria-tarjeta-texto span { font-size: 13px; color: var(--texto-suave); }

.vacio { border-radius: 10px; border-color: var(--borde-fuerte); background: var(--papel); }


/* ---------------------------------------------------------
   33.10 PIEZAS SUELTAS
--------------------------------------------------------- */
.carrusel-flecha {
    width: 40px; height: 40px;
    border-radius: 8px;
    box-shadow: none;
    color: var(--texto);
}
.carrusel-flecha:hover { transform: none; background: var(--texto); border-color: var(--texto); color: #fff; box-shadow: none; }
.carrusel-puntos button { background: var(--borde-fuerte); }
.carrusel-puntos button.activo { width: 20px; background: var(--texto); }

.alerta { border-radius: 8px; }
.alerta-info { border-color: color-mix(in srgb, var(--primario) 18%, #fff); }

.nav-movil { background: #fff; backdrop-filter: none; }
.nav-movil a.activo { color: var(--texto); font-weight: 600; box-shadow: inset 0 2px 0 var(--turquesa); border-radius: 0; }

.paginacion a, .paginacion span { border-radius: 6px; }
.paginacion .actual { background: var(--texto); border-color: var(--texto); }

.input, .select, .textarea { border-width: 1px; border-color: var(--borde-fuerte); border-radius: 8px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--texto); box-shadow: 0 0 0 3px var(--primario-suave); }

.panel { border-radius: 12px; }
.modal { border-radius: 14px; }

.reveal { transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }

.favoritos-panel { border-radius: 0; }
.favoritos-panel .fp-head { background: var(--marino); }
.favoritos-burbuja .fb-conteo { background: var(--marino); }
.cabecera-pagina + .seccion { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
@media (max-width: 560px) { .solo-escritorio { display: none; } }


/* ---------------------------------------------------------
   33.11 BUSCAR: COLUMNA LATERAL + RESULTADOS
   Categorías fijas a la izquierda (se quedan a la vista al
   bajar), resultados en tres columnas a la derecha. En el
   celular las categorías pasan a una fila deslizable.
--------------------------------------------------------- */
.buscar-cuerpo {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 52px;
    align-items: start;
    padding-top: 36px;
    padding-bottom: clamp(3rem, 7vw, 5rem);
}
.buscar-cuerpo > .buscar-resultados:only-child { grid-column: 1 / -1; }

.buscar-lateral {
    position: sticky; top: 96px;
    /* Siempre cabe en la pantalla: si los filtros son más altos que la
       ventana, el menú se desplaza por dentro y nunca se mueve con la página */
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--borde-fuerte) transparent;
    padding-right: 6px;
}
.buscar-lateral::-webkit-scrollbar { width: 6px; }
.buscar-lateral::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 6px; }
.buscar-lateral::-webkit-scrollbar-track { background: transparent; }
.buscar-lateral-titulo {
    margin: 0 0 12px 10px;
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texto-tenue);
}
.buscar-categorias { display: flex; flex-direction: column; gap: 2px; }
.buscar-cat {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14.5px; line-height: 1.35; color: var(--texto-suave);
    transition: background var(--transicion), color var(--transicion);
}
.buscar-cat svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--texto-tenue); }
.buscar-cat:hover { background: var(--fondo-suave); color: var(--texto); }
.buscar-cat.activo {
    background: var(--fondo-suave); color: var(--texto); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--turquesa);
}
.buscar-cat.activo svg { color: var(--texto); }

.buscar-resultados .cerca-de-mi-fila { justify-content: flex-end; margin-bottom: 18px; }
.buscar-resultados .negocios { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .buscar-resultados .negocios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .buscar-cuerpo { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
    /* En el celular los filtros quedan pegados debajo de la barra de arriba */
    .buscar-lateral {
        position: sticky; top: 64px; z-index: 60;
        margin: 0 calc(var(--gutter) * -1) 16px;
        padding: 10px 0 8px;
        max-height: none; overflow: visible;
        background: var(--fondo-alt);
        border-bottom: 1px solid var(--borde);
    }
    .buscar-lateral-titulo { display: none; }
    .buscar-categorias {
        flex-direction: row; gap: 8px; overflow-x: auto;
        padding: 0 var(--gutter) 4px; scrollbar-width: none;
    }
    .buscar-categorias::-webkit-scrollbar { display: none; }
    .buscar-cat {
        flex: 0 0 auto; white-space: nowrap;
        padding: .45rem .85rem; border: 1px solid var(--borde); background: #fff;
        font-size: 14px; color: var(--texto);
    }
    .buscar-cat.activo { background: var(--texto); border-color: var(--texto); color: #fff; box-shadow: none; }
    .buscar-cat.activo svg { color: #fff; }
    .buscar-resultados .cerca-de-mi-fila { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .buscar-resultados .negocios { grid-template-columns: minmax(0, 1fr); }
}

/* Los íconos de los botones dentro de un estado vacío van a tamaño
   normal (la regla del ícono grande de .vacio también los agrandaba). */
.vacio .btn i, .vacio .btn svg { width: 16px; height: 16px; margin: 0; color: currentColor; }
.vacio .btn-sm { padding: .6rem 1rem; font-size: 13.5px; }


/* ---------------------------------------------------------
   33.12 PÁGINAS DE ZONA ("Plomería en Azua")
--------------------------------------------------------- */
.zona-migas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; font-size: 13.5px; color: var(--texto-tenue); }
.zona-migas a { color: var(--texto-suave); border-bottom: 1px solid transparent; }
.zona-migas a:hover { color: var(--texto); border-color: currentColor; }
.zona-migas [aria-current] { color: var(--texto); font-weight: 600; }
.zona-cabecera h1 em { color: var(--acento); }
.zona-bajada { max-width: 60ch; margin: 0; font-size: 16.5px; }

.zona-cuerpo { padding-top: 36px; padding-bottom: clamp(3rem, 7vw, 5rem); }
.zona-negocios { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.zona-relacionadas { margin-top: 48px; padding-top: 18px; border-top: 2px solid var(--texto); }
.zona-relacionadas h2 { margin: 0 0 16px; font-size: 20px; }
.zona-enlaces { display: flex; flex-wrap: wrap; gap: 8px; }
.zona-enlaces a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: .5rem .9rem; border: 1px solid var(--borde); border-radius: 8px; background: #fff;
    font-size: 14px; color: var(--texto);
    transition: border-color var(--transicion);
}
.zona-enlaces a:hover { border-color: var(--texto); }
.zona-enlaces a span { font-size: 12px; color: var(--texto-tenue); }
.zona-enlaces .zona-enlace-todas { background: var(--texto); border-color: var(--texto); color: #fff; }
.zona-buscar { margin: 40px 0 0; font-size: 15px; color: var(--texto-suave); }
.zona-buscar a { color: var(--texto); font-weight: 600; border-bottom: 1.5px solid currentColor; }

@media (max-width: 1024px) { .zona-negocios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .zona-negocios { grid-template-columns: minmax(0, 1fr); } }

/* Bloque "Por ciudad" en categorías */
.por-ciudad { margin-top: 8px; }
.por-ciudad-grupo + .por-ciudad-grupo { margin-top: 26px; }
.por-ciudad-grupo h3 { margin: 0 0 12px; font-size: 17px; }
.por-ciudad-grupo h3 a { border-bottom: 1.5px solid currentColor; }


/* ---------------------------------------------------------
   33.13 BUSCAR: FILTROS (abierto ahora, ciudad, cómo atienden)
--------------------------------------------------------- */
.buscar-filtros { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--borde); }
.buscar-filtros .buscar-lateral-titulo { margin-top: 22px; }
.buscar-opciones { gap: 2px; }
.buscar-cat-total { margin-left: auto; font-size: 12px; color: var(--texto-tenue); }

.buscar-interruptor {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 8px;
    font-size: 14.5px; font-weight: 600; color: var(--texto);
    transition: background var(--transicion);
}
.buscar-interruptor:hover { background: var(--fondo-suave); }
.buscar-interruptor-pista {
    position: relative; flex: 0 0 34px; width: 34px; height: 20px;
    border-radius: 999px; background: #CFCFDC;
    transition: background .2s ease;
}
.buscar-interruptor-pista span {
    position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(23, 35, 49, .25);
    transition: transform .2s ease;
}
.buscar-interruptor.activo .buscar-interruptor-pista { background: var(--exito); }
.buscar-interruptor.activo .buscar-interruptor-pista span { transform: translateX(14px); }

.buscar-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.buscar-activos a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: .35rem .7rem; border-radius: 6px;
    background: var(--texto); color: #fff;
    font-size: 13.5px; font-weight: 600;
}
.buscar-activos a svg { width: 14px; height: 14px; opacity: .8; }
.buscar-activos a:hover svg { opacity: 1; }
.buscar-activos .buscar-activos-limpiar {
    background: none; color: var(--texto-suave); font-weight: 500;
    text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 860px) {
    .buscar-filtros {
        display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
        margin: 0 0 10px; padding: 0 var(--gutter) 4px; border-bottom: 0;
    }
    .buscar-filtros::-webkit-scrollbar { display: none; }
    .buscar-filtros .buscar-lateral-titulo { display: none; }
    .buscar-filtros .buscar-opciones { display: contents; }
    .buscar-filtros .buscar-cat-todas { display: none; }
    .buscar-interruptor {
        flex: 0 0 auto; white-space: nowrap;
        padding: .35rem .8rem; border: 1px solid var(--borde); background: #fff; font-weight: 500; font-size: 14px;
    }
    .buscar-cat-total { margin-left: 2px; }
    .buscar-activos { padding: 0; }
}

/* Búsqueda en vivo: mientras llega la lista nueva */
.buscar-cuerpo .buscar-resultados { transition: opacity .18s ease; }
.buscar-cuerpo.buscar-cargando .buscar-resultados { opacity: .45; pointer-events: none; }
.buscar-cuerpo.buscar-cargando .buscar-interruptor,
.buscar-cuerpo.buscar-cargando .buscar-cat { pointer-events: none; }

/* Crédito del desarrollador en la franja final del pie */
.pie2-credito { color: rgba(255, 255, 255, .42); white-space: nowrap; }


/* ---------------------------------------------------------
   33.14 PORTADA: "CONTRASTE"
   Secciones claras y una sola en azul marino (Destacados),
   para que los negocios más visitados resalten. En vez de
   repintar cada cosa, dentro de la sección se cambian las
   variables de color: textos, números, líneas y corazones se
   adaptan solos. Orden: blanco · marino · lila · blanco.
--------------------------------------------------------- */
.seccion.porque { background: #fff; }

.seccion.top-seccion {
    --texto:       #FFFFFF;
    --texto-suave: rgba(255, 255, 255, .72);
    --texto-tenue: rgba(255, 255, 255, .48);
    --linea-top:   rgba(255, 255, 255, .14);
    --acento:      #7FD6D8;
    color: #fff;
    background:
        radial-gradient(55% 80% at 100% 0%, rgba(61, 179, 183, .16), transparent 70%),
        radial-gradient(45% 70% at 0% 100%, rgba(140, 131, 201, .12), transparent 70%),
        #18334E;
}
.seccion.top-seccion .antetitulo { color: #7FD6D8; }
.seccion.top-seccion .encabezado { border-top-color: rgba(255, 255, 255, .85); }
.seccion.top-seccion .encabezado-enlace:hover { color: #7FD6D8; border-color: #7FD6D8; }
.seccion.top-seccion .top-numero { color: rgba(255, 255, 255, .30); }
.seccion.top-seccion .top:hover .top-numero { color: #7FD6D8; }
.seccion.top-seccion .top-invitacion .top-numero { color: rgba(255, 255, 255, .22); }
.seccion.top-seccion .top-miniatura { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.seccion.top-seccion .top-fav:hover { background: rgba(255, 255, 255, .12); color: #FF9C9C; }
.seccion.top-seccion .top-stats div + div dt svg { color: #FF9C9C; }
.seccion.top-seccion .top-estrellas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFFFFF' fill-opacity='.22' d='M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z'/%3E%3C/svg%3E");
}
.seccion.top-seccion .sello-verificado { color: #7FD6D8; }
.seccion.top-seccion .sello-verificado svg { fill: rgba(127, 214, 216, .18); }
.seccion.top-seccion .top-enlace:focus-visible { outline-color: #7FD6D8; }

.seccion.nuevos { background: var(--fondo-alt); }
.neg3-seccion  { background: #fff; }


/* ---------------------------------------------------------
   33.15 BUSCAR: MENÚ DE FILTROS EN TARJETA, FIJO AL BAJAR
   Tarjeta blanca con sombra lila. Más compacto para que
   quepa entero en pantallas de laptop: así se queda quieto
   y la rueda del mouse mueve la página, no el menú. Con
   muchas categorías se ven 6 y un "Ver todas".
--------------------------------------------------------- */
@media (min-width: 861px) {
    .buscar-lateral {
        top: 88px;
        max-height: calc(100vh - 104px);
        padding: 14px 10px 12px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(64, 60, 120, .06), 0 10px 28px -14px rgba(64, 60, 120, .22);
        overscroll-behavior: auto;
    }
    .buscar-lateral .buscar-cat { padding: 7px 10px; font-size: 14px; }
    .buscar-lateral .buscar-cat svg { width: 16px; height: 16px; }
    .buscar-lateral .buscar-lateral-titulo { margin: 12px 0 6px 10px; font-size: 11px; }
    .buscar-lateral .buscar-filtros .buscar-lateral-titulo { margin-top: 12px; }
    .buscar-lateral .buscar-interruptor { margin: 0 0 2px; background: var(--fondo-alt); }

    /* Ciudad y Cómo atienden: pastillas una al lado de otra (ocupan menos alto) */
    .buscar-lateral .buscar-opciones { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
    .buscar-lateral .buscar-opciones .buscar-cat {
        padding: 5px 10px 5px 8px; gap: 6px;
        border-radius: 999px; font-size: 13px;
        background: var(--fondo-alt);
    }
    .buscar-lateral .buscar-opciones .buscar-cat svg { width: 14px; height: 14px; }
    .buscar-lateral .buscar-opciones .buscar-cat:hover { background: var(--fondo-suave); }
    .buscar-lateral .buscar-opciones .buscar-cat.activo { background: var(--texto); color: #fff; box-shadow: none; }
    .buscar-lateral .buscar-opciones .buscar-cat.activo svg { color: #fff; }
    .buscar-lateral .buscar-opciones .buscar-cat-total { margin-left: 2px; opacity: .7; }
    .buscar-lateral .buscar-cat { padding: 6px 10px; }

    .buscar-categorias.compacto .buscar-cat-extra { display: none; }
    .buscar-ver-todas {
        margin: 4px 0 0; padding: 7px 10px;
        border: 0; background: none; cursor: pointer;
        font: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
        color: var(--acento);
    }
    .buscar-ver-todas:hover { text-decoration: underline; }
    .buscar-ver-todas .menos { display: none; }
    .buscar-categorias:not(.compacto) .buscar-ver-todas .mas { display: none; }
    .buscar-categorias:not(.compacto) .buscar-ver-todas .menos { display: inline; }
}
/* Escritorio: el menú en azul marino, como Destacados de la portada.
   Dentro se cambian las variables de color y se ajustan los detalles. */
@media (min-width: 861px) {
    .buscar-lateral {
        --texto:       #FFFFFF;
        --texto-suave: rgba(255, 255, 255, .76);
        --texto-tenue: rgba(255, 255, 255, .52);
        --borde:       rgba(255, 255, 255, .14);
        --acento:      #7FD6D8;
        color: #fff;
        background:
            radial-gradient(90% 50% at 100% 0%, rgba(61, 179, 183, .20), transparent 70%),
            radial-gradient(80% 45% at 0% 100%, rgba(140, 131, 201, .16), transparent 70%),
            #18334E;
        box-shadow: 0 14px 34px -16px rgba(24, 51, 78, .55);
        scrollbar-color: rgba(255, 255, 255, .25) transparent;
    }
    .buscar-lateral::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); }
    .buscar-lateral .buscar-lateral-titulo { color: rgba(255, 255, 255, .55); }

    .buscar-lateral .buscar-interruptor { background: rgba(255, 255, 255, .08); color: #fff; }
    .buscar-lateral .buscar-interruptor:hover { background: rgba(255, 255, 255, .12); }
    .buscar-lateral .buscar-interruptor-pista { background: rgba(255, 255, 255, .25); }
    .buscar-lateral .buscar-interruptor.activo .buscar-interruptor-pista { background: #3DB3B7; }

    .buscar-lateral .buscar-cat { color: rgba(255, 255, 255, .80); }
    .buscar-lateral .buscar-cat svg { color: rgba(255, 255, 255, .55); }
    .buscar-lateral .buscar-cat:hover { background: rgba(255, 255, 255, .08); color: #fff; }

    /* Categoría elegida: franja turquesa a la izquierda */
    .buscar-lateral .buscar-categorias:not(.buscar-opciones) .buscar-cat.activo {
        background: rgba(127, 214, 216, .16); color: #fff; font-weight: 600;
        box-shadow: inset 3px 0 0 #7FD6D8;
    }
    .buscar-lateral .buscar-categorias:not(.buscar-opciones) .buscar-cat.activo svg { color: #7FD6D8; }

    /* Pastillas (Ciudad / Cómo atienden) */
    .buscar-lateral .buscar-opciones .buscar-cat { background: rgba(255, 255, 255, .08); }
    .buscar-lateral .buscar-opciones .buscar-cat:hover { background: rgba(255, 255, 255, .14); }
    .buscar-lateral .buscar-opciones .buscar-cat.activo { background: #7FD6D8; color: #0F2438; }
    .buscar-lateral .buscar-opciones .buscar-cat.activo svg { color: #0F2438; }
    .buscar-lateral .buscar-cat-total { color: rgba(255, 255, 255, .6); }
    .buscar-lateral .buscar-opciones .buscar-cat.activo .buscar-cat-total { color: rgba(15, 36, 56, .7); }

    .buscar-lateral .buscar-ver-todas { color: #7FD6D8; }
}

/* En el celular las categorías van en la fila deslizable: todas, sin botón */
@media (max-width: 860px) {
    .buscar-ver-todas { display: none; }
}


/* ---------------------------------------------------------
   33.16 CELULAR (pantallas de 6"): NOMBRES COMPLETOS
   En un celular de 360–412 px los nombres largos se cortaban
   con "…" ("Restaurante La P…"). Ahora bajan a una segunda
   línea, y solo si no caben en dos se cortan.
--------------------------------------------------------- */
@media (max-width: 600px) {
    html body .top h3,
    html body .nv-nombre-texto,
    html body .categoria-tarjeta-texto strong {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
    html body .nv-nombre { align-items: flex-start; }
    html body .nv-nombre .sello-verificado { margin-top: 3px; }
}

/* Con la barra de abajo del celular, el espacio que se deja para ella
   queda del color del pie (antes se veía una franja blanca al final). */
@media (max-width: 860px) {
    body:has(> .pie2) { padding-bottom: 0; }
    body > .pie2 { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* Celular: los campos de formulario en 16 px como mínimo. Con menos,
   el iPhone hace zoom solo al tocar el campo y la página queda movida. */
@media (max-width: 860px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
    select,
    textarea { font-size: 16px !important; }
}

/* Celular: "Desarrollado por" baja a su propia línea, sin el punto delante */
@media (max-width: 600px) {
    .pie2-credito { display: block; margin-top: 2px; }
    .pie2-credito .pie2-sep { display: none; }
}