/* ============================================================
   Tema "Tallado" — Cordillera al atardecer
   Barranquitas como cuna de montañas: verde musgo de cordillera,
   naranja quenepa de atardecer, hueso cálido de fondo. Hero
   compacto, categorías en una fila, secciones que no se sienten
   de scroll infinito (feedback directo del Municipio, 2026-08-05).
   Se carga DESPUÉS de site.css y solo sobrescribe tokens y
   piezas puntuales — no toca la estructura ni los datos.
   ============================================================ */

@font-face {
    font-family: 'Newsreader';
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/tallado/newsreader-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Outfit';
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/tallado/outfit-variable.woff2') format('woff2');
}

:root {
    /* Paleta "Cordillera al atardecer" */
    --primary-color: #E4762B;      /* quenepa — CTAs, links */
    --secondary-color: #C68A2E;    /* latón atardecer — estrellas, badges */
    --accent-color: #2F3E2B;       /* musgo — acentos oscuros */
    --background-color: #ffffff;
    --text-color: #23281F;         /* tinta */
    --text-light: #5c6656;
    --background-light: #F6F3EC;   /* hueso — bandas de sección */
    --background-dark: #2F3E2B;
    --overlay-color: rgba(35, 40, 31, 0.55);

    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Outfit', sans-serif;
    --font-display: 'Newsreader', serif;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-xl: 40px;

    --shadow-sm: 0 8px 16px -8px rgba(35, 40, 31, 0.35);
    --shadow-md: 0 10px 30px -12px rgba(35, 40, 31, 0.35);
    --shadow-lg: 0 14px 28px -12px rgba(35, 40, 31, 0.4);
}

/* ---------- Titulares: texto directo sobre la foto, con eyebrow ---------- */
.hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    letter-spacing: -0.01em;
}

/* Blazor enfoca el h1 (tabindex="-1") tras cada navegación para lectores de
   pantalla — con la placa tallada de antes ese anillo de foco quedaba tapado
   por el fondo de la placa; el título limpio nuevo lo deja expuesto. No está
   en el tab order (no lo usan usuarios de teclado), así que quitar el anillo
   visual no afecta accesibilidad real. */
.hero-title:focus {
    outline: none;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-bottom: 0.7em;
}

.hero-eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--secondary-color);
    flex-shrink: 0;
}

/* Mientras el hero de categoría no tiene foto todavía (ver GetImagenHeroActual
   en Categoria.razor), este fondo evita que se vea blanco con el texto claro
   encima ilegible durante ese instante. */
.hero-background {
    background-color: var(--accent-color);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
}

.hero-bg-img {
    transform: scale(1.05);
    animation: tallado-kenburns 18s ease-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg-img {
        animation: none;
    }
}

@keyframes tallado-kenburns {
    to {
        transform: scale(1.15) translateY(-2%);
    }
}

/* Rotación de varias fotos en el hero de Home (Municipio, reunión 16-sep):
   cada <img class="hero-slide"> ocupa el mismo cuadro apilado y se turna vía
   @keyframes hero-crossfade (porcentajes calculados en Home.razor según
   cuántas fotos haya — un solo <style> por página, cero JS). Con 1 sola foto
   configurada, Home.razor no renderiza .hero-slides y esto no aplica — el
   hero se ve exactamente igual que hoy. */
.hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        animation: none !important;
        opacity: 0;
    }
    .hero-slide:first-of-type {
        opacity: 1;
    }
}

/* Dos capas: una vertical suave (oscurece un poco abajo, donde va el buscador) y
   una horizontal que oscurece el lado izquierdo, donde va el texto. Sin la
   segunda, con fotos claras o con mucho detalle (la plaza desde el aire, una
   casa con baranda blanca) «Cuna de próceres» y el subtítulo no se leían
   (2026-10-07, al ponerse las fotos reales del hero). El lado derecho de la
   foto queda igual que antes.
   z-index: en site.css era -1, y dentro de .hero-background (que ya forma
   su propio contexto con z-index -2) eso la pintaba DEBAJO de la foto: el
   oscurecido no se veía nunca. Con 1 queda sobre la foto y sigue debajo del
   texto, que está fuera de .hero-background. */
.hero-overlay {
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(35, 40, 31, 0.6) 0%,
            rgba(35, 40, 31, 0.38) 40%,
            rgba(35, 40, 31, 0) 72%
        ),
        linear-gradient(
            180deg,
            rgba(35, 40, 31, 0) 0%,
            rgba(35, 40, 31, 0.08) 50%,
            rgba(35, 40, 31, 0.4) 100%
        );
}

.hero-eyebrow,
.hero-subtitle {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 0, 0, 0.35);
}

.search-input-wrapper {
    background-color: var(--background-light);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ---------- Groove: separador tallado entre secciones ---------- */
.restaurants-section,
.sponsors-section {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-color);
}

/* Encabezado con enlace "Ver todo" a la derecha (destacados, próximo evento) —
   el patrón centrado de site.css sirve para secciones sin acción asociada. */
.restaurants-section .section-header,
.proximo-evento-section .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
}

.section-header-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.section-header-link:hover {
    text-decoration: underline;
}

.restaurants-section {
    background-color: #fff;
}

.restaurant-name {
    font-family: var(--font-display);
    font-weight: 700;
}

.restaurant-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-light);
    margin: 0.2rem 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.restaurant-meta i {
    color: var(--primary-color);
    font-size: 0.75rem;
}

.restaurant-card {
    background-color: var(--background-light);
}

.category-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Conteo de negocios, solo en la página /categorias (el mosaico del Home
   no lo usa). Usa el mismo texto tenue que --text-light del resto del sitio. */
.category-count {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: -0.3rem;
}

/* En desktop hay espacio de sobra en la tarjeta y el título se ve chiquito
   comparado con el resto de la página (Marcos, 2026-08-06). */
@media (min-width: 1024px) {
    .category-title {
        font-size: 1.05rem;
    }
}

.ad-banner {
    background-color: var(--accent-color);
}

/* ============================================================
   Menos scroll (Marcos, 2026-08-05) — el Municipio pidió que
   ninguna pantalla se sienta de scroll infinito. El hero ocupaba
   75vh y "Destacados"/"Categorías" apilaban 8 tarjetas / 6 negocios
   completos uno debajo del otro (home: 7.9 pantallas en móvil).
   Se achica el hero y ambas secciones pasan a carrusel horizontal
   con scroll-snap, como en pabqtas.
   ============================================================ */
.hero-section {
    min-height: 48vh;
    max-height: 560px;
    align-items: flex-end;
    text-align: left;
    padding-bottom: var(--spacing-lg);
}

.hero-content {
    max-width: 640px;
    margin: 0;
}

.hero-subtitle {
    margin-left: 0;
    margin-right: 0;
    max-width: 34ch;
}

@media (max-width: 600px) {
    .hero-section {
        text-align: center;
        align-items: center;
    }

    /* En celular el texto va centrado: en vez de oscurecer un lado, se
       oscurece un poco toda la franja del texto. */
    .hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(35, 40, 31, 0.22) 0%,
            rgba(35, 40, 31, 0.38) 45%,
            rgba(35, 40, 31, 0.55) 100%
        );
    }

    .hero-content {
        margin: 0 auto;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    /* El guión decorativo (::before) y el tono latón se pierden contra la
       foto en móvil — centrado, sin guión, en blanco, un poco más grande y
       más arriba (más cerca del título) que en desktop. */
    .hero-eyebrow {
        justify-content: center;
        color: #fff;
        font-size: 0.95rem;
        transform: translateY(-10px);
    }

    .hero-eyebrow::before {
        display: none;
    }
}

/* Categorías: con datos reales son siempre 4 (Gastronomía, Hospedaje, Lugares,
   Actividades) — caben en una sola fila sin scroll, así que se dejó de usar
   el carrusel horizontal que tenían antes. Ícono de línea SVG propio (no FA)
   con un tinte distinto por tarjeta, calcado del mockup aprobado. La fila
   sube y se monta sobre el borde inferior del hero (.categories-overlap) —
   por eso no lleva encabezado propio ni el borde "groove" de otras secciones. */
.categories-overlap {
    position: relative;
    z-index: 5;
    margin-top: -1.4rem;
}

.categories-grid {
    display: grid;
    /* Cantidad real de categorías, fijada inline por Home.razor
       (--cat-count) — con 4 sigue siendo exactamente el mosaico de
       siempre; 4 es el respaldo si por lo que sea la variable no llega. */
    grid-template-columns: repeat(var(--cat-count, 4), 1fr);
    gap: var(--spacing-sm);
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: 1.1rem 0.6rem;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(35, 40, 31, 0.05);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.category-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--background-light);
    color: var(--primary-color);
}

.category-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.category-card:nth-child(6n+1) .category-icon { background: #F7E4D4; color: #C05A26; }
.category-card:nth-child(6n+2) .category-icon { background: #E3EAD9; color: #5A7043; }
.category-card:nth-child(6n+3) .category-icon { background: #DCE7E5; color: #3E6B63; }
.category-card:nth-child(6n+4) .category-icon { background: #F5E6D0; color: #C08A2E; }
.category-card:nth-child(6n+5) .category-icon { background: #E1E6EE; color: #3F5578; }
.category-card:nth-child(6n+6) .category-icon { background: #ECE0E6; color: #7B4A63; }

/* Lavado de color muy sutil en la tarjeta grande, mismo tono que su ícono, para que no
   quede un rectángulo blanco vacío — el ícono se queda con su tinte más saturado encima. */
.category-card:nth-child(6n+1) { background: color-mix(in srgb, #F7E4D4 50%, #fff); }
.category-card:nth-child(6n+2) { background: color-mix(in srgb, #E3EAD9 50%, #fff); }
.category-card:nth-child(6n+3) { background: color-mix(in srgb, #DCE7E5 50%, #fff); }
.category-card:nth-child(6n+4) { background: color-mix(in srgb, #F5E6D0 50%, #fff); }
.category-card:nth-child(6n+5) { background: color-mix(in srgb, #E1E6EE 50%, #fff); }
.category-card:nth-child(6n+6) { background: color-mix(in srgb, #ECE0E6 50%, #fff); }

@media (max-width: 600px) {
    .categories-grid {
        gap: 0.5rem;
    }

    .category-card {
        padding: 0.8rem 0.35rem;
    }

    .category-icon {
        width: 38px;
        height: 38px;
    }

    .category-icon svg {
        width: 19px;
        height: 19px;
    }

    .category-title {
        font-size: 0.72rem;
    }

    /* Con 5+ categorías (ej. al agregar "Comercios") una sola fila en
       móvil aprieta demasiado los rótulos — pasa a envolver en filas de 3.
       Con exactamente 4 (o menos) no se activa, se ve igual que siempre. */
    .categories-grid:has(.category-card:nth-child(5)) {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Si la última fila queda con un solo huérfano, se centra en vez de
       dejarlo pegado a la izquierda con hueco vacío al lado. */
    .categories-grid:has(.category-card:nth-child(5)) .category-card:nth-last-child(1):nth-child(3n+1) {
        grid-column: 2;
    }
}

/* .categories-grid-page (grid 2x2 de la página /categorias) se retiró:
   esa página dejó de reusar el mosaico compacto de íconos del Home —
   ver .cat-rich-* en Categorias.razor para el diseño actual (2026-09-07). */

/* OJO: .restaurants-grid se usa en DOS páginas distintas — el carrusel de
   "Destacados" del home (unas pocas tarjetas) y el listado paginado completo
   de Categoria.razor (hasta 9 tarjetas por página). El carrusel queda
   scopeado a .carrusel-destacados (solo Home); Categoria.razor se queda con
   el grid normal de site.css (1/2/3 columnas según el ancho de pantalla). */
.restaurants-grid.carrusel-destacados {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: var(--spacing-md);
    padding: 2px 2px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.restaurants-grid.carrusel-destacados::-webkit-scrollbar {
    display: none;
}

.restaurants-grid.carrusel-destacados .restaurant-card {
    flex: 0 0 250px;
    scroll-snap-align: start;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(35, 40, 31, 0.05);
}

.restaurant-tag {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 1;
    background: rgba(47, 62, 43, 0.85);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* Tarjeta compacta dentro del carrusel: la descripción larga y el segundo
   botón sobraban a 250px de ancho — con foto + nombre + estrellas + un CTA
   alcanza para decidir si entrar al detalle. Scopeado a .carrusel-destacados
   nada más — el listado paginado de Categoria.razor sí necesita la
   descripción y el botón "Cómo llegar" completos. */
.restaurants-grid.carrusel-destacados .restaurant-description,
.restaurants-grid.carrusel-destacados .action-buttons .btn-secondary {
    display: none;
}

.restaurants-grid.carrusel-destacados .restaurant-image {
    height: 140px;
}

.restaurants-grid.carrusel-destacados .action-buttons {
    flex-direction: row;
}

/* El calendario y el footer eran los dos bloques más altos después de pasar
   Categorías/Destacados a carrusel — se les baja el relleno, no el contenido. */
.events-calendar-section {
    padding: var(--spacing-xl) 0 !important;
}

.calendar-widget {
    padding: var(--spacing-md) !important;
}

.calendar-day {
    min-height: 30px !important;
    padding: 4px !important;
}

.footer {
    padding: var(--spacing-xl) 0 var(--spacing-lg) !important;
}

.footer-grid {
    gap: var(--spacing-lg) !important;
}

.map-section {
    padding: var(--spacing-lg) 0 !important;
}