:root {
    --bg: #f6f8fb;
    --soft: #eef2f8;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e6eaf1;
    --primary: #2f6fed;
    --primary-2: #5b8bff;

    /* Paleta de acento "multicolor suave" (ecoa el logo TPC). Se exponen como
       tripletas RGB para poder componer rgba() con distintas opacidades. */
    --rgb-blue: 47, 111, 237;
    --rgb-cyan: 30, 203, 255;
    --rgb-teal: 16, 185, 129;
    --rgb-amber: 245, 158, 11;
    --rgb-violet: 139, 92, 246;
    --rgb-coral: 236, 107, 85;
    --rgb-pink: 228, 100, 190;
    --rgb-purple: 168, 85, 247;
    --c-teal: #10b981;
    --c-amber: #f59e0b;
    --c-violet: #8b5cf6;
    --c-coral: #ec6b55;

    --shadow: 0 18px 50px rgba(15, 23, 42, .08);
    --shadow-soft: 0 10px 28px rgba(15, 23, 42, .06);
    --r-lg: 26px;
    --r-md: 18px;
    --r-sm: 14px;
    --container: 1180px;

    --btn-from: var(--primary);
    --btn-to: var(--primary-2);
    --btn-shadow-color: rgba(47, 111, 237, .28);
    --btn-text: #ffffff;
    --btn-hover-from: #16a6f9;
    --btn-hover-to: #9fdcf0;
    
    --navbar-height: 100px;
}

* {
    box-sizing: border-box;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html,
body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
}

/* Foco visible para navegación por teclado (no se muestra al clickear con mouse).
   Anillo redondeado para links/inputs; los botones ya son pill, les damos un halo. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

.btn:focus-visible,
.glass-btn:focus-visible,
.btn-form:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 6px rgba(47, 111, 237, .55);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


.grecaptcha-badge { 
    visibility: hidden !important; 
}

.glass-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 34px;
    border-radius: 999px;
    background: hsla(0, 0%, 100%, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 10px 25px rgba(0, 0, 0, 0.12);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    color: black;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px var(--shadow);
}

.glass-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.center {
    text-align: center;
}

.muted {
    color: var(--muted);
}

.accent {
    color: var(--primary);
}

.container {
    width: min(var(--container), calc(100% - 48px));
    margin-inline: auto;
}

.narrow {
    max-width: 820px;
}

.woocommerce,
.woocommerce-page,
.single-product,
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag {
    background: #fff !important;
}

/* ==================== */
/* BUTTONS              */
/* ==================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    color: var(--btn-text);
    background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
    box-shadow: 0 18px 44px var(--btn-shadow-color);
}

.btn-primary:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--btn-hover-from), var(--btn-hover-to));
    box-shadow: 0 18px 44px var(--btn-hover-shadow-color);
}

.btn-ghost {
    color: var(--text);
    background: rgba(255, 255, 255, .85);
    border-color: var(--border);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.btn-ghost:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--btn-hover-from), var(--btn-hover-to));
    border-color: transparent;
    box-shadow: 0 12px 28px var(--btn-hover-shadow-color);
}

@keyframes marquee {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-50%);
    }
}