/* ════════════════════════════════════════════════════════════════════
   Landings por negocio (barberías, peluquerías): capa de diseño moderno.
   Solo CSS; las animaciones usan transform/opacity para no cargar la página.
   El color sale del tema del <body>: cj-theme-barber (azul) o cj-theme-pelu (rosa).
   ════════════════════════════════════════════════════════════════════ */
:root, .cj-theme-barber {
    --cj-a: #2563eb;            /* acento principal */
    --cj-b: #06b6d4;            /* acento secundario */
    --cj-a-rgb: 37, 99, 235;
    --cj-soft: #e8f1ff;
    --cj-dark-1: #0b1220;
    --cj-dark-2: #0d1b2a;
    --cj-dark-3: #10213a;
    --cj-glow: #1e3a8a;
}
.cj-theme-pelu {
    --cj-a: #e11d48;
    --cj-b: #f472b6;
    --cj-a-rgb: 225, 29, 72;
    --cj-soft: #fce7ef;
    --cj-dark-1: #1a0710;
    --cj-dark-2: #2a0a1a;
    --cj-dark-3: #3b0d24;
    --cj-glow: #881337;
    --cj-grad: linear-gradient(135deg, var(--cj-a) 0%, var(--cj-b) 100%);
}
.cj-theme-spa {
    --cj-a: #a21caf;
    --cj-b: #e879f9;
    --cj-a-rgb: 162, 28, 175;
    --cj-soft: #f7e9f9;
    --cj-dark-1: #160a1b;
    --cj-dark-2: #2b1b33;
    --cj-dark-3: #3b1740;
    --cj-glow: #6d2870;
    --cj-grad: linear-gradient(135deg, var(--cj-a) 0%, var(--cj-b) 100%);
}
.cj-theme-estetica {
    --cj-a: #0d9488;
    --cj-b: #2dd4bf;
    --cj-a-rgb: 13, 148, 136;
    --cj-soft: #e6f7f5;
    --cj-dark-1: #061a18;
    --cj-dark-2: #0b3d38;
    --cj-dark-3: #0f4f48;
    --cj-glow: #115e59;
    --cj-grad: linear-gradient(135deg, var(--cj-a) 0%, var(--cj-b) 100%);
}
.cj-theme-taller {
    --cj-a: #16a34a;
    --cj-b: #2dd4bf;
    --cj-a-rgb: 22, 163, 74;
    --cj-soft: #e6f4ee;
    --cj-dark-1: #06110d;
    --cj-dark-2: #0f2a24;
    --cj-dark-3: #1a3c34;
    --cj-glow: #14532d;
    --cj-grad: linear-gradient(135deg, var(--cj-a) 0%, var(--cj-b) 100%);
}
.cj-theme-web {
    --cj-a: #7c3aed;
    --cj-b: #60a5fa;
    --cj-a-rgb: 124, 58, 237;
    --cj-soft: #f2e8ff;
    --cj-dark-1: #0b0a1d;
    --cj-dark-2: #151233;
    --cj-dark-3: #1e1650;
    --cj-glow: #4c1d95;
    --cj-grad: linear-gradient(135deg, var(--cj-a) 0%, var(--cj-b) 100%);
}
.cj-theme-pos {
    --cj-a: #ea580c;
    --cj-b: #f59e0b;
    --cj-a-rgb: 234, 88, 12;
    --cj-soft: #fff1e6;
    --cj-dark-1: #1a0e06;
    --cj-dark-2: #2b1709;
    --cj-dark-3: #3d200c;
    --cj-glow: #9a3412;
    --cj-grad: linear-gradient(135deg, var(--cj-a) 0%, var(--cj-b) 100%);
}
.cj-theme-mascotas {
    --cj-a: #0f766e;
    --cj-b: #f59e0b;
    --cj-a-rgb: 15, 118, 110;
    --cj-soft: #e5f4f2;
    --cj-dark-1: #04120f;
    --cj-dark-2: #0a2a26;
    --cj-dark-3: #0f3a35;
    --cj-glow: #115e59;
    --cj-grad: linear-gradient(135deg, var(--cj-a) 0%, var(--cj-b) 100%);
}
:root {
    --cj-grad: linear-gradient(135deg, var(--cj-a) 0%, var(--cj-b) 100%);
    --cj-ink: #0b1220;
    --cj-muted: #5b6475;
    --cj-line: rgba(15, 23, 42, .08);
    --cj-radius: 18px;
    --cj-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
    --cj-shadow-lg: 0 2px 6px rgba(15,23,42,.06), 0 22px 48px rgba(15,23,42,.12);
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: #f6f8fc; color: var(--cj-ink); -webkit-font-smoothing: antialiased; }
main h2, main h3 { letter-spacing: -.01em; }
main h2.fw-bold { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
main section .text-center > h2::after, main section h2.text-center::after {
    content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin: 14px auto 0; background: var(--cj-grad);
}
.text-muted { color: var(--cj-muted) !important; }
::selection { background: rgba(var(--cj-a-rgb), .18); }

/* Barra de progreso de lectura (solo donde el navegador soporta scroll-timeline) */
.cj-progress { display: none; }
@supports (animation-timeline: scroll()) {
    .cj-progress {
        display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
        background: var(--cj-grad); transform-origin: 0 50%; transform: scaleX(0);
        animation: cjProgress linear both; animation-timeline: scroll(root);
    }
    @keyframes cjProgress { to { transform: scaleX(1); } }
}

/* ── Navbar de vidrio ── */
.navbar {
    background-color: rgba(11, 18, 32, .9) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: padding .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.cj-theme-pelu .navbar { background-color: rgba(42, 10, 26, .9) !important; }
.cj-theme-spa .navbar { background-color: rgba(43, 27, 51, .9) !important; }
.cj-theme-estetica .navbar { background-color: rgba(11, 61, 56, .9) !important; }
.cj-theme-taller .navbar { background-color: rgba(15, 42, 36, .9) !important; }
.cj-theme-web .navbar { background-color: rgba(21, 18, 51, .9) !important; }
.cj-theme-pos .navbar { background-color: rgba(43, 23, 9, .9) !important; }
.cj-theme-mascotas .navbar { background-color: rgba(10, 42, 38, .9) !important; }
.navbar.cj-scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.2); padding-top: .35rem; padding-bottom: .35rem; }
.navbar .nav-link { position: relative; opacity: .85; transition: opacity .2s; }
.navbar .nav-link:hover { opacity: 1; }
.navbar .nav-link::after {
    content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .2rem; height: 2px; border-radius: 2px;
    background: var(--cj-grad); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.navbar .nav-link:hover::after { transform: scaleX(1); }

/* ── Botones ── */
.btn { border-radius: 12px; font-weight: 600; transition: transform .2s ease, box-shadow .2s ease, background-position .4s ease, background-color .2s, color .2s; }
.btn-primary, .btn-primary:disabled {
    color: #fff; border: 0;
    background: linear-gradient(135deg, var(--cj-a), var(--cj-b) 60%, var(--cj-a)) 0 0 / 200% 100%;
    box-shadow: 0 8px 22px rgba(var(--cj-a-rgb), .3);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #fff; background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--cj-a-rgb), .38); }
.btn-outline-primary { color: var(--cj-a); border: 2px solid var(--cj-a); background: transparent; }
.btn-outline-primary:hover { color: #fff; background: var(--cj-a); border-color: var(--cj-a); transform: translateY(-2px); }
.btn-outline-secondary:hover, .btn-light:hover, .btn-outline-light:hover { transform: translateY(-2px); }
.btn .bi-arrow-right { display: inline-block; transition: transform .2s; }
.btn:hover .bi-arrow-right { transform: translateX(4px); }

/* ── Hero ── */
.cj-hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(900px 520px at 88% -8%, var(--cj-glow) 0%, transparent 62%),
        radial-gradient(700px 420px at -10% 110%, rgba(var(--cj-a-rgb), .35) 0%, transparent 60%),
        linear-gradient(160deg, var(--cj-dark-1) 0%, var(--cj-dark-2) 55%, var(--cj-dark-3) 100%);
    padding: clamp(56px, 8vw, 104px) 0 clamp(84px, 9vw, 104px);
}
.cj-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.cj-hero-bg::before {
    content: ""; position: absolute; inset: 0; opacity: .55;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
.cj-blob { position: absolute; border-radius: 50%; will-change: transform; }
.cj-b1 { width: 520px; height: 520px; left: -160px; top: -180px; background: radial-gradient(circle, rgba(var(--cj-a-rgb), .45), transparent 65%); animation: cjDrift 14s ease-in-out infinite alternate; }
.cj-b2 { width: 460px; height: 460px; right: -140px; bottom: -160px; background: radial-gradient(circle, color-mix(in srgb, var(--cj-b) 40%, transparent), transparent 65%); animation: cjDrift 18s ease-in-out infinite alternate-reverse; }
@keyframes cjDrift { to { transform: translate3d(60px, 40px, 0) scale(1.08); } }

.cj-hero h1 {
    font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1.12; letter-spacing: -.025em;
    font-size: clamp(1.9rem, 1.2rem + 2vw, 2.85rem); margin: 18px 0 0;
}
.cj-grad-text {
    background: linear-gradient(90deg, var(--cj-b), #fff 45%, var(--cj-b)) 0 0 / 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: cjShine 6s linear infinite;
}
@keyframes cjShine { to { background-position: -200% 0; } }
.cj-lead { font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); color: rgba(255,255,255,.78); margin: 18px auto 0; max-width: 560px; }
@media (min-width: 992px) { .text-lg-start .cj-lead { margin-left: 0; } }
.cj-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.9);
}
.cj-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: cjPing 2s ease-out infinite; }
@keyframes cjPing { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }
.cj-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; justify-content: center; }
.cj-btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.05); }
.cj-btn-ghost:hover { color: #fff; background: rgba(255,255,255,.14); transform: translateY(-2px); }
.cj-hero-checks { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font-size: .92rem; color: rgba(255,255,255,.75); }
.cj-hero-checks .bi { color: var(--cj-b); margin-right: 4px; }
@media (min-width: 992px) { .cj-hero-ctas, .cj-hero-checks { justify-content: flex-start; } }

/* Mockup con inclinación 3D (el script la sigue con el mouse) */
.cj-mock-wrap { position: relative; max-width: 620px; margin: 0 auto; perspective: 1400px; }
.cj-mock-wrap::before {
    content: ""; position: absolute; inset: 8% 6% -6%; border-radius: 30px; z-index: 0;
    background: var(--cj-grad); opacity: .45; filter: blur(48px);
}
.cj-mock {
    position: relative; z-index: 1; border-radius: 16px; overflow: hidden; background: #fff;
    box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
    transform: rotateY(var(--cj-ry, -8deg)) rotateX(var(--cj-rx, 4deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.cj-mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.cj-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #f87171; }
.cj-mock-bar i:nth-child(2) { background: #fbbf24; }
.cj-mock-bar i:nth-child(3) { background: #34d399; }
.cj-mock-bar span { margin-left: 10px; font-size: .75rem; color: #64748b; background: #fff; padding: 2px 12px; border-radius: 6px; }
.cj-mock img { display: block; width: 100%; height: auto; }
.cj-float {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
    background: rgba(255,255,255,.95); color: var(--cj-ink); box-shadow: 0 16px 40px rgba(0,0,0,.25); font-size: .84rem;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    animation: cjFloat 5s ease-in-out infinite;
}
.cj-float > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--cj-soft); font-size: 1.1rem; }
.cj-float b { display: block; line-height: 1.2; }
.cj-float small { color: var(--cj-muted); }
.cj-f1 { left: -28px; bottom: 16%; }
.cj-f2 { right: -20px; top: 10%; animation-delay: -1.7s; }
.cj-f3 { right: 8%; bottom: -22px; animation-delay: -3.4s; }
@keyframes cjFloat { 50% { transform: translateY(-10px); } }
@media (max-width: 575.98px) {
    .cj-f1 { left: 2px; bottom: -20px; } .cj-f2 { right: 2px; top: -20px; } .cj-f3 { display: none; }
    .cj-float { font-size: .72rem; padding: 7px 9px; } .cj-float > span { width: 28px; height: 28px; }
}

/* Entrada del hero (el título y la imagen no arrancan ocultos: no afecta el LCP) */
.cj-in { opacity: 0; animation: cjUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
.cj-in-t { animation: cjUpT .8s cubic-bezier(.2,.7,.2,1) both; }
.cj-hero .cj-d1 { animation-delay: .08s; } .cj-hero .cj-d2 { animation-delay: .16s; }
.cj-hero .cj-d3 { animation-delay: .24s; } .cj-hero .cj-d4 { animation-delay: .32s; }
@keyframes cjUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cjUpT { from { transform: translateY(14px); } to { transform: none; } }

/* Cinta de funciones que se desliza */
.cj-ticker {
    position: relative; margin-top: clamp(44px, 6vw, 72px); overflow: hidden; padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cj-ticker-track { display: flex; width: max-content; gap: 36px; animation: cjTicker 32s linear infinite; }
.cj-ticker span { white-space: nowrap; color: rgba(255,255,255,.7); font-weight: 500; font-size: .92rem; }
.cj-ticker span .bi { color: var(--cj-b); margin-right: 6px; }
@keyframes cjTicker { to { transform: translateX(-50%); } }

/* ── Cifras: tarjetas de vidrio que montan sobre el hero ── */
.cj-stats-wrap { position: relative; z-index: 3; margin-top: -64px; }
.cj-stat {
    background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.6); border-radius: var(--cj-radius); box-shadow: var(--cj-shadow-lg);
    padding: 20px 12px; text-align: center; height: 100%; transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.cj-stat:hover { transform: translateY(-4px); }
.cj-stat-num {
    display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
    background: var(--cj-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cj-stat-label { font-size: .86rem; color: var(--cj-muted); }

/* ── Tarjetas (con "foco" de luz que sigue al mouse) ── */
.feature-box, .why-box, .pricing-card {
    position: relative; background: #fff; border: 1px solid var(--cj-line); border-radius: var(--cj-radius); box-shadow: var(--cj-shadow);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.feature-box:hover, .why-box:hover, .pricing-card:hover { transform: translateY(-6px); box-shadow: var(--cj-shadow-lg); border-color: rgba(var(--cj-a-rgb), .28); }
@media (hover: hover) {
    .feature-box::before, .why-box::before, .pricing-card::before {
        content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
        background: radial-gradient(260px circle at var(--cj-mx, 50%) var(--cj-my, 50%), rgba(var(--cj-a-rgb), .09), transparent 70%);
    }
    .feature-box:hover::before, .why-box:hover::before, .pricing-card:hover::before { opacity: 1; }
}
.feature-box > .fs-2:first-child, .feature-box > .fs-1:first-child, .why-box > .fs-1:first-child {
    width: 60px; height: 60px; margin: 0 auto .75rem; display: grid; place-items: center; border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--cj-a-rgb), .1), color-mix(in srgb, var(--cj-b) 14%, transparent));
    font-size: 1.8rem !important; transition: transform .3s ease;
}
.feature-box:hover > .fs-2:first-child, .feature-box:hover > .fs-1:first-child, .why-box:hover > .fs-1:first-child { transform: scale(1.08) rotate(-4deg); }
.feature-box h3 .bi {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; margin-right: 6px !important;
    background: var(--cj-soft); vertical-align: middle;
}
.solution-features li i { color: var(--cj-a) !important; }
figure.feature-box img { transition: transform .5s ease; }
figure.feature-box { overflow: hidden; }
figure.feature-box:hover img { transform: scale(1.03); }

/* ── "Un día en tu negocio" como línea de tiempo ── */
#un-dia .row, #recorrido .row { position: relative; }
@media (min-width: 992px) {
    #un-dia .row::before, #recorrido .row::before {
        content: ""; position: absolute; left: 4%; right: 4%; top: 23px; height: 3px; border-radius: 3px;
        background: linear-gradient(90deg, transparent, rgba(var(--cj-a-rgb), .5), color-mix(in srgb, var(--cj-b) 60%, transparent), transparent);
    }
    #un-dia .why-box, #recorrido .why-box { margin-top: 26px; }
    #un-dia .why-box::after, #recorrido .why-box::after {
        content: ""; position: absolute; top: -33px; left: 22px; width: 16px; height: 16px; border-radius: 50%;
        background: #fff; border: 4px solid var(--cj-a); box-shadow: 0 0 0 6px rgba(var(--cj-a-rgb), .12);
    }
}
#un-dia .why-box > .fw-bold:first-child, #recorrido .why-box > .fw-bold:first-child {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem;
    background: var(--cj-soft); color: var(--cj-a) !important;
}

/* ── Planes ── */
.custom-select-selected { border: 1px solid rgba(var(--cj-a-rgb), .35) !important; border-radius: 14px !important; box-shadow: var(--cj-shadow); transition: border-color .2s, box-shadow .2s; }
.custom-select-selected:hover { border-color: var(--cj-a) !important; box-shadow: 0 0 0 4px rgba(var(--cj-a-rgb), .1); }
.custom-select-options { border: 1px solid rgba(var(--cj-a-rgb), .35) !important; border-radius: 14px !important; box-shadow: var(--cj-shadow-lg); }
#planes .row > .col-md-5:nth-child(2) .feature-box {
    border: 2px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, var(--cj-grad) border-box;
    box-shadow: 0 24px 60px rgba(var(--cj-a-rgb), .2);
}
#planes .row > .col-md-5:nth-child(2) .badge[style*="color:#fff"] { background: var(--cj-grad) !important; box-shadow: 0 6px 16px rgba(var(--cj-a-rgb), .35); }
#precioBasico, #precioPremium { display: inline-block; }
/* Inicio: el precio es un <p> dentro de la tarjeta; en bloque para que text-center lo centre */
.pricing-card > #precioBasico, .pricing-card > #precioPremium { display: block; }
.cj-bump { animation: cjBump .45s cubic-bezier(.2,.7,.2,1); }
@keyframes cjBump { 40% { transform: scale(1.12); } }

/* ── FAQ ── */
main .accordion { --bs-accordion-border-width: 0; }
main .accordion-item { border-radius: 14px !important; margin-bottom: 10px; overflow: hidden; border: 1px solid var(--cj-line) !important; box-shadow: var(--cj-shadow); }
main .accordion-button { font-weight: 600; }
main .accordion-button:not(.collapsed) { background: var(--cj-soft); color: var(--cj-a); }

/* ── CTA final con borde de luz girando ── */
.cta-final {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 24px !important;
    background: radial-gradient(600px 300px at 80% 0%, var(--cj-glow), transparent 60%), linear-gradient(160deg, var(--cj-dark-1), var(--cj-dark-3)) !important;
    box-shadow: 0 30px 70px rgba(var(--cj-a-rgb), .25);
}
.cta-final::before {
    content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; translate: -50% -50%;
    background: conic-gradient(from 0deg, transparent 0 70%, var(--cj-b) 80%, var(--cj-a) 88%, transparent 100%);
    animation: cjSpin 6s linear infinite;
}
.cta-final::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 22px; background: inherit; }
@keyframes cjSpin { to { rotate: 360deg; } }

/* ── Footer y flotantes ── */
footer.bg-dark { background: linear-gradient(180deg, var(--cj-dark-2), var(--cj-dark-1)) !important; }
footer a { transition: opacity .2s; }
footer a:hover { opacity: .75; }
.whatsapp-float { transition: transform .2s ease; }
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }
.whatsapp-float::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; opacity: 0;
    animation: cjRing 1.8s ease-out 1.5s 3;
}
@keyframes cjRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* ── Aparición al hacer scroll (las clases las pone el script; sin JS todo se ve normal) ── */
.cj-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.cj-reveal.cj-visible { opacity: 1; transform: none; }
.cj-reveal .cj-reveal-item { opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--cj-d, 0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--cj-d, 0ms); }
.cj-reveal.cj-visible .cj-reveal-item { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .cj-in { opacity: 1; }
    .cj-mock { transform: none; }
    .cj-ticker-track { animation: none; }
}

/* ── Página principal: piezas propias ── */
main .fs-1.fw-bold.text-primary { background: var(--cj-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.city-badge { background: #fff !important; border: 1px solid var(--cj-line); color: var(--cj-a) !important; box-shadow: var(--cj-shadow); transition: transform .2s, background-color .2s, color .2s; }
.city-badge:hover { transform: translateY(-2px); background: var(--cj-a) !important; color: #fff !important; }
#carouselExampleDark .carousel-inner { border-radius: 20px; box-shadow: var(--cj-shadow-lg); border: 1px solid var(--cj-line); }
.phone-frame { transition: transform .4s ease, box-shadow .4s ease; }
#planes .pricing-card ul { list-style: none; padding-left: 0; }
#planes .pricing-card li { padding: 6px 0; border-bottom: 1px dashed var(--cj-line); }
#planes .pricing-card li:last-child { border-bottom: 0; }
#planes .pricing-card li .bi { margin-right: 6px; }
#planes .pricing-card.border-primary {
    border: 2px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, var(--cj-grad) border-box !important;
    box-shadow: 0 24px 60px rgba(var(--cj-a-rgb), .2);
}
#planes .pricing-card.border-primary span[style*="background:#0d6efd"] { background: var(--cj-grad) !important; box-shadow: 0 6px 16px rgba(var(--cj-a-rgb), .35); }
#demo .btn-success { background: #16a34a; border: 0; box-shadow: 0 10px 24px rgba(22,163,74,.28); }
#demo .form-control { border-radius: 12px; padding: .65rem .9rem; }
#demo .form-control:focus { border-color: var(--cj-a); box-shadow: 0 0 0 4px rgba(var(--cj-a-rgb), .12); }
.chat-float { transition: transform .2s ease; }
.chat-float:hover { transform: scale(1.08); }

/* ═══════════ Chat de la página principal ═══════════ */
.cj-chat-fab { background: var(--cj-grad) !important; border: 0; cursor: pointer; overflow: hidden; z-index: 1100 !important; }
.cj-chat-fab .bi { position: absolute; transition: transform .3s ease, opacity .2s ease; }
.cj-chat-fab .bi-x-lg { opacity: 0; transform: rotate(-90deg) scale(.6); font-size: 22px; }
.cj-chat-fab.open .bi-chat-dots-fill { opacity: 0; transform: rotate(90deg) scale(.6); }
.cj-chat-fab.open .bi-x-lg { opacity: 1; transform: none; }
.cj-chat-teaser {
    position: fixed; right: 84px; bottom: 26px; z-index: 1000; max-width: 230px; padding: 10px 30px 10px 14px; border-radius: 14px 14px 4px 14px;
    background: #fff; color: var(--cj-ink); font-size: .86rem; font-weight: 500; box-shadow: var(--cj-shadow-lg); cursor: pointer;
    animation: cjUp .4s cubic-bezier(.2,.7,.2,1);
}
.cj-chat-teaser[hidden] { display: none; }
.cj-chat-teaser-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--cj-muted); font-size: 16px; line-height: 1; padding: 2px 4px; }
.cj-chat {
    position: fixed; right: 20px; bottom: 86px; z-index: 1100; width: 370px; max-width: calc(100vw - 24px);
    height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden;
    border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.28), 0 0 0 1px rgba(15,23,42,.06);
    font-family: 'Roboto', sans-serif; transform-origin: 100% 100%;
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.96); transition: opacity .22s ease, transform .25s cubic-bezier(.2,.7,.2,1), visibility 0s .25s;
}
.cj-chat.open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .25s cubic-bezier(.2,.7,.2,1); }
.cj-chat-head {
    display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 16px; color: #fff;
    background: radial-gradient(300px 120px at 90% 0%, rgba(255,255,255,.18), transparent 60%), var(--cj-grad);
}
.cj-chat-avatar { position: relative; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.95); display: grid; place-items: center; flex-shrink: 0; }
.cj-chat-avatar img { width: 28px; height: auto; }
.cj-chat-avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.cj-chat-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .95rem; line-height: 1.2; }
.cj-chat-sub { font-size: .75rem; opacity: .9; }
.cj-chat-head button { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 10px; background: rgba(255,255,255,.15); color: #fff; display: grid; place-items: center; transition: background .2s; }
.cj-chat-head button + button { margin-left: 4px; }
.cj-chat-head button:hover { background: rgba(255,255,255,.28); }
.cj-chat .chat-messages { flex: 1; height: auto; padding: 16px 14px; background: #f6f8fc; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scroll-behavior: smooth; }
.cj-chat .message { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: .88rem; line-height: 1.5; word-break: break-word; animation: cjMsg .25s ease both; }
.cj-chat .message.bot { background: #fff; align-self: flex-start; border-bottom-left-radius: 5px; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.cj-chat .message.user { background: var(--cj-grad); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; margin-left: auto; }
@keyframes cjMsg { from { opacity: 0; transform: translateY(6px); } }
.cj-chat .typing-dots { display: flex; gap: 5px; padding: 12px 14px; }
.cj-chat .typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: #adb5bd; animation: tdBounce 1.1s ease-in-out infinite; }
.cj-chat .typing-dots span:nth-child(2) { animation-delay: .18s; }
.cj-chat .typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes tdBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); background: var(--cj-a); } }
.cj-chat .quick-replies { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 100%; animation: cjMsg .25s ease both; }
.cj-chat .quick-replies button {
    background: #fff; border: 1px solid rgba(var(--cj-a-rgb), .35); color: var(--cj-a); padding: 6px 12px; border-radius: 999px;
    font-size: .8rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.cj-chat .quick-replies button:hover { background: var(--cj-a); color: #fff; transform: translateY(-1px); }
.cj-chat-list { margin: 6px 0 4px; padding-left: 0; list-style: none; }
.cj-chat-list li { padding: 3px 0; }
.cj-chat-muted { color: var(--cj-muted); display: block; margin-top: 4px; }
.cj-chat-wa {
    display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 9px 12px; border-radius: 12px;
    background: #16a34a; color: #fff !important; font-weight: 600; text-decoration: none; transition: transform .15s, filter .15s;
}
.cj-chat-wa:hover { transform: translateY(-1px); filter: brightness(1.05); }
.cj-chat-link { display: inline-flex; align-items: center; margin-top: 6px; color: var(--cj-a); font-weight: 600; text-decoration: none; }
.cj-chat-link:hover { text-decoration: underline; }
.cj-chat-list .cj-chat-link { margin-top: 0; }
.cj-chat-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.cj-chat-plan { border: 1px solid var(--cj-line); border-radius: 12px; padding: 8px 10px; text-align: center; background: #f8fafc; }
.cj-chat-plan span { display: block; font-size: .75rem; color: var(--cj-muted); font-weight: 600; }
.cj-chat-plan b { display: block; font-family: 'Poppins', sans-serif; font-size: 1.05rem; color: var(--cj-ink); }
.cj-chat-plan small { color: var(--cj-muted); font-size: .7rem; }
.cj-chat-plan-top { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--cj-grad) border-box; }
.cj-chat-plan-top b { background: var(--cj-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cj-chat-foot { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--cj-line); background: #fff; }
.cj-chat-foot input {
    flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid #dfe3ea; border-radius: 999px; font-size: .9rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
.cj-chat-foot input:focus { border-color: var(--cj-a); box-shadow: 0 0 0 4px rgba(var(--cj-a-rgb), .12); }
.cj-chat-foot button { width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--cj-grad); color: #fff; display: grid; place-items: center; font-size: 1rem; transition: transform .15s; }
.cj-chat-foot button:hover { transform: scale(1.06); }
.cj-chat-note { padding: 0 12px 10px; background: #fff; text-align: center; font-size: .72rem; color: var(--cj-muted); }
.cj-chat-note a { color: var(--cj-a); text-decoration: none; font-weight: 600; }
@media (max-width: 575.98px) {
    .cj-chat { right: 12px; left: 12px; width: auto; max-width: none; bottom: 84px; height: calc(100vh - 110px); }
    .cj-chat-teaser { right: 80px; max-width: 200px; }
}

/* ═══════════ Celular ═══════════ */
html, body { overflow-x: clip; }   /* nada se sale de lado (clip no rompe la navbar fija) */
@media (max-width: 767.98px) {
    main .row.g-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 2rem; }   /* g-5 se salía 12 px de la pantalla */
    main section.my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
    .cj-chat-teaser { display: none !important; }   /* en celular tapaba el contenido */
    main .fs-5 { font-size: 1.05rem !important; }
    .navbar-collapse { padding: 6px 0 12px; }
    .navbar .nav-link::after { display: none; }
    /* Botones flotantes más pequeños, y el footer deja espacio para que no tapen el texto */
    .whatsapp-float, .chat-float { width: 48px !important; height: 48px !important; font-size: 24px !important; right: 14px !important; }
    .whatsapp-float { bottom: 76px !important; }
    .chat-float { bottom: 18px !important; }
    body:not(:has(.chat-float)) .whatsapp-float { bottom: 18px !important; }
    footer.bg-dark { padding-bottom: 96px !important; }
    footer > p, footer > .text-center > p { padding-left: 16px; padding-right: 16px; }
    .cj-chat { right: 10px; left: 10px; bottom: 76px; height: calc(100vh - 92px); height: calc(100dvh - 92px); }
}

/* ═══════════ Talleres: tablero de órdenes dibujado en HTML (en vez de una captura) ═══════════ */
.cj-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; background: #f1f5f9; min-height: 250px; }
.cj-kcol { background: #e2e8f0; border-radius: 10px; padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; }
.cj-kcol > b { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; padding: 0 4px 2px; display: flex; justify-content: space-between; }
.cj-kcol > b i { font-style: normal; background: #fff; border-radius: 999px; padding: 0 6px; color: var(--cj-a); }
.cj-kcard { background: #fff; border-radius: 8px; padding: 7px 8px; box-shadow: 0 1px 2px rgba(15,23,42,.08); font-size: .68rem; line-height: 1.3; color: #334155; border-left: 3px solid var(--cj-a); }
.cj-kcard strong { display: block; font-family: 'Poppins', sans-serif; font-size: .74rem; color: var(--cj-ink); letter-spacing: .03em; }
.cj-kcard.cj-k-warn { border-left-color: #f59e0b; }
.cj-kcard.cj-k-done { border-left-color: #22c55e; }
.cj-kcard.cj-k-move { animation: cjKMove 6s ease-in-out infinite; }
@keyframes cjKMove { 0%, 40% { transform: none; } 50%, 90% { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(var(--cj-a-rgb), .25); } 100% { transform: none; } }
@media (max-width: 575.98px) { .cj-kanban { gap: 5px; padding: 8px; min-height: 0; } .cj-kcard { font-size: .6rem; padding: 5px 6px; } .cj-kcard strong { font-size: .64rem; } }
.cj-kcol { min-width: 0; }
.cj-theme-taller .cj-f2 { top: -22px; }
@media (max-width: 575.98px) {
    .cj-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cj-kcol:nth-child(4) { display: none; }
    .cj-theme-taller .cj-f2 { top: -24px; }
}

/* ═══════════ Soluciones: caja POS dibujada en HTML ═══════════ */
.cj-pos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; padding: 12px; background: #f1f5f9; font-size: .74rem; color: #334155; }
.cj-pos-items { background: #fff; border-radius: 10px; padding: 6px 10px; }
.cj-pos-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dashed #e2e8f0; }
.cj-pos-row:last-child { border-bottom: 0; }
.cj-pos-row small { color: #94a3b8; }
.cj-pos-row b { color: var(--cj-ink); white-space: nowrap; }
.cj-pos-iva { color: #94a3b8; font-size: .68rem; }
.cj-pos-iva b { color: #94a3b8; font-weight: 500; }
.cj-pos-side { background: #fff; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.cj-pos-side small { color: #94a3b8; text-transform: uppercase; font-size: .62rem; letter-spacing: .05em; }
.cj-pos-side strong { font-family: 'Poppins', sans-serif; font-size: 1.35rem; line-height: 1; background: var(--cj-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cj-pos-pay { display: flex; gap: 4px; flex-wrap: wrap; }
.cj-pos-pay span { padding: 2px 7px; border-radius: 999px; border: 1px solid #e2e8f0; font-size: .64rem; }
.cj-pos-pay .on { background: var(--cj-soft); border-color: rgba(var(--cj-a-rgb), .4); color: var(--cj-a); font-weight: 600; }
.cj-pos-btn { margin-top: auto; text-align: center; padding: 7px; border-radius: 8px; background: var(--cj-grad); color: #fff; font-weight: 600; font-size: .7rem; }
.cj-pos-btn-2 { margin-top: 0; background: #fff; color: var(--cj-a); border: 1px solid rgba(var(--cj-a-rgb), .4); }
@media (max-width: 575.98px) { .cj-pos { font-size: .64rem; gap: 6px; padding: 8px; } .cj-pos-side strong { font-size: 1.05rem; } }

/* ═══════════ Desarrollo web: mini sitio dibujado en HTML ═══════════ */
.cj-web { position: relative; padding: 12px 12px 14px; background: #fff; min-height: 250px; }
.cj-web b, .cj-web span, .cj-web i, .cj-web em { display: block; border-radius: 6px; }
.cj-web-nav { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #eef2f7; }
.cj-web-nav i { width: 22px; height: 22px; border-radius: 7px; background: var(--cj-grad); }
.cj-web-nav span { width: 38px; height: 7px; background: #e2e8f0; }
.cj-web-nav em { margin-left: auto; width: 54px; height: 18px; border-radius: 999px; background: var(--cj-a); }
.cj-web-hero { margin: 14px 0; padding: 18px 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--cj-a-rgb), .14), color-mix(in srgb, var(--cj-b) 18%, transparent)); }
.cj-web-hero b { height: 12px; width: 62%; background: var(--cj-ink); opacity: .8; margin-bottom: 7px; }
.cj-web-hero b.s { width: 42%; height: 8px; opacity: .35; }
.cj-web-hero em { margin-top: 10px; width: 78px; height: 20px; border-radius: 999px; background: var(--cj-grad); }
.cj-web-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 68%; }
.cj-web-cards > div { border: 1px solid #eef2f7; border-radius: 10px; padding: 8px; }
.cj-web-cards i { width: 18px; height: 18px; border-radius: 6px; background: var(--cj-soft); margin-bottom: 6px; }
.cj-web-cards b { height: 6px; background: #cbd5e1; margin-bottom: 4px; }
.cj-web-cards b.s { width: 60%; background: #e2e8f0; }
.cj-web-phone {
    position: absolute; right: 14px; bottom: 12px; width: 26%; padding: 8px 6px; border-radius: 16px; background: #fff;
    border: 3px solid #0f172a; box-shadow: 0 14px 30px rgba(15,23,42,.25); animation: cjFloat 6s ease-in-out infinite;
}
.cj-web-phone .cj-web-nav { padding-bottom: 6px; }
.cj-web-phone .cj-web-nav i { width: 14px; height: 14px; }
.cj-web-phone .cj-web-nav em { width: 28px; height: 10px; }
.cj-web-phone .cj-web-hero { margin: 8px 0; padding: 10px 8px; }
.cj-web-phone .cj-web-hero em { width: 44px; height: 12px; }
.cj-web-cards.one { width: 100%; grid-template-columns: 1fr; }
@media (max-width: 575.98px) { .cj-web { min-height: 0; } .cj-web-cards { width: 66%; } }

/* Pestañas de precios (Soluciones) */
#priceTabs .nav-link { border-radius: 999px; color: var(--cj-a); background: #fff; border: 1px solid rgba(var(--cj-a-rgb), .25); transition: transform .2s, box-shadow .2s; }
#priceTabs .nav-link:hover { transform: translateY(-1px); }
#priceTabs .nav-link.active { background: var(--cj-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(var(--cj-a-rgb), .3); }

/* Plan único destacado (talleres) */
.cj-plan-feature { border: 2px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, var(--cj-grad) border-box; box-shadow: 0 24px 60px rgba(var(--cj-a-rgb), .2); padding-top: 34px !important; }
.cj-plan-badge { background: var(--cj-grad) !important; color: #fff; font-size: .78rem; box-shadow: 0 6px 16px rgba(var(--cj-a-rgb), .35); }
.cj-plan-feature .custom-select-container { margin-bottom: 18px; width: 100%; max-width: 300px; }
#precioTaller { display: inline-block; }

/* ═══════════ Tirilla de ejemplo (papel térmico dibujado en HTML) ═══════════ */
.cj-tirilla-wrap { position: relative; display: flex; justify-content: center; padding: 26px 0 10px; }
.cj-tirilla-wrap::before {   /* boca de la impresora */
    content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(340px, 92%); height: 30px; border-radius: 14px;
    background: linear-gradient(180deg, #334155, #0f172a); box-shadow: 0 10px 24px rgba(15,23,42,.25); z-index: 2;
}
.cj-tirilla {
    position: relative; z-index: 1; width: min(290px, 84%); margin-top: 6px; padding: 18px 16px 26px;
    background: #fffef9; color: #111; font-family: 'Courier New', ui-monospace, monospace; font-size: 12px; line-height: 1.45;
    box-shadow: 0 18px 40px rgba(15,23,42,.18);
    /* borde inferior rasgado */
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
            mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
}
.cj-t-center { text-align: center; }
.cj-t-logo { width: 38px; height: 38px; margin: 0 auto 6px; border-radius: 10px; display: grid; place-items: center; background: #111; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; }
.cj-t-neg { display: block; font-size: 13px; letter-spacing: .04em; }
.cj-t-sep { border-top: 1px dashed #9ca3af; margin: 8px 0; }
.cj-t-row { display: flex; justify-content: space-between; gap: 8px; }
.cj-t-sub { color: #374151; padding-left: 8px; }
.cj-t-item { font-weight: 700; }
.cj-t-total { font-size: 15px; font-weight: 700; margin: 4px 0; }
.cj-t-qr svg { display: block; margin: 4px auto; }
.cj-t-cufe { font-size: 10px; color: #4b5563; word-break: break-all; }
.cj-t-gracias { margin-top: 8px; font-weight: 700; }
/* Al aparecer, la tirilla "sale" de la impresora */
.cj-reveal .cj-tirilla { clip-path: inset(0 0 100% 0); transform: translateY(-30px); transition: clip-path 1.6s cubic-bezier(.4,.1,.2,1) .2s, transform 1.6s cubic-bezier(.4,.1,.2,1) .2s; }
.cj-reveal.cj-visible .cj-tirilla { clip-path: inset(0 0 0 0); transform: none; }
.cj-tirilla-sec .solution-features li { font-size: .95rem; padding: 5px 0; }
@media (prefers-reduced-motion: reduce) { .cj-reveal .cj-tirilla { clip-path: none; transform: none; } }

/* ═════ Página principal sobria (body.cj-sobrio): menos efectos, aspecto más de producto real ═════ */
.cj-sobrio { background: #fafaf8; }
.cj-sobrio main section .text-center > h2::after, .cj-sobrio main section h2.text-center::after { display: none; }
.cj-sobrio .navbar { background-color: var(--cj-dark-1) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cj-sobrio .navbar .nav-link::after { background: var(--cj-b); height: 2px; }
.cj-sobrio .btn { border-radius: 10px; transition: background-color .15s, color .15s, border-color .15s; }
.cj-sobrio .btn:hover, .cj-sobrio .btn:focus { transform: none !important; }
.cj-sobrio .btn-primary, .cj-sobrio .btn-primary:disabled { background: var(--cj-a); box-shadow: none; }
.cj-sobrio .btn-primary:hover, .cj-sobrio .btn-primary:focus, .cj-sobrio .btn-primary:active { background: color-mix(in srgb, var(--cj-a) 85%, #000); box-shadow: none; }
.cj-sobrio .btn:hover .bi-arrow-right { transform: translateX(3px); }
.cj-sobrio .btn:active { transform: translateY(1px) !important; }

/* Hero claro, sin cuadrícula ni manchas de luz */
.cj-sobrio .cj-hero { color: var(--cj-ink); background: linear-gradient(180deg, #fff 55%, color-mix(in srgb, var(--cj-soft) 55%, #fff) 100%); border-bottom: 1px solid #ececec; padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 80px); }
.cj-sobrio .cj-hero h1 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -.015em; }
.cj-sobrio .cj-acento { color: var(--cj-a); }
.cj-sobrio .cj-lead { color: #4b5563; }
.cj-sobrio .cj-pill { background: #f3f4f6; border: 0; color: #374151; border-radius: 6px; font-weight: 500; }
.cj-sobrio .cj-btn-ghost { color: var(--cj-ink); border: 1px solid #d1d5db; background: #fff; }
.cj-sobrio .cj-btn-ghost:hover { color: var(--cj-ink); background: #f3f4f6; }
.cj-sobrio .cj-hero-checks { color: #4b5563; }
.cj-sobrio .cj-hero-checks .bi { color: var(--cj-a); }
/* La captura conserva la inclinación con el mouse y las notificaciones flotantes */
.cj-sobrio .cj-mock-wrap::before { display: none; }
.cj-sobrio .cj-mock { border-radius: 10px; border: 1px solid #e5e7eb; box-shadow: 0 18px 40px rgba(17,24,39,.14); }
.cj-sobrio .cj-float { border: 1px solid #ececec; box-shadow: 0 10px 24px rgba(17,24,39,.12); }

/* Cifras en una franja simple (sin vidrio ni montarse sobre el hero) */
.cj-sobrio .cj-stats-wrap { margin-top: 0; padding-top: 28px; }
.cj-sobrio .cj-stat { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 8px; }
.cj-sobrio .cj-stat:hover { transform: none; }
.cj-sobrio .cj-stat-num { background: none; color: var(--cj-ink); -webkit-background-clip: border-box; background-clip: border-box; }

/* Tarjetas quietas: sin elevarse ni foco de luz */
.cj-sobrio .feature-box, .cj-sobrio .why-box, .cj-sobrio .pricing-card { box-shadow: none; border-color: #e7e7e7; border-radius: 12px; }
.cj-sobrio .feature-box:hover, .cj-sobrio .why-box:hover, .cj-sobrio .pricing-card:hover { transform: none; box-shadow: none; border-color: #d6d6d6; }
.cj-sobrio .feature-box::before, .cj-sobrio .why-box::before, .cj-sobrio .pricing-card::before { display: none; }

/* Detalles sutiles */
/* Palabra clave del título resaltada como con marcador (se pinta una vez al cargar) */
.cj-sobrio .cj-acento {
    background: linear-gradient(transparent 64%, rgba(var(--cj-a-rgb), .16) 64%, rgba(var(--cj-a-rgb), .16) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    animation: cjMarcador .9s cubic-bezier(.4,.1,.2,1) .35s forwards;
}
@keyframes cjMarcador { to { background-size: 100% 100%; } }
/* Etiqueta del hero con un punto del color de la página */
.cj-sobrio .cj-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cj-a); }
/* Cifras separadas por líneas finas */
@media (min-width: 768px) {
    .cj-sobrio .cj-stats-wrap .row > [class*="col"] + [class*="col"] .cj-stat { border-left: 1px solid #e5e5e5 !important; border-radius: 0; }
}
.cj-sobrio .cj-stat-label { display: block; margin-top: 2px; }
/* Tarjetas: al pasar el mouse el borde toma el color de la página y el ícono sube un poco */
.cj-sobrio .feature-box:hover, .cj-sobrio .why-box:hover, .cj-sobrio .pricing-card:hover { border-color: rgba(var(--cj-a-rgb), .35); }
.cj-sobrio .feature-box img, .cj-sobrio .feature-box .bi, .cj-sobrio .why-box img, .cj-sobrio .why-box .bi { transition: transform .25s ease; }
.cj-sobrio .feature-box:hover img, .cj-sobrio .feature-box:hover .bi, .cj-sobrio .why-box:hover img, .cj-sobrio .why-box:hover .bi { transform: translateY(-3px); }
/* Preguntas frecuentes: la abierta queda marcada a la izquierda */
.cj-sobrio .accordion-item { transition: box-shadow .2s; }
.cj-sobrio .accordion-item:has(.accordion-collapse.show) { box-shadow: inset 3px 0 0 var(--cj-a); }
/* Foco visible al navegar con teclado */
.cj-sobrio a:focus-visible, .cj-sobrio button:focus-visible, .cj-sobrio .btn:focus-visible { outline: 2px solid var(--cj-a); outline-offset: 2px; box-shadow: none; }
/* Enlaces del pie: subrayado al pasar el mouse */
.cj-sobrio footer a.text-decoration-none:hover { text-decoration: underline !important; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cj-sobrio .cj-acento { animation: none; background-size: 100% 100%; } }