/* ============================================
   VARIABLES Y RESET
   ============================================ */
* { box-sizing: border-box; }

body {
    font-family: sans-serif;
    --bg-color: #0d0d1a;
    --dark-color: #c78b3d4c;
    --dark-color2: #ffffff;
    --text-color: #e8b453;
    --fondo-de-botones: rgba(79, 12, 34, 0.776);
    --sidebar-color: #1a0505;
    --fondo-de-los-locales-color: #f9edf0;
    --h2--color: #AA3415;
    --h3--color: #D58936;
    --h4--color: #571A13;
    --p--color: #231919;
    background-color: var(--bg-color);
}

body, div, a, ul, li, h1, h2, h3, h4 { margin: 0; padding: 0; }

/* ============================================
   NAVBAR FIJO
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 56px;
    background: #1a0505;
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

/* Partículas doradas dentro del navbar */
.navbar__particulas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    clip-path: inset(0);
    overflow: hidden;
}
.navbar__particulas span {
    position: absolute;
    bottom: -4px;
    width: 2px;
    height: 2px;
    background: #C9A84C;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(201, 168, 76, 1), 0 0 14px rgba(201, 168, 76, 0.8), 0 0 22px rgba(255, 220, 140, 0.5);
    animation: navbar-flotar 8s linear infinite;
    opacity: 0;
}
.navbar__particulas span:nth-child(1)  { left:  5%; animation-delay: 0s;    animation-duration:  7s; width: 3px; height: 3px; }
.navbar__particulas span:nth-child(2)  { left: 14%; animation-delay: 1.5s;  animation-duration:  9s; }
.navbar__particulas span:nth-child(3)  { left: 24%; animation-delay: 3s;    animation-duration:  8s; width: 3px; height: 3px; }
.navbar__particulas span:nth-child(4)  { left: 35%; animation-delay: 0.8s;  animation-duration: 10s; }
.navbar__particulas span:nth-child(5)  { left: 46%; animation-delay: 2.5s;  animation-duration:  7s; }
.navbar__particulas span:nth-child(6)  { left: 57%; animation-delay: 4s;    animation-duration:  9s; width: 3px; height: 3px; }
.navbar__particulas span:nth-child(7)  { left: 66%; animation-delay: 1s;    animation-duration:  8s; }
.navbar__particulas span:nth-child(8)  { left: 75%; animation-delay: 3.5s;  animation-duration: 10s; }
.navbar__particulas span:nth-child(9)  { left: 84%; animation-delay: 0.3s;  animation-duration:  7s; width: 3px; height: 3px; }
.navbar__particulas span:nth-child(10) { left: 93%; animation-delay: 2s;    animation-duration:  9s; }

@keyframes navbar-flotar {
    0%   { transform: translateY(0)    translateX(0)   scale(0.5); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translateY(-30px) translateX(4px) scale(1);   opacity: 0.9; }
    90%  { opacity: 0.4; }
    100% { transform: translateY(-60px) translateX(-4px) scale(0.3); opacity: 0; }
}

/* Botón contacto en navbar — solo visible en móvil */
.navbar__contacto-btn {
    display: none;
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    background: none;
    border: none;
    color: #C9A84C;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.navbar__contacto-btn .material-symbols-outlined { font-size: 28px; }

.navbar__buscar-btn {
    display: none;
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    background: none;
    border: none;
    color: #C9A84C;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
}
.navbar__buscar-btn .material-symbols-outlined { font-size: 26px; }


.navbar__brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.navbar__logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.navbar__nombre {
    margin: 0;
    font-family: CRIS;
    font-style: italic;
    font-size: 18px;
    background: linear-gradient(135deg, #f5d078 0%, #e8a820 40%, #f7e099 65%, #c8860a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 3px rgba(200,134,10,0.45));
    white-space: nowrap;
}

.navbar__nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.navbar__item .material-symbols-outlined {
    font-size: 18px;
}

.navbar__item:hover {
    background: rgba(201, 168, 76, 0.12);
    color: #C9A84C;
}

.navbar__item--activo {
    background: rgba(201, 168, 76, 0.15);
    color: #C9A84C;
}

h1 { text-align: center; font-family: CRIS; }

/* ============================================
   CONTACTO FLOTANTE — Botón desplegable
   ============================================ */
.contact-zone {
    position: fixed;
    bottom: 16px;
    right: 20px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Botón principal */
.contact-zone__toggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #1a0505;
    border: 2px solid #C9A84C;
    color: #C9A84C;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(201, 168, 76, 0.4);
    animation: pulso-contacto 2.5s ease-in-out infinite;
    transition: background 0.2s;
    z-index: 1;
}
.contact-zone__toggle:hover { background: #2e0808; }
.contact-zone__toggle .material-symbols-outlined { font-size: 24px; }

@keyframes pulso-contacto {
    0%, 100% { box-shadow: 0 0 10px rgba(201,168,76,0.4); }
    50%       { box-shadow: 0 0 22px rgba(201,168,76,0.8), 0 0 36px rgba(201,168,76,0.3); }
}

/* Botones hijos */
.contact-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.contact-zone.abierto .contact-buttons {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.contact-link {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1a0505;
    border: 2px solid #C9A84C;
    color: #C9A84C;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.contact-link:hover { background: #2e0808; transform: scale(1.1); }
.contact-link .material-symbols-outlined { font-size: 22px; }

/* Tooltip al lado */
.contact-link::before {
    content: attr(data-label);
    position: absolute;
    right: 58px;
    background: #1a0505;
    border: 1px solid rgba(201,168,76,0.4);
    color: #C9A84C;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.contact-link:hover::before { opacity: 1; }

.text_redes { display: none; }
.contact-title { display: none; }

/* Selector de idioma en navbar */
.navbar__lang {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-left: 6px;
}
.navbar__lang-toggle {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: #C9A84C;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
}
.navbar__lang-toggle:hover { opacity: 0.8; }
.navbar__lang-toggle .material-symbols-outlined { font-size: 26px; }

.navbar__lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1a0505;
    border: 1.5px solid #C9A84C;
    border-radius: 12px;
    overflow: hidden;
    min-width: 150px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    display: none;
    flex-direction: column;
}
.navbar__lang.abierto .navbar__lang-menu { display: flex; }
.navbar__lang-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #C9A84C;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.navbar__lang-opcion:hover { background: rgba(201,168,76,0.12); }
.navbar__lang-opcion--activo { background: rgba(201,168,76,0.18); }
.navbar__lang-opcion + .navbar__lang-opcion { border-top: 1px solid rgba(201,168,76,0.2); }

.contact-zone__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background: #1a0505;
    border: 1px solid rgba(201,168,76,0.5);
    border-radius: 20px;
    padding: 5px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* ============================================
   LAYOUT
   ============================================ */
.content-wrapper {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: calc(100dvh - 56px);
    margin-top: 56px;
    overflow: hidden;
    position: relative;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    background-color: var(--sidebar-color);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 70px;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 0;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 100;
}

/* Espacio fijo que ocupa la sidebar en el layout (no se mueve nunca)
   Usa el ancho expandido para que las tarjetas nunca queden tapadas */
.sidebar-placeholder {
    width: clamp(180px, 18vw, 260px);
    flex-shrink: 0;
    height: 100%;
}

.sidebar:hover { width: clamp(180px, 18vw, 260px); }
.sidebar__form { position: absolute; display: none; }

.sidebar__picture {
    display: flex;
    justify-content: center;
    padding: 0 10px;
    overflow: hidden;
}

.sidebar__picture .rosas {
    width: 48px;
    transition: width 0.3s ease;
    opacity: .87;
    filter: hue-rotate(-30deg);
    flex-shrink: 0;
}

.sidebar:hover .sidebar__picture .rosas { width: clamp(80px, 60%, 160px); }
.sidebar__nav { flex: 1; display: flex; }

.sidebar__nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    gap: 4px;
}

.sidebar__item {
    list-style: none;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: .85rem;
    color: var(--dark-color2);
    border-radius: 36px 0 0 36px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    padding: 2px 0;
}

.sidebar__item a {
    color: inherit;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
    pointer-events: none;
}

.sidebar:hover .sidebar__item a { opacity: 1; pointer-events: auto; }

.sidebar__item span {
    /* Vertical reducido para que quepan más categorías en laptops.
       El horizontal se mantiene en 12px para no mover la alineación. */
    padding: 7px 12px;
    font-size: 1.8rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sidebar__item { cursor: pointer; }
.sidebar__item:hover { background-color: #42151535; }

/* Item activo: solo resalta el ícono (y el texto en negrita al expandir).
   No fuerza el texto visible cuando el sidebar está colapsado. */
.sidebar__item--activo span { color: var(--text-color); }
.sidebar__item--activo a { color: var(--text-color); font-weight: 700; }
.sidebar__item:hover span { transform: scale(1.15); }
.sidebar__item:hover a,
.sidebar__item:hover span { color: #efe3e3 !important; }

.sidebar__item::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 70px;
    background-color: var(--h4--color);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 40;
}

.sidebar__item:hover::before { opacity: 1; }
.sidebar:hover .sidebar__item::before { opacity: 0; }

.sidebar__item::after {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    height: 18px;
    background-color: transparent;
}

.sidebar__item:hover::after {
    bottom: -18px;
    border-top-right-radius: 25px;
    box-shadow: 4px -4px 0 4px var(--bg-color);
}

/* ============================================
   BUSCADOR (estilo Instagram)
   ============================================ */
.buscador {
    position: fixed;
    top: 56px;
    left: 70px;                  /* abierto: justo a la derecha del sidebar (no lo tapa) */
    width: 400px;
    max-width: calc(100vw - 70px);
    height: 100dvh;
    background-color: #000;      /* negro puro, look Instagram */
    color: #fff;
    z-index: 50;                 /* ARRIBA del backdrop (importante para clicks)
                                    DEBAJO del sidebar (z-60) */
    /* Cerrado: completamente fuera de pantalla (incluye los 70px del sidebar) */
    transform: translateX(calc(-100% - 70px));
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
    display: flex;
    flex-direction: column;
    border-radius: 0 18px 18px 0;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.buscador.activo {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s ease, visibility 0s linear 0s;
}

.buscador__cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buscador__cerrar:hover { background-color: rgba(255, 255, 255, 0.1); }
.buscador__cerrar span { font-size: 22px; color: #fff; }

.buscador__titulo {
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    margin: 32px 24px 22px;
}

.buscador__input-wrap {
    margin: 0 24px 18px;
    background-color: #262626;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.buscador__input-icono { color: #737373; font-size: 18px; }
.buscador__input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    min-width: 0;
}
.buscador__input::placeholder { color: #737373; }

.buscador__limpiar {
    background: rgba(255, 255, 255, 0.5);
    border: none;
    color: #000;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}
.buscador__limpiar.visible { display: flex; }
.buscador__limpiar span { font-size: 14px; color: #000; }

.buscador__seccion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px 6px;
}
.buscador__seccion-titulo {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.buscador__borrar-todo {
    background: none;
    border: none;
    color: #1976d2;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
}
.buscador__borrar-todo:hover { color: #2196f3; }

.buscador__lista,
.buscador__resultados {
    overflow-y: auto;
    flex: 1;
}
.buscador__resultados { display: none; }

.buscador__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
    cursor: pointer;
    transition: background-color 0.15s;
}
.buscador__item:hover,
.buscador__item--seleccionado { background-color: rgba(255, 255, 255, 0.08); }

/* Resaltado de la parte del nombre que coincide con la búsqueda */
.buscador__item-nombre mark {
    background-color: transparent;
    color: #ff9b3f;
    font-weight: 800;
    padding: 0;
}

/* Contador de resultados arriba de la lista */
.buscador__contador {
    color: #737373;
    font-size: 0.75rem;
    padding: 8px 24px 4px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.buscador__item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #000;
    flex-shrink: 0;
}
.buscador__item-avatar--icono {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #262626;
}
.buscador__item-avatar--icono span { font-size: 22px; color: #fff; }

.buscador__item-info { flex: 1; min-width: 0; }
.buscador__item-nombre {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.buscador__item-tipo {
    color: #a8a8a8;
    font-size: 0.75rem;
    margin: 2px 0 0;
}
.buscador__item-texto {
    flex: 1;
    color: #fff;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    min-width: 0;
}

.buscador__item-x {
    background: none;
    border: none;
    color: #a8a8a8;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.buscador__item-x:hover { color: #fff; background-color: rgba(255, 255, 255, 0.05); }
.buscador__item-x span { font-size: 18px; }

.buscador__vacio {
    text-align: center;
    color: #737373;
    padding: 30px 20px;
    font-size: 0.9rem;
    display: none;
}

/* Fondo oscuro detrás del panel — z-index BAJO para no tapar el panel ni sus clicks */
.buscador__backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 40;                 /* DEBAJO del panel (z-50) y del sidebar (z-60) */
    pointer-events: none;
    transition: background-color 0.3s;
}
.buscador__backdrop.activo {
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

/* Buscador abierto DENTRO de un detalle (z-80): sube por encima para que
   el detalle se quede visible de fondo, no la cuadrícula de tarjetas. */
.buscador.sobre-detalle { z-index: 100; }
.buscador__backdrop.sobre-detalle { z-index: 90; }

/* Cuando el buscador está abierto, el sidebar NO se expande al hover */
.sidebar.con-buscador:hover { width: 70px; }
.sidebar.con-buscador:hover .sidebar__picture .rosas { width: 48px; }
.sidebar.con-buscador:hover .sidebar__item a { opacity: 0; pointer-events: none; }


/* ============================================
   SKELETON SCREEN (mientras las imágenes cargan)
   ============================================ */
/* La imagen muestra un fondo oscuro con shimmer mientras descarga.
   Cuando termina de cargar, JS quita la clase y el contenido de la imagen
   tapa el fondo automáticamente. Da sensación de carga rápida. */
img.img-cargando {
    background-color: #1f1f1f;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.13) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ============================================
   VISTAS (LOCALES / EQUIPOS Y SONIDOS)
   ============================================ */
/* Contenedor principal de vistas */
main.locales {
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.vista {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.vista--activa { display: block; }

/* ============================================
   GRID DE LOCALES
   ============================================ */
.locales__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 360px));
    gap: 4px;
    padding: 8px;
    background-color: var(--bg-color);
}

/* Sólo en Equipos y Sonidos: 3 columnas fijas con cards del mismo tamaño
   que las de Locales (~440px), dejando el espacio vacío a la derecha como
   pide el diseño. Locales no se ve afectado. */
.vista[data-vista="equipos"] .locales__grid {
    grid-template-columns: repeat(3, minmax(280px, 360px));
}
.vista[data-vista="catering"] .locales__grid {
    grid-template-columns: repeat(3, minmax(280px, 360px));
}

/* TABLETS (iPad Air, Pro portrait, Surface, etc.): 2 columnas para no
   desbordar — entre el móvil (1 col) y el escritorio (3 col) */
@media (min-width: 769px) and (max-width: 1100px) {
    .locales__grid,
    .vista[data-vista="equipos"] .locales__grid,
    .vista[data-vista="catering"] .locales__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.locales__card {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
}

.locales__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, opacity 1.2s ease;
}

.locales__card:hover img { transform: scale(1.04); }

.locales__card .slide-next {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease;
    z-index: 1;
    pointer-events: none;
}
.locales__card .slide-next.visible { opacity: 1; }


.locales__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.locales__card:hover .locales__card-overlay { opacity: 1; }

.locales__card-nombre {
    color: #fff;
    font-family: CRIS;
    font-size: 1.1rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* ============================================
   OVERLAY TIPO INSTAGRAM
   ============================================ */
.local__overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.92);
    z-index: 110;
    display: none;
    align-items: center;
    justify-content: center;
}

.local__overlay.activo { display: flex; }

.local__overlay-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 75;
}

.local__overlay-close span { color: #fff; font-size: 2rem; }

.local__overlay-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 75;
    transition: background 0.2s;
}

.local__overlay-nav:hover { background: rgba(255,255,255,0.3); }
.local__overlay-nav span { color: #fff; font-size: 1.8rem; }
.local__overlay-nav--prev { left: 16px; }
.local__overlay-nav--next { right: 16px; }
.local__overlay-nav[disabled] { opacity: 0; pointer-events: none; }

.local__overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 500px;
    width: 90%;
}

.local__overlay-img-container {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
}

.local__overlay-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.local__overlay-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.local__overlay-info h2 {
    color: #fff;
    font-family: CRIS;
    font-size: 1.8rem;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.local__overlay-ver-mas {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--h2--color);
    color: #fff;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.local__overlay-ver-mas:hover {
    background-color: var(--fondo-de-botones);
    transform: scale(1.03);
}

.local__overlay-ver-mas span { font-size: 1.2rem; color: #fff; }

/* ============================================
   DETALLE COMPLETO
   ============================================ */
.local__detalle {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.88);
    z-index: 80;
    display: none;
    overflow: hidden;
}

.local__detalle.activo { display: block; }

.local__detalle-close {
    position: fixed;
    top: 65px;
    left: 82px; /* después del sidebar de 70px */
    background: var(--fondo-de-botones);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
    transition: background 0.2s;
}

.local__detalle-close:hover { background: var(--h2--color); }
.local__detalle-close span { color: #fff; font-size: 1.4rem; }

/* Ocultar flechas del overlay en todas las secciones */
.local__overlay-nav { display: none; }

/* Flechas de navegación en el detalle */
.local__detalle-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    border: 1.5px solid rgba(201,168,76,0.5);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
    transition: background 0.2s;
}
.local__detalle-nav:hover { background: rgba(201,168,76,0.25); }
.local__detalle-nav span { color: #fff; font-size: 1.8rem; }
.local__detalle-nav--prev { left: 82px; } /* 70px sidebar + 12px margen */
.local__detalle-nav--next { right: 12px; }

@media (max-width: 768px) {
    .local__detalle-nav--prev { left: 8px; }
    .local__detalle-close { left: 12px; }
    /* Ocultar flechas prev/next empresa que flotan sobre la foto */
    .local__detalle-nav { display: none !important; }
}
.local__detalle-nav[disabled] { opacity: 0.25; pointer-events: none; }

/* ============================================
   CARRUSEL DE FOTOS INTERNO
   ============================================ */
.locales__img-container.carrusel {
    height: 500px;
    min-height: 300px;
}

.carrusel {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.carrusel__track-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;             /* indica que se puede arrastrar */
    user-select: none;        /* evita seleccionar texto al arrastrar */
    touch-action: pan-y;      /* permite scroll vertical, captura swipe horizontal */
}
.carrusel__track-container:active { cursor: grabbing; }

.carrusel__track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    list-style: none;
    height: 100%;
}

.carrusel__slide { min-width: 100%; height: 100%; }

.carrusel__slide img,
.carrusel__slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Los videos (reels verticales) se muestran completos sobre fondo negro */
.carrusel__slide--video { background-color: #000; }
.carrusel__slide--video video { object-fit: contain; }

/* Estado de error en videos: si no se puede cargar, mostramos un overlay con
   un mensaje claro en lugar de un cuadro negro vacío. */
.video-tiktok.video-error::before {
    content: '⚠  Video no disponible';
    position: absolute;
    inset: 0;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    padding: 20px;
    z-index: 10;
}
.video-tiktok.video-error video,
.video-tiktok.video-error .video-tiktok__playbtn,
.video-tiktok.video-error .video-tiktok__progress { opacity: 0.3; pointer-events: none; }

/* Slide que muestra solo el LOGO del local (ej: local sin fotos todavía).
   El logo se ve completo y centrado sobre fondo negro. */
.carrusel__slide--logo {
    background-color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carrusel__slide--logo img {
    object-fit: contain !important;
    padding: 8%;
    max-width: 100%;
    max-height: 100%;
}

/* ============================================
   PLAYER ESTILO TIKTOK (videos del carrusel)
   ============================================ */
.video-tiktok {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
}
.video-tiktok video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

/* Botón "más" arriba a la derecha */
.video-tiktok__more {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: background-color 0.2s;
}
.video-tiktok__more:hover { background-color: rgba(0, 0, 0, 0.8); }
.video-tiktok__more--active { background-color: rgba(180, 30, 50, 0.85) !important; }
.video-tiktok__more span { font-size: 22px; color: #fff; }

/* Menú desplegable del botón "..." */
.video-tiktok__menu {
    display: none;
    position: absolute;
    top: 52px;
    right: 10px;
    background: rgba(22, 22, 22, 0.97);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    z-index: 10;
    min-width: 240px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.7);
    animation: menuFadeIn 0.15s ease;
}
.video-tiktok__menu--open { display: block; }
@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.video-tiktok__menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.video-tiktok__menu-item:last-child { border-bottom: none; }
.video-tiktok__menu-item:hover { background: rgba(255,255,255,0.07); }
.video-tiktok__menu-item .material-symbols-outlined { font-size: 18px; color: #bbb; flex-shrink: 0; }
.video-tiktok__menu-logo { display: none; }

/* Toggle switch "Pasar automáticamente" */
.video-tiktok__toggle {
    margin-left: auto;
    width: 38px;
    height: 22px;
    background: rgba(255,255,255,0.2);
    border-radius: 11px;
    position: relative;
    transition: background 0.25s;
    flex-shrink: 0;
}
.video-tiktok__toggle--on { background: #e02a2a; }
.video-tiktok__toggle-knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.25s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.video-tiktok__toggle--on .video-tiktok__toggle-knob { left: 19px; }

/* Contenedor del control de volumen (mute + slider) arriba a la izquierda */
.video-tiktok__volume {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    height: 38px;
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 24px;
    transition: background-color 0.2s, padding-right 0.25s ease;
}
.video-tiktok__volume:hover,
.video-tiktok__volume.activo { background-color: rgba(0, 0, 0, 0.8); padding-right: 12px; }

.video-tiktok__mute {
    background: transparent;
    color: #fff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.video-tiktok__mute span { font-size: 22px; color: #fff; }

/* Slider de volumen: oculto por defecto, aparece al hacer hover sobre el área
   del volumen (mute + slider). También permanece visible mientras se arrastra
   gracias a la clase .activo que agrega el JS. */
.video-tiktok__vol-slider {
    width: 0;
    overflow: hidden;
    margin-left: 0;
    transition: width 0.25s ease, margin-left 0.25s ease;
    display: flex;
    align-items: center;
}
.video-tiktok__volume:hover .video-tiktok__vol-slider,
.video-tiktok__volume.activo .video-tiktok__vol-slider {
    width: 80px;
    margin-left: 6px;
}

.video-tiktok__vol-track {
    width: 80px;
    height: 14px;                 /* área clickeable más grande, fácil de agarrar */
    background: transparent;
    position: relative;
    cursor: pointer;
    touch-action: none;
}
/* Barra visible (dentro del área clickeable, centrada vertical) */
.video-tiktok__vol-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    pointer-events: none;
}

.video-tiktok__vol-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: #fff;
    border-radius: 2px;
    pointer-events: none;
}
.video-tiktok__vol-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

/* Botón central de play/pausa (solo visible en pausa) */
.video-tiktok__playbtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: opacity 0.2s, transform 0.2s;
}
.video-tiktok__playbtn span { font-size: 44px; color: #fff; }
.video-tiktok.reproduciendo .video-tiktok__playbtn { opacity: 0; pointer-events: none; }

/* Barra de progreso roja al fondo (clickeable y arrastrable) */
.video-tiktok__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 14px;            /* área clickeable más grande para facilitar el seek */
    background: transparent;
    z-index: 4;
    cursor: pointer;
    touch-action: none;       /* evita scroll en móvil al arrastrar */
}

/* Línea de fondo (track) — visible solo en la parte baja del área */
.video-tiktok__progress::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.22);
    transition: height 0.15s ease;
    pointer-events: none;
}

/* Barra roja con la posición actual */
.video-tiktok__progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(to right, #ff2d55, #ff5e3a);
    transition: width 0.1s linear, height 0.15s ease;
    pointer-events: none;
}

/* Hover / arrastre: la barra se engrosa */
.video-tiktok__progress:hover::before,
.video-tiktok__progress.activo::before,
.video-tiktok__progress:hover .video-tiktok__progress-bar,
.video-tiktok__progress.activo .video-tiktok__progress-bar { height: 6px; }

/* Círculo arrastrable (thumb) en el extremo de la parte roja */
.video-tiktok__progress-bar::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
    transform: scale(0);
    transition: transform 0.15s ease;
    pointer-events: none;
}
.video-tiktok__progress:hover .video-tiktok__progress-bar::after,
.video-tiktok__progress.activo .video-tiktok__progress-bar::after { transform: scale(1); }

/* Subo los dots del carrusel cuando contiene videos, para que no choquen
   con el área clickeable de la barra de progreso */
.carrusel:has(.carrusel__slide--video) .carrusel__dots { bottom: 22px; }

.carrusel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    pointer-events: auto;
}

.carrusel__btn:hover {
    background-color: var(--fondo-de-botones);
    transform: translateY(-50%) scale(1.1);
}

.carrusel__btn span { color: var(--h2--color); font-size: 1.1rem; }
.carrusel__btn:hover span { color: #fff; }
.carrusel__btn--prev { left: 8px; }
.carrusel__btn--next { right: 8px; }
.carrusel__btn--prev[disabled] { opacity: 0; pointer-events: none; }

/* Viewport: ventana que muestra MÁX. 5 dots (estilo Instagram).
   width se ajusta por JS según cuántos dots visibles. */
.carrusel__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    height: 12px;
    overflow: hidden;
    z-index: 3;
    pointer-events: auto;
}

/* Track interno: contiene TODOS los dots y se desliza con translateX */
.carrusel__dots-track {
    display: flex;
    align-items: center;
    height: 100%;
    transition: transform 0.3s ease;
}

/* Slot fijo de 12px por dot. El círculo visible va en ::after y cambia de tamaño. */
.carrusel__dot {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.carrusel__dot::after {
    content: '';
    display: block;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.6);
    width: 6px;
    height: 6px;
    transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.carrusel__dot--active::after {
    width: 8px;
    height: 8px;
    background-color: var(--dark-color2);
}

.carrusel__dot--medium::after {
    width: 6px;
    height: 6px;
}

.carrusel__dot--small::after {
    width: 4px;
    height: 4px;
}

.carrusel__dot--tiny::after {
    width: 3px;
    height: 3px;
    opacity: 0.7;
}

/* ============================================
   INFORMACIÓN DEL LOCAL
   ============================================ */
.locales__data-container {
    max-width: 100%;
    min-width: 320px;
    padding: 12px;
    position: relative;   /* necesario para posicionar el botón "compartir" */
}

.locales__data-container h2 {
    font-size: 3rem;
    color: var(--h2--color);
    text-align: center;
    font-family: CRIS;
    text-shadow: 0px 2px 6px rgba(0,0,0,0.3);
}

.locales__data-container h3 {
    color: var(--h3--color);
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    padding-bottom: 5px;
}

.locales__data-container h4 { color: var(--h4--color); font-size: 1rem; font-weight: 700; }
.locales__data-container p { color: var(--p--color); }

.locales__skill {
    list-style: none;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 4px 10px;
    margin: 8px 0;
    align-items: baseline;
}

.locales__skill .load-bar { grid-column: 2; }
.load-bar { border: none; background: none; padding: 0; margin: 4px 0; width: 100%; }

.contact-machupichu {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--h2--color);
    color: #ffffff;
    text-decoration: none;
    padding: 8px 15px;
    border: 2px solid #000;
    border-radius: 10px;
    font-weight: bold;
    width: fit-content;
    transition: transform 0.2s, background-color 0.2s;
    cursor: pointer;
    pointer-events: auto;
}

.contact-machupichu:hover { background-color: var(--sidebar-color); transform: scale(1.02); }
.contact-machupichu span { color: white; }
.text_redes-locales { font-size: 0.9rem; }

/* Botón WhatsApp — color verde oficial de la marca */
/* Botón llamar — azul marino del logo */
a[href^="tel:"].contact-machupichu {
    background: linear-gradient(135deg, #1a2e4a, #0d1e33) !important;
    border: none !important;
}
a[href^="tel:"].contact-machupichu:hover { background: linear-gradient(135deg, #243d60, #1a2e4a) !important; }

/* Mobile pill — llamar */
@media (max-width: 768px) {
    .locales__skill a[href^="tel:"].contact-machupichu {
        background: linear-gradient(135deg, #1a2e4a, #0d1e33) !important;
    }
}

.contact-whatsapp {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #25D366;       /* verde oficial WhatsApp */
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    border: 2px solid #000;
    border-radius: 10px;
    font-weight: bold;
    width: fit-content;
    transition: transform 0.2s, background-color 0.2s;
    cursor: pointer;
    pointer-events: auto;
}
.contact-whatsapp:hover { background-color: #1ebd5a; transform: scale(1.02); }
.contact-whatsapp span { color: white; }

/* ============================================
   BOTONES DE REDES SOCIALES — diseño moderno
   ============================================
   Se aplica a los enlaces de Facebook/TikTok/Instagram/WhatsApp.
   El JS (reemplazarIconosRedes) añade .red-social y .red-social--<red>
   sobre el enlace para anular los estilos de .contact-machupichu/whatsapp. */
.red-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: none;
    border-radius: 14px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    cursor: pointer;
    width: fit-content;
    background-color: transparent;          /* anula el bg sólido heredado */
}

.red-social:hover {
    background-color: transparent;          /* mantiene el degradado en hover */
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/* Logo oficial circular dentro del botón */
.red-social__logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #fff;
    flex-shrink: 0;
    display: block;
}

.red-social .text_redes-locales {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Separación entre botones de redes (vía su contenedor .load-bar) */
.locales__skill .load-bar:has(.red-social) { margin: 0 0 12px 0; }

@media (max-width: 768px) {
    .locales__skill .load-bar:has(.red-social) { margin: 0 0 6px 0 !important; }
}

/* Degradados oficiales por red social (escritorio y móvil) */
.red-social--facebook  { background: linear-gradient(135deg, #1877F2, #0a5bc4); }
.red-social--messenger { background: linear-gradient(135deg, #0099FF, #A033FF 45%, #FF5280 75%, #FF7854); }
.red-social--tiktok    { background: linear-gradient(135deg, #010101, #2c2c2c); }

/* Facebook + Messenger uno al lado del otro */
.load-bar--par { display: flex; gap: 10px; align-items: stretch; }
.load-bar--par > a { flex: 1 1 0; min-width: 0; }
.red-social--whatsapp  { background: linear-gradient(135deg, #25D366, #128C7E); }
.red-social--instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.red-social--gmail     { background: linear-gradient(135deg, #ea4335, #c5221f); }
.red-social--hotmail   { background: linear-gradient(135deg, #0072C6, #0050a0); }
.red-social--youtube   { background: linear-gradient(135deg, #FF0000, #c40000); }
.red-social--maps      { background: linear-gradient(135deg, #4285F4, #34A853); }
.red-social--x         { background: linear-gradient(135deg, #000000, #1a1a1a); }
/* El logo de X es negro sobre blanco: se invierte para verse blanco sobre el botón negro */
.red-social--x .red-social__logo { filter: invert(1); }

/* ============================================
   BOTÓN ME GUSTA (corazón + contador estilo Instagram/TikTok)
   ============================================ */
.local__favorite-btn {
    background-color: rgba(0, 0, 0, 0.06);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 12px 0 9px;
    height: 36px;
    border-radius: 22px;            /* pill shape */
    transition: background-color 0.2s, transform 0.15s;
}
.local__favorite-btn:hover {
    background-color: rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}
.local__favorite-btn:active { transform: scale(0.92); }

.local__favorite-btn .material-symbols-outlined {
    font-size: 21px;
    color: var(--h2--color);
    transition: color 0.2s;
    line-height: 1;
}
.local__favorite-btn .local__like-count {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--h2--color);
    line-height: 1;
    transition: color 0.2s;
    min-width: 14px;
}

/* Estado: el usuario le dio like → corazón relleno rosa */
.local__favorite-btn--activo .material-symbols-outlined {
    color: #ff3366;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}

/* Versión grid: sobre cada card del listado */
.local__favorite-btn--grid {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 4;
}
.local__favorite-btn--grid:hover { background-color: rgba(0, 0, 0, 0.75); }
.local__favorite-btn--grid .material-symbols-outlined,
.local__favorite-btn--grid .local__like-count { color: #fff; }
.local__favorite-btn--grid.local__favorite-btn--activo .material-symbols-outlined { color: #ff4081; }
.local__favorite-btn--grid.local__favorite-btn--activo .local__like-count { color: #fff; }

/* Versión detalle: a la izquierda del botón compartir */
.local__favorite-btn--detalle {
    position: absolute;
    top: 12px;
    right: 60px;       /* a la izquierda del botón compartir */
    z-index: 5;
}

/* Animación de "latido" cuando se le da like */
.local__favorite-btn--latido {
    animation: latidoLike 0.6s ease-out;
}
@keyframes latidoLike {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.35); }
    50%      { transform: scale(0.9); }
    75%      { transform: scale(1.15); }
}


/* ============================================
   BOTÓN COMPARTIR LOCAL  (icono "tres puntos" estilo Instagram)
   ============================================ */
.local__share-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    background-color: rgba(0, 0, 0, 0.06);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background-color 0.2s, transform 0.15s;
}
.local__share-icon:hover {
    background-color: rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}
.local__share-icon:active { transform: scale(0.95); }
.local__share-icon span {
    font-size: 22px;
    color: var(--h2--color);
}

/* ============================================
   MODAL DE COMPARTIR (estilo TikTok)
   ============================================ */
/* ---- Bottom sheet overlay ---- */
.share-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 9000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.share-modal.activo {
    display: flex;
    animation: shareOverlayIn 0.25s ease-out;
}
@keyframes shareOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Panel que sube desde abajo ---- */
.share-modal__contenido {
    background-color: #1e1e1e;
    color: #fff;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 560px;
    padding: 10px 20px 32px;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
    animation: shareSlideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes shareSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* Barrita de arrastre (decorativa, estilo iOS/Android) */
.share-modal__contenido::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    margin: 0 auto 16px;
}

.share-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.share-modal__titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}
.share-modal__close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.share-modal__close:hover { background-color: rgba(255,255,255,0.2); }
.share-modal__close span { font-size: 22px; color: #fff; }

.share-modal__local {
    color: #a8a8a8;
    font-size: 0.85rem;
    margin: 0 0 20px;
    text-align: center;
}

.share-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 14px;
}

.share-modal__opcion {
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px;
    font-family: inherit;
    transition: transform 0.15s;
}
.share-modal__opcion:hover  { transform: translateY(-3px); }
.share-modal__opcion:active { transform: scale(0.93); }

.share-modal__icono {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
}
.share-modal__icono span { font-size: 26px; color: #fff; }

/* Logos reales: imagen ocupa todo el círculo */
.share-modal__icono--img {
    background: none;
    padding: 0;
}
.share-modal__icono--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Colores de marca para íconos sin imagen */
.share-modal__icono--copiar { background-color: #1f7eff; }
.share-modal__icono--nativo { background-color: #555; }

.share-modal__label {
    font-size: 0.78rem;
    color: #ccc;
    text-align: center;
}


/* ============================================
   TOAST (notificaciones rápidas)
   ============================================ */
.toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: #222;
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    font-weight: 500;
    font-size: 0.95rem;
}
.toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   BOTÓN CATERING
   ============================================ */
.catering-open-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    background-color: var(--h2--color);
    color: #fff;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    pointer-events: auto;
}

.catering-open-btn:hover { background-color: var(--sidebar-color); transform: scale(1.02); }
.catering-open-btn span { font-size: 1.2rem; }

/* ============================================
   MODAL CATERING
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: auto;
}

.modal-overlay.activo { display: flex; }

.modal {
    background-color: var(--fondo-de-los-locales-color);
    border-radius: 20px;
    padding: 30px;
    max-width: 900px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--h2--color);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.2s;
}

.modal__close:hover { background-color: var(--sidebar-color); }
.modal__close span { color: #fff; font-size: 1.2rem; }

.modal__titulo {
    font-family: CRIS;
    color: var(--h2--color);
    font-size: 2rem;
    text-align: center;
    margin-bottom: 4px;
}

.modal__subtitulo {
    text-align: center;
    color: var(--h4--color);
    font-size: 0.9rem;
    margin-bottom: 24px;
    opacity: 0.8;
}

.modal__paquetes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.modal__paquete {
    background-color: #fff;
    border-radius: 14px;
    padding: 18px;
    border: 2px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.2s;
}

.modal__paquete:hover { box-shadow: 0 4px 16px rgba(170,52,21,0.15); }
.modal__paquete--destacado { border: 2px solid var(--h2--color); position: relative; }

.modal__paquete--destacado::before {
    content: '⭐ Más popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--h2--color);
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.modal__paquete-header {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid rgba(0,0,0,0.07);
    padding-bottom: 10px;
}

.modal__paquete-header span { color: var(--h2--color); font-size: 1.5rem; }
.modal__paquete-header h3 { color: var(--h4--color); font-size: 1rem; font-weight: 700; }

.modal__lista { list-style: none; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.modal__lista li { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--p--color); }
.modal__lista li span { color: var(--h3--color); font-size: 1rem; flex-shrink: 0; }

.modal__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--h2--color);
    color: #fff;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: bold;
    border: 2px solid #000;
    transition: background-color 0.2s, transform 0.2s;
    margin-top: auto;
    pointer-events: auto;
}

.modal__btn:hover { background-color: var(--sidebar-color); transform: scale(1.02); }
.modal__btn span { color: #fff; font-size: 1rem; }

/* Display de precio (reemplaza al botón "Consultar precio") */
.modal__precio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--h2--color);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid #000;
    margin-top: auto;       /* empuja el precio al fondo de la tarjeta del paquete */
    line-height: 1.1;
}
.modal__precio-monto {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.modal__precio-unidad {
    font-size: 0.7rem;
    opacity: 0.95;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   DETALLE — MODAL CENTRADO TIPO INSTAGRAM
   ============================================ */

/* El slider sigue ocupando pantalla completa para que vw funcione */
.local__detalle .slider__track {
    display: flex;
    width: 100%;
    height: 100vh;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cada slide: pantalla completa, centra la tarjeta visualmente */
.local__detalle .locales__wrapper {
    min-width: 100vw;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    overflow: hidden;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

/* Tarjeta visual centrada: tamaño limitado, redondeada, con sombra */
.local__detalle .locales__card-wrapper {
    display: flex;
    flex-direction: row;
    width: min(1100px, 94vw);
    height: min(88vh, 820px);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    flex-shrink: 0;
}

.local__detalle .locales__img-container.carrusel {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    border-radius: 0;
    max-height: none;
    min-height: 0;
    flex: none;
}

.local__detalle .locales__img-container.carrusel img.locales__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.local__detalle .locales__data-container {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 40px 26px 20px;
    background-color: var(--fondo-de-los-locales-color);
    display: block;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    min-width: 0;
    flex: none;
}

.local__detalle .locales__data {
    width: 100%;
    padding: 0;
    max-width: none;
}

/* Título más compacto para evitar scroll */
.local__detalle .locales__data-container h2 { font-size: 2.2rem; }
.local__detalle .locales__data-container h3 { font-size: 1.1rem; margin-top: 12px; }
.local__detalle .locales__skill { margin: 4px 0; }

/* Sistema de comentarios */
.locales__comments { margin: 14px 0 16px; }

.locales__comments-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(201,168,76,0.1);
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #c9a84c;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.2s;
}
.locales__comments-toggle .material-symbols-outlined { font-size: 1rem; }
.locales__comments-toggle:hover { background: rgba(201,168,76,0.2); }

/* ── Panel de comentarios estilo Instagram/TikTok ── */
.locales__comments-backdrop {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
/* Solo oscurece y bloquea clicks en móvil (hoja inferior). En escritorio
   NO se oscurece ni bloquea nada, igual que en los Reels: solo aparece
   la tarjeta flotante y el resto de la ficha se puede seguir usando. */
@media (max-width: 768px) {
    .locales__comments-backdrop.visible { opacity: 1; pointer-events: auto; }
}

.locales__comments-panel {
    position: fixed;
    z-index: 9999;
    display: flex; flex-direction: column;
    background: #1c1c1e;
    overflow: hidden;
    pointer-events: none;
    transition: transform 0.38s cubic-bezier(0.32,0.72,0,1), opacity 0.3s;
}
.locales__comments-panel.visible { pointer-events: auto; }

/* Móvil/tablet: hoja inferior (como estaba) */
@media (max-width: 768px) {
    .locales__comments-panel {
        left: 0; right: 0; bottom: 0; margin: 0 auto;
        width: 100%; max-width: 500px;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .locales__comments-panel.visible { transform: translateY(0); }
}

/* Escritorio: tarjeta redonda flotando al costado de la información de la
   empresa (Redes/Facebook/etc), no sobre la foto. Como Reels: sin capa
   oscura, el resto de la ficha se sigue pudiendo usar. */
@media (min-width: 769px) {
    .locales__comments-panel {
        top: 26vh;
        left: 50%;
        width: 360px; max-width: min(400px, 46vw);
        height: 64vh; max-height: 620px;
        border-radius: 16px;
        box-shadow: 0 8px 40px rgba(0,0,0,0.6);
        transform: translateX(30px);
        opacity: 0;
    }
    .locales__comments-panel.visible { transform: translateX(0); opacity: 1; }
}

/* Header */
.lcp__header {
    display: flex; align-items: center; justify-content: center;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative; flex-shrink: 0;
}
.lcp__title {
    font-size: 0.95rem; font-weight: 700; color: #fff;
}
.lcp__close {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.6); display: flex; align-items: center;
    padding: 4px;
}
.lcp__close .material-symbols-outlined { font-size: 22px; }
.lcp__close:hover { color: #fff; }

/* Lista scrollable */
.lcp__list {
    flex: 1; overflow-y: auto; padding: 10px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.lcp__list::-webkit-scrollbar { width: 3px; }
.lcp__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.lcp__empty {
    text-align: center; padding: 24px 16px;
    color: rgba(255,255,255,0.45); font-size: 0.85rem;
}

/* Cada comentario */
.lcp__item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lcp__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lcp__avatar .material-symbols-outlined { font-size: 18px; color: rgba(255,255,255,0.5); }
.lcp__body { flex: 1; min-width: 0; }
.lcp__text { font-size: 0.85rem; color: #e0e0e0; line-height: 1.4; word-break: break-word; }
.lcp__meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.lcp__time { font-size: 0.72rem; color: rgba(255,255,255,0.35); }

.lcp__reply-btn {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: 0.72rem; color: rgba(255,255,255,0.45); font-weight: 600;
    display: inline;
}
.lcp__reply-btn:hover { color: #fff; }

.lcp__toggle-replies {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: 0.72rem; color: rgba(255,255,255,0.4);
    display: flex; align-items: center; gap: 6px; margin-top: 6px;
}
.lcp__toggle-line {
    display: inline-block; width: 20px; height: 1px;
    background: rgba(255,255,255,0.25); flex-shrink: 0;
}
.lcp__replies { padding-left: 8px; margin-top: 6px; }
.lcp__reply-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lcp__avatar--sm { width: 24px; height: 24px; }
.lcp__avatar--sm .material-symbols-outlined { font-size: 14px; }
.lcp__delete-reply {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: rgba(255,255,255,0.2); flex-shrink: 0;
    transition: color 0.2s;
}
.lcp__delete-reply .material-symbols-outlined { font-size: 13px; }
.lcp__delete-reply:hover { color: #e24b4a; }

.lcp__reply-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 14px; background: rgba(255,255,255,0.06);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.lcp__reply-label { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.lcp__reply-cancel {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.4); display: flex; align-items: center;
}
.lcp__reply-cancel .material-symbols-outlined { font-size: 18px; }
.lcp__actions {
    display: flex; flex-direction: column; align-items: center;
    justify-content: space-between;
    flex-shrink: 0; position: relative;
    align-self: stretch;
}
.lcp__like-btn {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: rgba(255,255,255,0.35); display: flex; flex-direction: row;
    align-items: center; gap: 4px; transition: color 0.2s; line-height: 1;
}
.lcp__like-btn .material-symbols-outlined { font-size: 16px; }
.lcp__like-btn:hover { color: #ff6b8a; }
.lcp__like-btn--activo { color: #ff3366 !important; }
.lcp__like-btn--activo .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}
.lcp__like-num { font-size: 10px; color: rgba(255,255,255,0.5); }
.lcp__menu-btn {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: rgba(255,255,255,0.3); display: flex; align-items: center;
    transition: color 0.2s;
}
.lcp__menu-btn .material-symbols-outlined { font-size: 18px; }
.lcp__menu-btn:hover { color: #fff; }

.lcp__dropdown {
    position: absolute; right: 0; top: 100%;
    background: #2c2c2e; border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    z-index: 10; min-width: 140px; overflow: hidden;
}
.lcp__dropdown-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 12px 16px;
    background: none; border: none; cursor: pointer;
    font-size: 0.88rem; color: #fff; text-align: left;
    transition: background 0.15s;
}
.lcp__dropdown-item .material-symbols-outlined { font-size: 18px; }
.lcp__dropdown-delete { color: #ff453a; }
.lcp__dropdown-item:hover { background: rgba(255,255,255,0.08); }

/* Input fijo abajo */
.lcp__form {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: #1c1c1e; flex-shrink: 0;
}
.lcp__input {
    flex: 1; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px; padding: 9px 16px;
    font-size: 0.88rem; color: #fff;
    outline: none; font-family: inherit;
    transition: border-color 0.2s;
}
.lcp__input::placeholder { color: rgba(255,255,255,0.4); }
.lcp__input:focus { border-color: rgba(201,168,76,0.6); }
.lcp__send {
    background: #c9a84c; border: none; border-radius: 50%;
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s;
}
.lcp__send .material-symbols-outlined { font-size: 20px; color: #1a1a1a; }
.lcp__send:hover { background: #b8962e; }

/* Nombre del autor del comentario */
.lcp__nombre {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px;
    word-break: break-word;
}

/* --- Perfil global (suscripción) dentro del panel de empresas --- */
.lcp__suscribir {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 14px 0;
    background: #1c1c1e;
    flex-shrink: 0;
}
.lcp__suscribir-txt {
    margin: 0 0 2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    text-align: center;
}
.lcp__form .lcp__identidad-foto { margin-right: 0; }

/* Valoración / reseña */
.locales__review {
    margin: 14px 0 16px;
}
.locales__review-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.locales__review-stars span.stars {
    color: #c9a84c;
    font-size: 1.1rem;
    letter-spacing: 2px;
}
.locales__review-stars span.score {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--h4--color);
}
.locales__review-quote {
    background: rgba(201,168,76,0.06);
    border-left: 3px solid #c9a84c;
    border-radius: 0 8px 8px 0;
    padding: 9px 14px;
    font-size: 0.85rem;
    color: var(--p--color);
    font-style: italic;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .locales__review { margin: 10px 0 12px; }
    .locales__review-quote { font-size: 0.8rem; padding: 8px 12px; }
}

/* Mini stats cards */
.locales__stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}
.locales__stat-card {
    flex: 1;
    min-width: 90px;
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.locales__stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--h2--color);
    line-height: 1.2;
}
.locales__stat-label {
    font-size: 0.72rem;
    color: var(--p--color);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
@media (max-width: 768px) {
    .locales__stats { gap: 8px; margin: 10px 0 12px; }
    .locales__stat-card { padding: 8px 10px; min-width: 80px; }
    .locales__stat-value { font-size: 1rem; }
}

/* Solo ocultar el FAB en escritorio cuando el detalle está abierto */
@media (min-width: 769px) {
    body:has(.local__detalle.activo) .contact-zone { display: none; }
}

/* Contenedor izquierdo: carrusel + barra de acciones apilados verticalmente */
.ig-left-panel {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.ig-left-panel .locales__img-container {
    flex: 1;
    width: 100% !important;
    height: calc(100% - 49px) !important;
}
@media (max-width: 768px) {
    .ig-left-panel {
        width: 100%;
        height: auto;
    }
    .ig-left-panel .locales__img-container {
        height: 55vw !important;
    }
}

/* Barra de acciones Instagram (desktop + móvil) */
.ig-action-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: #1a0505;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(201,168,76,0.2);
}
.ig-action-bar .local__favorite-btn--detalle,
.ig-action-bar .local__share-icon,
.ig-action-bar__comment {
    position: static !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #ffffff !important;
    padding: 0 !important;
    cursor: pointer;
    height: auto !important;
    border-radius: 0 !important;
}
.ig-action-bar .local__favorite-btn--detalle .material-symbols-outlined,
.ig-action-bar .local__share-icon .material-symbols-outlined,
.ig-action-bar__comment .material-symbols-outlined {
    font-size: 28px !important;
    color: #ffffff !important;
}
.ig-comment-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    min-width: 14px;
    line-height: 1;
}
.ig-action-bar .local__favorite-btn--detalle.local__favorite-btn--activo .material-symbols-outlined {
    color: #ff3366 !important;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24 !important;
}
.ig-action-bar .local__like-count {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}
/* Ocultar los botones originales del panel de datos (ya están en la barra) */
.local__detalle .locales__data-container .local__favorite-btn--detalle,
.local__detalle .locales__data-container .local__share-icon {
    display: none;
}

/* ============================================
   EMPRESAS (EQUIPOS Y SONIDOS): logo + videos
   ============================================ */
.empresa__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 0 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Logo circular estilo foto de perfil Instagram */
.empresa__logo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #000;
    /* Borde degradado dorado como Instagram */
    padding: 2px;
    background-image: linear-gradient(white, white),
                      linear-gradient(135deg, #C9A84C, #f5d98b, #C9A84C);
    background-origin: border-box;
    background-clip: content-box, border-box;
    border: 2.5px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.empresa__header h2 {
    font-size: 1.1rem !important;
    font-weight: 700;
    line-height: 1.2;
    color: var(--h2--color);
    margin: 0;
}

/* Card del grid que muestra el logo: fondo negro y logo completo (sin recorte) */
.empresa-card img { object-fit: contain; background-color: #000; }

/* Si la card abierta muestra un logo (empresa-card), el overlay también lo muestra completo */
.local__overlay-img-container img.overlay-logo {
    object-fit: contain;
    background-color: #000;
}

@media (max-width: 767px) {
    .local__detalle .locales__wrapper {
        align-items: flex-start;
    }
    .local__detalle .locales__card-wrapper {
        flex-direction: column;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        max-width: none;
        max-height: none;
        overflow: hidden;
    }
    /* ig-left-panel ocupa ancho completo en móvil */
    .local__detalle .ig-left-panel {
        width: 100% !important;
        height: auto !important;
        flex-shrink: 0;
    }
    .local__detalle .ig-left-panel .locales__img-container {
        width: 100% !important;
        height: 52vh !important;
        flex: none !important;
    }
    /* data-container llena el resto con scroll */
    .local__detalle .locales__data-container {
        width: 100%;
        flex: 1;
        height: auto;
        min-height: 0;
        overflow-y: auto;
        padding: 16px;
    }
    .local__detalle .locales__data-container h2 { font-size: 1.6rem; }
}


/* ============================================================
   MICROANIMACIONES EN HOVER  (pulido tipo Instagram/TikTok)
   ============================================================
   Pequeños movimientos sutiles que dan vida y feedback visual.
   Todo respeta @media (prefers-reduced-motion: reduce) al final. */

/* ---- Cards del grid: sombra al pasar el cursor ----
   NO usamos transform porque mover la card hacia arriba causa parpadeo:
   la card se aleja del cursor → hover termina → vuelve abajo → re-hover.
   Solo box-shadow da la sensación de elevación SIN mover el elemento. */
.locales__card {
    transition: box-shadow 0.3s ease;
}
.locales__card:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

/* ---- Flechas del carrusel: crecen suavemente ---- */
.carrusel__btn {
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.carrusel__btn:hover {
    transform: translateY(-50%) scale(1.15);
}
.carrusel__btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* ---- Items del sidebar: transición más fluida del ícono ---- */
.sidebar__item span,
.sidebar__item a {
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.25s ease;
}

/* ---- Botones de contacto (Facebook, TikTok, WhatsApp, etc.) ---- */
.contact-machupichu,
.contact-whatsapp {
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-machupichu:hover,
.contact-whatsapp:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ---- Corazón "me gusta": latido suave al pasar el cursor ---- */
.local__favorite-btn:hover .material-symbols-outlined {
    animation: latido-suave 0.6s ease-in-out;
}
@keyframes latido-suave {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.2); }
}

/* ---- Compartir: ícono rebota levemente al hover ---- */
.local__share-icon:hover .material-symbols-outlined {
    animation: bounce-share 0.45s ease-out;
}
@keyframes bounce-share {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* ---- Botón "Ver servicios principales": se eleva al hover ---- */
.catering-open-btn {
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.catering-open-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* ---- Items del buscador: aparecen con slide suave ---- */
.buscador__resultados .buscador__item {
    animation: slide-in 0.25s ease-out backwards;
}
.buscador__resultados .buscador__item:nth-child(1) { animation-delay: 0.02s; }
.buscador__resultados .buscador__item:nth-child(2) { animation-delay: 0.05s; }
.buscador__resultados .buscador__item:nth-child(3) { animation-delay: 0.08s; }
.buscador__resultados .buscador__item:nth-child(4) { animation-delay: 0.11s; }
.buscador__resultados .buscador__item:nth-child(5) { animation-delay: 0.14s; }
.buscador__resultados .buscador__item:nth-child(n+6) { animation-delay: 0.16s; }
@keyframes slide-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Input del buscador: glow al hacer focus ---- */
.buscador__input-wrap {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.buscador__input-wrap:focus-within {
    background-color: #2e2e2e;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

/* ---- Botones del modal de compartir (TikTok-style): pequeño bounce ---- */
.share-modal__opcion:hover .share-modal__icono {
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
.share-modal__icono {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================================
   Accesibilidad: si el usuario tiene activado "reducir movimiento"
   en su sistema, desactivamos las animaciones para no marearlo.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .locales__card,
    .carrusel__btn,
    .catering-open-btn,
    .contact-machupichu,
    .contact-whatsapp,
    .share-modal__icono,
    .buscador__input-wrap {
        transition: none !important;
    }
    .local__favorite-btn:hover .material-symbols-outlined,
    .local__share-icon:hover .material-symbols-outlined,
    .buscador__resultados .buscador__item {
        animation: none !important;
    }
    .locales__card:hover,
    .carrusel__btn:hover,
    .catering-open-btn:hover {
        transform: none !important;
    }
}


/* ============================================================
   SECCIÓN CATERING — Panel de información (tema dorado)
   Aplica automáticamente a TODAS las empresas de catering.
   NO modifica botones de redes, contacto ni mapa.
   ============================================================ */

/* Panel derecho — fondo oscuro azul con borde dorado */
.catering-vista .locales__data-container {
    background: linear-gradient(180deg, #0d1528 0%, #0a1020 100%);
    border: 0.5px solid rgba(255, 224, 138, 0.25);
    overflow-x: hidden;
}

.catering-vista .load-bar a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cabecera: logo circular dorado */
.catering-vista .empresa__logo {
    border: 2px solid #FFE08A;
    box-shadow: 0 0 10px rgba(255, 224, 138, 0.3);
}

/* Nombre de la empresa en dorado */
.catering-vista .empresa__header h2,
.catering-vista .locales__data-container h2 {
    color: #FFE08A;
}

/* Descripción */
.catering-vista .locales__description p {
    color: rgba(255, 255, 255, 0.85);
}

/* Separador bajo la cabecera */
.catering-vista .locales__description {
    border-bottom: 0.5px solid rgba(255, 224, 138, 0.15);
    padding-bottom: 14px;
    margin-bottom: 10px;
}

/* Título de sección "Información" */
.catering-vista .locales__skill-container h3 {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(255, 224, 138, 0.6);
    text-transform: uppercase;
    border-bottom: 0.5px solid rgba(255, 224, 138, 0.15);
}

/* Cada línea de dato: línea dorada vertical */
.catering-vista .locales__skill {
    border-left: 3px solid #FFE08A;
    padding: 8px 0 8px 14px;
    margin-bottom: 16px;
    background: transparent;
}

/* Etiquetas (HORARIO:, SERVICIOS:, UBICACIÓN:, REDES:, CONTACTO:) */
.catering-vista .locales__skill h4 {
    font-size: 10px;
    color: rgba(255, 224, 138, 0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* Valores de texto */
.catering-vista .locales__skill p {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
}

/* Títulos de sección (REDES SOCIALES, CONTACTO) — mismo estilo que etiquetas */
.catering-vista .locales__skill h4 {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(255, 224, 138, 0.6);
}

/* Chips de servicios */
.catering__servicios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0;
}
.catering__chip {
    background: rgba(255, 224, 138, 0.12);
    border: 0.5px solid rgba(255, 224, 138, 0.35);
    color: #FFE08A;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
}

/* Corazón / like y compartir en el detalle */
.catering-vista .local__favorite-btn .material-symbols-outlined,
.catering-vista .local__favorite-btn .local__like-count { color: #ffffff; }
.catering-vista .local__favorite-btn--activo .material-symbols-outlined { color: #ff4d4d; }
.catering-vista .local__share-icon span { color: #FFE08A; }

/* ============================================================
   SECCIÓN ARREGLOS FLORALES — Tema rosas rojas & crema
   ============================================================ */

.florales-vista {
    position: relative;
    min-height: 100%;
    background: transparent;
}
.florales-vista .local__overlay {
    background-image: url('plantillas_de_flores/plantilla4.png');
    background-size: cover;
    background-position: center;
    background-color: transparent;
}
.florales-vista .local__overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 0;
    pointer-events: none;
}
.florales-vista .local__overlay-content,
.florales-vista .local__overlay-close,
.florales-vista .local__overlay-nav {
    z-index: 1;
}
.florales-vista .locales__grid {
    background: transparent !important;
}
body[data-vista-activa="florales"] {
    background: url('plantillas_de_flores/plantilla1.png') center center / cover no-repeat fixed !important;
}
.florales-vista .locales__grid {
    padding-top: 16px;
}

/* Cards con borde rosa */
.florales-vista .locales__card {
    border: 1.5px solid rgba(180, 30, 50, 0.18);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(180,30,50,0.08);
    transition: box-shadow 0.2s, transform 0.2s;
}
.florales-vista .locales__card:hover {
    box-shadow: 0 6px 24px rgba(180,30,50,0.18);
    transform: translateY(-2px);
}

/* Nombre en las cards */
.florales-vista .locales__card-overlay {
    background: linear-gradient(0deg, rgba(100,0,20,0.82) 0%, transparent 100%);
}
.florales-vista .locales__card-nombre {
    color: #fff;
    font-family: Georgia, serif;
}

/* Panel derecho — fondo crema elegante con borde rosa */
.florales-vista .locales__data-container {
    background:
        linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.52)),
        url('plantillas_de_flores/plantilla3.png') top center / cover no-repeat;
    background-attachment: local, local;
    border-left: 1px solid rgba(180,30,50,0.12);
    position: relative;
}
.locales__data-container > * {
    position: relative;
    z-index: 1;
}
.florales-vista .locales__data-container::-webkit-scrollbar {
    width: 7px;
}
.florales-vista .locales__data-container::-webkit-scrollbar-track {
    background: #3b0010;
    border-radius: 4px;
}
.florales-vista .locales__data-container::-webkit-scrollbar-thumb {
    background: #d4748a;
    border-radius: 4px;
}
.florales-vista .locales__data-container::-webkit-scrollbar-thumb:hover {
    background: #e8a0b0;
}

/* Nombre empresa — blanco con sombra oscura fuerte para leerse sobre las rosas */
.florales-vista .empresa__header h2,
.florales-vista .locales__data-container h2 {
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 0 16px rgba(0,0,0,0.85), 1px 1px 0 rgba(0,0,0,0.9);
}

/* Logo circular con borde rojo/dorado */
.florales-vista .empresa__logo {
    background-image: linear-gradient(white, white),
                      linear-gradient(135deg, #b41e32, #e05070, #b41e32);
    box-shadow: 0 0 12px rgba(180,30,50,0.4);
}

/* Hojas esparcidas — set A (::before) lados izquierdo y centro.
   Aplica a TODAS las secciones (decoración, pointer-events: none). */
.locales__data-container::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M50,105 L48,78 C38,75 22,70 12,58 C20,54 30,54 37,60 C26,46 20,32 25,20 C33,26 37,36 38,46 C40,32 43,16 50,8 C57,16 60,32 62,46 C63,36 67,26 75,20 C80,32 74,46 63,60 C70,54 80,54 88,58 C78,70 62,75 52,78 Z' fill='%23F5921E' opacity='0.55'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 54'%3E%3Cpath d='M20,52 C6,40 4,22 20,4 C36,22 34,40 20,52Z' fill='%23E8501A' opacity='0.52'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M50,105 L48,78 C38,75 22,70 12,58 C20,54 30,54 37,60 C26,46 20,32 25,20 C33,26 37,36 38,46 C40,32 43,16 50,8 C57,16 60,32 62,46 C63,36 67,26 75,20 C80,32 74,46 63,60 C70,54 80,54 88,58 C78,70 62,75 52,78 Z' fill='%23D44A18' opacity='0.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 54'%3E%3Cpath d='M20,52 C6,40 4,22 20,4 C36,22 34,40 20,52Z' fill='%23F5B030' opacity='0.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M50,105 L48,78 C38,75 22,70 12,58 C20,54 30,54 37,60 C26,46 20,32 25,20 C33,26 37,36 38,46 C40,32 43,16 50,8 C57,16 60,32 62,46 C63,36 67,26 75,20 C80,32 74,46 63,60 C70,54 80,54 88,58 C78,70 62,75 52,78 Z' fill='%23C84A08' opacity='0.48'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 54'%3E%3Cpath d='M20,52 C6,40 4,22 20,4 C36,22 34,40 20,52Z' fill='%23A8A020' opacity='0.45'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M50,105 L48,78 C38,75 22,70 12,58 C20,54 30,54 37,60 C26,46 20,32 25,20 C33,26 37,36 38,46 C40,32 43,16 50,8 C57,16 60,32 62,46 C63,36 67,26 75,20 C80,32 74,46 63,60 C70,54 80,54 88,58 C78,70 62,75 52,78 Z' fill='%23E87018' opacity='0.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 54'%3E%3Cpath d='M20,52 C6,40 4,22 20,4 C36,22 34,40 20,52Z' fill='%23C89098' opacity='0.45'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 50px, 26px, 44px, 22px, 52px, 24px, 46px, 20px;
    background-position:
        2% 4%,   4% 38%,
        2% 62%,  5% 88%,
        48% 1%,  50% 72%,
        15% 48%, 35% 92%;
}

/* Hojas esparcidas — set B (::after) lados derecho y centro */
.locales__data-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M50,105 L48,78 C38,75 22,70 12,58 C20,54 30,54 37,60 C26,46 20,32 25,20 C33,26 37,36 38,46 C40,32 43,16 50,8 C57,16 60,32 62,46 C63,36 67,26 75,20 C80,32 74,46 63,60 C70,54 80,54 88,58 C78,70 62,75 52,78 Z' fill='%23F5A820' opacity='0.52'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 54'%3E%3Cpath d='M20,52 C6,40 4,22 20,4 C36,22 34,40 20,52Z' fill='%23D44A18' opacity='0.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M50,105 L48,78 C38,75 22,70 12,58 C20,54 30,54 37,60 C26,46 20,32 25,20 C33,26 37,36 38,46 C40,32 43,16 50,8 C57,16 60,32 62,46 C63,36 67,26 75,20 C80,32 74,46 63,60 C70,54 80,54 88,58 C78,70 62,75 52,78 Z' fill='%23E85018' opacity='0.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 54'%3E%3Cpath d='M20,52 C6,40 4,22 20,4 C36,22 34,40 20,52Z' fill='%23C84A08' opacity='0.48'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M50,105 L48,78 C38,75 22,70 12,58 C20,54 30,54 37,60 C26,46 20,32 25,20 C33,26 37,36 38,46 C40,32 43,16 50,8 C57,16 60,32 62,46 C63,36 67,26 75,20 C80,32 74,46 63,60 C70,54 80,54 88,58 C78,70 62,75 52,78 Z' fill='%23F5921E' opacity='0.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 54'%3E%3Cpath d='M20,52 C6,40 4,22 20,4 C36,22 34,40 20,52Z' fill='%23B04060' opacity='0.42'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpath d='M50,105 L48,78 C38,75 22,70 12,58 C20,54 30,54 37,60 C26,46 20,32 25,20 C33,26 37,36 38,46 C40,32 43,16 50,8 C57,16 60,32 62,46 C63,36 67,26 75,20 C80,32 74,46 63,60 C70,54 80,54 88,58 C78,70 62,75 52,78 Z' fill='%23D07018' opacity='0.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 54'%3E%3Cpath d='M20,52 C6,40 4,22 20,4 C36,22 34,40 20,52Z' fill='%23E8701A' opacity='0.48'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 48px, 24px, 54px, 22px, 46px, 26px, 50px, 20px;
    background-position:
        90% 2%,  88% 85%,
        94% 22%, 80% 35%,
        75% 10%, 92% 58%,
        65% 95%, 18% 12%;
}

/* Descripción */
.florales-vista .locales__description p {
    color: #f0e0e5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Separador */
.florales-vista .locales__description {
    border-bottom: 1px solid rgba(180,30,50,0.15);
    padding-bottom: 14px;
    margin-bottom: 10px;
}

/* Título sección info */
.florales-vista .locales__skill-container h3 {
    font-size: 10px;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
    border-bottom: 0.5px solid rgba(255,150,170,0.5);
    font-family: Georgia, serif;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    font-weight: 700;
}

/* Cada dato con línea roja lateral */
.florales-vista .locales__skill {
    border-left: 3px solid #b41e32;
    padding: 8px 0 8px 14px;
    margin-bottom: 16px;
}

/* Etiquetas */
.florales-vista .locales__skill h4 {
    font-size: 10px;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    font-weight: 700;
}

/* Valores */
.florales-vista .locales__skill p {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}



/* Íconos like y compartir */
.florales-vista .local__share-icon span { color: #b41e32; }

/* ig-action-bar en florales */
.florales-vista .ig-action-bar {
    background: linear-gradient(90deg, #3d0010, #1a0005) !important;
    border-bottom: 1px solid rgba(180,30,50,0.3) !important;
}

/* ============================================
   BOTÓN CATÁLOGO FLORAL — estilo moño
   ============================================ */
.florales__catalogo-btn {
    background: linear-gradient(145deg, #c0382a 0%, #8b1a12 60%, #6e1310 100%) !important;
    border-radius: 14px !important;
    padding: 11px 22px 11px 54px !important;
    position: relative !important;
    color: #fff !important;
    font-size: 0.97rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    gap: 0 !important;
    box-shadow:
        0 4px 14px rgba(0,0,0,0.45),
        inset 0 1px 2px rgba(255,255,255,0.18),
        inset 0 -2px 4px rgba(0,0,0,0.25) !important;
    border: none !important;
    width: fit-content !important;
    justify-content: center !important;
    cursor: pointer;
    transition: filter 0.2s, transform 0.15s !important;
}
.florales__catalogo-btn:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px) !important;
}
.florales__catalogo-btn:active {
    transform: translateY(0) !important;
    filter: brightness(0.95) !important;
}

/* Ocultar el ícono material */
.florales__catalogo-btn .material-symbols-outlined {
    display: none !important;
}

/* Moño blanco como decoración izquierda */
.florales__catalogo-btn::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 46'%3E%3C!-- Lazo izquierdo --%3E%3Cpath d='M30,23 Q14,4 5,10 Q-1,17 5,26 Q11,34 30,23Z' fill='%23ffffff' opacity='0.95'/%3E%3C!-- Sombra interior izquierdo --%3E%3Cpath d='M30,23 Q17,8 9,13 Q5,17 9,23 Q15,29 30,23Z' fill='rgba(160,80,80,0.25)'/%3E%3C!-- Lazo derecho --%3E%3Cpath d='M30,23 Q46,4 55,10 Q61,17 55,26 Q49,34 30,23Z' fill='%23ffffff' opacity='0.95'/%3E%3C!-- Sombra interior derecho --%3E%3Cpath d='M30,23 Q43,8 51,13 Q55,17 51,23 Q45,29 30,23Z' fill='rgba(160,80,80,0.25)'/%3E%3C!-- Nudo central --%3E%3Cellipse cx='30' cy='23' rx='6' ry='7' fill='%23ffffff'/%3E%3C!-- Brillo nudo --%3E%3Cellipse cx='28' cy='20' rx='2.5' ry='3' fill='rgba(255,255,255,0.55)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* ============================================
   FLORALES — RESPONSIVE MÓVIL
   ============================================ */
@media (max-width: 768px) {
    /* En móvil las flechas ↑↓ sobran: se pasa de video con el dedo. */
    .reels__nav { display: none !important; }

    /* Título en blanco (no dorado) para florales */
    .florales-vista .local__detalle .empresa__header h2 {
        color: #ffffff !important;
        text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 0 14px rgba(0,0,0,0.85) !important;
    }

    /* Header: fondo en rojo oscuro para mantener la identidad florales */
    .florales-vista .local__detalle .empresa__header {
        background: #1a0005 !important;
        border-bottom: 1px solid rgba(180,30,50,0.35) !important;
    }

    /* Botón catálogo: mantener color rojo igual que desktop */
    .florales__catalogo-btn {
        background: linear-gradient(145deg, #c0382a 0%, #8b1a12 60%, #6e1310 100%) !important;
        color: #fff !important;
        padding: 11px 22px 11px 54px !important;
    }
    .florales__catalogo-btn::before {
        display: block !important;
    }

    /* Reducir hojas en móvil para que no tapen el contenido */
    .locales__data-container::before {
        background-size: 32px, 16px, 28px, 14px, 34px, 15px, 30px, 13px;
    }
    .locales__data-container::after {
        background-size: 30px, 15px, 34px, 14px, 28px, 16px, 32px, 13px;
    }
}

/* ============================================
   MODAL CATÁLOGO FLORAL
   ============================================ */
.catalogo-modal {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    transition: visibility 0s linear 0.4s;
}
.catalogo-modal.activo {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}
/* Overlay fade */
.catalogo-modal__overlay {
    opacity: 0;
    transition: opacity 0.35s ease;
}
.catalogo-modal.activo .catalogo-modal__overlay {
    opacity: 1;
}
.catalogo-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(4px);
}
.catalogo-modal__contenido {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, #1a0008, #2a000e);
    border: 1px solid rgba(180,30,50,0.35);
    border-radius: 16px;
    width: min(700px, 92vw);
    height: min(600px, 88vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    transform: translateY(60px);
    opacity: 0;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.catalogo-modal.activo .catalogo-modal__contenido {
    transform: translateY(0);
    opacity: 1;
}
.catalogo-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(180,30,50,0.3);
    flex-shrink: 0;
}
.catalogo-modal__titulo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #F5921E;
}
.catalogo-modal__titulo-wrap .material-symbols-outlined {
    font-size: 22px;
}
.catalogo-modal__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    font-family: Georgia, serif;
}
.catalogo-modal__close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
    display: flex;
}
.catalogo-modal__close:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}
/* ---- Grid miniaturas catálogo ---- */
.catalogo-modal__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(220,80,100,0.7) transparent;
}
.catalogo-modal__grid::-webkit-scrollbar { width: 4px; }
.catalogo-modal__grid::-webkit-scrollbar-track { background: transparent; }
.catalogo-modal__grid::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #e05070, #b41e32);
    border-radius: 4px;
}
.catalogo-modal__grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}
.catalogo-modal__grid img:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(180,30,50,0.5);
    border-color: rgba(245,146,30,0.6);
}

/* ---- Carrusel catálogo ---- */
.cat-carrusel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.cat-carrusel__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px 4px;
    flex-shrink: 0;
}
.cat-volver {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}
.cat-volver:hover { background: rgba(255,255,255,0.08); color: #fff; }
.cat-volver .material-symbols-outlined { font-size: 18px; }
.cat-counter {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    font-family: Georgia, serif;
    white-space: nowrap;
}
.cat-carrusel__main {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
}
.cat-track-wrap {
    flex: 1;
    overflow: hidden;
    height: 100%;
}
.cat-track {
    display: flex;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    cursor: grab;
}
.cat-track:active { cursor: grabbing; }
.cat-slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}
.cat-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.cat-btn {
    flex-shrink: 0;
    background: rgba(255,255,255,0.10);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    z-index: 2;
    transition: background 0.2s;
    margin: 0 6px;
}
.cat-btn:hover:not(:disabled) { background: rgba(180,30,50,0.6); }
.cat-btn:disabled { opacity: 0.25; cursor: default; }
.cat-btn .material-symbols-outlined { font-size: 26px; }

/* Footer: dots estilo Instagram */
.cat-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 12px;
    flex-shrink: 0;
}
.cat-dots-viewport {
    overflow: hidden;
    height: 12px;
    display: flex;
    align-items: center;
    transition: width 0.25s ease;
}
.cat-dots-track {
    display: flex;
    align-items: center;
    height: 100%;
    transition: transform 0.25s ease;
}
.cat-dot {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.cat-dot::after {
    content: '';
    display: block;
    border-radius: 50%;
    width: 4px;
    height: 4px;
    background-color: rgba(255,255,255,0.35);
    transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}
.cat-dot--active::after  { width: 8px;  height: 8px;  background-color: #e02a2a; }
.cat-dot--medium::after  { width: 6px;  height: 6px;  background-color: rgba(255,255,255,0.5); }
.cat-dot--small::after   { width: 4px;  height: 4px;  background-color: rgba(255,255,255,0.35); }
.cat-dot--tiny::after    { width: 3px;  height: 3px;  background-color: rgba(255,255,255,0.25); opacity: 0.7; }

/* --- Catálogo: responsive móvil --- */
@media (max-width: 768px) {
    /* Bottom-sheet: sube desde abajo y ocupa casi toda la pantalla */
    .catalogo-modal {
        align-items: flex-end;
    }
    .catalogo-modal__contenido {
        width: 100vw;
        height: 88dvh;
        max-height: 88dvh;
        border-radius: 18px 18px 0 0;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        margin: 0;
        transform: translateY(100%);
        opacity: 1;
    }
    .catalogo-modal.activo .catalogo-modal__contenido {
        transform: translateY(0);
        opacity: 1;
    }
    .catalogo-modal__header {
        padding: 12px 16px;
    }
    .catalogo-modal__titulo { font-size: 0.9rem; }

    /* Grid 2 columnas en móvil */
    .catalogo-modal__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 10px;
    }

    /* Carrusel: botones más pequeños */
    .cat-btn { width: 32px; height: 32px; margin: 0 2px; }
    .cat-btn .material-symbols-outlined { font-size: 20px; }

    /* Foto ocupa toda la altura disponible */
    .cat-carrusel__main { min-height: 0; flex: 1; }
    .cat-slide { padding: 6px; }
    .cat-slide img { border-radius: 8px; }

    /* Footer compacto */
    .cat-footer { padding: 6px 12px 10px; }
    .cat-carrusel__topbar { padding: 4px 10px 2px; }
}

/* ============================================
   BARRA DE NAVEGACIÓN INFERIOR
   ============================================ */
.bottom-nav {
    display: none; /* oculta en escritorio */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #1a0505;
    border-top: 1px solid rgba(201, 168, 76, 0.2);
    z-index: 9999;
    justify-content: space-around;
    align-items: center;
    padding: 0 2px;
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    padding: 6px 2px;
    border-radius: 12px;
    transition: color 0.2s ease;
    flex: 1;
    min-width: 0;
}

.bottom-nav__item .material-symbols-outlined {
    font-size: 1.45rem;
}

.bottom-nav__label {
    font-size: 0.56rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
}

.bottom-nav__item--activo {
    color: var(--h4--color, #C9A84C);
}
/* El ícono de la sección activa se rellena (sólido), como Instagram */
.bottom-nav__item--activo .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.bottom-nav__item:hover {
    color: #efe3e3;
}

/* La etiqueta nunca desborda su casilla (teléfonos angostos) */
.bottom-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Hoja "Más" de la barra inferior ===== */
.bottom-more-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.bottom-more-backdrop.activo { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.bottom-more {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: #1a0505;
    border-top: 1px solid rgba(201,168,76,0.25);
    border-radius: 18px 18px 0 0;
    padding: 18px 12px calc(14px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1);
}
.bottom-more.activo { transform: translateY(0); }
.bottom-more__handle {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.3);
    margin: -6px auto 10px;
}
.bottom-more__item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: none;
    color: #efe3e3;
    font-size: 1rem;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
}
.bottom-more__item:hover { background: rgba(255,255,255,0.06); }
.bottom-more__item .material-symbols-outlined { font-size: 1.5rem; color: #E8CE7A; }

/* Pantallas muy pequeñas: reducir padding y fuente del bottom nav */
@media (max-width: 400px) {
    .bottom-nav__item {
        padding: 6px 1px;
    }
    .bottom-nav__label {
        font-size: 0.48rem;
        letter-spacing: 0;
    }
    .bottom-nav__item .material-symbols-outlined {
        font-size: 1.3rem;
    }
}

/* Teléfonos muy angostos (ej. 320px): aún más compacto */
@media (max-width: 340px) {
    .bottom-nav__label {
        font-size: 0.42rem;
    }
    .bottom-nav__item .material-symbols-outlined {
        font-size: 1.2rem;
    }
}

/* ============================================
   RESPONSIVE MÓVIL (max 768px)
   ============================================ */
@media (max-width: 768px) {

    /* --- Navbar móvil: botón izquierda, brand centrado --- */
    .navbar {
        justify-content: flex-start;
        gap: 0;
    }
    .navbar__brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* --- Ocultar sidebar y placeholder --- */
    .sidebar,
    .sidebar-placeholder {
        display: none;
    }

    /* --- Content wrapper sin margen lateral --- */
    .content-wrapper {
        height: calc(100dvh - 56px - 60px); /* navbar arriba + bottomnav abajo */
    }

    /* --- FAB flotante: en móvil se reposiciona vía JS, oculto por defecto --- */
    .contact-zone {
        position: fixed;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    /* --- Botón contacto en navbar (móvil) --- */
    .navbar__contacto-btn {
        display: flex;
    }
    .navbar__buscar-btn {
        display: flex;
        margin-left: auto;
    }
    /* --- Globo de idioma: junto al "+" en móvil --- */
    .navbar__lang {
        order: 1;
        margin-left: 4px;
        margin-right: 0;
    }
    .navbar__buscar-btn {
        order: 2;
    }
    .navbar__lang-menu {
        right: auto;
        left: 0;
    }

    /* --- Navbar brand: logo más pequeño, ocultar imagen en pantallas muy chicas --- */
    .navbar__nombre {
        font-size: 15px;
    }
    .navbar__logo {
        width: 28px;
        height: 28px;
    }
    .navbar__brand {
        gap: 6px;
    }

    /* --- Tooltip de contacto: a la derecha en móvil --- */
    .contact-link::before {
        right: auto;
        left: 58px;
    }

    /* --- Íconos contacto: alineados a la izquierda --- */
    .contact-buttons {
        align-items: flex-start;
    }

    /* --- Tarjetas: 1 columna --- */
    .locales__grid,
    .vista[data-vista="equipos"] .locales__grid,
    .vista[data-vista="catering"] .locales__grid {
        grid-template-columns: 1fr;
    }

    /* --- Nombre siempre visible en móvil (no hay hover) --- */
    .locales__card-overlay {
        opacity: 1;
    }

    /* --- Ocultar flechas del carrusel en móvil (se desliza con el dedo) --- */
    .carrusel__btn {
        display: none;
    }

    /* Ocultar flechas del carrusel sobre la foto en móvil */
    .local__detalle .carrusel__btn { display: none !important; }

    /* --- Barra de interacción estilo Instagram (debajo de la imagen) --- */
    .ig-action-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        padding: 6px 12px;
        background: #1a0505;
        flex-shrink: 0;
        border-bottom: 1px solid rgba(201,168,76,0.2);
    }
    /* Iconos centrales: escalan suave con el ancho de pantalla */
    .ig-action-bar .local__favorite-btn--detalle .material-symbols-outlined,
    .ig-action-bar .local__share-icon .material-symbols-outlined,
    .ig-action-bar__comment .material-symbols-outlined {
        font-size: clamp(20px, 4.5vw, 30px) !important;
    }
    /* Grupo central con likes/comentarios/compartir */
    .ig-action-bar .ig-center-group {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    /* Flechas prev/next EMPRESA en la action bar */
    .ig-action-bar .ig-nav-prev,
    .ig-action-bar .ig-nav-next {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer;
        display: flex !important;
        align-items: center;
        flex-shrink: 0;
    }
    .ig-action-bar .ig-nav-prev .material-symbols-outlined,
    .ig-action-bar .ig-nav-next .material-symbols-outlined {
        font-size: clamp(22px, 5vw, 34px) !important;
        color: #fff !important;
    }
    .ig-action-bar .ig-nav-prev[disabled],
    .ig-action-bar .ig-nav-next[disabled] {
        opacity: 0.25 !important;
        pointer-events: none !important;
        cursor: default;
    }

    /* --- Botón mute estilo Instagram: circular, abajo-derecha --- */
    .video-tiktok__volume {
        top: auto !important;
        left: auto !important;
        bottom: 12px !important;
        right: 12px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(0,0,0,0.6) !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        padding: 0 !important;
        justify-content: center !important;
        overflow: hidden !important;
        transition: none !important;
    }
    .video-tiktok__volume:hover,
    .video-tiktok__volume.activo {
        background: rgba(0,0,0,0.6) !important;
        padding-right: 0 !important;
    }
    /* Ocultar slider de volumen en móvil */
    .video-tiktok__vol-slider {
        display: none !important;
    }
    .video-tiktok__mute {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .video-tiktok__mute .material-symbols-outlined {
        font-size: 16px !important;
    }

    /* --- Panel detalle: estilo Instagram --- */
    .local__detalle .locales__card-wrapper {
        flex-direction: column !important;
        height: 100dvh !important;
    }

    /* En móvil: flecha ← sin círculo, esquina derecha del header */
    .local__detalle-close {
        display: flex !important;
        top: 68px !important;
        left: auto !important;
        right: 8px !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 4px !important;
        z-index: 999 !important;
    }
    .local__detalle-close span {
        color: #fff !important;
        font-size: 1.7rem !important;
        text-shadow: 0 0 8px #C9A84C, 0 0 4px rgba(0,0,0,0.9) !important;
    }

    .local__detalle .empresa__header {
        position: static !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        background: #1a0505 !important;
        border-bottom: 1px solid rgba(201,168,76,0.2) !important;
        border-radius: 0 !important;
        padding: 8px 12px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        order: -1 !important;
        height: auto !important;
    }

    .local__detalle .empresa__header h2 {
        font-size: 0.95rem !important;
        color: #C9A84C !important;
        font-weight: 700 !important;
    }

    .local__detalle .empresa__logo {
        width: 36px !important;
        height: 36px !important;
    }


    /* Imagen dentro de ig-left-panel en móvil pequeño */
    .local__detalle .ig-left-panel .locales__img-container.carrusel {
        width: 100% !important;
        height: 52vh !important;
        flex: none !important;
    }

    /* Info: resto con scroll */
    .local__detalle .locales__data-container {
        width: 100% !important;
        flex: 1 !important;
        height: auto !important;
        padding-bottom: 80px !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }

    .locales__data-container {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Ocultar flechas de navegación del overlay en móvil (se usa swipe) */
    .local__overlay-nav {
        display: none !important;
    }

    /* --- Barra de navegación inferior --- */
    .bottom-nav {
        display: flex;
    }

    /* --- Botones de redes y contacto en móvil: píldoras con degradado --- */
    .locales__skill {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 8px 0 !important;
    }

    .locales__skill h4 {
        font-size: 0.78rem !important;
        color: #C9A84C !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        margin: 4px 0 6px !important;
        font-weight: 700 !important;
    }

    .locales__skill .load-bar {
        margin: 0 !important;
        width: 100% !important;
    }

    /* Base píldora para TODOS los botones en móvil */
    .locales__skill .red-social,
    .locales__skill .contact-machupichu,
    .locales__skill .contact-whatsapp {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        padding: 7px 12px !important;
        border-radius: 50px !important;
        gap: 8px !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.25) !important;
        position: relative !important;
        text-decoration: none !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }
    .locales__skill .red-social:active,
    .locales__skill .contact-machupichu:active,
    .locales__skill .contact-whatsapp:active {
        transform: scale(0.97) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }

    /* Logo/ícono a la izquierda */
    .locales__skill .red-social__logo {
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        background: rgba(255,255,255,0.15) !important;
    }
    .locales__skill .contact-machupichu .material-symbols-outlined,
    .locales__skill .contact-whatsapp .material-symbols-outlined {
        font-size: 18px !important;
        flex-shrink: 0 !important;
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255,255,255,0.15) !important;
        border-radius: 50% !important;
        color: #fff !important;
    }

    /* Nombre centrado */
    .locales__skill .red-social .text_redes-locales,
    .locales__skill .contact-machupichu .text_redes-locales,
    .locales__skill .contact-whatsapp .text_redes-locales {
        flex: 1 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #fff !important;
        text-align: center !important;
        letter-spacing: 0.3px !important;
    }

    /* Flecha circular a la derecha */
    .locales__skill .red-social::after,
    .locales__skill .contact-machupichu::after,
    .locales__skill .contact-whatsapp::after {
        content: '›' !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.2) !important;
        border: 1.5px solid rgba(255,255,255,0.5) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        line-height: 1 !important;
        color: #fff !important;
        flex-shrink: 0 !important;
    }

    /* Colores de degradado por red social — especificidad alta para ganar */
    .locales__skill .red-social.red-social--facebook  { background: linear-gradient(135deg, #1877F2, #0a5fd8) !important; border: none !important; }
    .locales__skill .red-social.red-social--tiktok    { background: linear-gradient(135deg, #111, #2d2d2d) !important; border: none !important; }
    .locales__skill .red-social.red-social--instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; border: none !important; }
    .locales__skill .red-social.red-social--youtube   { background: linear-gradient(135deg, #FF0000, #990000) !important; border: none !important; }
    .locales__skill .red-social.red-social--whatsapp  { background: linear-gradient(135deg, #25D366, #128C7E) !important; border: none !important; }
    .locales__skill .red-social.red-social--twitter,
    .locales__skill .red-social.red-social--x         { background: linear-gradient(135deg, #000000, #1a1a1a) !important; border: none !important; }
    .locales__skill .red-social.red-social--x .red-social__logo { filter: invert(1); }

    /* Botón de ubicación (Google Maps) */
    .locales__skill .red-social.red-social--maps,
    .locales__skill a[href*="maps"] {
        background: linear-gradient(135deg, #4285F4, #34A853) !important;
        border: none !important;
    }

    /* Contacto teléfono: vino con dorado */
    .locales__skill .contact-machupichu:not(.contact-whatsapp):not(.red-social):not([href^="tel:"]) {
        background: linear-gradient(135deg, #3d0a0a, #1a0505) !important;
        border: 1.5px solid rgba(201,168,76,0.5) !important;
    }
    /* Llamar ahora — azul marino en móvil */
    .locales__skill a[href^="tel:"].contact-machupichu {
        background: linear-gradient(135deg, #1a2e4a, #0d1e33) !important;
        border: none !important;
    }
    /* WhatsApp verde */
    .locales__skill .contact-whatsapp {
        background: linear-gradient(135deg, #25D366, #128C7E) !important;
    }
}

/* ============================================
   CARRUSEL — HEADER OVERLAY (estilo Instagram)
   ============================================ */
.locales__img-container {
    position: relative;
}

/* Gradiente oscuro en la parte superior */
.carrusel__ig-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 100%);
    z-index: 9;
    pointer-events: none;
}

/* Contenedor logo + nombre */
.carrusel__ig-header {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    pointer-events: none;
}

/* Ocultar en escritorio — solo visibles en móvil */
.carrusel__ig-gradient { display: none; }
.carrusel__ig-header   { display: none; }

@media (max-width: 768px) {
    .carrusel__ig-gradient { display: block; }
    .carrusel__ig-header   { display: flex; }
}

/* Logo circular */
.carrusel__ig-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.6);
    flex-shrink: 0;
    background: #000;
}

/* Nombre del local */
.carrusel__ig-nombre {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    white-space: nowrap;
}
/* === Ocultar flechas carrusel en móvil — regla final máxima prioridad === */
@media (max-width: 768px) {
    .carrusel__btn, .carrusel__btn--prev, .carrusel__btn--next { display: none !important; visibility: hidden !important; }
}

/* === TABLETS (600–768px): más espacio en la action bar.
   Los tamaños de iconos los maneja clamp() de forma fluida === */
@media (min-width: 600px) and (max-width: 768px) {
    .ig-action-bar { padding: 10px 18px !important; }
    .ig-action-bar .ig-center-group { gap: 26px !important; }
    .ig-comment-count, .ig-action-bar .local__like-count {
        font-size: 17px !important;
    }
}

/* ============================================
   SECCIÓN REELS (escritorio)
   Video vertical centrado + acciones + panel de comentarios
   ============================================ */
.reels-vista {
    height: 100%;
    overflow: hidden !important;
    background: #0b0202;
    padding: 0 !important;
}

.reels {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0b0202;          /* evita cualquier destello blanco */
}

/* El fondo borroso (video) causaba destellos blancos por el filtro blur
   (bug de compositación de Chrome). Se reemplaza por un fondo oscuro fijo. */
.reels__fondo { display: none !important; }
.reels__fondo-oscuro {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, #241016 0%, #0b0202 70%);
    pointer-events: none;
    z-index: 0;
}
/* El contenido va por encima del fondo (nav y menú ya son absolute) */
.reels__escenario { position: relative; z-index: 1; }
.reels__nav  { z-index: 2; }
.reels__menu { z-index: 60; }

/* --- Feed con scroll nativo estilo Instagram --- */
.reels__feed {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    /* Sin scroll-behavior:smooth aquí — causaba rebote con el trackpad.
       El desplazamiento suave de flechas/teclado/rueda lo pide el JS. */
    scrollbar-width: none;              /* Firefox */
    background: #0b0202;
}
.reels__feed::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

/* Spinner de refresco (arriba centro), estilo Facebook.
   Centrado con calc() para no usar transform (queda libre para rotar). */
.reels__refresh {
    position: absolute;
    top: 16px;
    left: calc(50% - 18px);
    width: 36px;
    height: 36px;
    border: 3px solid rgba(201,168,76,0.25);
    border-top: 3px solid #C9A84C;
    border-radius: 50%;
    animation: reelsSpin 0.7s linear infinite;
    z-index: 70;
    display: none;
    pointer-events: none;
}
.reels__refresh.activo { display: block; }

/* Cada slide ocupa toda la pantalla y hace snap */
.reels__slide {
    height: 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #0b0202;               /* nunca blanco durante la carga */
}
/* Contenedor del tamaño del video: dentro van el video, los íconos y el mute.
   Al estar DENTRO del slide, todo se desliza junto con su video. */
.reels__slide-media {
    position: relative;
    height: calc(100dvh - 20px);   /* casi toda la altura (header oculto en reels) */
    max-height: 100%;
    aspect-ratio: 9 / 16;
    max-width: 100%;
    /* El video y sus íconos van SIEMPRE un poco a la izquierda (fijos), para
       que el cuadro de comentarios encaje a la derecha sin mover nada. */
    transform: translateX(-140px);
}

/* El video aparece SOLO cuando ya tiene imagen (evita el flash blanco). */
.reels__slide .reels__video { opacity: 0; }
.reels__slide.listo .reels__video { opacity: 1; }

/* --- Video vertical (9:16) llena el contenedor --- */
.reels__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    cursor: pointer;
}

/* Spinner mientras el video del slide carga */
.reels__slide-cargando {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 38px; height: 38px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #C9A84C;
    border-radius: 50%;
    animation: reelsSpin 0.8s linear infinite;
    pointer-events: none;
}
.reels__slide.listo .reels__slide-cargando { display: none; }

/* Ícono de play (aparece al pausar el video, como Instagram) */
.reels__play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;   /* el clic pasa al video para reanudar */
    z-index: 4;
}
.reels__slide.listo.pausado .reels__play-icon { display: flex; }
.reels__play-icon .material-symbols-outlined {
    font-size: 44px;
    color: #fff;
    font-variation-settings: 'FILL' 1;
}

/* Control de sonido (abajo derecha del video) */
.reels__volumen {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 3;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.reels__mute {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.reels__mute:hover { background: rgba(0,0,0,0.8); }
.reels__mute .material-symbols-outlined { font-size: 20px; color: #fff; }

/* Slider vertical: oculto; aparece al pasar el cursor por el control */
.reels__volumen-slider {
    height: 0;
    opacity: 0;
    overflow: hidden;
    background: rgba(0,0,0,0.7);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
    padding: 0;
    margin-bottom: 0;
}
.reels__volumen:hover .reels__volumen-slider {
    height: 110px;
    opacity: 1;
    padding: 12px 0;
    margin-bottom: 6px;
}
/* Input range en vertical */
.reels__volumen-slider input[type="range"] {
    writing-mode: vertical-lr;
    direction: rtl;               /* arriba = más volumen */
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    width: 6px;
    height: 100px;
    accent-color: #fff;
    cursor: pointer;
}

/* Indicador de carga */
.reels__cargando {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.reels__cargando.visible { display: flex; }
.reels__cargando span {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #C9A84C;
    border-radius: 50%;
    animation: reelsSpin 0.8s linear infinite;
}
@keyframes reelsSpin { to { transform: rotate(360deg); } }

/* --- Acciones (corazón, comentar, compartir, ⋯) --- */
/* Ancladas justo afuera del borde derecho del video, parte baja */
.reels__acciones {
    position: absolute;
    right: -62px;
    bottom: 24px;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.reels__accion {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    transition: transform 0.15s ease;
}
.reels__accion:hover { transform: scale(1.12); }
.reels__accion:active { transform: scale(0.94); }
.reels__accion .material-symbols-outlined {
    font-size: 30px;
    color: #fff;
}
.reels__accion-num {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
/* Corazón activo */
.reels__accion--activo .material-symbols-outlined {
    color: #ff3366;
    font-variation-settings: 'FILL' 1, 'wght' 700;
}

/* --- Panel lateral de comentarios ---
   Flotante (absolute) para que NO empuje el video: aparece sobre el
   espacio negro de la derecha, igual que Instagram. */
.reels__comentarios {
    display: none;
    position: absolute;
    /* Más abajo y más compacto (como Instagram): pegado a la parte inferior. */
    bottom: 10px;
    top: auto;
    /* Anclado al costado derecho del video (como Instagram):
       centro + mitad del ancho del video 9:16 + hueco para los íconos,
       menos el desplazamiento del video (-140px) para que quede pegado. */
    left: calc(50% + (100dvh - 20px) * 9 / 32 - 60px);
    right: auto;
    transform: none;
    flex-direction: column;
    width: 360px;
    max-width: 30vw;
    height: 62%;
    background: #1c1c1c;
    border-radius: 14px;
    overflow: hidden;
    z-index: 20;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.reels__comentarios.activo { display: flex; }

.reels__comentarios-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
}
.reels__comentarios-head h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.reels__comentarios-cerrar {
    position: absolute;
    left: 12px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 4px;
}
.reels__comentarios-cerrar .material-symbols-outlined { color: #fff; font-size: 24px; }

.reels__comentarios-lista {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.reels__comentarios-vacio {
    color: rgba(255,255,255,0.5);
    text-align: center;
    margin-top: 30px;
    font-size: 0.9rem;
}

/* Un comentario */
.reels__c {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
/* Botón borrar comentario (aparece al pasar el cursor) */
.reels__c-borrar {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
    align-self: center;
}
.reels__c:hover .reels__c-borrar { opacity: 1; }
.reels__c-borrar .material-symbols-outlined {
    font-size: 18px;
    color: rgba(255,255,255,0.5);
}
.reels__c-borrar:hover .material-symbols-outlined { color: #ff5a5a; }
.reels__c-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, #C9A84C, #8a6f2a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #1a0505;
    font-size: 0.85rem;
    text-transform: uppercase;
}
.reels__c-cuerpo { flex: 1; min-width: 0; }
.reels__c-nombre {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 2px;
}
.reels__c-fecha {
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    margin-left: 6px;
    font-size: 0.78rem;
}
.reels__c-texto {
    font-size: 0.9rem;
    color: #eaeaea;
    margin: 0;
    word-wrap: break-word;
}
.reels__c-mencion { color: #C9A84C; font-weight: 600; }

/* "N Me gusta   Responder" debajo del texto */
.reels__c-meta {
    display: flex; align-items: center; gap: 10px; margin-top: 4px;
}
.reels__c-like-num { font-size: 0.72rem; color: rgba(255,255,255,0.5); font-weight: 600; }
.reels__c-reply-btn {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: 0.72rem; color: rgba(255,255,255,0.45); font-weight: 600;
}
.reels__c-reply-btn:hover { color: #fff; }

/* Desplegar / ocultar respuestas */
.reels__c-toggle-replies {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: 0.72rem; color: rgba(255,255,255,0.4);
    display: flex; align-items: center; gap: 6px; margin-top: 8px;
}
.reels__c-toggle-line {
    display: inline-block; width: 20px; height: 1px;
    background: rgba(255,255,255,0.25); flex-shrink: 0;
}
.reels__c-replies { padding-left: 8px; margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.reels__c-avatar--sm { width: 24px; height: 24px; font-size: 0.7rem; }
.reels__c-borrar-reply {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: rgba(255,255,255,0.2); flex-shrink: 0; align-self: center;
    opacity: 0; transition: opacity 0.15s, color 0.2s;
}
.reels__c--reply:hover .reels__c-borrar-reply { opacity: 1; }
.reels__c-borrar-reply .material-symbols-outlined { font-size: 14px; }
.reels__c-borrar-reply:hover .material-symbols-outlined { color: #ff5a5a; }

/* Columna derecha: borrar (comentario propio) + corazón de me gusta */
.reels__c-actions {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex-shrink: 0; align-self: flex-start; padding-top: 2px;
}
.reels__c-like-btn {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: rgba(255,255,255,0.4); display: flex; align-items: center;
}
.reels__c-like-btn .material-symbols-outlined { font-size: 15px; }
.reels__c-like-btn:hover { color: #ff6b8a; }
.reels__c-like-btn--activo { color: #ff3366 !important; }
.reels__c-like-btn--activo .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 700;
}

/* Barra "Respondiendo a…" sobre el campo de comentario */
.reels__c-reply-bar {
    display: none; align-items: center; justify-content: space-between;
    padding: 6px 16px; background: rgba(255,255,255,0.06);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.reels__c-reply-label { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.reels__c-reply-cancel {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.4); display: flex; align-items: center;
}
.reels__c-reply-cancel .material-symbols-outlined { font-size: 18px; }

/* Formulario de comentario */
.reels__comentarios-form {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
/* Caja de suscripción (nombre + correo, una sola vez) */
.reels__suscribir { display: flex; flex-direction: column; gap: 8px; }
.reels__suscribir-txt {
    margin: 0 0 2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    text-align: center;
}
.reels__comentario-texto {
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 9px 14px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    width: 100%;
}
.reels__comentario-texto::placeholder { color: rgba(255,255,255,0.4); }
.reels__comentario-texto:focus { border-color: #C9A84C; }
.reels__comentario-fila { display: flex; gap: 8px; align-items: center; }
.reels__comentario-fila .reels__perfil-foto { margin-right: 0; }
.reels__comentario-enviar {
    background: #C9A84C;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.reels__comentario-enviar:hover { background: #e0bd5c; }
.reels__comentario-enviar .material-symbols-outlined { color: #1a0505; font-size: 20px; }

/* --- Flechas ↑ ↓ (derecha del escenario) --- */
.reels__nav {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.reels__nav-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
.reels__nav-btn:hover { background: rgba(255,255,255,0.22); transform: scale(1.06); }
.reels__nav-btn[disabled] { opacity: 0.3; pointer-events: none; }
.reels__nav-btn .material-symbols-outlined { color: #fff; font-size: 26px; }

/* --- Menú contextual (⋯ y click derecho) --- */
.reels__menu {
    position: absolute;
    display: none;
    flex-direction: column;
    min-width: 190px;
    background: #262626;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.7);
    z-index: 60;
}
.reels__menu.activo { display: flex; }
.reels__menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    color: #fff;
    font-size: 0.95rem;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.reels__menu-item:hover { background: rgba(255,255,255,0.09); }
.reels__menu-item .material-symbols-outlined { font-size: 20px; color: #fff; }

/* ============================================
   MODO REELS: header oculto, solo la flor (como Instagram)
   El video usa toda la altura. En otras secciones el header vuelve.
   ============================================ */
body[data-vista-activa="reels"] .navbar {
    background: transparent;
    border-bottom: none;
    pointer-events: none;          /* los clics pasan al video */
}
body[data-vista-activa="reels"] .navbar__particulas,
body[data-vista-activa="reels"] .navbar__nombre,
body[data-vista-activa="reels"] .navbar__lang,
body[data-vista-activa="reels"] .navbar__contacto-btn,
body[data-vista-activa="reels"] .navbar__buscar-btn {
    display: none !important;
}
/* Solo la flor queda visible y clickeable */
body[data-vista-activa="reels"] .navbar__brand { pointer-events: auto; }
body[data-vista-activa="reels"] .navbar__logo {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8));
}

/* Contenido a pantalla completa (recupera los 56px del navbar) */
body[data-vista-activa="reels"] .content-wrapper {
    margin-top: 0;
    height: 100dvh;
}
/* La barra lateral baja sus íconos para no chocar con la flor */
body[data-vista-activa="reels"] .sidebar { padding-top: 52px; }

/* El botón "+" de contacto no va en Reels (tapaba el botón enviar) */
body[data-vista-activa="reels"] .contact-zone { display: none !important; }

/* ============================================================
   MODO PANTALLA COMPLETA DE REELS (ocultar íconos, como Instagram)
   ============================================================ */
/* Al activarlo, se ocultan los íconos y controles; queda solo el video. */
.reels--inmersivo .reels__acciones,
.reels--inmersivo .reels__volumen,
.reels--inmersivo .reels__nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
/* Botón chiquito en la esquina para volver a mostrar los íconos */
.reels__restaurar {
    position: absolute;
    right: 12px;
    bottom: 88px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 40;
}
.reels__restaurar .material-symbols-outlined { font-size: 22px; }
.reels--inmersivo .reels__restaurar { display: flex; }

/* El ícono de sonido central solo se usa en móvil; oculto por defecto */
.reels__mute-centro { display: none; }

/* ===== Corazón grande del doble toque (me gusta), estilo Instagram ===== */
.locales__img-container { position: relative; }   /* ancla para el corazón */
.corazon-like {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 8;
    animation: corazonPop 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.corazon-like .material-symbols-outlined {
    font-size: 100px;
    font-variation-settings: 'FILL' 1;
    /* Corazón con degradado de 3 colores */
    background: linear-gradient(135deg, #FFE36B 0%, #C20645 50%, #FF8913 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4));
}
/* Sube lento y se desvanece (no desaparece de golpe) */
@keyframes corazonPop {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
    15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.25); }
    30%  { transform: translate(-50%,-50%) scale(0.9); }
    45%  { transform: translate(-50%,-50%) scale(1); }
    70%  { opacity: 1; transform: translate(-50%,-90%) scale(1); }
    100% { opacity: 0; transform: translate(-50%,-170%) scale(1.05); }
}

/* En móvil/tablet el modal de Compartir se cierra arrastrando: no hace falta la X */
@media (max-width: 1024px) {
    .share-modal__close { display: none !important; }
    .share-modal__contenido::before { cursor: grab; }
}

/* ============================================================
   REELS ESTILO INSTAGRAM: teléfonos Y tablets (hasta 1024px)
   Va al FINAL para ganar sobre las reglas base de escritorio.
   ============================================================ */
@media (max-width: 1024px) {
    /* Las flechas ↑↓ sobran en táctil: se pasa con el dedo */
    .reels__nav { display: none !important; }
    /* El video llena TODA la pantalla; sin el corrimiento del escritorio */
    .reels__slide-media {
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }
    .reels__video {
        border-radius: 0;
        box-shadow: none;
    }
    /* Íconos ENCIMA del video, abajo a la derecha (sobre la barra inferior) */
    .reels__acciones {
        right: 8px !important;
        bottom: 84px !important;
        gap: 20px;
    }
    /* En móvil no se muestra el control de volumen (como Instagram) */
    .reels__volumen { display: none !important; }

    /* Ícono de sonido en el centro, ENCIMA del play, visible al pausar */
    .reels__mute-centro {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, calc(-50% - 58px));
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,0.45);
        color: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 5;
        cursor: pointer;
    }
    .reels__mute-centro .material-symbols-outlined { font-size: 24px; }
    .reels__slide.listo.pausado .reels__mute-centro { display: flex; }
    /* Panel de comentarios como hoja inferior que SUBE suave y ocupa la mitad
       de abajo (el video se comprime arriba, como Instagram) */
    .reels__comentarios {
        display: flex !important;          /* siempre en el DOM para animar */
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 56% !important;
        border-radius: 16px 16px 0 0;
        z-index: 10000;                    /* por encima de la barra inferior */
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 0.32s cubic-bezier(0.22,0.61,0.36,1),
                    visibility 0s linear 0.32s;
    }
    .reels__comentarios.activo {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.32s cubic-bezier(0.22,0.61,0.36,1);
    }
    /* Barrita de arrastre arriba del cuadro de comentarios */
    .reels__comentarios-head { position: relative; }
    .reels__comentarios-head::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255,255,255,0.35);
    }
    /* El video se queda a pantalla completa; el cuadro de comentarios va ENCIMA. */
    /* Con comentarios abiertos, se ocultan los íconos laterales y el sonido */
    .reels--comentarios .reels__acciones,
    .reels--comentarios .reels__volumen {
        opacity: 0;
        pointer-events: none;
    }
    /* En móvil la X ya no hace falta: se cierra arrastrando la barrita */
    .reels__comentarios-cerrar { display: none !important; }
    /* Menú de los ⋯ como hoja inferior (estilo Instagram) que SUBE suave */
    .reels__menu {
        position: fixed !important;
        display: flex !important;          /* siempre en el DOM para poder animar */
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        padding: 20px 0 max(14px, env(safe-area-inset-bottom));
        z-index: 10001 !important;
        touch-action: none;   /* el arrastre no dispara scroll */
        /* Oculto abajo; sube suave al activarse */
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                    visibility 0s linear 0.32s;
    }
    .reels__menu.activo {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    /* Barrita de arrastre arriba (como Instagram) */
    .reels__menu::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255,255,255,0.35);
    }
    .reels__menu-item {
        padding: 16px 22px;
        font-size: 1rem;
    }
}
/* ============================================================
   TABLETS (769–1024px): navegación con barra inferior
   (se oculta la barra lateral, como en el celular)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar,
    .sidebar-placeholder { display: none !important; }
    .bottom-nav { display: flex !important; }
    /* Deja espacio para la barra inferior (60px) */
    .content-wrapper { height: calc(100dvh - 56px - 60px); }
    main { padding-bottom: 70px; }
}


/* ============================================================
   CALENDARIO DE DISPONIBILIDAD (botón + modal)
   ============================================================ */
/* Botón dorado "Ver disponibilidad" */
.cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    background: #431617;
    color: #EDE8DE;
    border: none;
    border-radius: 26px;
    padding: 11px 22px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(67,22,23,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.cal-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(67,22,23,0.45); filter: brightness(1.18); }
.cal-btn:active { transform: translateY(0); }
.cal-btn .material-symbols-outlined { font-size: 20px; }

/* Modal */
.calmodal { position: fixed; inset: 0; z-index: 11000; display: none; }
.calmodal.activo { display: block; }
.calmodal__backdrop { position: absolute; inset: 0; background: rgba(20,10,10,0.6); animation: calFade 0.25s ease; }
.calmodal__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 92vw);
    background: #2C2F26;
    color: #d8d8cd;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.55);
    animation: calPop 0.3s cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes calFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes calPop  { from { opacity: 0; transform: translate(-50%,-46%) scale(0.96); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

.calmodal__handle { display: none; }
.calmodal__head { display: flex; align-items: center; justify-content: space-between; }
.calmodal__titulo { margin: 0; font-size: 1.25rem; font-weight: 800; color: #e6e6dc; }
.calmodal__close {
    border: none; background: rgba(169,169,155,0.15); width: 34px; height: 34px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center; color: #d8d8cd;
}
.calmodal__close:hover { background: rgba(169,169,155,0.28); }
.calmodal__empresa { margin: 4px 0 18px; color: #A9A99B; font-size: 0.9rem; }

/* Calendario */
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__mes { font-weight: 800; font-size: 1.05rem; text-transform: capitalize; color: #e6e6dc; }
/* Carrusel de meses (arrastre sigue el dedo/mouse) */
.cal__row { display: flex; align-items: center; gap: 2px; }
.cal__viewport { flex: 1; overflow: hidden; touch-action: none; }
.cal__track { display: flex; width: 300%; will-change: transform; }
.cal__mes-panel { width: 33.3333%; flex-shrink: 0; }
.cal__mes-nombre { text-align: center; font-weight: 800; font-size: 1.05rem; text-transform: capitalize; color: #e6e6dc; margin-bottom: 12px; }
.cal__nav {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: rgba(169,169,155,0.14); color: #d8d8cd; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cal__nav:hover { background: rgba(169,169,155,0.28); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__dow { text-align: center; font-size: 0.72rem; font-weight: 700; color: rgba(169,169,155,0.6); padding: 4px 0; text-transform: uppercase; }
.cal__empty { aspect-ratio: 1; }
.cal__dia {
    aspect-ratio: 1; border: none; border-radius: 12px;
    background: rgba(169,169,155,0.16); color: #dcdcd2; font-size: 0.9rem; font-weight: 600;
    cursor: default; display: flex; align-items: center; justify-content: center;
    transition: filter 0.15s;
}
.cal__dia--ocupado { background: #431617; color: #e7d3c9; }
.cal__dia--pasado { opacity: 0.4; }
.cal__dia--hoy { outline: 2px solid #A9A99B; outline-offset: -2px; }
.cal__leyenda { display: flex; gap: 20px; justify-content: center; margin-top: 18px; font-size: 0.82rem; color: #A9A99B; }
.cal__pt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.cal__pt--ocupado { background: #431617; }
.cal__pt--libre { background: rgba(169,169,155,0.25); border: 1px solid #A9A99B; }

/* En móvil: hoja inferior que sube */
@media (max-width: 768px) {
    .calmodal__panel {
        left: 0; right: 0; top: auto; bottom: 0;
        transform: none;
        width: 100%;
        border-radius: 22px 22px 0 0;
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
        animation: calUp 0.3s cubic-bezier(0.22,0.61,0.36,1);
    }
    @keyframes calUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .calmodal__handle {
        display: block; width: 40px; height: 4px; border-radius: 2px;
        background: rgba(169,169,155,0.5); margin: -6px auto 12px;
    }
}

/* ===== Calendario: pie (Soy el dueño / Listo) y modo edición ===== */
.cal__pie { text-align: center; margin-top: 14px; }
.cal__duenio {
    background: none; border: none; cursor: pointer;
    color: rgba(169,169,155,0.75); font-size: 0.82rem; text-decoration: underline;
}
.cal__duenio:hover { color: #d8d8cd; }
.cal__editar {
    background: #431617; color: #e7d3c9; border: none; border-radius: 20px;
    padding: 9px 24px; font-weight: 700; font-size: 0.9rem; cursor: pointer;
    transition: filter 0.15s;
}
.cal__editar:hover { filter: brightness(1.18); }
.cal__ayuda { text-align: center; font-size: 0.8rem; color: #A9A99B; margin: 12px 0 0; }
.cal--editando .cal__dia { cursor: pointer; }
.cal--editando .cal__dia:hover { filter: brightness(1.25); }

/* ===== PIN de acceso del dueño (estilo YAPE) ===== */
.calpin { text-align: center; padding: 6px 0 4px; }
.calpin__icono {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(169,169,155,0.15); color: #A9A99B;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.calpin__icono .material-symbols-outlined { font-size: 28px; }
.calpin__titulo { margin: 0; font-size: 1.15rem; font-weight: 800; color: #e6e6dc; }
.calpin__sub { margin: 4px 0 20px; color: #A9A99B; font-size: 0.88rem; }
.calpin__wrap { position: relative; display: inline-block; }
.calpin__boxes { display: flex; gap: 10px; justify-content: center; }
.calpin__boxes span {
    width: 38px; height: 48px; border-radius: 12px;
    background: rgba(169,169,155,0.14); border: 1.5px solid rgba(169,169,155,0.3);
    position: relative; transition: border-color 0.15s;
}
.calpin__box--full { border-color: #A9A99B; }
/* Casilla actual resaltada (como Facebook): borde más claro + brillo suave */
.calpin__box--activa {
    border-color: #eceae0;
    box-shadow: 0 0 0 3px rgba(236,234,224,0.18);
}
/* Cursor parpadeante dentro de la casilla activa */
.calpin__box--activa::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 2px; height: 22px;
    background: #eceae0; border-radius: 2px;
    animation: calpinCursor 1s steps(1) infinite;
}
@keyframes calpinCursor { 50% { opacity: 0; } }
.calpin__box--full::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 12px; height: 12px;
    border-radius: 50%; background: #e6e6dc;
}
.calpin__input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; border: none; cursor: pointer; font-size: 16px;
}
.calpin__error { min-height: 18px; margin: 14px 0 0; color: #e5544b; font-size: 0.85rem; }
.calpin__volver {
    margin-top: 16px; background: none; border: none; cursor: pointer;
    color: #A9A99B; text-decoration: underline; font-size: 0.85rem;
}
.calpin__boxes--error { animation: calpinShake 0.4s; }
.calpin__boxes--error span { border-color: #e5544b; }
@keyframes calpinShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* ============================================
   BOTÓN "CONTINUAR CON GOOGLE" (login sin contraseña)
   Se usa en el panel de comentarios de reels y de empresas.
   ============================================ */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 24px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.btn-google:active { background: #eef0f1; }
.btn-google:disabled { opacity: .6; cursor: default; }
.btn-google__logo { width: 20px; height: 20px; flex: 0 0 auto; }

/* Foto de perfil (cuando entró con Google) */
.lcp__identidad-foto,
.reels__perfil-foto {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    margin-right: 8px;
    vertical-align: middle;
}

/* ============================================
   AGENDA DE GASTOS DEL EVENTO
   Paleta: Navy #2F4150 · Teal #567C8D · Beige #F5EFEB · Sky Blue #C8D9E6 · White
   ============================================ */
.agenda { position: fixed; inset: 0; z-index: 12000; display: none; }
.agenda.activo { display: block; }
/* Sin blur: el desenfoque sobre el video de reels causaba parpadeo */
.agenda__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.agenda__panel {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(680px, 94vw); max-height: 92vh; display: flex; flex-direction: column;
    background: #F5EFEB; border-radius: 20px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
/* Franja superior propia para la X (no scrollea, así el header nunca la tapa) */
.agenda__barra {
    flex: 0 0 auto; height: 46px; background: #F5EFEB;
    display: flex; align-items: center; justify-content: flex-end; padding: 0 12px;
    position: relative; z-index: 6;
}
.agenda__close {
    background: #2F4150; border: none; color: #fff; width: 34px; height: 34px;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.agenda__close:hover { background: #567C8D; }

/* Hoja exportable */
.agenda__hoja { overflow-y: auto; padding: 0 16px 16px; background: #F5EFEB; }
.agenda__cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.agenda__cabecera-icono { font-size: 40px; color: #567C8D; }
.agenda__hoja-titulo { margin: 0; font-size: 1.15rem; color: #2F4150; font-weight: 800; }
.agenda__hoja-sub { margin: 2px 0 0; font-size: .8rem; color: #567C8D; }

.agenda__tabla-wrap { }
.agenda__tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.agenda__tabla th {
    background: #C8D9E6; color: #2F4150; font-weight: 700; text-align: left;
    padding: 8px 6px; font-size: .78rem; white-space: nowrap;
    position: sticky; top: 0; z-index: 2;   /* se queda fija al hacer scroll */
}
.agenda__th-num { width: 26px; text-align: center; }
.agenda__th-valor { text-align: right; }
.agenda__th-acc { width: 30px; }
.agenda__tabla td { padding: 11px 6px; border-bottom: 1px solid #C8D9E6; vertical-align: middle; }
.agenda__tabla td.agenda__td-num { text-align: center; color: #567C8D; font-size: .8rem; }
/* Franjas alternadas en tonos Beige: ayuda a seguir cada fila cuando hay muchas */
.agenda__tabla tbody tr:nth-child(even) { background: #EEE4D8; }

.agenda__inp { width: 100%; border: none; background: transparent; font: inherit; color: #2F4150; padding: 6px 4px; border-radius: 6px; }
.agenda__inp:focus { outline: none; background: #DCE7EE; }
.agenda__inp--fecha { min-width: 120px; }
.agenda__inp--valor { text-align: right; min-width: 90px; }

.agenda__estado-btn {
    border: none; cursor: pointer; border-radius: 14px; padding: 4px 10px;
    font: inherit; font-size: .74rem; font-weight: 700; white-space: nowrap;
    width: 84px; text-align: center;   /* ancho fijo: no se mueve al cambiar de estado */
}
.agenda__th-estado { width: 96px; }
.agenda__estado-btn--pagado { background: #cdeccd; color: #2e7d32; }
.agenda__estado-btn--pend { background: #f6dcb9; color: #b06a10; }

.agenda__del { border: none; background: transparent; color: #567C8D; cursor: pointer; padding: 4px; opacity: .55; display: flex; }
.agenda__del:hover { opacity: 1; }
.agenda__del .material-symbols-outlined { font-size: 20px; }

.agenda__add {
    margin: 12px 0 0; width: 100%; padding: 10px; border: 1.5px dashed #567C8D;
    background: #DCE7EE; color: #2F4150; border-radius: 12px; font: inherit; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.agenda__add:hover { background: #DCE7EE; }

/* Resumen */
.agenda__resumen { margin-top: 16px; background: #fff; border-radius: 14px; padding: 12px 14px; border: 1px solid #C8D9E6; }
.agenda__resumen-fila { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: .92rem; color: #2F4150; }
.agenda__resumen-fila--total { font-weight: 800; font-size: 1.05rem; color: #2F4150; border-top: 1px solid #C8D9E6; margin-top: 4px; padding-top: 10px; }
.agenda__pagado { color: #2e7d32; font-weight: 700; }
.agenda__falta { color: #c0392b; font-weight: 700; }
.agenda__resumen-fila--restante { border-top: 1px dashed #C8D9E6; margin-top: 4px; padding-top: 10px; font-weight: 700; }
.agenda__resumen-fila--restante.negativo #agendaRestante { color: #c0392b; }
.agenda__resumen-fila--restante.positivo #agendaRestante { color: #2e7d32; }
.agenda__presupuesto { width: 90px; border: none; border-bottom: 2px solid #567C8D; background: transparent; font: inherit; text-align: right; color: #2F4150; font-weight: 700; }
.agenda__presupuesto:focus { outline: none; border-color: #567C8D; }

/* Acciones (no se exportan) */
.agenda__acciones { display: flex; gap: 8px; padding: 12px 16px; background: #F5EFEB; border-top: 1px solid #C8D9E6; flex: 0 0 auto; }
.agenda__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 8px; border: none; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; font-size: .78rem; white-space: nowrap; }
.agenda__btn .material-symbols-outlined { font-size: 18px; }
.agenda__btn--pdf { background: #2F4150; color: #fff; }
.agenda__btn--img { background: #567C8D; color: #fff; }
.agenda__btn--limpiar { background: #C8D9E6; color: #2F4150; flex: 0 0 auto; }

@media (max-width: 600px) {
    .agenda__panel { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
    .agenda__tabla { font-size: .82rem; }
    .agenda__hoja-sub { display: none; }
    /* En celulares se oculta la Fecha (falta espacio). Se sigue guardando y
       aparece en el PDF/foto. En tablets/iPad (>600px) sí se ve. */
    .agenda__th-fecha, .agenda__td-fecha { display: none; }
    /* Ajuste fino para que todo quepa sin deslizar */
    .agenda__tabla td, .agenda__tabla th { padding-left: 4px; padding-right: 4px; }
    .agenda__estado-btn { width: 72px; }
    .agenda__th-estado { width: 78px; }
    .agenda__inp--valor { min-width: 56px; }
}

/* ============================================
   PERFIL EN EL MENÚ (foto de Google, estilo TikTok)
   ============================================ */
.perfil-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; min-width: 36px; min-height: 36px;
    border-radius: 50%; overflow: hidden; flex: 0 0 auto; vertical-align: middle;
}
.perfil-avatar img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; display: block; }
.perfil-avatar .material-symbols-outlined { font-size: 28px; }
/* En el menú "Más" del celular el ícono es más chico */
.bottom-more__item .perfil-avatar { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
.bottom-more__item .perfil-avatar img { width: 24px; height: 24px; }
.bottom-more__item .perfil-avatar .material-symbols-outlined { font-size: 22px; }
/* Cuando hay foto, un pequeño borde para que resalte */
.perfil-avatar.tiene-foto { box-shadow: 0 0 0 2px rgba(255,255,255,.25); }

/* Logo de WhatsApp dentro del botón flotante de contacto */
.contact-link__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* ============================================
   BOTÓN "COMPRAR" en reels con producto (afiliado)
   ============================================ */
.reels__comprar {
    position: absolute;
    left: 16px;
    bottom: 22px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #000;
    color: #fff;
    border-radius: 24px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    transition: transform 0.15s, background 0.15s;
}
.reels__comprar:hover { transform: translateY(-2px); background: #1c1c1c; }
.reels__comprar:active { transform: translateY(0); }
.reels__comprar .material-symbols-outlined { font-size: 20px; }

/* En móvil se sube un poco para no chocar con la barra de abajo */
@media (max-width: 1024px) {
    .reels__comprar { bottom: 96px; left: 12px; padding: 8px 16px; font-size: 0.86rem; }
}

/* ============================================
   ARRASTRE ENTRE SECCIONES (celular)
   La sección sigue el dedo y la vecina se asoma al costado.
   ============================================ */
.vista--entrando {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
}
.vista--arrastrando { will-change: transform; }
.vista--animando { transition: transform 0.28s cubic-bezier(.22,.61,.36,1); }

/* ============================================
   RESEÑAS EN LAS TARJETAS DEL LISTADO
   PREPARADO PERO DESACTIVADO.
   Para activarlo en TODAS las empresas de golpe basta con agregar
   la clase "resenas-activas" al <body> desde el JS. Nada más.
   Las estrellas van debajo del nombre, dentro de .locales__card-overlay.
   ============================================ */
.locales__card-rating { display: none; }

body.resenas-activas .locales__card-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 0.76rem;
    line-height: 1;
}
.locales__card-rating .estrellas {
    color: #C9A84C;
    letter-spacing: 1px;
}
/* Estrella no alcanzada (ej. 4 de 5) */
.locales__card-rating .estrellas .apagada { color: rgba(255,255,255,0.28); }
.locales__card-rating .puntaje { color: rgba(255,255,255,0.75); font-weight: 700; }
/* Empresa que todavía no tiene opiniones: se ve discreto, no vacío */
.locales__card-rating .sin-opiniones { color: rgba(255,255,255,0.45); font-size: 0.72rem; }

@media (max-width: 768px) {
    body.resenas-activas .locales__card-rating { font-size: 0.7rem; gap: 4px; }
}

/* Número de compartidos debajo del botón de compartir (empresas).
   Se deja vacío cuando aún no hay ninguno, así no se ve un "0". */
.local__share-icon .local__share-count {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--h2--color);
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}
.local__favorite-btn--grid ~ .local__share-icon .local__share-count,
.locales__card .local__share-icon .local__share-count { color: #fff; }

/* ============================================
   BOTÓN "LLAMAR" (tel:) SOLO EN CELULAR/TABLET
   En computadora se oculta porque la PC no puede hacer llamadas
   telefónicas (pediría una app). En el celular sí funciona.
   Se oculta la .load-bar que contenga un enlace tel:.
   ============================================ */
@media (min-width: 1025px) {
    .load-bar:has(a[href^="tel:"]) { display: none; }
}

/* ============================================
   VIDEOS ANCHOS EN REELS (solo laptop/escritorio)
   Cuando el video es horizontal, el marco toma su forma real (no se
   fuerza a vertical). Sin barras negras: el marco se hace más bajo,
   como en TikTok. La detección es automática (JS mide el video).
   En celular NO aplica: los videos siguen llenando la pantalla.
   ============================================ */
@media (min-width: 1025px) {
    .reels__slide-media--ancho {
        aspect-ratio: var(--ratio-video, 16 / 9);
        height: auto;
        width: min(56vw, calc((100dvh - 40px) * var(--ratio-video, 1.777)));
        max-height: calc(100dvh - 40px);
    }
    /* El video llena el marco (que ya tiene su misma forma → sin recorte ni barras) */
    .reels__slide-media--ancho .reels__video {
        object-fit: cover;
    }
}

/* ============================================
   CONFIRMACIÓN "VACIAR AGENDA" (propia, reemplaza el confirm() del navegador)
   ============================================ */
.agenda__confirm {
    position: absolute; inset: 0; z-index: 30;
    display: none; align-items: center; justify-content: center;
    background: rgba(47,65,80,0.55);
}
.agenda__confirm.activo { display: flex; }
.agenda__confirm-caja {
    width: min(320px, 86%);
    background: #F5EFEB;
    border-radius: 16px;
    padding: 22px 20px;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    animation: agendaConfirmPop .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes agendaConfirmPop {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}
.agenda__confirm-icono {
    font-size: 32px; color: #c0392b;
    background: rgba(192,57,43,0.12);
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}
.agenda__confirm-titulo { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; color: #2F4150; }
.agenda__confirm-texto { margin: 0 0 18px; font-size: .85rem; color: #567C8D; line-height: 1.4; }
.agenda__confirm-botones { display: flex; gap: 10px; }
.agenda__confirm-btn {
    flex: 1; border: none; border-radius: 12px; padding: 10px;
    font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
}
.agenda__confirm-btn--cancelar { background: #C8D9E6; color: #2F4150; }
.agenda__confirm-btn--cancelar:hover { background: #b9ccdb; }
.agenda__confirm-btn--vaciar { background: #c0392b; color: #fff; }
.agenda__confirm-btn--vaciar:hover { background: #a5301f; }