:root {
    --navy: #0a1f44;
    --navy-2: #0f2a5c;
    --navy-3: #16356f;
    --gold: #c9a24d;
    --gold-2: #e2c27a;
    --ink: #14213d;
    --muted: #5b6b86;
    --line: #e5e9f0;
    --soft: #f6f7fa;
    --bs-primary: #0a1f44;
    --bs-link-color: #0a1f44;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -.01em; color: var(--navy); }

/* ---------- Botones ---------- */
.btn { border-radius: 2px; font-weight: 600; letter-spacing: .03em; padding: .7rem 1.6rem; transition: all .25s ease; }
.btn-lg { padding: .9rem 2.1rem; }
.btn-sm { padding: .5rem 1.1rem; }
.btn-gold { background: var(--gold); border: 1px solid var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--navy); transform: translateY(-1px); }
.btn-outline-light-gold { border: 1px solid rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.btn-outline-light-gold:hover { border-color: var(--gold); color: var(--gold); }
.btn-navy { background: var(--navy); border: 1px solid var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-3); border-color: var(--navy-3); color: #fff; }
.btn-primary { background: var(--navy); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-3); border-color: var(--navy-3); }

/* ---------- Navbar ---------- */
.jr-nav { background: var(--navy); border-bottom: 1px solid rgba(201, 162, 77, .35); padding: .9rem 0; }
.jr-nav .navbar-brand { font-family: 'Playfair Display', Georgia, serif; color: #fff; font-size: 1.5rem; letter-spacing: .02em; }
.jr-nav .navbar-brand span { color: var(--gold); }
.jr-nav .nav-link { color: rgba(255, 255, 255, .85); font-size: .85rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; margin: 0 .35rem; }
.jr-nav .nav-link:hover, .jr-nav .nav-link.active { color: var(--gold); }
.jr-nav .navbar-toggler { border-color: rgba(255, 255, 255, .4); }
.jr-nav .navbar-toggler-icon { filter: invert(1); }

/* ---------- Hero ---------- */
.jr-hero {
    background: radial-gradient(circle at 80% 0%, var(--navy-3) 0%, var(--navy) 60%);
    color: #fff;
    padding: 5.5rem 0 5rem;
    position: relative;
    overflow: hidden;
}
.jr-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.jr-hero h1 { color: #fff; font-weight: 600; line-height: 1.15; }
.jr-hero h1 em { color: var(--gold); font-style: normal; }
.jr-lead { color: rgba(255, 255, 255, .78); font-size: 1.15rem; max-width: 580px; line-height: 1.7; }
.jr-eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .75rem; color: var(--gold); font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
.jr-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--gold); }
.jr-hero-frame { position: relative; padding: 0 14px 14px 0; }
.jr-hero-frame::before { content: ''; position: absolute; right: 0; bottom: 0; width: 82%; height: 82%; border: 2px solid var(--gold); z-index: 0; }
.jr-hero-img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }

/* ---------- Secciones ---------- */
.jr-section { padding: 5rem 0; }
.jr-soft { background: var(--soft); }
.jr-dark { background: var(--navy); color: #fff; }
.jr-dark h2, .jr-dark h3 { color: #fff; }
.jr-title { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
.jr-title .jr-eyebrow { justify-content: center; }
.jr-title .jr-eyebrow::before { display: none; }
.jr-title h2 { font-size: 2.2rem; font-weight: 600; }
.jr-title h2::after { content: ''; display: block; width: 56px; height: 2px; background: var(--gold); margin: 1.1rem auto 0; }
.jr-title p { color: var(--muted); margin: 1rem 0 0; }
.jr-dark .jr-title p { color: rgba(255, 255, 255, .7); }

/* ---------- Tarjetas con imagen ---------- */
.jr-media-card { background: #fff; border: 1px solid var(--line); height: 100%; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; display: flex; flex-direction: column; }
.jr-media-card .ph { overflow: hidden; aspect-ratio: 16 / 10; background: var(--soft); }
.jr-media-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.jr-media-card .body { padding: 1.5rem 1.6rem 1.8rem; border-top: 3px solid var(--gold); flex: 1; }
.jr-media-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; }
.jr-media-card p { color: var(--muted); margin: 0; line-height: 1.65; }
.jr-media-card .more { display: inline-block; margin-top: 1rem; color: var(--navy); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.jr-media-card .more::after { content: ' \2192'; color: var(--gold); }
a.jr-media-card { color: inherit; text-decoration: none; }
.jr-media-card:hover { transform: translateY(-5px); box-shadow: 0 22px 45px rgba(10, 31, 68, .14); }
.jr-media-card:hover img { transform: scale(1.05); }

/* ---------- Tarjetas simples ---------- */
.jr-card { display: block; height: 100%; padding: 2rem; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); color: inherit; text-align: center; }
.jr-card p { color: var(--muted); margin-bottom: 0; }

/* ---------- Nota ---------- */
.jr-note { border-left: 3px solid var(--gold); background: var(--soft); padding: 1.6rem 2rem; }
.jr-note h3 { font-size: 1.3rem; }
.jr-note p { color: var(--muted); }

/* ---------- Cifras ---------- */
.jr-stats { background: var(--navy-2); color: #fff; }
.jr-stat { text-align: center; padding: 2rem 1rem; border-right: 1px solid rgba(201, 162, 77, .25); }
.jr-stat:last-child { border-right: 0; }
.jr-stat .n { font-family: 'Playfair Display', Georgia, serif; font-size: 2.6rem; color: var(--gold); line-height: 1; }
.jr-stat .l { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .75); margin-top: .5rem; }

/* ---------- Ventajas ---------- */
.jr-adv { text-align: left; padding: 1.6rem; border: 1px solid rgba(201, 162, 77, .3); height: 100%; background: rgba(255, 255, 255, .03); transition: border-color .25s, background .25s; }
.jr-adv:hover { border-color: var(--gold); background: rgba(255, 255, 255, .06); }
.jr-adv .ic { width: 46px; height: 46px; border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 1rem; }
.jr-adv h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.jr-adv p { color: rgba(255, 255, 255, .7); margin: 0; font-size: .95rem; line-height: 1.6; }

/* ---------- Proceso ---------- */
.jr-step { text-align: center; position: relative; padding: 0 .75rem; }
.jr-step .num { width: 54px; height: 54px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold); color: var(--navy); font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; background: #fff; }
.jr-step h3 { font-size: 1.1rem; }
.jr-step p { color: var(--muted); font-size: .92rem; }

/* ---------- Testimonios ---------- */
.jr-testimonial { background: #fff; border: 1px solid var(--line); padding: 2rem; height: 100%; position: relative; }
.jr-testimonial::before { content: '\201C'; position: absolute; top: .2rem; left: 1.4rem; font-family: 'Playfair Display', Georgia, serif; font-size: 4.5rem; color: var(--gold); line-height: 1; }
.jr-testimonial blockquote { margin: 2rem 0 1.5rem; color: var(--ink); line-height: 1.75; font-style: italic; }
.jr-testimonial .who { border-top: 1px solid var(--line); padding-top: 1rem; }
.jr-testimonial .who strong { display: block; color: var(--navy); }
.jr-testimonial .who span { color: var(--muted); font-size: .88rem; }
.jr-stars { color: var(--gold); letter-spacing: .15em; font-size: .9rem; }

/* ---------- CTA ---------- */
.jr-cta { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; padding: 3.2rem 3rem; border-top: 3px solid var(--gold); }
.jr-cta h2 { color: #fff; font-size: 1.9rem; }
.jr-cta p { color: rgba(255, 255, 255, .78); }

/* ---------- Formulario ---------- */
.form-control, .form-select { border-radius: 2px; border-color: #d5dbe6; padding: .75rem 1rem; }
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(201, 162, 77, .2); }
.form-label { font-weight: 600; font-size: .85rem; color: var(--navy); letter-spacing: .03em; }
.jr-panel { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 2.2rem; box-shadow: 0 18px 40px rgba(10, 31, 68, .06); }
.jr-contact-info { background: var(--navy); color: #fff; padding: 2.2rem; height: 100%; border-top: 3px solid var(--gold); }
.jr-contact-info h3 { color: #fff; }
.jr-contact-info li { margin-bottom: .9rem; color: rgba(255, 255, 255, .8); list-style: none; }
.jr-contact-info ul { padding: 0; margin: 1.2rem 0 0; }
.jr-contact-info i { color: var(--gold); width: 1.6rem; }

/* ---------- Login / registro ---------- */
.jr-auth { min-height: 100vh; display: flex; align-items: center; background: radial-gradient(circle at 80% 0%, var(--navy-3) 0%, var(--navy) 60%); }
.jr-auth .card { border-radius: 2px; border: 0; border-top: 3px solid var(--gold); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }

/* ---------- Footer ---------- */
.jr-footer { background: #071530; color: rgba(255, 255, 255, .7); font-size: .9rem; padding: 3rem 0 2rem; margin-top: 0; border-top: 3px solid var(--gold); }
.jr-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.jr-footer a:hover { color: var(--gold); }
.jr-footer .brand { font-family: 'Playfair Display', Georgia, serif; color: #fff; font-size: 1.4rem; }
.jr-footer .brand span { color: var(--gold); }
.jr-footer h4 { font-family: 'Inter', sans-serif; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.jr-footer ul { list-style: none; padding: 0; margin: 0; }
.jr-footer li { margin-bottom: .45rem; }
.jr-footer .copy { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2rem; padding-top: 1.2rem; font-size: .8rem; }

@media (max-width: 767.98px) {
    .jr-hero { padding: 3.5rem 0; }
    .jr-section { padding: 3.5rem 0; }
    .jr-title h2 { font-size: 1.8rem; }
    .jr-stat { border-right: 0; border-bottom: 1px solid rgba(201, 162, 77, .25); }
    .jr-cta { padding: 2rem 1.5rem; }
}