/* home.css - estilos de la portada (index.php).
   Extraido de los dos <style> en linea de la pagina. */
:root { --primary: #B14B27; --bg: #FAF5EC; --text: #241B14; --soft-grey: #6E6255; }
        body { font-family: 'Outfit', sans-serif; background-color: var(--bg); margin: 0; padding-bottom: 40px; color: var(--text); }
        /* --- HERO CON FOTO DE FONDO ---
           Dos capas: encima un degradado oscuro del color de la marca y debajo la foto de comida.
           El degradado NO es decorativo — es lo que garantiza que el texto blanco se lea sobre
           cualquier zona de la foto. Sin él, el titular desaparece sobre las partes claras.
           background-color queda como respaldo: si el archivo de la foto todavía no está subido,
           el hero se ve exactamente como antes (degradado sólido) en vez de romperse. */
        .hero {
            background-color: #B14B27;
            background-image:
                linear-gradient(160deg, rgba(140,54,25,0.93) 0%, rgba(177,75,39,0.86) 45%, rgba(120,44,18,0.94) 100%),
                url('/assets/img/hero-comida.webp');
            background-size: cover;
            background-position: center;
            color: white; padding: 44px 20px 46px 20px; text-align: center;
            border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;
            box-shadow: 0 10px 20px rgba(177, 75, 39, 0.2); position: relative;
        }
        .hero h1 { font-size: 38px; margin-bottom: 10px; }
        /* Logotipo más grande y con más aire. Antes competía en tamaño con el texto y se leía como
           un detalle más; siendo la marca, debe ser lo primero que se reconoce al entrar. */
        .brand-lockup {
            display: flex; align-items: center; justify-content: center; gap: 14px;
            font-weight: 800; letter-spacing: -1px; font-size: clamp(30px, 7vw, 40px);
            margin-bottom: 18px;
        }
        .brand-icon { width: clamp(58px, 14vw, 78px); height: clamp(58px, 14vw, 78px); display: block; }
        .btn-ubicacion { background: white; color: var(--primary); border: none; padding: 15px 30px; border-radius: 50px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 12px rgba(0,0,0,0.1); font-size: 15px; }

        /* --- TITULAR DEL HERO ---
           El <h1> ya no es el logotipo sino la propuesta de valor. clamp() ajusta el tamaño al
           ancho disponible sin necesidad de media queries: 27px en un celular angosto, hasta 40px
           en escritorio. text-wrap:balance reparte las palabras entre las líneas para que no quede
           una línea larga y otra con una sola palabra suelta. */
        .hero-titular {
            font-size: clamp(30px, 8vw, 44px); line-height: 1.08; margin: 2px 0 10px 0;
            font-weight: 800; letter-spacing: -1px; text-wrap: balance;
        }
        .hero-titular span { opacity: 0.85; font-weight: 700; }
        .hero-bajada {
            margin: 0 auto; max-width: 380px; font-size: 14.5px; line-height: 1.5; opacity: 0.92;
        }

        /* Cifras reales bajo el hero. Separadores en lugar de tarjetas: menos ruido visual para
           un dato que se lee de un vistazo. */
        .hero-cifras {
            display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px;
            margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.22);
            max-width: 500px; margin-left: auto; margin-right: auto;
        }
        .hero-cifra { text-align: center; }
        .hero-cifra strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; }
        .hero-cifra span { font-size: 11.5px; opacity: 0.85; letter-spacing: 0.2px; }

        /* ================================================================================
           REVELADO AL LLEGAR (lo enciende index-acomer.js con un IntersectionObserver)
           ================================================================================
           Estas dos secciones están muy por debajo del pliegue: una animación lanzada en el
           load habría terminado antes de que nadie las viera. El estado inicial se declara
           aquí y la clase .visible la añade el observador al entrar en pantalla.

           SIN JAVASCRIPT NUNCA QUEDA UNA SECCIÓN EN BLANCO: .no-js no existe, así que si el
           observador no corre el elemento se queda en su estado inicial... y por eso el
           estado inicial NO es opacity:0 a secas -- el @supports de abajo solo esconde
           cuando hay IntersectionObserver de verdad. */
        .como-inner .reveal-scroll, .ciudades-inner .reveal-scroll {
            transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.25,1);
        }
        /* El selector repite html.acomer-reveal a propósito: sin él esta regla tiene MENOS
           especificidad que la del estado escondido (que lleva esa clase de más) y el elemento
           se quedaba en opacity:0 aunque el observador ya le hubiera puesto .visible. */
        html.acomer-reveal .como-inner .reveal-scroll.visible,
        html.acomer-reveal .ciudades-inner .reveal-scroll.visible,
        .como-inner .reveal-scroll.visible, .ciudades-inner .reveal-scroll.visible {
            opacity: 1; transform: none;
        }

        /* --- CÓMO FUNCIONA --- */
        .como-funciona {
            background: #fff; padding: 56px 20px; position: relative; overflow: hidden;
        }
        /* Un halo cálido detrás del título. Despega la sección del blanco plano sin meter otro
           bloque de color, que era lo que hacía que "Cómo funciona" y "Dónde estamos" se
           leyeran como dos franjas pegadas. */
        .como-funciona::before {
            content: ''; position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
            width: 620px; height: 320px; pointer-events: none;
            background: radial-gradient(closest-side, rgba(var(--primary-rgb), .09), transparent 70%);
        }
        .como-inner { max-width: 860px; margin: 0 auto; position: relative; }

        /* El antetítulo: da contexto en dos palabras y le pone un escalón al título. */
        .como-eyebrow, .ciudades-eyebrow {
            display: block; text-align: center; margin: 0 0 8px;
            font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
            color: var(--primary);
        }
        .como-titulo {
            text-align: center; font-size: 28px; margin: 0 0 34px 0; color: #241B14;
            letter-spacing: -.4px; position: relative; padding-bottom: 16px;
        }
        /* La línea de acento crece de la nada al entrar la sección. Es la única animación del
           título: mover el texto en sí lo vuelve difícil de leer justo cuando llega. */
        .como-titulo::after {
            content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
            width: 0; height: 3px; border-radius: 3px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
            transition: width .7s cubic-bezier(.2,.8,.25,1) .15s;
        }
        .como-titulo.visible::after { width: 130px; }

        /* align-items:start -- cada tarjeta conserva su altura natural. Sin esto, al abrir una la
           rejilla estiraba la OTRA hasta igualarla, y la cerrada quedaba con un vacío beige del
           alto de tres pasos: parecía que se le hubiera borrado el contenido. */
        .como-columnas {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 22px; align-items: start;
        }
        .como-col {
            background: #FBF7F0; border: 1px solid #EDE1CD; border-radius: 20px; padding: 0 20px;
            position: relative; overflow: hidden;
            box-shadow: 0 2px 10px rgba(35,27,20,.04);
            transition: border-color .24s, background .24s, box-shadow .24s, transform .24s cubic-bezier(.2,.8,.25,1);
        }
        /* La cinta superior se pinta de izquierda a derecha al abrir la tarjeta: marca cuál de
           las dos está abierta desde el otro lado de la pantalla. */
        .como-col::before {
            content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 0;
            background: linear-gradient(90deg, #BC532C, #B14B27, #8C3B1E);
            transition: width .45s cubic-bezier(.2,.8,.25,1);
        }
        .como-col[open]::before { width: 100%; }
        .como-col:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(35,27,20,.28); border-color: #E2D3BC; }
        .como-col[open] { background: #fff; border-color: #E2D3BC; box-shadow: 0 14px 30px -18px rgba(35,27,20,.3); }
        /* Cerrada se ve como un botón grande: es la señal de que hay algo que abrir. */
        .como-col-cabeza {
            cursor: pointer; list-style: none; font-weight: 800; font-size: 16px; color: #241B14;
            display: flex; align-items: center; gap: 12px; padding: 19px 30px 19px 0; position: relative;
        }
        .como-col-cabeza::-webkit-details-marker { display: none; }
        .como-col-cabeza > span:first-child {
            flex: 0 0 44px; height: 44px; border-radius: 50%;
            background: linear-gradient(180deg, #F6EADB, #F1E7D8);
            border: 1px solid #EADCC6;
            display: flex; align-items: center; justify-content: center; font-size: 21px;
            transition: transform .26s cubic-bezier(.2,.8,.25,1), box-shadow .26s ease;
        }
        .como-col:hover .como-col-cabeza > span:first-child,
        .como-col[open] .como-col-cabeza > span:first-child {
            transform: scale(1.07) rotate(-5deg);
            box-shadow: 0 8px 16px -8px rgba(var(--primary-rgb), .5);
        }
        .como-col-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .como-col-titulo { font-size: 16px; font-weight: 800; line-height: 1.3; }
        /* La bajada dice de qué va la columna sin obligar a abrirla. Cerradas, las dos tarjetas
           eran solo dos títulos y había que abrir para saber cuál servía. */
        .como-col-sub { font-size: 12.5px; font-weight: 600; color: #948870; line-height: 1.4; }
        .como-col[open] .como-col-sub { color: var(--primary); }
        .como-col-cabeza::after {
            content: '⌄'; position: absolute; right: 4px; top: 44%; transform: translateY(-50%);
            font-size: 21px; color: var(--primary); transition: transform .28s cubic-bezier(.2,.8,.25,1);
        }
        .como-col[open] .como-col-cabeza::after { transform: translateY(-50%) rotate(180deg); }
        /* Los pasos entran deslizándose al abrir. La animación va en el contenido y no en el
           <details>, que el navegador muestra de golpe: sin esto la lista aparecía de un salto. */
        .como-col[open] .como-pasos { animation: comoPasosEntra .42s cubic-bezier(.2,.8,.25,1) both; }
        @keyframes comoPasosEntra {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: none; }
        }
        /* Numeración generada por CSS: los números quedan en círculos alineados sin tener que
           escribirlos a mano en el HTML (donde se desordenan al reordenar los pasos). */
        .como-pasos { list-style: none; counter-reset: paso; padding: 0; margin: 4px 0 6px 0; }
        .como-pasos li {
            counter-increment: paso; position: relative; padding: 0 0 20px 42px;
            font-size: 14px; line-height: 1.55; color: #5C5044;
        }
        .como-pasos li::before {
            content: counter(paso); position: absolute; left: 0; top: -2px;
            width: 28px; height: 28px; border-radius: 50%; color: #fff;
            background: linear-gradient(180deg, #BC532C 0%, #B14B27 58%, #8C3B1E 100%);
            box-shadow: 0 5px 11px -5px rgba(var(--primary-rgb), .7);
            display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
        }
        /* Línea que une los pasos, como una guía vertical. El último no la lleva.
           Se desvanece hacia abajo: de un tono sólido parecía un borde de tabla. */
        .como-pasos li:not(:last-child)::after {
            content: ''; position: absolute; left: 13.5px; top: 30px; bottom: 8px; width: 1.5px;
            background: linear-gradient(180deg, #E3D3B9, #F4EDE1);
        }
        .como-pasos li strong { color: #241B14; display: block; margin-bottom: 2px; }

        /* --- CIUDADES --- */
        .ciudades-seccion {
            background: #F6ECDD; padding: 54px 20px; position: relative; overflow: hidden;
        }
        /* Dos halos suaves en las esquinas. La sección era un rectángulo beige liso con tres
           líneas de texto centradas; esto le da profundidad sin competir con las pastillas,
           que son lo único que hay que mirar aquí. */
        .ciudades-seccion::before, .ciudades-seccion::after {
            content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%;
            pointer-events: none;
            background: radial-gradient(closest-side, rgba(var(--primary-rgb), .10), transparent 70%);
        }
        .ciudades-seccion::before { top: -190px; left: -120px; }
        .ciudades-seccion::after  { bottom: -210px; right: -130px; }
        .ciudades-inner { max-width: 720px; margin: 0 auto; text-align: center; position: relative; }
        .ciudades-titulo {
            font-size: 26px; margin: 0 0 8px 0; color: #241B14; letter-spacing: -.3px;
        }
        .ciudades-sub { font-size: 14px; color: #6E6255; margin: 0 0 24px 0; line-height: 1.55; }
        .ciudades-lista { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
        /* La pastilla es un <a> desde el 1-sep-2026 (antes era un <span> decorativo): lleva al
           listado de esa ciudad. text-decoration:none porque el color y la forma ya dicen que se
           puede tocar, y un subrayado dentro de una pastilla se lee como un error de estilo. */
        .ciudad-pill {
            background: #fff; border: 1px solid #E2D3BC; border-radius: 22px; padding: 9px 15px;
            font-size: 13.5px; font-weight: 700; color: #4A3F33;
            display: inline-flex; align-items: center; gap: 9px;
            text-decoration: none;
            box-shadow: 0 3px 10px rgba(35,27,20,.05);
            transition: transform .22s cubic-bezier(.2,.8,.25,1), box-shadow .22s ease, border-color .22s ease;
        }
        /* Que se note con el teclado, no solo con el ratón: ahora esto es navegación. */
        .ciudad-pill:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 3px;
        }
        .ciudad-pill:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 22px -12px rgba(35,27,20,.32);
            border-color: rgba(var(--primary-rgb), .5);
        }
        /* El punto que late. Sustituye al emoji 📍 -- que cada sistema dibuja a su manera y al
           que no se le puede animar nada -- y es lo que hace que la lista se lea como "esto
           está vivo y creciendo" en vez de como una lista de nombres. */
        .ciudad-punto {
            position: relative; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
            background: var(--primary);
        }
        .ciudad-punto::after {
            content: ''; position: absolute; inset: -5px; border-radius: 50%;
            border: 2px solid rgba(var(--primary-rgb), .45);
            animation: ciudadLatido 2.4s ease-out infinite;
        }
        @keyframes ciudadLatido {
            0%   { transform: scale(.6); opacity: .9; }
            70%  { transform: scale(1.5); opacity: 0; }
            100% { transform: scale(1.5); opacity: 0; }
        }
        .ciudad-pill em {
            font-style: normal; background: linear-gradient(180deg, #BC532C 0%, #B14B27 58%, #8C3B1E 100%);
            color: #fff; border-radius: 11px; padding: 2px 9px; font-size: 12px; font-weight: 800;
            box-shadow: 0 4px 9px -5px rgba(var(--primary-rgb), .8);
        }
        /* La pastilla "Ver todas" -> /restaurantes. Solo sale con más de una ciudad. Va en color de
           marca para que se distinga de las de ciudad sin salirse de la fila: no es una ciudad más,
           es la salida al índice completo. */
        .ciudad-pill-todas {
            background: linear-gradient(180deg, #BC532C 0%, #B14B27 58%, #8C3B1E 100%);
            border-color: transparent; color: #fff;
            box-shadow: 0 6px 14px -8px rgba(var(--primary-rgb), .85);
        }
        .ciudad-pill-todas:hover { border-color: transparent; }
        .ciudad-pill-todas:hover .ciudades-flecha { transform: translateX(4px); }

        .ciudades-nota { font-size: 13.5px; color: #6E6255; margin: 22px 0 0 0; }
        .ciudades-nota a {
            color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap;
            display: inline-flex; align-items: center; gap: 5px;
            border-bottom: 1.5px solid transparent; transition: border-color .2s ease;
        }
        .ciudades-nota a:hover { border-bottom-color: rgba(var(--primary-rgb), .5); }
        /* La flecha se separa al pasar por encima: dice "esto lleva a otro sitio" sin escribirlo. */
        .ciudades-flecha { transition: transform .22s cubic-bezier(.2,.8,.25,1); }
        .ciudades-nota a:hover .ciudades-flecha { transform: translateX(4px); }

        /* ================================================================================
           EL ESTADO INICIAL DEL REVELADO, SOLO DONDE HAY QUIEN LO ENCIENDA
           ================================================================================
           El estado escondido cuelga de .acomer-reveal, una clase que index-acomer.js le
           pone al <html> ÚNICAMENTE si el navegador trae IntersectionObserver.

           No es una precaución de manual: sin ella, un navegador viejo -- o simplemente el
           JavaScript que no cargó -- dejaba estas dos secciones en opacity:0 para siempre.
           Una animación que falla tiene que fallar hacia "se ve sin animar", nunca hacia
           "no se ve". Con la clase, quien no puede animar recibe el CSS de siempre. */
        html.acomer-reveal .como-inner .reveal-scroll,
        html.acomer-reveal .ciudades-inner .reveal-scroll {
            opacity: 0; transform: translateY(18px);
        }
        @media (prefers-reduced-motion: reduce) {
            /* Sin movimiento: el contenido aparece y ya. El observador sigue añadiendo .visible,
               así que nada depende de que la animación llegue a correr. */
            .como-inner .reveal-scroll, .ciudades-inner .reveal-scroll {
                opacity: 1; transform: none; transition: none;
            }
            .como-titulo::after { transition: none; width: 130px; }
            .como-col, .como-col::before, .como-col-cabeza::after,
            .como-col-cabeza > span:first-child, .ciudad-pill, .ciudades-flecha,
            .ciudades-nota a { transition: none; }
            .como-col:hover, .ciudad-pill:hover { transform: none; }
            .como-col:hover .como-col-cabeza > span:first-child,
            .como-col[open] .como-col-cabeza > span:first-child { transform: none; }
            .como-col[open] .como-pasos { animation: none; }
            .ciudad-punto::after { animation: none; opacity: 0; }
        }

        /* --- PREGUNTAS FRECUENTES ---
           <details>/<summary> nativos: se abren sin JavaScript, funcionan con teclado y el
           buscador lee el contenido aunque esté cerrado. */
        .faq-seccion { background: #fff; padding: 46px 20px; }
        .faq-inner { max-width: 720px; margin: 0 auto; }
        /* Cabecera desplegable de toda la sección. Cerrada ocupa una línea; abierta muestra las
           preguntas. Se ve como una tarjeta pulsable, no como un título suelto. */
        .faq-bloque {
            background: #FBF7F0; border: 1px solid #EDE1CD; border-radius: 18px;
            padding: 4px 20px; transition: border-color .2s;
        }
        .faq-bloque[open] { border-color: #E2D3BC; }
        .faq-bloque-cabeza {
            cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px;
            padding: 16px 26px 16px 0; position: relative;
        }
        .faq-bloque-cabeza::-webkit-details-marker { display: none; }
        .faq-bloque-icono {
            flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--primary);
            display: flex; align-items: center; justify-content: center; font-size: 21px;
        }
        .faq-bloque-cabeza strong { display: block; font-size: 17px; color: #241B14; }
        .faq-bloque-cabeza em { display: block; font-style: normal; font-size: 12.5px; color: #948870; margin-top: 2px; }
        /* Flecha que gira al abrir: indica que hay algo más sin necesidad de texto. */
        .faq-bloque-cabeza::after {
            content: '⌄'; position: absolute; right: 4px; top: 44%; transform: translateY(-50%);
            font-size: 22px; color: var(--primary); transition: transform .25s;
        }
        .faq-bloque[open] .faq-bloque-cabeza::after { transform: translateY(-50%) rotate(180deg); }
        .faq-lista { padding: 2px 0 12px 0; }

        .faq-item { border-top: 1px solid #EDE1CD; }
        .faq-item summary {
            cursor: pointer; padding: 16px 30px 16px 0; font-weight: 700; font-size: 15px;
            color: #241B14; position: relative; list-style: none; line-height: 1.4;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
            font-size: 22px; font-weight: 400; color: var(--primary); line-height: 1;
        }
        .faq-item[open] summary::after { content: '−'; }
        .faq-item p { margin: -4px 0 18px 0; font-size: 14px; line-height: 1.65; color: #5C5044; }
        .contenedor-lista { padding: 25px 20px; max-width: 600px; margin: 0 auto; }

        /* ============================================================================
           LA LISTA DE RESTAURANTES: UNA COLUMNA EN EL CELULAR, DOS EN ESCRITORIO
           ============================================================================

           En una pantalla de escritorio la lista de una sola columna dejaba media
           pantalla vacía a cada lado y obligaba a bajar el doble para ver lo mismo.
           En el celular NO se toca: dos tarjetas de 170 px no caben, y la de una
           columna ya está pensada para ese ancho.

           Es una rejilla y no un flex con anchos al 50%: `1fr 1fr` reparte el hueco
           exacto sin pelearse con el gap, y `minmax(0, 1fr)` es lo que impide que una
           etiqueta larga --"Picadas, salchipapas y comidas rápidas"-- ensanche su
           columna y desencuadre la fila. Las filas se estiran solas, así que dos
           tarjetas vecinas quedan a la misma altura aunque una tenga tres etiquetas
           y la otra una. */
        .rest-grid { display: grid; gap: 14px; }
        /* El margen de la tarjeta se apaga dentro de la rejilla: aquí la separación la
           pone el gap, y sumar los dos dejaba las filas más separadas que las columnas. */
        .rest-grid .restaurante-card { margin-bottom: 0; }
        /* align-content:flex-start -- las dos filas de la tarjeta (logo+nombre, y las
           etiquetas) se quedan arriba en vez de repartirse el alto sobrante.
           La rejilla estira las dos tarjetas de una fila a la misma altura, y sin esto
           la que tenía menos etiquetas quedaba con su contenido flotando a media
           tarjeta: dos fichas vecinas con el nombre y las etiquetas a distinta altura.
           NO se toca align-items:center, que es otra cosa: ese centra el logo con su
           columna de texto DENTRO de la primera fila, y ahí sigue haciendo falta. */
        .rest-grid .restaurante-card { align-content: flex-start; }

        @media (min-width: 900px) {
            /* La columna se ensancha SOLO cuando de verdad hay dos tarjetas. A 600 px
               partidos en dos quedarían 293 px por tarjeta: el logo son 88 y al texto
               le quedarían 190, que es menos de lo que hoy tiene en un celular. */
            .contenedor-lista { max-width: 1000px; }
            .rest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            /* El buscador se queda como estaba. Es un solo campo: estirarlo a 1000 px
               no le añade nada y lo deja pareciendo un hueco vacío. La tira de tipos de
               comida SÍ aprovecha el ancho nuevo -- ahí más ancho son más categorías a
               la vista y menos flechazos. */
            .barra-buscador-rest { max-width: 640px; margin-left: auto; margin-right: auto; }
        }

        /* ============================================================================
           LA TARJETA DE RESTAURANTE  (rediseño del 20-ago-2026)
           ============================================================================
           Se había ido llenando de pastillas de color, una por cada dato que se fue
           agregando, y en un celular acababa siendo una columna estrecha con seis
           recuadros apilados y la distancia partida en tres renglones.

           La estructura ahora son DOS filas dentro de la misma tarjeta:
             fila 1: logo + (nombre, datos, horario)
             fila 2: las etiquetas, a lo ancho de TODA la tarjeta
           flex-wrap + flex-basis:100% en .rest-etiquetas es lo que produce ese salto de
           renglón sin necesidad de otro contenedor. */
        .restaurante-card {
            background: white; border: 1px solid #F0E8DC; border-radius: 16px;
            padding: 14px; margin-bottom: 14px;
            /* align-items:center y no flex-start. Con las etiquetas dentro de la columna de
               texto (como estaban antes) centrar dejaba el logo flotando a media tarjeta; ahora
               esa columna son tres renglones cortos, más baja que el propio logo, y alinearla al
               borde superior dejaba un hueco vacío justo encima de la línea divisoria.
               Los items se centran POR FILA, así que la fila de etiquetas no se ve afectada. */
            display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
            text-decoration: none; color: var(--text);
            box-shadow: 0 2px 10px rgba(35,27,20,0.05);
        }
        /* Las tarjetas de la lista de cerrados. Antes era un style="opacity:0.75" escrito
           a mano en el HTML; con clase, la lista entera se ajusta desde un solo sitio. */
        .restaurante-card-apagada { opacity: .72; }

        /* EL LOGO, DE TAMAÑO FIJO Y MÁS PEQUEÑO.
           Antes era el 42% del ancho de la tarjeta, y de ahí salía todo el problema: en un
           celular normal a la columna de texto le quedaban ~150 px, y ahí no cabe ni
           "A 0.1 km" de una pieza. Con 88 px la columna de texto casi se dobla. Sigue
           siendo un logo perfectamente reconocible: en esta lista el logo identifica, no
           es la foto del plato. */
        .restaurante-logo {
            width: 88px; height: 88px; aspect-ratio: 1 / 1; border-radius: 14px;
            object-fit: cover; border: 1px solid #EDE1CD; flex-shrink: 0; background: #FAF6EF;
        }

        /* El respaldo del restaurante sin logo. Hereda de arriba el tamaño y el borde -- solo
           centra el ícono. Antes salía un <img src=""> y con él el ícono de imagen rota. */
        .logo-sin-foto {
            display: flex; align-items: center; justify-content: center;
            font-size: 38px; line-height: 1; user-select: none;
        }

        /* min-width: 0 es imprescindible aquí: sin él, un nombre largo no dejaría encogerse
           a esta columna y empujaría el contenido fuera de la tarjeta. Es el mismo detalle
           de flexbox que sacó el botón "Agregar" de su cuadro en el parche 61. */
        .restaurante-info { flex: 1; min-width: 0; }

        /* Dos líneas como máximo y luego "…": un nombre muy largo desplazaba hacia abajo
           todo lo demás y descuadraba la tarjeta contra las de al lado. */
        .restaurante-nombre {
            margin: 2px 0 6px 0; font-size: 17px; font-weight: 700; line-height: 1.25;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* LA LÍNEA DE DATOS: texto, no pastillas.
           La calificación y la distancia dejaron de ser recuadros de color. Cuando todo es
           una pastilla, ninguna destaca -- y aquí lo que tiene que destacar es el estado. */
        .restaurante-meta {
            display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
            font-size: 12.5px; color: var(--soft-grey); line-height: 1.4;
        }
        .meta-dato { white-space: nowrap; }
        .meta-distancia { font-weight: 700; color: #6B5842; }
        .meta-punto { color: #CBB89A; }

        /* El estado se va a la derecha del renglón (margin-left:auto) y es lo único con
           color de fondo en esta línea. El punto se dibuja con CSS en vez de con un emoji
           🔴/🟢: el emoji cambia de tamaño y de forma en cada sistema y no se puede alinear. */
        .badge-estado {
            margin-left: auto; padding: 3px 9px 3px 8px; border-radius: 20px;
            font-size: 11.5px; font-weight: 700; white-space: nowrap;
            display: inline-flex; align-items: center; gap: 5px;
        }
        .badge-estado::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
        .badge-abierto { background: #E8F5E9; color: #2E7D32; }
        .badge-cerrado { background: #FDECEC; color: #C62828; }

        /* El horario de hoy, cuando está cerrado. Sin el emoji del reloj: en esta tarjeta ya
           hay una estrella y varias etiquetas, y un icono más solo agrega ruido a un renglón
           que se lee de corrido. */
        .texto-horario { font-size: 11.5px; color: #948870; margin-top: 5px; line-height: 1.45; }

        /* ETIQUETAS: SEGUNDA FILA, A LO ANCHO DE TODA LA TARJETA.
           flex-basis:100% las baja a su propio renglón. Es espacio que la distribución en dos
           columnas estaba desperdiciando: "Picadas, salchipapas y comidas rápidas" no cabe en
           media tarjeta y en una entera sobra sitio.
           La línea de arriba las separa del bloque de datos sin necesidad de más margen. */
        .rest-etiquetas {
            flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
            margin: 0; padding-top: 12px; border-top: 1px solid #F4EEE4;
        }
        .rest-etiqueta {
            background: #F7F2E9; color: #6B5842; font-size: 11.5px; font-weight: 600;
            padding: 4px 9px; border-radius: 8px; line-height: 1.45; max-width: 100%;
        }
        .rest-etiqueta-oferta { background: #FFF0EA; color: #B14B27; }
        /* "Sin menú digital": este restaurante existe y se le puede escribir, pero todavía no se
           le puede pedir. Gris con borde y no rojo: no es una advertencia ni un error del
           restaurante, es un dato sobre lo que la persona va a poder hacer al entrar. En rojo
           parecería un local cerrado o sancionado, que es exactamente lo que no es. */
        .rest-etiqueta-sin-menu { background: #FFFFFF; color: #7F7365; border: 1px solid #DCCBAF; }
        /* "Domicilio y pago se acuerdan por WhatsApp". Azul y no gris: la de arriba avisa de algo
           que NO se puede hacer, y esta de algo que SÍ -- se puede pedir, solo que con un detalle.
           Con el mismo gris apagado se leerían igual, y son cosas opuestas para quien decide si
           entra o sigue de largo. */
        .rest-etiqueta-por-acordar { background: #E8F4FD; color: #1B4A6B; border: 1px solid #A9D3F0; }
        /* "y más..." se ve más apagada a propósito: no es un tipo de comida, es una pista de que
           hay más. Con el mismo peso que las demás, competiría con información real. */
        .rest-etiqueta-mas { background: transparent; color: #A2988A; font-style: italic; padding-left: 2px; }

        /* --- EL GRUPO DE ARRIBA: LAS QUE CAMBIAN LA DECISIÓN (31-ago-2026) ---
           Van DENTRO de la columna de texto, debajo de la calificación y la distancia, así que
           tienen que deshacer las tres cosas que definen al grupo de abajo: el flex-basis que lo
           baja a su propio renglón a lo ancho de la tarjeta, la línea divisoria y su margen.
           Abajo se quedan solo los tipos de comida, que es lo que pidió Jeisson. */
        .rest-etiquetas-estado {
            flex-basis: auto; padding-top: 0; border-top: none; margin-top: 7px; gap: 5px;
        }
        /* El domicilio gratis en verde, el mismo de la cabecera del menú digital: es lo único de
           la tarjeta que le AHORRA dinero al cliente, y con el beige de los tipos de comida se
           leería como un dato más de los muchos que ya tiene delante. */
        .rest-etiqueta-envio-gratis {
            background: rgba(37, 211, 102, .12); color: #12803D;
            border: 1px solid rgba(37, 211, 102, .38);
        }

        /* En pantallas muy estrechas (320 px) el logo cede unos píxeles más antes que el texto. */
        @media (max-width: 360px) {
            .restaurante-logo { width: 76px; height: 76px; }
            .restaurante-card { padding: 12px; gap: 12px; }
            .restaurante-nombre { font-size: 16px; }
        }

        .barra-buscador-rest { display: flex; gap: 8px; margin-bottom: 20px; }
        .barra-buscador-rest input[type=text] { flex: 1; padding: 12px 16px; border: 1px solid #DCCBAF; border-radius: 25px; font-size: 14px; }
        .barra-buscador-rest button { background: var(--primary); color: white; border: none; padding: 0 18px; border-radius: 25px; font-weight: bold; cursor: pointer; font-size: 15px; }

        /* Aquí había una SEGUNDA definición de .texto-horario, escrita después que la de la
           tarjeta y por tanto la que de verdad se aplicaba. Se retiró en el rediseño del
           20-ago-2026: dos reglas para la misma clase en el mismo archivo garantizan que
           cualquier ajuste futuro se haga en la que no manda y parezca que no hizo nada.
           La buena vive arriba, junto al resto de la tarjeta. */

        /* ============================================================================
           TIPOS DE COMIDA: TIRA DESLIZABLE DE ICONOS
           ============================================================================

           ANTES: un botón "Buscar por tipo de comida ▾" que desplegaba veinte chips de texto
           amontonados en seis renglones. Tres problemas, y el tercero es el que importa:

             · Costaba un toque extra solo para ver qué había.
             · Desplegado empujaba los restaurantes fuera de la pantalla, justo lo que la
               persona vino a ver.
             · Veinte etiquetas de texto del mismo tamaño y color no se leen: se barren con la
               vista y no se distingue ninguna. Un icono grande sí se reconoce sin leer, que es
               como de verdad se busca comida.

           AHORA: una sola fila que se desliza de lado. Ocupa alto fijo pase lo que pase, se ve
           sin tocar nada, y el icono hace el trabajo de reconocimiento.

           LOS ICONOS SON LOS EMOJI QUE YA ESTABAN en grupos_productos.php ('🍔 Hamburguesas').
           No hacen falta imágenes: no hay veinte archivos que subir, ni que se vean borrosos en
           pantallas de alta densidad, ni veinte peticiones más al abrir la portada. */

        .tipos-comida-wrap { position: relative; margin-bottom: 20px; }

        /* El margen negativo saca la tira hasta los bordes de la pantalla y el padding la
           devuelve por dentro. Así el primer icono empieza alineado con el resto del contenido,
           pero al deslizar los de los extremos se ven cortados por el borde -- que es la señal
           visual de "aquí hay más, sigue deslizando". Con la tira metida en su caja parecería
           que se acabó. */
        .tipos-comida {
            display: flex; gap: 4px; overflow-x: auto; scroll-behavior: smooth;
            margin: 0 -20px; padding: 2px 20px 6px 20px;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            scrollbar-width: none;              /* Firefox */
            -ms-overflow-style: none;           /* Edge viejo */
        }
        .tipos-comida::-webkit-scrollbar { display: none; }   /* Chrome, Safari */

        .tipo-comida {
            flex: 0 0 auto; width: 74px; scroll-snap-align: start;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            text-decoration: none; padding: 4px 2px; border-radius: 12px;
            -webkit-tap-highlight-color: transparent;
        }
        .tipo-comida-icono {
            width: 54px; height: 54px; border-radius: 50%;
            background: #F6EFE3; border: 1px solid #EDE1CD;
            display: flex; align-items: center; justify-content: center;
            font-size: 27px; line-height: 1; transition: transform .15s, background .15s, border-color .15s;
        }
        .tipo-comida-nombre {
            font-size: 11px; font-weight: 600; color: #6E6255; text-align: center;
            line-height: 1.25;
            /* Dos renglones y corta. Los nombres van de "Pollo" a "Picadas, salchipapas y
               comidas rápidas": a un solo renglón el largo quedaría en "Picadas…" y no se
               distinguiría de "Picada" ni de nada. A dos se lee lo suficiente para reconocerlo,
               y la altura no baila de un icono a otro porque está fijada. */
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; height: 27px;
        }
        .tipo-comida:active .tipo-comida-icono { transform: scale(0.92); }
        @media (hover: hover) {
            .tipo-comida:hover .tipo-comida-icono { background: #EFE3D1; border-color: #DCCBAF; }
        }

        /* El elegido se marca en el ICONO, no solo en el texto: es lo que la vista encuentra
           primero al volver a la tira. */
        .tipo-comida.activo .tipo-comida-icono { background: var(--primary); border-color: var(--primary); box-shadow: 0 3px 10px rgba(177,75,39,0.28); }
        .tipo-comida.activo .tipo-comida-nombre { color: var(--primary); font-weight: 800; }

        /* Flechas SOLO para ratón. En un teléfono se desliza con el dedo y dos botones encima de
           los iconos taparían justo lo que hay que tocar. Se ocultan también cuando no hay nada
           más que ver (clase "oculta", la pone el JS). */
        .tipos-flecha {
            display: none;
            position: absolute; top: 22px; z-index: 2;
            width: 32px; height: 32px; border-radius: 50%;
            background: white; border: 1px solid #DCCBAF; color: #6E6255;
            cursor: pointer; font-size: 15px; line-height: 1;
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        }
        .tipos-flecha.izq { left: -6px; }
        .tipos-flecha.der { right: -6px; }
        .tipos-flecha.oculta { opacity: 0; pointer-events: none; }
        @media (hover: hover) and (pointer: fine) {
            .tipos-flecha { display: block; }
        }

        /* Sección CTA: Registro de restaurantes */
        /* Mismo montaje de dos capas que el hero: foto de fondo y encima un degradado oscuro que
           garantiza la legibilidad del texto blanco. background-color queda de respaldo, así que
           si el archivo todavía no está subido la sección se ve como antes en vez de romperse. */
        .cta-restaurantes {
            background-color: #241B14;
            background-image:
                linear-gradient(150deg, rgba(28,20,13,0.94) 0%, rgba(36,27,20,0.88) 50%, rgba(20,14,9,0.96) 100%),
                url('/assets/img/restaurante-duena.webp');
            background-size: cover; background-position: center;
            margin: 40px 0 0 0; padding: 45px 20px; text-align: center;
        }
        /* El contenedor se ensancha para que las dos tarjetas de la demo quepan lado a lado, pero
           el TEXTO se sigue midiendo a 480px: un párrafo a 660px de ancho se lee peor, y además
           cambiaría los cortes de línea que ya tenía esta sección. */
        .cta-restaurantes-inner { max-width: 660px; margin: 0 auto; }
        .cta-icono { font-size: 44px; margin-bottom: 10px; }
        .cta-restaurantes h2 { color: white; font-size: 24px; margin: 0 0 10px 0; }
        .cta-restaurantes p { color: #D9C7AE; font-size: 14px; line-height: 1.6; margin-bottom: 25px; max-width: 480px; margin-left: auto; margin-right: auto; }
        .btn-cta-restaurantes { display: inline-block; background: var(--primary); color: white; padding: 15px 30px; border-radius: 50px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 16px rgba(177, 75, 39,0.35); transition: 0.25s; }
        .btn-cta-restaurantes:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(177, 75, 39,0.45); }

        /* ============================================================================
           LAS DOS VISTAS DE LA DEMO (dentro del CTA de restaurantes)
           ============================================================================

           Van sobre una foto oscurecida, así que son de cristal -- fondo translúcido y
           un borde claro -- y no cajas sólidas: una tarjeta opaca aquí taparía la foto y
           la sección parecería dos bloques pegados en vez de uno.

           NO compiten con "Conoce más y regístrate", que es el botón de la acción de
           verdad: ese es macizo y del color de la marca; estas son transparentes. El
           orden de lectura queda pregunta -> míralo -> regístrate. */
        .cta-demos {
            display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
            margin: 4px 0 10px;
        }
        .cta-demo {
            /* flex-basis 260px: por debajo de ~570px de ancho las dos no caben en una fila y
               se apilan solas, que es lo correcto en un celular. */
            flex: 1 1 260px; max-width: 340px;
            /* box-sizing propio: esta hoja no lo pone en global, así que sin esta línea el
               relleno y el borde se SUMAN al max-width y la tarjeta acaba midiendo 34px más
               de lo que dice la regla. */
            box-sizing: border-box;
            display: flex; align-items: center; gap: 12px; text-align: left;
            padding: 14px 16px; border-radius: 16px;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.16);
            text-decoration: none; color: #fff;
            position: relative; overflow: hidden;
            -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
            box-shadow: 0 10px 26px -14px rgba(0,0,0,.7);
            transition: transform .26s cubic-bezier(.2,.8,.25,1), background .26s ease,
                        border-color .26s ease, box-shadow .26s ease;
            /* Entrada escalonada: la de abajo pone el retraso de cada una. */
            animation: ctaDemoEntra .5s cubic-bezier(.2,.8,.25,1) both;
        }
        .cta-demo:nth-of-type(1) { animation-delay: .05s; }
        .cta-demo:nth-of-type(2) { animation-delay: .16s; }

        /* El destello que cruza la tarjeta al pasar el ratón. Es un pseudo-elemento y no un
           degradado del fondo para no pelearse con el color translúcido de arriba. */
        .cta-demo::after {
            content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
            transform: skewX(-18deg); pointer-events: none;
            transition: left .6s ease;
        }
        .cta-demo:hover::after, .cta-demo:focus-visible::after { left: 130%; }

        .cta-demo:hover, .cta-demo:focus-visible {
            transform: translateY(-3px);
            background: rgba(255,255,255,.12);
            border-color: rgba(var(--primary-rgb, 177,75,39), .75);
            box-shadow: 0 16px 32px -14px rgba(0,0,0,.8), 0 0 0 4px rgba(var(--primary-rgb, 177,75,39), .16);
        }
        .cta-demo:focus-visible { outline: none; }

        .cta-demo-icono {
            flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
            display: grid; place-items: center; font-size: 21px; line-height: 1;
            background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
            border: 1px solid rgba(255,255,255,.18);
            transition: transform .26s cubic-bezier(.2,.8,.25,1);
        }
        .cta-demo:hover .cta-demo-icono, .cta-demo:focus-visible .cta-demo-icono {
            transform: scale(1.09) rotate(-4deg);
        }

        .cta-demo-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        .cta-demo-eyebrow {
            font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
            color: #E9C9A8;
        }
        .cta-demo-titulo { font-size: 14px; font-weight: 700; line-height: 1.35; color: #fff; }

        /* La flecha se separa un pelo al pasar por encima: dice "esto lleva a otro sitio"
           sin necesidad de escribirlo. */
        .cta-demo-flecha {
            flex: 0 0 auto; margin-left: auto; font-size: 17px; color: #E9C9A8;
            transition: transform .26s cubic-bezier(.2,.8,.25,1), color .26s ease;
        }
        .cta-demo:hover .cta-demo-flecha, .cta-demo:focus-visible .cta-demo-flecha {
            transform: translateX(4px); color: #fff;
        }

        .cta-demos-nota {
            color: #A8998A; font-size: 12px; margin: 0 0 22px;
            animation: ctaDemoEntra .5s cubic-bezier(.2,.8,.25,1) .26s both;
        }

        @keyframes ctaDemoEntra {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            .cta-demo, .cta-demos-nota { animation: none; }
            .cta-demo, .cta-demo-icono, .cta-demo-flecha { transition: none; }
            .cta-demo::after { display: none; }
            .cta-demo:hover, .cta-demo:focus-visible { transform: none; }
            .cta-demo:hover .cta-demo-icono, .cta-demo:focus-visible .cta-demo-icono { transform: none; }
            .cta-demo:hover .cta-demo-flecha, .cta-demo:focus-visible .cta-demo-flecha { transform: none; }
        }

        /* Vistas del hero */
        .vista { display: none; }
        .vista.active { display: block; }

        /* Tarjetas de selección Cliente / Restaurante */
        .opciones-inicio { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 25px; max-width: 500px; margin-left: auto; margin-right: auto; }
        .opcion-card { background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.4); border-radius: 20px; padding: 25px 20px; flex: 1; min-width: 150px; text-decoration: none; color: white; cursor: pointer; transition: 0.25s; }
        .opcion-card:hover { background: rgba(255,255,255,0.28); transform: translateY(-3px); }
        .opcion-icono { font-size: 34px; margin-bottom: 8px; }
        .opcion-titulo { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
        .opcion-sub { font-size: 12px; opacity: 0.9; }
        .opcion-icono-buscar { position: relative; width: 40px; height: 40px; margin: 0 auto 8px auto; }

        /* "Ver demo": deliberadamente MÁS PEQUEÑO que las dos tarjetas de arriba. Esas son las dos
           cosas que la gente viene a hacer; la demo es para quien todavía está decidiendo. Del
           mismo tamaño competiría con ellas y le pondría una tercera opción delante a alguien que
           ya sabe a qué vino.

           El subrayado se queda: sobre el fondo del hero, un enlace sin subrayar y del mismo color
           que el texto no se lee como enlace. */
        .ver-demo-linea {
            margin: 16px auto 0; max-width: 500px; text-align: center;
            font-size: 13.5px; color: rgba(255,255,255,0.82); line-height: 1.5;
        }
        .ver-demo-linea a {
            color: #fff; font-weight: 700; text-decoration: underline;
            text-underline-offset: 3px; white-space: nowrap;
        }
        .ver-demo-linea a:hover { text-decoration-thickness: 2px; }
        .opcion-icono-buscar .lupa, .opcion-icono-buscar .hamburguesa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; }
        .opcion-icono-buscar .lupa { animation: lupaBuscando 4s ease-in-out infinite; }
        .opcion-icono-buscar .hamburguesa { animation: hamburguesaAparece 4s ease-in-out infinite; }
        @keyframes lupaBuscando {
            0%    { transform: translate(0,0) rotate(0deg); opacity: 1; }
            12.5% { transform: translate(6px,-5px) rotate(15deg); opacity: 1; }
            25%   { transform: translate(7px,4px) rotate(0deg); opacity: 1; }
            37.5% { transform: translate(0,7px) rotate(-15deg); opacity: 1; }
            50%   { transform: translate(-7px,4px) rotate(0deg); opacity: 1; }
            62%   { transform: translate(-6px,-5px) rotate(15deg); opacity: 1; }
            70%   { transform: translate(0,0) rotate(0deg); opacity: 0; }
            100%  { transform: translate(0,0) rotate(0deg); opacity: 0; }
        }
        @keyframes hamburguesaAparece {
            0%, 65% { transform: scale(0); opacity: 0; }
            76%     { transform: scale(0.55); opacity: 1; }
            86%     { transform: scale(1.18); opacity: 1; }
            93%     { transform: scale(1); opacity: 1; }
            98%     { transform: scale(1); opacity: 1; }
            100%    { transform: scale(0); opacity: 0; }
        }

        /* Vista buscar comida */
        .btn-volver { background: none; border: none; color: white; font-size: 14px; font-weight: bold; cursor: pointer; margin-bottom: 15px; opacity: 0.9; }
        .btn-volver:hover { opacity: 1; }

        /* Barra de sesión del cliente arriba a la derecha */
        .barra-sesion { position: absolute; top: 15px; right: 15px; }
        .menu-cliente-wrap { position: relative; display: inline-block; }
        .btn-sesion { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); color: white; padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: bold; cursor: pointer; }
        .dropdown-cliente { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.2); min-width: 190px; overflow: hidden; z-index: 3000; text-align: left; }
        .dropdown-cliente.active { display: block; }
        .dropdown-cliente a { display: block; padding: 12px 16px; text-decoration: none; color: #2A2018; font-size: 14px; font-weight: bold; border-bottom: 1px solid #F1E7D8; }
        .dropdown-cliente a:last-child { border-bottom: none; }
        .dropdown-cliente a:hover { background: #F6ECDD; color: var(--primary); }
        .dropdown-cliente a.opcion-salir { color: #c62828; }
        .dropdown-cliente a.opcion-salir:hover { background: #ffebee; }

        /* Modales de login del cliente */
        .modal-overlay { position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(35,27,20,0.62); display: none; z-index: 4000; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
        .modal-overlay.active { display: flex; }
        .modal-content { position: relative; width: 100%; max-width: 380px; background: #fff; padding: 34px 28px 28px 28px; box-sizing: border-box; border-radius: 22px; max-height: 85vh; overflow-y: auto; color: var(--text); text-align: left; box-shadow: 0 20px 50px rgba(35,27,20,0.3); animation: modalAparece 0.25s ease-out; }
        .modal-content h2 { font-size: 21px; margin: 0 0 6px 0; }
        @keyframes modalAparece { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
        .input-modal { width: 100%; padding: 14px; margin-top: 6px; border: 1px solid #DCCBAF; border-radius: 10px; box-sizing: border-box; font-size: 20px; font-weight: 600; letter-spacing: 0.5px; }
        .campo-pin-wrap { position: relative; }
        .campo-pin-wrap .input-modal { padding-right: 46px; }
        .btn-ver-pin { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 20px; padding: 4px; line-height: 1; color: #6B5842; margin-top: 3px; }
        .btn-enviar-ws { background: var(--primary); color: white; border: none; padding: 15px; width: 100%; border-radius: 25px; font-weight: bold; margin-top: 18px; font-size: 16px; cursor: pointer; }
        .btn-enviar-ws:disabled { background: #948870; }

        /* "Continuar con Google" en el modal de la portada.
           Sigue las pautas de marca de Google: fondo blanco, borde gris y el logo a color.
           No es capricho -- usar el logo sobre otro fondo o recoloreado incumple sus condiciones
           de uso, y es de las cosas por las que te pueden retirar el acceso a la API. */
        .separador-google { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px;
                            color: #A69A82; font-size: 12.5px; }
        .separador-google::before, .separador-google::after { content: ""; flex: 1; height: 1px; background: #E3D8C6; }
        .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px;
                      background: #fff; color: #3c4043; border: 1px solid #DADCE0; border-radius: 25px;
                      padding: 14px; font-size: 14.5px; font-weight: bold; text-decoration: none; }
        .btn-google svg { flex-shrink: 0; }
        .btn-cerrar { background: none; border: none; font-size: 24px; position: absolute; top: 14px; right: 16px; cursor: pointer; color: #5C5044; line-height: 1; padding: 4px; }

        /* Anuncio para clientes: se muestra al obtener la ubicación, antes de revelar la lista */
        .anuncio-cliente-overlay { position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(20,15,10,0.82); z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
        .anuncio-cliente-caja { position: relative; max-width: 420px; width: 100%; }
        .anuncio-cliente-imagen { width: 100%; height: auto; max-height: 75vh; object-fit: contain; border-radius: 16px; display: block; box-shadow: 0 10px 30px rgba(0,0,0,0.4); background: #fff; }
        .anuncio-cliente-cerrar { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%; background: white; border: none; font-size: 16px; font-weight: bold; color: #241B14; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
        #mensaje-buscando.mensaje-buscando-sobre-anuncio { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 5001; background: rgba(36,27,20,0.9); color: #fff; padding: 10px 20px; border-radius: 20px; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); margin: 0; }

        /* Texto visible solo para lectores de pantalla y buscadores: el H1 solo trae el logo/marca
           por diseño, este texto le da a Google (y a accesibilidad) la frase con la intención de
           búsqueda real, sin alterar en nada lo que ve el usuario. */
        .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; }

.qea-seccion { max-width: 880px; margin: 55px auto 10px auto; padding: 0 20px; position: relative; }
        .qea-seccion .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
        .qea-seccion .reveal.visible { opacity: 1; transform: translateY(0); }
        .qea-titulo-wrap { text-align: center; margin-bottom: 34px; }
        .qea-badge { display: inline-block; background: rgba(177,75,39,0.1); border: 1px solid rgba(177,75,39,0.3); color: var(--primary); font-size: 12px; font-weight: 800; padding: 6px 16px; border-radius: 20px; margin-bottom: 16px; letter-spacing: 0.3px; }
        .qea-titulo {
            font-size: 34px; font-weight: 800; margin: 0 0 12px 0; line-height: 1.25;
            background: linear-gradient(100deg, var(--primary) 0%, #E8974D 35%, var(--primary) 60%, #E8974D 100%);
            background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
            animation: qeaBrillo 6s linear infinite;
        }
        @keyframes qeaBrillo { 0% { background-position: 0% center; } 100% { background-position: 300% center; } }
        .qea-sub { color: var(--soft-grey); font-size: 15px; max-width: 480px; margin: 0 auto; line-height: 1.6; }

        /* Toggle deslizante Clientes / Restaurantes */
        .qea-toggle-wrap { display: flex; justify-content: center; margin-bottom: 30px; }
        .qea-toggle { position: relative; display: inline-flex; background: #EDE1CD; border-radius: 30px; padding: 5px; gap: 4px; }
        .qea-toggle-highlight { position: absolute; top: 5px; left: 5px; height: calc(100% - 10px); width: calc(50% - 5px); background: var(--primary); border-radius: 25px; transition: transform 0.35s cubic-bezier(.65,0,.35,1); box-shadow: 0 4px 12px rgba(177,75,39,0.35); }
        .qea-toggle-btn { position: relative; z-index: 2; border: none; background: transparent; padding: 12px 24px; font-weight: 800; font-size: 14px; font-family: 'Outfit', sans-serif; color: #6B5842; cursor: pointer; border-radius: 25px; transition: color 0.35s; white-space: nowrap; }
        .qea-toggle-btn.qea-activo { color: white; }

        .qea-panel { display: none; }
        .qea-panel.qea-activo { display: block; animation: qeaEntra 0.5s ease; }
        @keyframes qeaEntra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

        .qea-destacado { text-align: center; background: linear-gradient(135deg, #241B14 0%, #2E2013 100%); color: white; border-radius: 20px; padding: 22px 20px; margin-bottom: 26px; }
        .qea-destacado .qea-num { font-size: 30px; font-weight: 900; color: #E8974D; }
        .qea-destacado p { margin: 6px 0 0 0; font-size: 13.5px; color: #D9C7AE; max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.5; }

        /* --- BLOQUES CON IMAGEN ---
           Reemplazan a la rejilla de 15 tarjetitas con emoji. Aquella las mostraba todas del mismo
           tamaño y con el mismo peso, así que se leía como un inventario de características: nada
           destacaba y nada se recordaba. Tres bloques grandes con foto permiten agrupar por tema y
           contar qué resuelve cada uno, que es lo que convence.

           auto-fit + minmax: en escritorio caben los tres en fila; en un celular se apilan solos,
           sin media queries. */
        .qea-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
        .qea-bloque {
            background: white; border: 1px solid #EDE1CD; border-radius: 18px; overflow: hidden;
            display: flex; flex-direction: column;
            opacity: 0; transform: translateY(20px);
            transition: transform .45s ease, box-shadow .35s ease, opacity .45s ease;
            will-change: transform;
        }
        .qea-bloque.qea-visible { opacity: 1; transform: translateY(0); }
        .qea-bloque:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.09); }

        /* aspect-ratio fija el alto antes de que la imagen cargue: sin esto la tarjeta "salta"
           cuando aparece la foto y mueve todo lo que está debajo. */
        .qea-bloque-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: #F1E7D8; }
        .qea-bloque-cuerpo { padding: 18px 20px 20px 20px; display: flex; flex-direction: column; flex: 1; }
        .qea-bloque-titulo { font-weight: 800; font-size: 17px; color: var(--text); margin: 0 0 6px 0; }
        .qea-bloque-texto { font-size: 13px; color: var(--soft-grey); line-height: 1.55; margin: 0 0 14px 0; }

        /* La lista detallada de lo que incluye cada bloque. El check va como pseudo-elemento para
           no repetir un icono en cada línea del HTML. */
        .qea-bloque-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid #F1E7D8; padding-top: 12px; }
        .qea-bloque-lista li {
            position: relative; padding: 5px 0 5px 22px; font-size: 12.5px; color: #4A3F33; line-height: 1.45;
        }
        .qea-bloque-lista li::before {
            content: '✓'; position: absolute; left: 0; top: 5px;
            color: var(--primary); font-weight: 800; font-size: 12px;
        }


        @media (max-width: 480px) {
            .qea-titulo { font-size: 26px; }
            .qea-toggle-btn { padding: 11px 16px; font-size: 12.5px; }
        }

/* --- LISTA LARGA DE RESTAURANTES ---
   A partir del 15º las tarjetas nacen ocultas y se revelan con "Ver más". Un logo dentro de un
   bloque con display:none no se descarga (por loading="lazy"), así que esto ahorra datos de
   verdad, no solo espacio en pantalla. */
.restaurante-card.rest-oculto { display: none; }
.btn-ver-mas-rest {
    display: block; width: 100%; background: white; border: 1px solid #DCCBAF;
    color: #4A3F33; padding: 13px; border-radius: 12px; font-weight: bold; font-size: 14px;
    font-family: inherit; cursor: pointer; margin-bottom: 20px;
}
.btn-ver-mas-rest:hover { background: #FBF7F0; }


/* --- ESTADO "BUSCANDO LOCALES CERCA DE TI" (index.php) --- */
/* Ondas de radar en vez del típico círculo girando: lo que está pasando es una búsqueda
   alrededor del cliente, y el radar lo dice sin necesidad de leer nada. */
.gps-buscando { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.gps-radar { position: relative; width: 74px; height: 74px; margin-bottom: 10px; }
/* El punto del centro: el cliente. Es lo único que no se mueve. */
.gps-radar::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px;
    margin: -6px 0 0 -6px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.28);
}
/* Las tres ondas salen del centro y se desvanecen. El retraso escalonado hace que se vea una
   ola continua en vez de tres círculos parpadeando a la vez. */
.gps-radar span {
    position: absolute; inset: 0; border: 2px solid rgba(255,255,255,0.85);
    border-radius: 50%; opacity: 0; animation: gpsOnda 2.1s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.gps-radar span:nth-child(2) { animation-delay: 0.7s; }
.gps-radar span:nth-child(3) { animation-delay: 1.4s; }

@keyframes gpsOnda {
    0%   { transform: scale(0.25); opacity: 0.9; }
    70%  { opacity: 0.25; }
    100% { transform: scale(1);    opacity: 0; }
}

.gps-buscando-titulo {
    margin: 0; font-size: 19px; font-weight: 700; color: #fff; letter-spacing: 0.2px;
    animation: gpsLatido 1.8s ease-in-out infinite;
}
.gps-buscando-sub { margin: 0; font-size: 13px; color: rgba(255,255,255,0.72); }

/* Un latido muy leve en el texto. Con la opacidad, no con el tamaño: cambiar el tamaño de un
   texto lo mueve de sitio y el ojo lo persigue en vez de leerlo. */
@keyframes gpsLatido {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.62; }
}

/* Quien pidió al sistema que reduzca las animaciones lo hizo por un motivo -mareos, migrañas,
   vértigo-. Se le deja el estado visible y legible, pero quieto. */
@media (prefers-reduced-motion: reduce) {
    .gps-radar span { animation: none; opacity: 0.45; transform: scale(0.85); }
    .gps-buscando-titulo { animation: none; }
}

.gps-error {
    margin: 16px auto 0; max-width: 330px; background: rgba(0,0,0,0.22);
    color: #fff; font-size: 13.5px; line-height: 1.55; padding: 12px 14px; border-radius: 12px;
}

/* El aviso de ubicación en piezas: titular, pasos numerados y botón.
   Antes era un párrafo corrido de cuatro líneas con "1)" y "2)" dentro del texto: técnicamente
   decía lo mismo, pero nadie lee un muro de letra en un celular con hambre. */
.gps-error-titulo { font-weight: bold; margin-bottom: 8px; }
.gps-error-linea  { line-height: 1.5; }
.gps-error-pasos  { margin: 0; padding-left: 20px; text-align: left; }
.gps-error-pasos li { margin-bottom: 6px; line-height: 1.45; }
.gps-error-pasos li:last-child { margin-bottom: 0; }

/* El atajo a los ajustes de ubicación de Android. Solo aparece en Android y solo cuando el error
   es del tipo ambiguo (ver htmlErrorUbicacionAcomer() en /assets/js/ubicacion.js).
   Blanco sólido sobre el fondo oscuro del aviso: tiene que leerse como el botón que es, no como
   un enlace más dentro del texto -- es la acción que resuelve el caso más común. */
.btn-ajustes-ubicacion {
    display: block; margin-top: 12px; padding: 12px 16px; background: #fff; color: #B14B27;
    border-radius: 10px; text-decoration: none; font-weight: bold; font-size: 14.5px;
    text-align: center;
}

/* ============================================================================================
   LISTA DE RESTAURANTES CERCANOS + "BUSCANDO" — DISEÑO Y ANIMACIONES AVANZADAS (31-ago-2026)
   ============================================================================================ */

/* --- Tarjetas de restaurante: entrada suave, elevación y zoom del logo al pasar el mouse. --- */
.restaurante-card {
    transition: transform .2s cubic-bezier(.2,.8,.25,1), box-shadow .22s ease, border-color .18s ease;
    animation: restCardIn .45s ease both;
}
.restaurante-card:hover {
    transform: translateY(-3px); border-color: var(--primary);
    box-shadow: 0 18px 34px -16px rgba(140,59,30,.28);
}
.restaurante-logo { transition: transform .25s ease; }
.restaurante-card:hover .restaurante-logo { transform: scale(1.05); }
@keyframes restCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.btn-ver-mas-rest { transition: background .18s ease, transform .12s ease, border-color .18s ease; }
.btn-ver-mas-rest:hover { transform: translateY(-1px); border-color: var(--primary); }

/* --- Estado "Buscando locales cerca de ti" con radar: se le añade un barrido giratorio detrás
   de las ondas (radar de verdad) y puntos suspensivos animados en el título. --- */
.gps-radar::before {
    content: ''; position: absolute; inset: -2px; border-radius: 50%; z-index: 0;
    background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.30) 55deg, rgba(255,255,255,0) 95deg);
    animation: gpsBarrido 2.4s linear infinite;
}
@keyframes gpsBarrido { to { transform: rotate(360deg); } }
.gps-buscando-titulo::after {
    content: '…'; display: inline-block; width: 1.15em; text-align: left;
    animation: gpsPuntos 1.5s steps(1, end) infinite;
}
@keyframes gpsPuntos { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '…'; } }

/* --- Mensaje simple "✅ Buscando locales cerca de ti...": píldora centrada con brillo que corre. --- */
#mensaje-buscando:not(.mensaje-buscando-sobre-anuncio) {
    display: inline-flex; align-items: center; gap: 9px; margin: 14px auto 0;
    color: var(--primary-dark); font-weight: 700; font-size: 14px;
    padding: 10px 18px; border-radius: 22px; border: 1px solid rgba(var(--primary-rgb), .18);
    background-image: linear-gradient(100deg, rgba(var(--primary-rgb),.07) 0%, rgba(var(--primary-rgb),.20) 50%, rgba(var(--primary-rgb),.07) 100%);
    background-size: 250% 100%; animation: buscandoBrillo 2.2s linear infinite;
}
@keyframes buscandoBrillo { 0% { background-position: 200% center; } 100% { background-position: 0% center; } }

@media (prefers-reduced-motion: reduce) {
    .restaurante-card { animation: none; }
    .restaurante-card, .restaurante-logo, .btn-ver-mas-rest { transition: none; }
    .gps-radar::before { animation: none; opacity: .35; }
    .gps-buscando-titulo::after { animation: none; content: '…'; }
    #mensaje-buscando:not(.mensaje-buscando-sobre-anuncio) { animation: none; background-image: none; background: rgba(var(--primary-rgb), .1); }
}

/* ============================================================================================
   DESTELLO DEL HERO DE LA PORTADA — el mismo brillo diagonal del cajón de cupos del panel
   Premium (.estado-card), pero REPITIÉNDOSE CADA 5 SEGUNDOS. (31-ago-2026)
   ============================================================================================ */
.hero { overflow: hidden; }
.hero::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-18deg); pointer-events: none; z-index: 4;
    animation: heroDestello 5s ease-in-out infinite;
}
/* El barrido cruza en el primer ~0.8 s y luego descansa fuera de cuadro hasta completar los 5 s,
   así el brillo reaparece cada 5 segundos en vez de correr sin parar. */
@keyframes heroDestello {
    0%   { left: -60%; }
    16%  { left: 130%; }
    100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; display: none; } }

/* ============================================================================================
   ESTADO "SIN LOCALES CERCANOS" — DISEÑO Y ANIMACIÓN AVANZADA (31-ago-2026)
   La insignia emite ondas que se expanden: refuerza el mensaje de "ampliando cobertura".
   ============================================================================================ */
.sin-locales {
    position: relative; overflow: hidden; text-align: center;
    padding: 44px 24px 36px; background: #fff; border-radius: 22px;
    border: 1px solid #F0E8DC; box-shadow: 0 16px 40px -18px rgba(42,32,24,.18);
    animation: sinLocalesIn .5s cubic-bezier(.2,.8,.25,1) both;
}
/* Resplandor suave del color de marca detrás de la insignia. */
.sin-locales::before {
    content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
    width: 320px; height: 320px; pointer-events: none;
    background: radial-gradient(circle, rgba(var(--primary-rgb),.10), transparent 68%);
}
.sin-locales > * { position: relative; z-index: 1; }

/* Insignia con ondas concéntricas que se expanden (como un radar de cobertura). */
.sin-locales-emoji {
    position: relative; width: 92px; height: 92px; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center; font-size: 44px; line-height: 1;
    border-radius: 50%; background: radial-gradient(circle at 32% 26%, #FBEFE6, #F3E1D3);
    box-shadow: 0 10px 24px -10px rgba(140,59,30,.4);
    animation: sinLocalesFlota 3.2s ease-in-out infinite;
}
.sin-locales-emoji::before, .sin-locales-emoji::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(var(--primary-rgb),.40);
    animation: sinLocalesOnda 2.8s ease-out infinite;
}
.sin-locales-emoji::after { animation-delay: 1.4s; }
@keyframes sinLocalesOnda { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(2); opacity: 0; } }
@keyframes sinLocalesFlota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.sin-locales-titulo { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 10px; color: #241B14; }
.sin-locales-texto { color: #6E6255; font-size: 15px; line-height: 1.55; margin: 0 0 26px; }
.sin-locales-cercano { color: var(--primary); font-weight: 800; }

.sin-locales-btn {
    display: inline-block; position: relative; overflow: hidden;
    padding: 14px 30px; border-radius: 50px; text-decoration: none; font-weight: 800; font-size: 15px; color: #fff;
    background: linear-gradient(180deg,#BC532C 0%,#B14B27 58%,#8C3B1E 100%);
    box-shadow: 0 12px 24px -10px rgba(140,59,30,.55);
    transition: transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
.sin-locales-btn::before {
    content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-18deg); transition: left .5s ease;
}
.sin-locales-btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 18px 30px -10px rgba(140,59,30,.6); }
.sin-locales-btn:hover::before { left: 130%; }
@keyframes sinLocalesIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .sin-locales { animation: none; }
    .sin-locales-emoji { animation: none; }
    .sin-locales-emoji::before, .sin-locales-emoji::after { animation: none; opacity: 0; }
    .sin-locales-btn, .sin-locales-btn::before { transition: none; }
    .sin-locales-btn::before { display: none; }
}