/**
 * Botones Pro — portales modernos (Insights + marca GastroChat)
 *
 * Jerarquía de conversión (venta):
 * 1. .btn-primary  → Solicitar información / contacto (naranja sólido)
 * 2. .btn-demo     → Demo en vivo (outline, no compite con primary)
 * 3. .btn-secondary→ Explorar, mapa, navegación (blanco + azul)
 * 4. .btn-suite    → alias visual de .btn-demo (compatibilidad)
 */

:root {
    --gc-btn-blue: #60a5fa;
    --gc-btn-blue-mid: #3b82f6;
    --gc-btn-blue-dark: #2563eb;
    --gc-btn-blue-ink: #1e40af;
    --gc-btn-gold: #d4af37;
    --gc-btn-gold-dark: #b8860b;
    --gc-btn-orange: #ff8c42;
    --gc-btn-orange-deep: #e85d04;
    --gc-btn-radius: 14px;
    --gc-btn-rgb: 96, 165, 250;
}

.btn,
a.btn,
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 3rem;
    padding: 0.8rem 1.45rem;
    border-radius: var(--gc-btn-radius);
    font-weight: 700;
    font-size: clamp(0.88rem, 2.1vw, 0.96rem);
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible {
    outline: 2px solid var(--gc-btn-blue);
    outline-offset: 3px;
}

/* —— 1. Primary = contacto / lead (máxima conversión) —— */
.btn-primary,
a.btn-primary,
button.btn-primary {
    background: linear-gradient(135deg, var(--gc-btn-orange) 0%, var(--gc-btn-orange-deep) 100%) !important;
    border-color: var(--gc-btn-orange-deep) !important;
    color: #ffffff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 8px 22px rgba(232, 93, 4, 0.34) !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
    background: linear-gradient(135deg, #ff9d5c 0%, var(--gc-btn-orange) 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 12px 28px rgba(232, 93, 4, 0.42) !important;
}

.btn-primary:active,
a.btn-primary:active {
    transform: translateY(0);
}

/* —— 2. Demo = explorar producto (outline, no naranja sólido) —— */
.btn-demo,
a.btn-demo,
.btn-suite,
a.btn-suite {
    background: #ffffff !important;
    border-color: rgba(255, 140, 66, 0.55) !important;
    color: var(--gc-btn-orange-deep) !important;
    box-shadow: 0 2px 10px rgba(232, 93, 4, 0.1) !important;
}

.btn-demo:hover,
a.btn-demo:hover,
.btn-suite:hover,
a.btn-suite:hover {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border-color: var(--gc-btn-orange) !important;
    color: #c2410c !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(232, 93, 4, 0.18) !important;
    filter: none;
}

/* —— 3. Secondary = navegación / mapa / explorar —— */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
    background: #ffffff !important;
    border-color: var(--gc-btn-blue) !important;
    color: var(--gc-btn-blue-dark) !important;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.12) !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-color: var(--gc-btn-blue-mid) !important;
    color: var(--gc-btn-blue-ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(59, 130, 246, 0.2) !important;
}

.btn-accent,
a.btn-accent {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-color: var(--gc-btn-blue-mid) !important;
    color: var(--gc-btn-blue-ink) !important;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.14) !important;
}

.btn-accent:hover,
a.btn-accent:hover {
    transform: translateY(-2px);
    border-color: var(--gc-btn-blue-dark) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2) !important;
}

.btn-gold,
a.btn-gold {
    background: linear-gradient(135deg, #fde68a 0%, var(--gc-btn-gold) 55%, var(--gc-btn-gold-dark) 100%) !important;
    border-color: var(--gc-btn-gold-dark) !important;
    color: #1c1917 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35) !important;
}

.btn-gold:hover,
a.btn-gold:hover {
    transform: translateY(-2px);
    color: #1c1917 !important;
    box-shadow: 0 8px 22px rgba(184, 134, 11, 0.45) !important;
}

/* Hero sobre vídeo / imagen oscura */
.hero .btn-primary,
body.page-index .hero .btn-primary {
    background: linear-gradient(135deg, var(--gc-btn-orange) 0%, var(--gc-btn-orange-deep) 100%) !important;
    border-color: var(--gc-btn-orange-deep) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 26px rgba(232, 93, 4, 0.45) !important;
}

.hero .btn-secondary,
body.page-index .hero .btn-secondary {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16) !important;
}

.hero .btn-secondary:hover,
body.page-index .hero .btn-secondary:hover {
    background: #ffffff !important;
    color: var(--gc-btn-blue-dark) !important;
    border-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.28) !important;
}

.hero .btn-demo,
.hero .btn-suite,
body.page-index .hero .btn-demo,
body.page-index .hero .btn-suite {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 200, 150, 0.85) !important;
    color: #fff7ed !important;
    backdrop-filter: blur(8px);
}

.hero .btn-demo:hover,
.hero .btn-suite:hover,
body.page-index .hero .btn-demo:hover,
body.page-index .hero .btn-suite:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--gc-btn-orange-deep) !important;
    border-color: #ffffff !important;
}