/* ============================================================
   Paleta y componentes compartidos por las páginas del producto
   GymOS: la landing de la raíz (includes/gymos_landing.php),
   precios.php y signup.php. Antes cada una llevaba su propia copia
   de estos colores en un <style> embebido.

   El tema oscuro es el default (es como nació la cara comercial).
   El claro son overrides de los tokens bajo html[data-bs-theme=light],
   el mismo atributo que usa Bootstrap 5.3 para sus componentes.
   ============================================================ */
:root {
    color-scheme: dark;

    /* Marca. --pg se usa como fondo/relleno; --brand-ink para texto e iconos,
       porque el naranja puro sobre blanco no da contraste suficiente. */
    --pg: #f66f14;
    --pg2: #ffad75;
    --brand-ink: #f66f14;

    --bg: #060910;
    --card: rgba(255,255,255,.045);
    --line: rgba(255,255,255,.10);

    --txt: #eef1f6;
    --head: #fff;
    --soft: #d3d8e1;
    --dim: #98a0af;
    --link: #ffad75;

    --ok: #43e08f;
    --ok-bg: rgba(56,217,138,.14);
    --ok-line: rgba(56,217,138,.28);

    --pill-bg: rgba(255,255,255,.05);
    --surface-hover: rgba(255,255,255,.08);
    --card-line-hover: rgba(255,255,255,.20);
    --outline-color: #e9ecf1;
    --outline-line: rgba(255,255,255,.22);
    --outline-line-hover: rgba(255,255,255,.35);

    --shadow-sm: 0 10px 30px rgba(0,0,0,.35);
    --shadow-md: 0 14px 40px rgba(0,0,0,.40);
    --shadow-lg: 0 24px 64px rgba(0,0,0,.50);

    /* Resplandores naranjas del fondo (body::before) */
    --glow-a: rgba(246,111,20,.30);
    --glow-b: rgba(246,111,20,.12);
    --glow-c: rgba(255,173,117,.10);

    --input-bg: rgba(255,255,255,.04);
    --input-bg-focus: rgba(255,255,255,.06);
    --input-txt: #fff;
    --placeholder: #6b7280;

    --modal-bg: #111319;
    --close-filter: invert(1) grayscale(1) brightness(1.8);
}

html[data-bs-theme=light] {
    color-scheme: light;

    --brand-ink: #c25309;

    --bg: #f7f8fa;
    --card: #ffffff;
    --line: #e5e8ec;

    --txt: #3d4248;
    --head: #15181d;
    --soft: #4a5058;
    --dim: #6c757d;
    --link: #c25309;

    --ok: #12855a;
    --ok-bg: rgba(18,133,90,.10);
    --ok-line: rgba(18,133,90,.25);

    --pill-bg: #ffffff;
    --surface-hover: rgba(16,24,40,.05);
    --card-line-hover: rgba(21,24,29,.18);
    --outline-color: #15181d;
    --outline-line: rgba(21,24,29,.20);
    --outline-line-hover: rgba(21,24,29,.40);

    --shadow-sm: 0 4px 14px rgba(16,24,40,.06);
    --shadow-md: 0 10px 30px rgba(16,24,40,.08);
    --shadow-lg: 0 20px 50px rgba(16,24,40,.10);

    --glow-a: rgba(246,111,20,.16);
    --glow-b: rgba(246,111,20,.07);
    --glow-c: rgba(255,173,117,.10);

    --input-bg: #fff;
    --input-bg-focus: #fff;
    --input-txt: #15181d;
    --placeholder: #9aa0aa;

    --modal-bg: #fff;
    --close-filter: none;
}

* { box-sizing: border-box; }

body {
    background: var(--bg); color: var(--txt);
    overflow-x: hidden; position: relative;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

a { color: var(--link); }
h1, h2, h3, h4, h5, h6, .brand, .price, .modal-title { font-family: 'Mulish', sans-serif; }
h1, h2, h3, h4, h5 { color: var(--head); letter-spacing: -.015em; }
.text-muted { color: var(--dim) !important; }

.brand { font-weight: 800; font-size: 1.5rem; color: var(--head); text-decoration: none; letter-spacing: .5px; }
.brand span { color: var(--brand-ink); }

/* ---------- Botones ---------- */
.btn-outline-dark {
    color: var(--outline-color); border: 1px solid var(--outline-line);
    background: transparent; border-radius: 12px; font-weight: 600;
}
.btn-outline-dark:hover {
    background: var(--surface-hover); color: var(--head); border-color: var(--outline-line-hover);
}
.btn-danger {
    background: linear-gradient(135deg, var(--pg), var(--pg2)); border: 0; border-radius: 12px;
    font-weight: 800; letter-spacing: .3px; color: #fff;
    box-shadow: 0 12px 28px rgba(246,111,20,.35); transition: .15s;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #f66f14, #ff9a4d); color: #fff;
    box-shadow: 0 16px 36px rgba(246,111,20,.48); transform: translateY(-1px);
}

/* ---------- Tarjetas de plan (landing y precios) ---------- */
.plan-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    height: 100%; box-shadow: var(--shadow-md); backdrop-filter: blur(12px); transition: .18s;
}
.plan-card:hover { transform: translateY(-4px); border-color: var(--card-line-hover); }
.plan-card.reco {
    border-color: var(--pg); box-shadow: 0 18px 50px rgba(246,111,20,.28);
    background: linear-gradient(180deg, rgba(246,111,20,.10), var(--card));
}
.reco-tag {
    background: var(--pg); color: #fff; font-size: .7rem; font-weight: 800;
    border-radius: 30px; padding: 4px 12px; box-shadow: 0 6px 16px rgba(246,111,20,.4);
}
.price { font-size: 2.4rem; font-weight: 900; color: var(--head); letter-spacing: -.02em; }
.price small { font-size: .95rem; font-weight: 600; color: var(--dim); }

.feat { list-style: none; padding: 0; margin: 0; font-size: .88rem; color: var(--soft); }
.feat li { padding: 4px 0; }
.feat li i { color: var(--brand-ink); margin-right: 7px; }

/* ---------- Botón de tema (sol / luna) ---------- */
.theme-toggle {
    width: 36px; height: 36px; padding: 0; border-radius: 50%;
    display: inline-grid; place-items: center; line-height: 1; font-size: .95rem;
    color: var(--dim); background: var(--pill-bg); border: 1px solid var(--line);
    transition: color .2s, border-color .2s, background .2s;
}
.theme-toggle:hover { color: var(--head); border-color: var(--pg); }
.theme-toggle:focus-visible { outline: 2px solid var(--pg); outline-offset: 2px; }

/* Se muestra el icono del tema al que se va a cambiar, no el actual */
html[data-bs-theme=light] .theme-toggle .ico-sun { display: none; }
html[data-bs-theme=dark]  .theme-toggle .ico-moon { display: none; }