/*
 * Páginas públicas de los negocios con plantilla de giro (dental, barbería, skincare, general).
 * Solo computadora, 768 px en adelante y puntero fino. 21/10/2026. Usa el color de cada negocio (--brand),
 * así que se ve bien en todas las plantillas. Las páginas a la medida no lo cargan.
 */
@media (min-width: 768px), (pointer: fine) {
    html { scroll-behavior: smooth; }

    /* Encabezado: sombra suave cuando ya bajaste. */
    body > header, body > div > header { transition: box-shadow 0.25s ease; }
    .nw-bajo body > header, .nw-bajo body > div > header { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.45); }

    /* Halo suave que sigue al cursor en cada sección de la página del negocio */
    section {
        position: relative;
        overflow: hidden;
    }
    section::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
        transition: opacity 0.35s ease;
        background: radial-gradient(
            750px circle at var(--nw-sx, 50%) var(--nw-sy, 50%),
            color-mix(in srgb, var(--brand, #0E7C77) 11%, transparent) 0%,
            color-mix(in srgb, var(--brand, #0E7C77) 4%, transparent) 35%,
            transparent 70%
        );
    }
    section.nw-sec-activa::before {
        opacity: 1;
    }
    section > * {
        position: relative;
        z-index: 1;
    }

    /* Tarjetas (servicios, equipo, promociones, horarios): suben y toman el color del negocio. */
    .nw-tarjeta { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
    .nw-tarjeta:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--brand, #0E7C77) 45%, transparent) !important;
        box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--brand, #0E7C77) 55%, rgba(0, 0, 0, 0.5));
    }

    /* Galería: la foto se acerca un poco. */
    #galeria img, .listo-galeria img { transition: transform 0.45s ease; }
    #galeria a:hover img, #galeria figure:hover img, #galeria div:hover > img { transform: scale(1.04); }

    /* Botones de reservar: halo del color del negocio. */
    .brand-btn, a.brand-bg, a[href="#cita"].brand-bg, a[href="#reserva"].brand-bg {
        transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    .brand-btn:hover, a.brand-bg:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--brand, #0E7C77) 80%, transparent);
    }

    /* Secciones que aparecen al bajar. */
    .nw-revelar { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
    .nw-revelar.nw-visible { opacity: 1; transform: none; }

    /* Botón flotante de reservar cita */
    .nw-reservar {
        position: fixed; right: 2rem; bottom: 2rem; z-index: 60;
        display: inline-flex; align-items: center; gap: 0.55rem;
        padding: 0.85rem 1.35rem; border-radius: 9999px; font-weight: 700; font-size: 0.9rem;
        background: var(--brand, #0E7C77); color: var(--nw-sobre-brand, #fff);
        box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--brand, #0E7C77) 75%, rgba(0, 0, 0, 0.6));
        opacity: 0; transform: translateY(14px); pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
    }
    .nw-reservar.nw-ver { opacity: 1; transform: none; pointer-events: auto; }
    .nw-reservar:hover { transform: translateY(-2px); }
    .nw-reservar svg { width: 1.1rem; height: 1.1rem; }

    header nav a[href^="#"] { position: relative; }
    header nav a.nw-activo::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
        border-radius: 2px; background: var(--brand, #0E7C77);
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .nw-revelar { opacity: 1; transform: none; transition: none; }
    .nw-reservar { transition: none; }
    .nw-tarjeta:hover, .brand-btn:hover, a.brand-bg:hover, #galeria img { transform: none !important; }
}