/* ==========================================================================
   Pasión Fiscal — estilos (Bootstrap 5, mobile-first)
   Paleta tomada del diseño original (PDF).
   ========================================================================== */
:root {
  --pf-navy: #000a3a;
  --pf-navy-2: #111a44;
  --pf-ink: #0b0d1a;
  --pf-blue: #0a64c8;
  --pf-blue-2: #1e5ae6;
  --pf-gray: #8a8a8a;
  --pf-light: #f4f6fb;
  --bs-primary: #0a64c8;
  --bs-primary-rgb: 10, 100, 200;
  --bs-link-color: #0a64c8;
  --bs-link-color-rgb: 10, 100, 200;
  --bs-link-hover-color: #084f9f;
  --bs-body-font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #1d2233;
}

body { background: #fff; overflow-x: hidden; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4 { font-weight: 700; color: var(--pf-navy-2); }
img { max-width: 100%; height: auto; }
.btn { font-weight: 600; border-radius: 2px; padding: .65rem 1.4rem; }
.btn-sm { padding: .35rem .8rem; }
.btn-primary { --bs-btn-bg: var(--pf-blue); --bs-btn-border-color: var(--pf-blue); --bs-btn-hover-bg: #084f9f; --bs-btn-hover-border-color: #084f9f; --bs-btn-active-bg: #073f80; }
.btn-outline-primary { --bs-btn-color: var(--pf-blue); --bs-btn-border-color: var(--pf-blue); --bs-btn-hover-bg: var(--pf-blue); --bs-btn-hover-border-color: var(--pf-blue); }
.form-control, .form-select { min-height: 48px; border-radius: 2px; }
textarea.form-control { min-height: 120px; }
.form-check-input { width: 1.25em; height: 1.25em; }
.text-pf-blue { color: var(--pf-blue) !important; }
.bg-pf-navy { background: var(--pf-navy) !important; }
.bg-pf-light { background: var(--pf-light) !important; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: #fff; padding: .5rem 1rem; }
.skip-link:focus { left: 0; }

/* Top bar ---------------------------------------------------------------- */
.pf-topbar { background: var(--pf-gray); color: #fff; font-size: .85rem; }
.pf-topbar a { color: #fff; text-decoration: none; }
.pf-topbar .social a { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.25); align-items: center; justify-content: center; }

/* Navbar ----------------------------------------------------------------- */
.pf-navbar { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.pf-navbar .navbar-brand img { height: 40px; width: auto; }
.pf-navbar .nav-link { color: var(--pf-navy-2); font-weight: 500; padding: .75rem .9rem; }
.pf-navbar .nav-link.active, .pf-navbar .nav-link:hover { color: var(--pf-blue); }
.pf-navbar .navbar-toggler { border: 0; padding: .5rem; }
.pf-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(10,100,200,.25); }
@media (max-width: 991.98px) {
  .pf-navbar .navbar-collapse { padding-bottom: 1rem; }
  .pf-navbar .nav-link { padding: .8rem .25rem; border-bottom: 1px solid #eef0f5; }
  .pf-navbar .dropdown-menu { border: 0; box-shadow: none; padding-left: 1rem; }
}

/* Hero ------------------------------------------------------------------- */
.pf-hero { position: relative; color: #fff; background: var(--pf-navy) center/cover no-repeat; min-height: 440px; display: flex; align-items: center; text-align: center; overflow: hidden; }
.pf-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,5,40,.55) 0%, rgba(0,10,58,.8) 100%); }
.pf-hero > .container { position: relative; z-index: 1; }
.pf-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.3rem); }
.pf-hero .lead { max-width: 720px; margin: 0 auto 1.5rem; font-size: clamp(1rem, 2.2vw, 1.2rem); }
.pf-circle { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.pf-circle.solid { background: rgba(30,90,230,.55); }
.pf-circle.ring { border: 3px solid var(--pf-blue); }

.pf-page-hero { position: relative; background: radial-gradient(ellipse at top, #0b1450 0%, #03041a 70%); color: #fff; padding: 4.5rem 0 5.5rem; text-align: center; overflow: hidden; }
.pf-page-hero h1 { color: #fff; font-size: clamp(1.8rem, 4.5vw, 3rem); }
.pf-page-hero p { color: rgba(255,255,255,.85); max-width: 760px; margin: 0 auto; }
.pf-page-hero.photo { background-size: cover; background-position: center; }
.pf-page-hero.photo::before { content: ""; position: absolute; inset: 0; background: rgba(0,5,30,.6); }
.pf-page-hero > .container { position: relative; z-index: 1; }
.pf-sheet { background: #fff; border-radius: 14px; margin-top: -3.5rem; position: relative; z-index: 2; padding: 1.25rem; box-shadow: 0 10px 40px rgba(0,10,58,.12); }
@media (min-width: 768px) { .pf-sheet { padding: 2.5rem; } }

/* Secciones --------------------------------------------------------------- */
.pf-section { padding: 3.5rem 0; }
@media (min-width: 992px) { .pf-section { padding: 5rem 0; } }
.pf-section-title { text-align: center; margin-bottom: .5rem; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.pf-section-sub { text-align: center; color: #333a55; margin-bottom: 2.5rem; }
.pf-dark { background: radial-gradient(ellipse at center, #16204f 0%, #05050f 70%); color: #fff; }
.pf-dark h2, .pf-dark h3 { color: #fff; }

/* Tarjetas de servicio ---------------------------------------------------- */
.pf-service-card { position: relative; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; color: #fff; text-decoration: none; }
.pf-service-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pf-service-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,10,58,.9) 100%); }
.pf-service-card span { position: absolute; left: 0; right: 0; bottom: 1.2rem; z-index: 1; text-align: center; font-weight: 700; padding: 0 .75rem; }
.pf-service-card:hover img { transform: scale(1.05); }

/* Nosotros collage -------------------------------------------------------- */
.pf-collage { position: relative; max-width: 420px; margin: 0 auto; padding-right: 22%; padding-bottom: 8%; }
.pf-collage .main { border-radius: 10px; width: 100%; }
.pf-collage .inset { position: absolute; right: 0; bottom: 18%; width: 45%; border-radius: 10px; border: 4px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Servicios exclusivos ---------------------------------------------------- */
.pf-exclusive { border: 1px solid rgba(255,255,255,.7); border-radius: 6px; padding: 2rem 1rem; text-align: center; height: 100%; color: #fff; text-decoration: none; display: block; transition: background .2s, transform .2s; }
.pf-exclusive:hover { background: rgba(255,255,255,.06); color: #fff; transform: translateY(-3px); }
.pf-exclusive img { height: 76px; width: auto; margin-bottom: 1.25rem; }
.pf-exclusive h3 { font-size: 1.05rem; }

/* Blog cards ----------------------------------------------------------------- */
.pf-post-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; background: var(--pf-navy) center/cover; color: #fff; text-decoration: none; padding: 1.25rem; position: relative; border-radius: 4px; overflow: hidden; }
.pf-post-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,10,58,.1), rgba(0,10,58,.9)); }
.pf-post-card > * { position: relative; }
.pf-post-card h3 { color: #fff; font-size: 1.15rem; text-align: center; }
.pf-post-card:hover { color: #fff; }

/* Testimonios ----------------------------------------------------------------- */
.pf-testimonial { text-align: center; }
.pf-testimonial .avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: #a0a1a5; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 3rem; }
.pf-quote-box { background: var(--pf-blue); color: #fff; border-radius: 6px; padding: 1.5rem; }

/* Contacto -------------------------------------------------------------------- */
.pf-contact .form-control { background: #b4b5b8; border: 0; color: #111; }
.pf-contact .form-control::placeholder { color: #3d3f45; }
.pf-contact .form-control:focus { background: #c9cacd; box-shadow: 0 0 0 .2rem rgba(10,100,200,.3); }
.pf-contact-item { display: flex; align-items: center; gap: .75rem; }
.pf-contact-item .ico { width: 42px; height: 42px; border-radius: 50%; background: #a0a1a5; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Servicios (tabs) -------------------------------------------------------------- */
.pf-services-wrap { position: relative; }
.pf-service-tabs { background: rgba(255,255,255,.35); border-radius: 4px; padding: 1rem; }
.pf-service-tabs .nav-link { background: linear-gradient(90deg, #0a0f2e 0%, rgba(10,15,46,.4) 100%); color: #fff; border-radius: 30px 0 0 30px; margin-bottom: .75rem; font-weight: 700; text-align: left; padding: .7rem 1.1rem; width: 100%; }
.pf-service-tabs .nav-link.active { background: #fff; color: var(--pf-blue); }
.pf-service-panel { background: #fff; border-radius: 4px; padding: 1.5rem; }
@media (min-width: 768px) { .pf-service-panel { padding: 2.5rem; } }
.pf-service-panel h2 { color: var(--pf-blue); }
.pf-rich ul { list-style: none; padding-left: 0; }
.pf-rich ul li { position: relative; padding-left: 1.4rem; margin-bottom: .35rem; }
.pf-rich ul li::before { content: ""; position: absolute; left: 0; top: .45em; width: .65em; height: .65em; border: 2px solid var(--pf-blue); border-radius: 50%; }
.pf-rich h2 { font-size: 1.5rem; margin-top: 1.5rem; }
.pf-rich h3 { font-size: 1.2rem; margin-top: 1.25rem; }

/* Catálogo ----------------------------------------------------------------------- */
.pf-card { border: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 22px rgba(0,10,58,.09); height: 100%; }
.pf-card .card-img-top { aspect-ratio: 16 / 10; object-fit: cover; }
.pf-card .badge { font-weight: 600; }
.pf-event-date { background: var(--pf-navy); color: #fff; text-align: center; border-radius: 6px; padding: .5rem .75rem; min-width: 64px; }
.pf-event-date .d { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.pf-event-date .m { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.pf-cta-tile { background: var(--pf-blue); color: #fff; display: inline-flex; flex-direction: column; align-items: center; padding: 1.25rem 2rem; text-decoration: none; border-bottom: 5px solid var(--pf-navy); }
.pf-cta-tile:hover { color: #fff; background: #084f9f; }
.pf-cta-tile img { height: 60px; margin-bottom: .5rem; }
.pf-price { font-size: 1.8rem; font-weight: 800; color: var(--pf-navy-2); }
.pf-plan { border: 2px solid #e4e8f2; border-radius: 10px; padding: 1.75rem; height: 100%; display: flex; flex-direction: column; }
.pf-plan.active { border-color: var(--pf-blue); }
.pf-lesson-list .list-group-item { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; }
.pf-lesson-list .bi { flex: none; }

/* Registro / checkout (pantalla del PDF) ---------------------------------------- */
.pf-split { min-height: calc(100vh - 140px); }
.pf-split-img { background: #111 url("../img/registro-auditorio.jpg") center/cover no-repeat; min-height: 180px; }
.pf-form-gray .form-control, .pf-form-gray .form-select { background: #b4b5b8; border: 0; color: #111; }
.pf-form-gray .form-control::placeholder { color: #3d3f45; }
.pf-important { background: #b4b5b8; border-radius: 8px; padding: 1.25rem; }
.pf-important.blue { background: var(--pf-blue); color: #fff; }

/* Aula -------------------------------------------------------------------------- */
.pf-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.pf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.progress { height: .6rem; }
.pf-account-nav .nav-link { color: var(--pf-navy-2); border-radius: 4px; }
.pf-account-nav .nav-link.active { background: var(--pf-blue); color: #fff; }
@media (max-width: 767.98px) {
  .pf-account-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pf-account-nav .nav-link { white-space: nowrap; }
}

/* Footer ------------------------------------------------------------------------ */
.pf-footer { background: var(--pf-navy); color: #fff; padding: 3rem 0 2rem; }
.pf-footer a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .9rem; }
.pf-footer a:hover { color: #fff; }
.pf-footer .logo { height: 46px; width: auto; }
.pf-footer .social a { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--pf-navy); align-items: center; justify-content: center; font-size: 1.2rem; margin-left: .5rem; }

/* Sandbox ---------------------------------------------------------------------- */
.pf-sandbox-banner { background: repeating-linear-gradient(45deg, #ffc107, #ffc107 12px, #111 12px, #111 24px); padding: 6px; }
.pf-sandbox-banner > div { background: #fff8e1; padding: 1rem; font-weight: 700; text-align: center; }

/* Admin ------------------------------------------------------------------------- */
.pf-admin-body { background: #f3f5fa; }
.pf-admin-sidebar { background: var(--pf-navy); min-height: 100vh; }
.pf-admin-sidebar .nav-link { color: rgba(255,255,255,.8); padding: .6rem 1rem; border-radius: 4px; }
.pf-admin-sidebar .nav-link.active, .pf-admin-sidebar .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.pf-admin-sidebar .nav-title { color: rgba(255,255,255,.45); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; padding: 1rem 1rem .25rem; }
.pf-stat { background: #fff; border-radius: 8px; padding: 1rem 1.25rem; box-shadow: 0 2px 10px rgba(0,10,58,.06); height: 100%; }
.pf-stat .v { font-size: 1.6rem; font-weight: 800; color: var(--pf-navy-2); }
.pf-admin-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,10,58,.06); padding: 1.25rem; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.table td, .table th { vertical-align: middle; }
code.pf-mono { font-size: .85em; word-break: break-all; }
@media (min-width: 768px) { .position-md-absolute { position: absolute !important; } }
