/* =========================================================
   Home (food/home.blade.php). Todo el contenido de este
   archivo está deliberadamente anidado bajo .rd-home-page —
   solo se incluye/usa esa clase en la vista de inicio, así
   que no afecta otras páginas aunque comparta componentes
   (food.components.restaurante, food.components.evaluation,
   food.components.restaurante_datos) usados también en
   categoria.blade.php y busqueda.blade.php. Los colores
   existentes del sitio (#ee072c) se conservan; solo se
   ajustan espacios, bordes, tipografía y microinteracciones.
   ========================================================= */

.rd-home-page {
    --uki-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --uki-ink: #1c1c1e;
    --uki-ink-soft: #6b6b70;
    --uki-line: rgba(28, 28, 30, 0.08);
    --uki-accent: #ee072c;
    --uki-bg: #fafafa;
    font-family: var(--uki-font);
    color: var(--uki-ink);
    background-color: var(--uki-bg);
}

.rd-home-page h1,
.rd-home-page h2,
.rd-home-page h4,
.rd-home-page h5,
.rd-home-page h6 {
    font-family: var(--uki-font);
    letter-spacing: -0.01em;
}

/* food_style.css pinta #restaurantecategorias de rojo sólido (#ee072c) por
   debajo de 768px — un estilo heredado de la versión anterior, pensado para
   un diseño con texto blanco sobre esa franja roja. Con las cards blancas
   del rediseño se ve como un "fondo rojo" detrás de los restaurantes, así
   que se neutraliza aquí. */
@media (max-width: 768px) {
    #restaurantecategorias {
        background-color: var(--uki-bg) !important;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ---------- Hero ---------- */

.rd-hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.rd-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(15, 15, 17, 0.82) 0%, rgba(15, 15, 17, 0.62) 38%, rgba(15, 15, 17, 0.18) 68%, rgba(15, 15, 17, 0.05) 100%),
                linear-gradient(0deg, var(--uki-bg) 0%, rgba(250, 250, 250, 0) 14%);
}

.rd-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    min-height: 60vh;
    padding-bottom: 56px;
}

.rd-hero-content {
    max-width: 560px;
    color: #fff;
    text-align: left;
    padding-top: 64px;
}

.rd-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

.rd-hero-eyebrow i {
    color: var(--uki-accent);
}

.rd-hero-title {
    font-size: clamp(2.1rem, 3.4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.08;
    margin: 0 0 14px;
    color: #fff;
}

.rd-hero-subtitle {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 46ch;
    margin: 0 0 28px;
}

.rd-hero-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    padding: 6px 6px 6px 22px;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.45);
    max-width: 480px;
    gap: 10px;
}

.rd-hero-search-icon {
    color: var(--uki-ink-soft);
    font-size: 15px;
}

.rd-hero-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14.5px;
    font-family: var(--uki-font);
    color: var(--uki-ink);
    padding: 12px 0;
    min-width: 0;
}

.rd-hero-search-btn {
    border: none;
    background: var(--uki-accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 13px 24px;
    border-radius: 999px;
    flex-shrink: 0;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.rd-hero-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--uki-accent) 55%, transparent);
}

.rd-hero-search-btn:active {
    transform: scale(0.97);
}

/* Insignia de garantía: vive fuera del flujo de texto/búsqueda, anclada
   como badge flotante en la esquina superior derecha del hero (lejos de
   los pasos, que ocupan la esquina inferior derecha, y de la flecha de
   scroll, centrada abajo). width fijo + height:auto conserva la
   proporción real de la imagen en vez de forzar una altura fija que la
   distorsionaba. */
.rd-hero-garantia {
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 1;
    width: 78px;
    height: auto;
    opacity: 0.95;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

/* Pasos (Encuentra / Ordena / Recoge-Recibe): tarjeta flotante tipo
   "vidrio" anclada a la derecha del hero, para que el contenido
   asimétrico (texto a la izquierda, pasos a la derecha) no se sienta
   vacío ni centrado por defecto. */
.rd-hero-inner .steps {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 22px 26px;
    backdrop-filter: blur(14px);
}

.rd-hero-inner .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 84px;
    text-align: center;
}

.rd-hero-inner .step-item svg {
    width: 30px;
    height: 30px;
}

.rd-hero-inner .step-item h4 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.rd-hero-inner .step-item h4 span {
    color: var(--uki-accent);
    font-weight: 800;
}

.rd-hero-arrow {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 28px;
    opacity: 0.7;
    z-index: 1;
}

@media (max-width: 1100px) {
    .rd-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 36px;
    }
}

/* Mismo hero en mobile (con su imagen de fondo) que en desktop — solo se
   reacomodan tamaños/espacios para una pantalla angosta: menos alto mínimo
   (86vh es demasiado en mobile con teclado/barras del navegador), título y
   textos más compactos, buscador a lo ancho completo, tarjeta de pasos sin
   ancho fijo por ítem, e insignia de garantía más pequeña para no competir
   con el contenido. */
@media (max-width: 600px) {
    /* El layout global reserva un espacio fijo arriba de @yield('content')
       (3 <br/>) para que el header, que es position:fixed, no tape el
       contenido. Esa reserva fue calibrada para el header de escritorio;
       en mobile el header es más bajo, así que sobra espacio en blanco
       entre el header y el hero. Se compensa solo aquí (el hero es lo
       primero que pinta la página de inicio) sin tocar ese espaciador
       global, que otras páginas siguen necesitando tal cual. */
    .rd-hero {
        min-height: 0;
        margin-top: -32px;
    }

    .rd-hero-inner {
        min-height: 0;
        padding: 28px 0 32px;
    }

    .rd-hero-content {
        max-width: none;
        padding-top: 20px;
    }

    .rd-hero-eyebrow {
        font-size: 11.5px;
        padding: 6px 14px;
    }

    .rd-hero-title {
        font-size: 1.9rem;
    }

    .rd-hero-subtitle {
        font-size: 14px;
        max-width: none;
        margin-bottom: 22px;
    }

    .rd-hero-search {
        max-width: none;
        width: 100%;
    }

    /* La tarjeta de pasos (Encuentra/Ordena/Recoge) no entra cómoda en un
       ancho de mobile sin sentirse apretada, así que se oculta en este
       breakpoint — la búsqueda y el título ya comunican lo esencial. */
    .rd-hero-inner .steps {
        display: none;
    }

    .rd-hero-garantia {
        display: none;
    }

    .rd-hero-arrow {
        display: none;
    }
}

/* ---------- Alerta de zona lejana ---------- */

.rd-home-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    margin: 28px 0 0;
    background: #fdeceb;
    color: #b3271d;
    border-radius: 14px;
    font-size: 13.5px;
}

.rd-home-alert a {
    color: #b3271d;
    font-weight: 700;
    text-decoration: underline;
}

/* ---------- Encabezados de sección ---------- */

.rd-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 52px 0 24px;
}

.rd-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 4px;
}

.rd-section-subtitle {
    margin: 0;
    font-size: 13.5px;
    color: var(--uki-ink-soft);
}

/* ---------- Grid de restaurantes ---------- */

.rd-restaurant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}

/* food.components.restaurante se comparte con categoria.blade.php y
   busqueda.blade.php; el rediseño visual de su card se aplica solo
   aquí, anidado bajo .rd-home-page, sin tocar el componente. */
.rd-home-page .restaurant-entry {
    background: #fff;
    border: 1px solid var(--uki-line);
    border-radius: 20px;
    padding: 20px;
    margin: 0 !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease;
}

.rd-home-page .restaurant-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.16);
    border-color: color-mix(in srgb, var(--uki-accent) 25%, var(--uki-line));
}

/* food.components.restaurante tiene un layout viejo basado en floats
   (.entry-logo flota a la izquierda, .entry-dscr usa padding-left:145px
   para no encimarse con esa imagen flotada). En vez de pelear contra esas
   reglas heredadas, "desenvolvemos" los wrappers de Bootstrap (.col-lg-8,
   .col-lg-4, .right-content, .right-review, .entry-dscr) con
   display:contents — así sus hijos (nombre, imagen, tags, estrellas,
   botón) pasan a ser items directos del grid de .row y se pueden
   reordenar/redimensionar libremente sin tocar el componente compartido
   (también usado en categoria/busqueda). El nombre del restaurante,
   al ser lo más importante de la card, ocupa su propia fila de ancho
   completo arriba de la imagen — así nunca compite por espacio con la
   imagen/tags/botón y puede usar el mismo tamaño de letra en todas las
   cards sin truncarse. */
/* "tags" ocupa las filas 2 y 3 en la columna derecha (no solo la 2) a
   propósito: así, si un negocio tiene varios tags y envuelven a más
   líneas, ese contenido "crece" hacia abajo dentro de su propio espacio
   sin inflar la fila 2 (que define dónde empiezan las estrellas) — nunca
   se oculta ni se recorta ningún tag, la card simplemente queda un poco
   más alta para ese negocio en particular. */
.rd-home-page .restaurant-entry > .row {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
        "name name"
        "logo tags"
        "stars tags"
        "cta  cta"
        "note note";
    align-items: start;
    column-gap: 18px;
    row-gap: 12px;
    margin: 0;
}

.rd-home-page .restaurant-entry [class*="col-"] {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    display: contents;
}

.rd-home-page .right-content,
.rd-home-page .entry-dscr {
    background: transparent !important;
    display: contents;
}

.rd-home-page .entry-dscr > span:empty {
    display: none;
}

.rd-home-page .entry-dscr > p {
    grid-area: note;
    margin: 4px 0 0 !important;
    font-size: 11.5px !important;
    color: var(--uki-ink-soft);
}

/* La imagen ahora es un rectángulo más grande (no un cuadrado forzado).
   Se usa object-fit:contain (no cover) para que el logo/foto del negocio
   se vea completo, sin recortar bordes; el fondo neutro rellena el
   espacio que sobra cuando la proporción de la imagen no es exactamente
   la de la caja. */
.rd-home-page .entry-logo {
    grid-area: logo;
    width: 168px;
    height: 126px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    margin: 0;
    float: none;
    display: flex;
}

.rd-home-page .entry-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.rd-home-page .logo-negocio {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    margin-right: 0 !important;
    object-fit: contain !important;
    display: block;
}

.rd-home-page .entry-dscr h5 {
    grid-area: name;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    padding-left: 0 !important;
    text-align: left !important;
    /* Ancho completo de la card, así el mismo tamaño de letra le alcanza
       al nombre en (casi) cualquier card sin truncarse ni partirse en
       2 líneas. Si un nombre fuera excepcionalmente largo, se trunca con
       "…" como último recurso — pero ya no se sacrifica el tamaño de
       letra para lograrlo. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-home-page .rd-tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.rd-home-page .rd-tags li {
    font-size: 11.5px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #f4f4f5 !important;
    border: none !important;
    color: var(--uki-ink-soft) !important;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.rd-home-page .rd-tags li a {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* La etiqueta de envío gratis/a domicilio (.etiqueta-destacada) es una
   promoción, no un dato neutro como "Pick up & Go" o la distancia, así
   que se distingue con un chip propio en tono de acento (en vez del
   rojo sólido + texto blanco "alerta" del estilo global, o de mezclarse
   como un pill gris más). El ícono (fa-star / fa-motorcycle) vive fuera
   del span en el markup, así que el chip se construye en el <li> que lo
   contiene vía :has(), para que ícono + texto compartan un solo fondo. */
.rd-home-page .rd-tags li:has(.etiqueta-destacada) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--uki-accent) 9%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--uki-accent) 22%, var(--uki-line)) !important;
    padding: 5px 12px !important;
}

.rd-home-page .rd-tags li:has(.etiqueta-destacada) > i {
    color: var(--uki-accent);
    font-size: 11px;
}

.rd-home-page .etiqueta-destacada {
    background: transparent !important;
    color: var(--uki-accent) !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

/* Las estrellas y el conteo de calificaciones se mueven debajo de la
   imagen (columna izquierda) en vez de vivir apretadas junto al botón,
   para que la card quede en 2 columnas reales: imagen+calificación a
   la izquierda, nombre+tags+botón a la derecha. */
.rd-home-page .right-review {
    grid-area: stars;
    width: 168px;
    border-left: none !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.rd-home-page .right-review > span:first-child {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
    margin-right: 6px;
    vertical-align: middle;
}

.rd-home-page .rating-block {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    background: transparent;
    border: none;
    padding: 0 !important;
    vertical-align: middle;
}

.rd-home-page .rating-block i {
    font-size: 12px;
    color: var(--uki-accent);
}

.rd-home-page .right-review p {
    display: block;
    margin: 4px 0 0 !important;
    color: var(--uki-ink-soft);
    font-weight: 500 !important;
}

.rd-home-page .right-review small {
    font-size: 12px;
}

/* El botón (o el aviso de "no disponible") tiene su propia fila de
   ancho completo, separada de la imagen/tags/estrellas por una línea
   divisoria sutil, para que esa zona (la más cargada de la card) no
   tenga que compartir espacio también con el CTA. Al ser width:100%,
   el border-top sí alcanza a ser una línea de ancho completo (no solo
   del tamaño del botón). */
.rd-home-page .theme-btn-dash,
.rd-home-page .right-content > h6 {
    grid-area: cta;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--uki-line);
}

.rd-home-page .theme-btn-dash {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none !important;
    background: var(--uki-accent) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    padding: 12px 20px;
    border-radius: 12px;
    white-space: nowrap;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.rd-home-page .theme-btn-dash:hover {
    transform: translateY(-1px);
}

.rd-home-page .right-content > h6 {
    font-size: 12.5px;
    text-align: left;
}

@media (max-width: 600px) {
    .rd-restaurant-grid {
        grid-template-columns: 1fr;
    }

    .rd-home-page .restaurant-entry > .row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "logo"
            "tags"
            "stars"
            "cta"
            "note";
        row-gap: 12px;
    }

    .rd-home-page .entry-logo {
        width: 100%;
        height: 160px;
    }

    .rd-home-page .right-review {
        width: 100%;
    }

    .rd-home-page .right-content > h6 {
        text-align: left;
    }
}

/* ---------- Estado vacío ---------- */

.rd-home-empty {
    text-align: center;
    padding: 56px 20px;
    background: #fff;
    border: 1px solid var(--uki-line);
    border-radius: 20px;
}

.rd-home-empty i {
    font-size: 34px;
    color: var(--uki-ink-soft);
    margin-bottom: 14px;
    display: block;
}

.rd-home-empty h6 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.rd-home-empty p {
    margin: 0;
    color: var(--uki-ink-soft);
    font-size: 13.5px;
}

/* ---------- Grid de categorías ---------- */

.rd-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

@media (max-width: 991px) {
    .rd-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .rd-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rd-category-card {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #ececee;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.rd-category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.22);
}

.rd-category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.rd-category-card:hover .rd-category-img {
    transform: scale(1.06);
}

.rd-category-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 14px 12px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}