/* ==========================================================================
   Fundación Sonrisas (parodia)
   Estilos sobre Bootstrap 5. Todas las fuentes se sirven en local.
   ========================================================================== */

/* Fuentes locales ---------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin-wght-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
}

/* Tokens ------------------------------------------------------------------- */
:root {
  --fbv-paper: #fbf6ee;
  --fbv-paper-2: #f4ece0;
  --fbv-card: #fffdf8;
  --fbv-ink: #1d2a24;
  --fbv-muted: #5b6861;
  --fbv-forest: #1f4d3a;
  --fbv-forest-2: #2d6a50;
  --fbv-clay: #c4552f;
  --fbv-clay-2: #a94626;
  --fbv-sun: #f2c14e;
  --fbv-rose: #f6dfd3;
  --fbv-mint: #dcebe2;
  --fbv-stamp: #b3261e;
  --fbv-line: rgba(29, 42, 36, 0.12);
  --fbv-shadow: 0 1px 2px rgba(29, 42, 36, 0.06), 0 14px 34px -14px rgba(29, 42, 36, 0.22);
  --fbv-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;

  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-bg: var(--fbv-paper);
  --bs-body-color: var(--fbv-ink);
  --bs-secondary-color: var(--fbv-muted);
  --bs-link-color-rgb: 196, 85, 47;
  --bs-link-hover-color-rgb: 169, 70, 38;
  --bs-border-color: var(--fbv-line);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.font-display {
  font-family: var(--fbv-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fbv-ink);
}

::selection {
  background: var(--fbv-sun);
  color: var(--fbv-ink);
}

/* Utilidades --------------------------------------------------------------- */
.py-6 { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.bg-paper-2 { background-color: var(--fbv-paper-2); }
.text-clay { color: var(--fbv-clay) !important; }
.text-sun { color: var(--fbv-sun) !important; }
.bg-clay { background-color: var(--fbv-clay) !important; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fbv-clay);
}

.section-title {
  font-size: clamp(1.9rem, 3.3vw, 2.8rem);
  line-height: 1.1;
}

/* Botones ------------------------------------------------------------------ */
.btn { font-weight: 600; }

.btn-clay {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--fbv-clay);
  --bs-btn-border-color: var(--fbv-clay);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--fbv-clay-2);
  --bs-btn-hover-border-color: var(--fbv-clay-2);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8f3b20;
  --bs-btn-active-border-color: #8f3b20;
  --bs-btn-focus-shadow-rgb: 196, 85, 47;
}

.btn-outline-forest {
  --bs-btn-color: var(--fbv-forest);
  --bs-btn-border-color: var(--fbv-forest);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--fbv-forest);
  --bs-btn-hover-border-color: var(--fbv-forest);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #163a2b;
  --bs-btn-active-border-color: #163a2b;
  --bs-btn-disabled-color: var(--fbv-muted);
  --bs-btn-disabled-border-color: var(--fbv-line);
  --bs-btn-focus-shadow-rgb: 31, 77, 58;
}

.btn-sun {
  --bs-btn-color: var(--fbv-ink);
  --bs-btn-bg: var(--fbv-sun);
  --bs-btn-border-color: var(--fbv-sun);
  --bs-btn-hover-color: var(--fbv-ink);
  --bs-btn-hover-bg: #e9b23a;
  --bs-btn-hover-border-color: #e9b23a;
  --bs-btn-active-color: var(--fbv-ink);
  --bs-btn-active-bg: #d9a12c;
  --bs-btn-active-border-color: #d9a12c;
  --bs-btn-focus-shadow-rgb: 242, 193, 78;
}

/* Aviso superior y navegación ---------------------------------------------- */
.topbar {
  background: var(--fbv-ink);
  color: #f3ecdf;
  font-size: 0.85rem;
}

.navbar {
  --bs-navbar-padding-y: 0.7rem;
  background: rgba(251, 246, 238, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--fbv-line);
}

.navbar .nav-link {
  font-weight: 500;
  color: var(--fbv-ink);
  border-radius: 999px;
  white-space: nowrap;
}

.navbar .btn { white-space: nowrap; }

@media (min-width: 992px) {
  .navbar .nav-link { padding-inline: 0.7rem !important; }
}

@media (min-width: 1200px) {
  .navbar .nav-link { padding-inline: 0.9rem !important; }
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { color: var(--fbv-forest); }

.navbar .nav-link.active {
  color: var(--fbv-forest);
  background: var(--fbv-mint);
}

@media (max-width: 991.98px) {
  .navbar .nav-link.active { background: transparent; font-weight: 700; }
}

.brand-name {
  font-family: var(--fbv-serif);
  font-weight: 650;
  font-size: 1.05rem;
  line-height: 1.05;
  color: var(--fbv-ink);
}

.badge-parodia {
  align-self: center;
  padding: 0.2rem 0.5rem;
  border: 1px dashed var(--fbv-clay);
  border-radius: 999px;
  color: var(--fbv-clay);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Hero --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 4.5rem 0 5.5rem;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  width: 44rem;
  height: 44rem;
  right: -14rem;
  top: -16rem;
  background: radial-gradient(circle, rgba(242, 193, 78, 0.32), rgba(242, 193, 78, 0) 65%);
}

.hero::after {
  width: 36rem;
  height: 36rem;
  left: -14rem;
  bottom: -20rem;
  background: radial-gradient(circle, rgba(45, 106, 80, 0.16), rgba(45, 106, 80, 0) 65%);
}

.hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  line-height: 1.04;
}

.h1-nota {
  display: block;
  margin-top: 0.75rem;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--fbv-muted);
}

.hero .lead { font-size: 1.2rem; }

.hero-trust li {
  font-size: 0.9rem;
  color: var(--fbv-muted);
}

.hero-trust .bi { color: var(--fbv-forest); margin-right: 0.25rem; }

/* Expediente */
.expediente-wrap {
  position: relative;
  padding: 0 0 2.25rem 1.25rem;
}

.expediente {
  position: relative;
  padding: 1.75rem 1.75rem 3.25rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(29, 42, 36, 0.035) 31px 32px),
    var(--fbv-card);
  border: 1px solid var(--fbv-line);
  border-radius: 1.1rem;
  box-shadow: var(--fbv-shadow);
}

@media (min-width: 992px) {
  .expediente { transform: rotate(1.5deg); }
}

.expediente-head {
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fbv-muted);
}

.foto {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  color: var(--fbv-muted);
  background: repeating-linear-gradient(45deg, #f3ebdf 0 10px, #f8f2e8 10px 20px);
  border: 2px dashed rgba(29, 42, 36, 0.18);
  border-radius: 0.8rem;
}

.foto .bi { font-size: 2.75rem; }

.foto-real {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: 0.8rem;
  background: var(--fbv-paper-2);
}

.foto-real img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(0.35) sepia(0.3) saturate(0.9) contrast(1.02);
}

.foto-real figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2rem 0.9rem 0.7rem;
  background: linear-gradient(transparent, rgba(16, 24, 20, 0.85));
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.35;
}

.sello {
  position: absolute;
  top: 4.25rem;
  left: 1.5rem;
  z-index: 2;
  padding: 0.2rem 0.85rem;
  border: 3px solid var(--fbv-stamp);
  border-radius: 0.4rem;
  color: var(--fbv-stamp);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  transform: rotate(-14deg);
  mix-blend-mode: multiply;
}

.ficha {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem 1.25rem;
}

.ficha dt {
  padding-top: 0.15rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fbv-muted);
}

.ficha dd {
  margin: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88rem;
}

.saldo {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 0.3rem;
  background: var(--fbv-rose);
  color: var(--fbv-clay-2);
  font-weight: 700;
}

.post-it {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 13rem;
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--fbv-sun);
  color: #3b2f0b;
  font-family: var(--fbv-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.3;
  transform: rotate(-4deg);
  box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.35);
}

.post-it::before {
  content: '';
  position: absolute;
  top: -0.55rem;
  left: 50%;
  width: 4rem;
  height: 1.1rem;
  background: rgba(255, 255, 255, 0.55);
  transform: translateX(-50%) rotate(3deg);
}

/* Franja en tiempo real ---------------------------------------------------- */
.franja {
  padding: 2.5rem 0;
  background: var(--fbv-forest);
  color: #eef1e9;
}

@media (min-width: 768px) {
  .franja .col-md-4 + .col-md-4 { border-left: 1px solid rgba(255, 255, 255, 0.12); }
  .franja .col-md-4:not(:first-child) { padding-left: 2rem; }
}

.franja-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238, 241, 233, 0.75);
}

.franja-num {
  margin: 0.3rem 0;
  font-family: var(--fbv-serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.franja-num small {
  font-family: var(--bs-body-font-family);
  font-size: 0.42em;
  font-weight: 500;
  opacity: 0.8;
}

.franja-note {
  min-height: 1.5em;
  font-size: 0.9rem;
  color: rgba(238, 241, 233, 0.82);
}

.franja .progress {
  max-width: 18rem;
  height: 0.5rem;
  margin: 0.65rem 0 0.55rem;
  background: rgba(255, 255, 255, 0.15);
}

.franja .progress-bar { background: var(--fbv-sun); }

.live-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: #ff6b5b;
  vertical-align: 0.05em;
  animation: pulso 1.6s infinite;
}

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 91, 0.55); }
  70% { box-shadow: 0 0 0 0.6rem rgba(255, 107, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 91, 0); }
}

.flash-baja { animation: flash-baja 0.9s ease; }
.flash-sube { animation: flash-sube 0.9s ease; }

@keyframes flash-baja {
  from { color: #ff8a70; transform: translateY(3px); }
}

@keyframes flash-sube {
  from { color: #9be3b6; transform: translateY(-3px); }
}

/* Íconos en burbuja -------------------------------------------------------- */
.icon-bubble {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  background: var(--fbv-mint);
  color: var(--fbv-forest);
  font-size: 1.45rem;
}

.icon-bubble.is-clay { background: var(--fbv-rose); color: var(--fbv-clay); }
.icon-bubble.is-sun { background: #fbecc4; color: #8a6510; }
.icon-bubble.is-dark { background: rgba(242, 193, 78, 0.14); color: var(--fbv-sun); }
.icon-bubble.is-lg { width: 4.5rem; height: 4.5rem; border-radius: 50%; font-size: 2.1rem; }
.icon-bubble.is-sm { width: 2.25rem; height: 2.25rem; border-radius: 0.7rem; font-size: 1rem; }

/* Cifras ------------------------------------------------------------------- */
.stat-card {
  height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--fbv-line);
  border-radius: 1.25rem;
}

.stat-num {
  margin-bottom: 0.5rem;
  font-family: var(--fbv-serif);
  font-size: clamp(2.5rem, 4vw, 3.3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--fbv-forest);
  font-variant-numeric: tabular-nums;
}

.sacudida {
  color: var(--fbv-clay) !important;
  animation: sacudida 0.5s ease;
}

@keyframes sacudida {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Historia ----------------------------------------------------------------- */
.cita-grande {
  padding-left: 1.25rem;
  border-left: 4px solid var(--fbv-clay);
}

.cita-grande p {
  font-family: var(--fbv-serif);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.35;
}

.cita-grande footer {
  font-size: 0.9rem;
  color: var(--fbv-muted);
}

.timeline {
  position: relative;
  padding-left: 2.25rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(var(--fbv-forest), var(--fbv-clay));
  opacity: 0.35;
}

.timeline li {
  position: relative;
  padding-bottom: 2rem;
}

.timeline li:last-child { padding-bottom: 0; }

.timeline li::before {
  content: '';
  position: absolute;
  left: -2.25rem;
  top: 0.15rem;
  width: 1.125rem;
  height: 1.125rem;
  border: 3px solid var(--fbv-forest);
  border-radius: 50%;
  background: var(--fbv-paper-2);
}

.timeline li.is-now::before {
  border-color: var(--fbv-clay);
  background: var(--fbv-clay);
  box-shadow: 0 0 0 6px rgba(196, 85, 47, 0.18);
}

.timeline li.is-origen::before {
  border-color: var(--fbv-stamp);
  background: var(--fbv-ink);
}

.timeline-year {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fbv-clay);
}

/* Programas ---------------------------------------------------------------- */
.programa {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--fbv-line);
  border-radius: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.programa:hover {
  transform: translateY(-4px);
  box-shadow: var(--fbv-shadow);
}

.programa-impacto {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--fbv-line);
  font-size: 0.85rem;
  color: var(--fbv-muted);
}

.programa-impacto strong { color: var(--fbv-ink); }

/* Evidencia fotográfica ---------------------------------------------------- */
.polaroid {
  height: 100%;
  margin: 0;
  padding: 0.85rem 0.85rem 1.4rem;
  background: #fff;
  border-radius: 0.35rem;
  box-shadow: 0 2px 4px rgba(29, 42, 36, 0.08), 0 22px 40px -22px rgba(29, 42, 36, 0.45);
  transform: rotate(-2deg);
  transition: transform 0.25s ease;
}

.polaroid-grid > :nth-child(4n + 2) > .polaroid { transform: rotate(1.5deg); }
.polaroid-grid > :nth-child(4n + 3) > .polaroid { transform: rotate(-1deg); }
.polaroid-grid > :nth-child(4n + 4) > .polaroid { transform: rotate(2deg); }
.polaroid:hover { transform: rotate(0) translateY(-4px) !important; }

.polaroid-foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--fbv-paper-2);
  cursor: zoom-in;
}

.polaroid-foto.is-ancha { aspect-ratio: 4 / 3; }

.polaroid-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.polaroid-foto:hover img { transform: scale(1.04); }

.polaroid-zoom {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(16, 24, 20, 0.7);
  color: #fff;
}

.polaroid figcaption {
  padding: 1rem 0.35rem 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--fbv-muted);
}

.polaroid figcaption strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--fbv-ink);
  font-family: var(--fbv-serif);
  font-size: 1.25rem;
  font-style: italic;
}

.polaroid-tag {
  display: inline-block;
  margin-bottom: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fbv-clay);
}

.modal-foto { max-width: min(36rem, 100% - 1rem); }
.modal-foto img { max-height: 75vh; }

/* Planes de donación ------------------------------------------------------- */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.75rem;
  background: var(--fbv-card);
  border: 1px solid var(--fbv-line);
  border-radius: 1.25rem;
}

.precio {
  margin: 0.25rem 0 0.75rem;
  font-family: var(--fbv-serif);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fbv-forest);
}

.plan-lista {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

.plan-lista li {
  display: flex;
  gap: 0.5rem;
  padding: 0.3rem 0;
}

.plan-lista .bi { color: var(--fbv-forest-2); font-size: 1.05rem; }

.plan.destacado {
  background: var(--fbv-forest);
  border-color: var(--fbv-forest);
  color: #f2ede3;
  box-shadow: 0 24px 48px -20px rgba(31, 77, 58, 0.6);
}

@media (min-width: 1200px) {
  .plan.destacado { transform: translateY(-0.75rem); }
}

.plan.destacado h3,
.plan.destacado .precio { color: #fffaf1; }
.plan.destacado .text-body-secondary { color: rgba(242, 237, 227, 0.8) !important; }
.plan.destacado .plan-lista .bi { color: var(--fbv-sun); }

.badge-juguete {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--fbv-sun);
  color: var(--fbv-ink);
  font-family: var(--bs-body-font-family);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
  transform: rotate(-4deg);
}

.plan-ribbon {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--fbv-sun);
  color: var(--fbv-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

.plan.agotado > *:not(.btn) { opacity: 0.6; }

.plan.agotado::after {
  content: 'Agotado';
  position: absolute;
  top: 40%;
  left: 50%;
  padding: 0.2rem 0.9rem;
  border: 3px solid var(--fbv-stamp);
  border-radius: 0.4rem;
  background: rgba(255, 253, 248, 0.88);
  color: var(--fbv-stamp);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-16deg);
}

.especie {
  padding: 1.75rem;
  background: var(--fbv-paper);
  border: 1px dashed rgba(29, 42, 36, 0.2);
  border-radius: 1.25rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  background: #fff;
  border: 1px solid var(--fbv-line);
  border-radius: 999px;
  font-size: 0.88rem;
}

.chip .bi { color: var(--fbv-clay); }

/* Transparencia ------------------------------------------------------------ */
.mini-num {
  font-family: var(--fbv-serif);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fbv-forest);
}

.card-transp {
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--fbv-line);
  border-radius: 1.25rem;
  box-shadow: var(--fbv-shadow);
}

.card-transp .progress-stacked {
  height: 2.5rem;
  border-radius: 0.75rem;
}

.bg-c1 { background-color: var(--fbv-forest) !important; }
.bg-c2 { background-color: var(--fbv-clay) !important; }
.bg-c3 { background-color: var(--fbv-sun) !important; }
.bg-c4 { background-color: #7fae96 !important; }
.bg-c5 { background-color: #b5bbb7 !important; }

.leyenda li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--fbv-line);
}

.leyenda li:last-child { border-bottom: 0; }

.leyenda strong {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.dot {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.25rem;
}

.dot-vacio { border: 2px dashed #b5bbb7; }
.leyenda li.is-cero { color: var(--fbv-muted); }
.leyenda li.is-cero strong { color: var(--fbv-stamp); }

.nota-transporte {
  display: flex;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: #e8f0f5;
  border-left: 4px solid #5b8fb0;
  border-radius: 0.6rem;
  color: #2c4352;
  font-size: 0.9rem;
}

.nota-transporte .bi {
  flex: none;
  color: #5b8fb0;
  font-size: 1.4rem;
  line-height: 1.2;
}

/* Testimonios -------------------------------------------------------------- */
.testimonio {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--fbv-line);
  border-radius: 1.25rem;
}

.testimonio .bi-quote {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--fbv-clay);
}

.testimonio blockquote {
  flex-grow: 1;
  margin: 0.25rem 0 1.25rem;
  font-family: var(--fbv-serif);
  font-size: 1.1rem;
  line-height: 1.45;
}

.testimonio figcaption strong { display: block; }

.testimonio figcaption span {
  font-size: 0.85rem;
  color: var(--fbv-muted);
}

.testimonio.is-beneficiario {
  background: var(--fbv-rose);
  border-color: transparent;
}

/* Voluntariado ------------------------------------------------------------- */
.vol-card {
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--fbv-line);
  border-radius: 1.25rem;
  box-shadow: var(--fbv-shadow);
}

.vol-card .form-check {
  margin-bottom: 0.6rem;
  padding: 0.75rem 1rem 0.75rem 2.6rem;
  background: var(--fbv-paper);
  border: 1px solid var(--fbv-line);
  border-radius: 0.8rem;
}

.form-check-input:checked {
  background-color: var(--fbv-clay);
  border-color: var(--fbv-clay);
}

.form-check-input:focus {
  border-color: #e3a58d;
  box-shadow: 0 0 0 0.25rem rgba(196, 85, 47, 0.2);
}

/* Preguntas frecuentes ----------------------------------------------------- */
.faq {
  --bs-accordion-bg: #fff;
  --bs-accordion-border-color: var(--fbv-line);
  --bs-accordion-btn-padding-y: 1.15rem;
  --bs-accordion-active-bg: var(--fbv-mint);
  --bs-accordion-active-color: var(--fbv-forest);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(31, 77, 58, 0.18);
}

.faq .accordion-item {
  overflow: hidden;
  border: 1px solid var(--fbv-line);
  border-radius: 1rem;
}

.faq .accordion-item + .accordion-item {
  margin-top: 0.75rem;
  border-top: 1px solid var(--fbv-line);
}

.faq .accordion-button {
  font-family: var(--bs-body-font-family);
  font-weight: 600;
}

.faq .accordion-body { color: var(--fbv-muted); }

/* Padrinos ----------------------------------------------------------------- */
.padrinos {
  background: radial-gradient(ellipse at top, #275a43 0%, #173b2c 55%, #10291d 100%);
  color: #e9e6da;
}

.padrinos h2,
.padrinos h3 { color: #fffaf1; }
.padrinos .eyebrow { color: var(--fbv-sun); }
.padrinos-intro { color: rgba(233, 230, 218, 0.85); }
.padrinos-nota { color: rgba(233, 230, 218, 0.65); }

.padrino {
  height: 100%;
  padding: 2rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(242, 193, 78, 0.35);
  border-radius: 1.5rem;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}

.padrino p { color: rgba(233, 230, 218, 0.85); }
.padrino strong { color: #fffaf1; }

.monograma {
  display: grid;
  place-items: center;
  flex: none;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbe39b, #e3ad34 55%, #b8841a);
  box-shadow: 0 0 0 4px rgba(242, 193, 78, 0.18), 0 10px 24px -8px rgba(0, 0, 0, 0.5);
  color: #3b2a05;
  font-family: var(--fbv-serif);
  font-size: 1.7rem;
  font-weight: 700;
}

.monograma-foto {
  padding: 3px;
  overflow: hidden;
  border: 0;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.monograma-foto:hover { transform: scale(1.06); }

.monograma-foto img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.padrino-nivel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fbv-sun);
}

.padrino-rol {
  font-size: 0.92rem;
  color: rgba(233, 230, 218, 0.72);
}

.padrino-cita {
  margin: 0 0 1.25rem;
  padding-left: 1rem;
  border-left: 3px solid var(--fbv-sun);
  color: #fffaf1;
  font-family: var(--fbv-serif);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.4;
}

.padrino-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 1rem 0;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}

.padrino .padrino-stats strong {
  display: block;
  color: var(--fbv-sun);
  font-family: var(--fbv-serif);
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  line-height: 1.15;
}

.padrino-stats span {
  font-size: 0.8rem;
  color: rgba(233, 230, 218, 0.7);
}

.padrino-logros {
  margin: 0;
  padding: 0;
  list-style: none;
}

.padrino-logros li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.9rem;
  font-size: 0.93rem;
}

.padrino-logros .bi {
  position: absolute;
  left: 0;
  top: 0.45rem;
  color: var(--fbv-sun);
  font-size: 1.1rem;
  line-height: 1.3;
}

/* Ahora, en serio ---------------------------------------------------------- */
.en-serio {
  background: var(--fbv-ink);
  color: #e6dfd2;
}

.en-serio h2 { color: #fffaf1; }
.en-serio .eyebrow { color: var(--fbv-sun); }

/* Pie de página ------------------------------------------------------------ */
.footer {
  background: #141d18;
  color: #a9b3ac;
}

.footer h3 {
  margin-bottom: 0.9rem;
  font-family: var(--bs-body-font-family);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fffaf1;
}

.footer li + li { margin-top: 0.45rem; }

.footer a {
  color: #d7ddd8;
  text-decoration: none;
}

.footer a:hover,
.footer a:focus-visible { color: var(--fbv-sun); }

.footer .contacto .bi { margin-right: 0.35rem; color: var(--fbv-sun); }

.footer hr {
  border-color: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

.footer-logo {
  padding: 0.25rem;
  background: var(--fbv-paper);
  border-radius: 0.75rem;
}

/* Modal y notificaciones --------------------------------------------------- */
.modal-content {
  background: var(--fbv-card);
  border: 0;
  border-radius: 1.25rem;
}

.donar-progress { height: 0.5rem; }
.donar-progress .progress-bar { transition: width 0.8s ease; }

.alert-parodia {
  background: #fbecc4;
  border: 1px solid #f0d58c;
  border-radius: 0.8rem;
  color: #5c4510;
}

.toast {
  --bs-toast-max-width: 340px;
  --bs-toast-bg: var(--fbv-card);
  --bs-toast-border-color: var(--fbv-line);
  --bs-toast-border-radius: 1rem;
  --bs-toast-box-shadow: var(--fbv-shadow);
}

/* Responsivo --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .py-6 { padding-top: 4rem; padding-bottom: 4rem; }
  .hero { padding: 3rem 0 4rem; }
  .expediente { padding: 1.4rem 1.25rem 3.25rem; }
  .sello { top: 3.9rem; left: 1rem; font-size: 1rem; }
  .card-transp,
  .vol-card { padding: 1.5rem; }
}

@media (max-width: 359.98px) {
  .badge-parodia { display: none; }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}