/* =============================================================================
   PARAÍSO 503 — style.css (producción)
   CSS unificado para una carga estable en navegador.

   Los módulos originales se conservan en css/modules/ para mantenimiento.
   Este archivo reúne esos módulos EN EL MISMO ORDEN de la cascada original.
   ============================================================================= */

/* ===== 01-base.css ===== */
/* =============================================================================
   PARAÍSO 503 — style.css
   Archivo reorganizado: mismas reglas, mismos selectores, mismos valores.
   Solo se reordenaron propiedades dentro de cada selector, se corrigió la
   indentación y se agruparon visualmente las secciones con comentarios.
   ============================================================================= */

/* ===== Reset y variables globales ===== */
html {
  scroll-behavior: smooth;
}
#somos, #programas, #adopciones, #historias, #ayudar, #donar, #redes {
  scroll-margin-top: calc(var(--header-h, 70px) + 12px);
}
:root {
  --green-dark: #1E3D2B;
  --green-deep: #12281B;
  --mustard: #F4B942;
  --clay: #C9683D;
  --cream: #F9FAF2;
  --cream-2: #F3ECDD;
  --ink: #20261F;
  --ink-soft: #5B6459;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter',sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: 'Fraunces',serif;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ===== Utilidades ===== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 02-header.css ===== */
/* NAV */
header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(18,40,27,0.96);
  transition: background .35s ease, box-shadow .35s ease;
}
body.home header {
  background: transparent;
}
body.home header.scrolled {
  background: rgba(18,40,27,0.96);
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
body.home header.menu-open {
  background: rgba(18,40,27,0.96);
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.logo-img {
    height: 40px;
    width: auto;
}
.logo .mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mustard);
  font-size: 15px;
}
.logo .word {
  font-family: 'Fraunces';
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
}
.logo .word span {
  display: block;
  font-family: 'Inter';
  font-weight: 400;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .7;
}
.logo-placeholder {
  border: 1.5px dashed rgba(30,61,43,0.4);
  background: rgba(255,255,255,0.5) !important;
  color: var(--green-deep);
  opacity: .55;
}
footer .brand .logo-placeholder {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08) !important;
  color: var(--green-dark);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Íconos de redes sociales en el encabezado, solo en escritorio (mismo
   lenguaje visual que .mobile-follow-icons del menú hamburguesa: círculo
   sutil que se resalta en mostaza al pasar el cursor). Se colocan antes de
   los botones Adopta/Dona dentro de .nav-right. */
.nav-social {
  display: none;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
.nav-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #e9e6da;
  font-size: 13px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-social a:hover {
  background: var(--mustard);
  color: var(--green-deep);
  transform: translateY(-2px);
}
.nav-cta {
  padding: 8px 12px;
  border-radius: 22px;
  background: var(--mustard);
  color: var(--green-deep);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.nav-cta-ghost {
  background: var(--clay);
  color: #fff;
}
.burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.mobile-menu {
  max-height: 0;
  background: rgba(18,40,27,0.98);
  overflow: hidden;
  transition: max-height .25s ease;
}
.mobile-menu.open {
  max-height: 560px;
}
.mobile-menu ul {
  padding: 6px 20px 16px;
  list-style: none;
}
.mobile-menu li {
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu a {
  display: block;
  padding: 13px 4px;
  color: #e9e6da;
  font-size: 14.5px;
  font-weight: 500;
}
.mobile-menu a.nav-contigo-link {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-menu a.nav-contigo-link i {
  font-size: 12px;
  color: var(--mustard);
}
.desktop-links {
  display: none;
}

/* ===== 03-hero.css ===== */
/* HERO */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 80vh;
}
.hero .bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,16,10,0.15) 0%, rgba(10,16,10,0.55) 55%, rgba(10,16,10,0.92) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 26px 20px 34px;
}
.eyebrow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 2px;
  color: var(--mustard);
  font-family: 'Caveat';
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}
h1.hero-title {
  color: #fff;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
}
/* ===== Indicador "descubre más" al pie del hero ===== */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 44px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 10px;
  color: #f1efe4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  opacity: .9;
  transform: translateX(-50%);
}
.scroll-cue-line {
  width: 26px;
  height: 1px;
  background: rgba(241,239,228,0.5);
}
.scroll-cue-arrow {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(241,239,228,0.55);
  color: #f1efe4;
  font-size: 13px;
  cursor: pointer;
  transform: translateX(-50%);
  animation: cue-bounce 2.2s ease-in-out infinite;
}
@keyframes cue-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(6px);
  }
}
.hero-sub {
  max-width: 420px;
  margin: 14px 0 20px;
  color: #e9e6da;
  font-size: 14.5px;
  line-height: 1.55;
}
.cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-primary {
  display: block;
  width: 100%;
  padding: 15px 22px;
  border-radius: 14px;
  border: none;
  background: var(--mustard);
  color: var(--green-deep);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}
.btn-ghost {
  padding: 13px 22px;
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 14px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}
.btn-outline-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 20px;
  border: 1.5px solid var(--green-dark);
  border-radius: 14px;
  background: none;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
  cursor: pointer;
}
/* FLOATING WHATSAPP BUTTON (unico) */
.fab-whats {
  position: fixed;
  bottom: 20px;
  right: 18px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #25D366;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  color: #fff;
  font-size: 26px;
}

/* ===== Pulido del hero SOLO EN MÓVIL =====
   Mantiene escritorio intacto. Refuerza la lectura del contenido, da más aire
   al bloque principal y mejora la jerarquía visual sobre la fotografía. */
@media (max-width:819px) {
  .hero {
    min-height: 78vh;
  }

  .hero::after {
    background:
      linear-gradient(90deg, rgba(8,22,14,.80) 0%, rgba(8,22,14,.48) 58%, rgba(8,22,14,.12) 100%),
      linear-gradient(180deg, rgba(10,16,10,.12) 0%, rgba(10,16,10,.28) 42%, rgba(10,16,10,.88) 100%);
  }

  .hero-inner {
    max-width: 520px;
    padding: 34px 28px 76px;
  }

  .eyebrow {
    margin-bottom: 8px;
    font-size: 25px;
  }

  h1.hero-title {
    max-width: 330px;
    font-size: clamp(32px, 9.5vw, 42px);
    line-height: 1.04;
    letter-spacing: -.02em;
  }

  .hero-sub {
    max-width: 325px;
    margin: 18px 0 22px;
    font-size: 15px;
    line-height: 1.58;
  }

  .cta-row {
    align-items: flex-start;
    gap: 11px;
  }

  .cta-row .btn-primary {
    width: min(100%, 330px);
    padding: 15px 20px;
    border-radius: 13px;
  }

  .cta-row .btn-ghost {
    width: min(100%, 280px);
    padding: 12px 20px;
    border-color: rgba(255,255,255,.62);
  }

  .scroll-cue-arrow {
    bottom: 18px;
  }
}

/* ===== 04-home-sections.css ===== */
/* STATS */
.stats {
  background: var(--green-deep);
  color: #fff;
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}
.stat b {
  display: block;
  color: var(--mustard);
  font-family: 'Fraunces';
  font-size: 22px;
  line-height: 1;
}
.stat span {
  display: block;
  margin-top: 4px;
  color: #cfd6c9;
  font-size: 11px;
}
.stat-icon {
  display: none;
}
.stat-copy {
  min-width: 0;
}

/* ===== Estadísticas renovadas SOLO EN MÓVIL ===== */
@media (max-width:819px) {
  .stats {
    padding: 14px 14px 18px;
    background: var(--green-deep);
  }

  .stats-inner {
    position: relative;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(30,61,43,.98), rgba(18,40,27,.98));
    box-shadow: 0 10px 26px rgba(0,0,0,.16);
    overflow: hidden;
  }

  .stat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 104px;
    padding: 16px 14px;
  }

  .stat:nth-child(odd)::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 0;
    bottom: 16px;
    width: 1px;
    background: rgba(255,255,255,.12);
  }

  .stat:nth-child(-n+2)::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 1px;
    background: rgba(255,255,255,.10);
  }

  .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    color: var(--mustard);
    font-size: 20px;
  }

  .stat b {
    font-size: 25px;
    letter-spacing: -.02em;
  }

  .stat span {
    margin-top: 6px;
    color: #e4e8df;
    font-size: 11.5px;
    line-height: 1.3;
  }
}

@media (max-width:390px) {
  .stats {
    padding-inline: 10px;
  }
  .stats-inner {
    padding: 7px;
  }
  .stat {
    gap: 8px;
    padding: 14px 10px;
  }
  .stat-icon {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
    font-size: 17px;
  }
  .stat b {
    font-size: 22px;
  }
  .stat span {
    font-size: 10.5px;
  }
}

section {
  padding: 46px 20px;
}
.wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.kicker {
  color: var(--clay);
  font-family: 'Caveat';
  font-size: 22px;
  font-weight: 700;
}
h2.section-title {
  margin: 2px 0 10px;
  font-size: 25px;
  font-weight: 700;
}
.lede {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
/* URGENCIA DEL MES */
.urgencia {
  position: relative;
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--clay), #a94f2c);
  color: #fff;
  overflow: hidden;
}
.urgencia .tagtop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(255,255,255,0.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.urgencia h3 {
  margin: 12px 0 8px;
  font-size: 19px;
}
.urgencia p {
  margin-bottom: 14px;
  color: #fbe8de;
  font-size: 13.5px;
  line-height: 1.55;
}
.urgencia .urgencia-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.urgencia .urgencia-lista li {
  color: #fbe8de;
  font-size: 13.5px;
  line-height: 1.55;
}
.urgencia .bar-track {
  height: 8px;
  margin-bottom: 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
}
.urgencia .bar-fill {
  height: 100%;
  width: 35%;
  border-radius: 20px;
  background: var(--mustard);
}
.urgencia .bar-label {
  margin-bottom: 16px;
  color: #fbe8de;
  font-size: 11.5px;
}
.urgencia .placeholder-note {
  margin-bottom: 14px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-style: italic;
}
.urgencia .btn-primary {
  display: inline-block;
  width: auto;
  padding: 12px 22px;
}
/* CARRUSEL DE "URGENCIAS DE ESTE MES" — envuelve la(s) tarjeta(s) .urgencia
   de arriba sin cambiar su diseño; solo agrega deslizamiento horizontal,
   flechas y puntos cuando hay más de una tarjeta activa. */
.urgencia-carousel {
  position: relative;
}
.urgencia-viewport {
  overflow: hidden;
  border-radius: 20px;
}
.urgencia-track {
  display: flex;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  touch-action: pan-y;
}
.urgencia-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.urgencia-slide .urgencia {
  height: 100%;
}
/* Variante de tarjeta con foto (ej. "Rescate reciente") */
.urgencia.urgencia-foto {
  display: flex;
  flex-direction: column;
}
.urgencia .urgencia-foto-wrap {
  height: 160px;
  margin: -22px -22px 16px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
.urgencia .urgencia-foto-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.urgencia-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--clay);
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20,20,10,0.18);
  transform: translateY(-50%);
  transition: transform .25s ease, box-shadow .25s ease;
}
.urgencia-nav:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 16px rgba(20,20,10,0.24);
}
.urgencia-prev {
  left: -6px;
}
.urgencia-next {
  right: -6px;
}
.urgencia-carousel.single .urgencia-nav,
.urgencia-carousel.single .urgencia-dots {
  display: none;
}
/* En móvil: botones más discretos y más pegados al borde de la tarjeta,
   para que no tapen el contenido ni se vean flotando fuera de ella. Mismo
   estilo (círculo blanco con sombra) y misma función; solo cambia tamaño
   y posición. En escritorio queda igual que antes. */
@media (max-width:819px) {
  .urgencia-nav {
    width: 27px;
    height: 27px;
    font-size: 11px;
    box-shadow: 0 2px 8px rgba(20,20,10,0.16);
  }
  .urgencia-prev {
    left: -3px;
  }
  .urgencia-next {
    right: -3px;
  }
}
.urgencia-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.urgencia-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(30,61,43,0.20);
  cursor: pointer;
  transition: width .25s ease, background .25s ease, opacity .25s ease;
}
.urgencia-dots button.active {
  width: 22px;
  background: var(--clay);
}
@media (prefers-reduced-motion: reduce) {
  .urgencia-track {
    transition: none !important;
  }
}
/* QUIENES SOMOS */
.somos-grid {
  display: flex;
  flex-direction: column;
}
.somos-photo {
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
}
.timeline {
  position: relative;
  margin-top: 22px;
  padding-left: 46px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(var(--clay),var(--green-dark));
}
.t-item {
  position: relative;
  margin-bottom: 26px;
}
.t-item:last-child {
  margin-bottom: 0;
}
.t-dot {
  position: absolute;
  left: -46px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-dark);
  font-size: 15px;
}
.t-item p {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}
.quote {
  margin-top: 24px;
  padding-left: 16px;
  border-left: 3px solid var(--mustard);
  color: var(--green-dark);
  font-family: 'Fraunces';
  font-style: italic;
  font-size: 17px;
}
.somos-text {
  margin-top: 24px;
}

/* ===== 05-programas-home.css ===== */
/* PROGRAMAS */
.programas {
  background: var(--cream-2);
}
.prog-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
}
.prog-card {
  border-radius: 18px;
  border: 1px solid rgba(30,61,43,0.06);
  background: #fff;
  box-shadow: 0 4px 18px rgba(30,61,43,0.08);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, opacity .25s ease;
}
.prog-card:hover {
  box-shadow: 0 10px 26px rgba(30,61,43,0.14);
  transform: translateY(-2px);
}
.prog-photo {
  position: relative;
  height: 225px;
  background: linear-gradient(135deg, rgba(30,61,43,0.08), rgba(201,104,61,0.08));
}
.prog-body {
  position: relative;
  padding: 18px 18px 20px;
}
.p-badge {
  position: absolute;
  top: -34px;
  left: 16px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--mustard);
  color: var(--green-deep);
  font-size: 10.5px;
  font-weight: 700;
}
.prog-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.prog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  color: #fff;
  font-size: 15px;
}
.prog-head h3 {
  font-size: 15.5px;
  line-height: 1.25;
}
.prog-body p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}
.prog-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--green-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  transition: background .2s ease, transform .2s ease;
}
.prog-link:hover {
  background: var(--green-deep);
  transform: translateX(1px);
}
.rest-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s ease;
}
.rest-wrap .prog-list {
  margin-top: 0;
  padding-top: 18px;
}
.toggle-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 22px;
}
.btn-toggle-progs {
  background: #fff;
}
.toggle-arrow {
  display: inline-flex;
  transition: transform .3s ease;
}
.btn-toggle-progs.open .toggle-arrow {
  transform: rotate(180deg);
}
.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 12px;
}
.or-divider::before, .or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(30,61,43,0.15);
}
.btn-ver-detalle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--green-dark);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
  transition: background .2s ease;
}
.btn-ver-detalle:hover {
  background: var(--green-deep);
}
.toggle-hint {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 11.5px;
  text-align: center;
}

/* ===== 06-historias-home.css ===== */
/* HISTORIAS DEL PARAISO */
.historias-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 22px;
}
.caso-card {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(30,61,43,0.07);
  overflow: hidden;
}
.caso-card.hidden {
  display: none;
}
.caso-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.caso-ba .ba-item {
  position: relative;
  height: 170px;
}
.caso-ba .ba-label {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.caso-body {
  padding: 16px 18px 18px;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 9px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
}
.status-badge.status-recuperado {
  background: rgba(62,122,78,0.12);
  color: var(--green-dark);
}
.status-badge.status-adoptado {
  background: rgba(201,104,61,0.12);
  color: var(--clay);
}
.status-badge.status-tratamiento {
  background: rgba(217,99,107,0.14);
  color: #c14550;
}
.caso-body h4 {
  margin-bottom: 6px;
  font-size: 15px;
}
.caso-body p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}
.historias-cta {
  margin-top: 22px;
  text-align: center;
}
/* =============================================================================
   HISTORIAS DEL PARAÍSO — PULIDO VISUAL Y UX
   Bloque autocontenido: no toca la estructura ni la arquitectura de arriba,
   solo afina jerarquía visual, protagonismo de imágenes, microinteracciones
   y acabados. Para editar el "look" de esta sección, todo lo que necesitas
   está aquí abajo (no hace falta tocar las reglas de arriba).
   ============================================================================= */
/* Más protagonismo a las fotos "Antes/Después" (un poco más altas) */
.caso-ba .ba-item {
  height: 190px;
}
/* Línea divisoria sutil entre "Antes" y "Después" para una lectura más limpia */
.caso-ba .ba-item:first-child {
  border-right: 2px solid #fff;
}
/* Etiquetas "Antes"/"Después" con un acabado un poco más premium */
.caso-ba .ba-label {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* Más aire y jerarquía dentro de la tarjeta */
.caso-body {
  padding: 18px 20px 20px;
}
.caso-body h4 {
  font-size: 16px;
  letter-spacing: -.01em;
}
/* Botón "Conocer su historia": antes no tenía estilo propio.
   Microinteracción elegante: leve elevación + sombra + la flecha se
   desliza un poco al pasar el cursor. */
.btn-historia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  background: var(--green-dark);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.btn-historia i {
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.btn-historia:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(20,30,20,0.18);
}
.btn-historia:hover i {
  transform: translateX(3px);
}
.btn-historia:active {
  transform: translateY(0) scale(.97);
  box-shadow: none;
}
/* Transición más elegante en la elevación de la tarjeta al pasar el cursor */
.caso-card {
  transition: box-shadow .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
@media (min-width:820px) {
  /* Fotos "Antes/Después" con más presencia en escritorio */
  .caso-ba .ba-item {
    height: 240px;
  }
  .historias-grid {
    gap: 24px;
  }
}

/* ===== 07-contigo-home-modals.css ===== */
/* CONTIGO — banner de la portada (entre Historias y Cómo ayudar) */
#contigo {
  padding-top: 8px;
}
.contigo-banner {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 28px 22px;
  border-radius: 24px;
  background: var(--cream-2);
  box-shadow: 0 2px 14px rgba(30,61,43,0.06);
  cursor: pointer;
  transition: box-shadow .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
}
.contigo-banner:hover {
  box-shadow: 0 14px 34px rgba(30,61,43,0.14);
  transform: translateY(-3px);
}
.contigo-banner:active {
  transform: translateY(-1px) scale(.995);
}
.contigo-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  background: rgba(30,61,43,0.07);
  font-family: 'Caveat';
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.contigo-tag i {
  color: var(--green-dark);
  font-size: 13px;
}
.contigo-title {
  margin: 0 0 12px;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.18;
  color: var(--green-dark);
}
.contigo-title .hl {
  color: var(--mustard);
}
.contigo-desc {
  margin-bottom: 20px;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.contigo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: none;
  border-radius: 14px;
  background: var(--green-dark);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.contigo-btn i {
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.contigo-banner:hover .contigo-btn {
  background: var(--green-deep);
  box-shadow: 0 8px 18px rgba(20,30,20,0.18);
}
.contigo-banner:hover .contigo-btn i {
  transform: translateX(3px);
}
.contigo-photo {
  position: relative;
  align-self: center;
}
.contigo-photo-decor {
  position: absolute;
  inset: -8%;
  z-index: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 20%, rgba(62,122,78,0.16), transparent 55%),
    radial-gradient(circle at 55% 55%, rgba(62,122,78,0.12), transparent 60%);
}
.contigo-photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(30,61,43,0.14);
}
.contigo-badge {
  position: absolute;
  z-index: 2;
  bottom: -14px;
  left: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-dark);
  font-size: 17px;
  box-shadow: 0 6px 16px rgba(30,61,43,0.18);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.contigo-banner:hover .contigo-badge {
  transform: scale(1.08) rotate(-8deg);
}
@media (min-width:820px) {
  .contigo-banner {
    flex-direction: row;
    align-items: center;
    gap: 6%;
    padding: 40px 46px;
  }
  .contigo-text {
    flex: 1.05;
  }
  .contigo-title {
    font-size: 36px;
  }
  .contigo-desc {
    font-size: 15.5px;
  }
  .contigo-photo {
    flex: 1;
    max-width: 440px;
  }
}

/* MODAL DE CONTIGO — reutiliza la misma línea visual y el mismo mecanismo
   (overlay + inner + close) que el modal de Historias, ver
   .p503-historia-modal más abajo. */
.p503-contigo-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.p503-contigo-modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.p503-contigo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18,40,27,0.92);
}
.p503-contigo-inner {
  position: relative;
  z-index: 1;
  width: min(94vw, 720px);
  max-height: 88vh;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
  transform: scale(.96) translateY(8px);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.p503-contigo-modal.open .p503-contigo-inner {
  transform: scale(1) translateY(0);
}
.p503-contigo-scroll {
  max-height: 88vh;
  overflow-y: auto;
}
.p503-contigo-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--green-dark);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20,30,20,0.18);
  transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.p503-contigo-close:hover {
  background: var(--green-dark);
  color: #fff;
  transform: scale(1.08) rotate(90deg);
  box-shadow: 0 6px 16px rgba(20,30,20,0.24);
}
.p503-contigo-photo {
  height: 200px;
}
.p503-contigo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p503-contigo-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--green-dark), var(--green-deep));
  color: rgba(255,255,255,0.35);
  font-size: 46px;
}
.p503-contigo-body {
  padding: 22px 22px 26px;
}
.p503-contigo-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  font-size: 24px;
  letter-spacing: -.01em;
  color: var(--green-dark);
}
.p503-contigo-nombre i {
  color: var(--green-dark);
  font-size: 17px;
}
.p503-contigo-frase {
  margin-bottom: 10px;
  color: var(--ink-soft);
  font-size: 15px;
}
.p503-contigo-desc {
  margin-bottom: 20px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.p503-contigo-subtitle {
  margin-bottom: 14px;
  font-family: 'Fraunces', serif;
  font-size: 18px;
  color: var(--green-dark);
}
.p503-contigo-section {
  margin-bottom: 20px;
}
.p503-contigo-servicios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.p503-contigo-servicio {
  padding: 16px 14px;
  border-radius: 14px;
  background: var(--cream);
  text-align: center;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.p503-contigo-servicio:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(30,61,43,0.1);
}
.p503-contigo-servicio .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
}
.p503-contigo-servicio h5 {
  margin-bottom: 4px;
  font-size: 13.5px;
  color: var(--ink);
}
.p503-contigo-servicio p {
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.5;
}
.p503-contigo-req {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 18px;
  border-radius: 16px;
  background: var(--cream);
}
.p503-contigo-req-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(30,61,43,0.08);
  color: var(--green-dark);
  font-size: 14px;
}
.p503-contigo-req-body h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: 'Fraunces', serif;
  font-size: 15.5px;
  color: var(--green-dark);
}
.p503-contigo-req-body h4 i {
  color: var(--mustard);
  font-size: 13px;
}
.p503-contigo-req-body ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p503-contigo-req-body li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.p503-contigo-req-body li i {
  margin-top: 2px;
  color: var(--green-dark);
  font-size: 12px;
}
.p503-contigo-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p503-contigo-btn-whats,
.p503-contigo-btn-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  font-family: inherit;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background .25s ease;
}
.p503-contigo-btn-whats {
  background: var(--green-dark);
  color: #fff;
}
.p503-contigo-btn-whats:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(20,30,20,0.18);
}
.p503-contigo-btn-whats i {
  font-size: 20px;
}
.p503-contigo-btn-info {
  border: 1.5px solid rgba(30,61,43,0.16);
  background: #fff;
  color: var(--ink);
}
.p503-contigo-btn-info:hover {
  border-color: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(30,61,43,0.1);
}
.p503-contigo-btn-info i {
  color: var(--green-dark);
  font-size: 19px;
}
.p503-contigo-btn-whats span,
.p503-contigo-btn-info span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.p503-contigo-btn-whats b,
.p503-contigo-btn-info b {
  font-size: 13.5px;
}
.p503-contigo-btn-whats small,
.p503-contigo-btn-info small {
  font-size: 11px;
  opacity: .8;
}
@media (min-width:820px) {
  .p503-contigo-photo {
    height: 260px;
  }
  .p503-contigo-body {
    padding: 26px 30px 30px;
  }
  .p503-contigo-servicios {
    grid-template-columns: repeat(5, 1fr);
  }
  .p503-contigo-actions {
    flex-direction: row;
  }
  .p503-contigo-btn-whats,
  .p503-contigo-btn-info {
    flex: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contigo-banner, .contigo-btn, .contigo-btn i, .contigo-badge,
  .p503-contigo-inner, .p503-contigo-close, .p503-contigo-servicio,
  .p503-contigo-btn-whats, .p503-contigo-btn-info {
    transition: none !important;
  }
}

/* MODAL DE TARJETA DEL CARRUSEL — reutilizable para las tarjetas
   adicionales de "Urgencias de este mes" (Rescate reciente, y en el
   futuro Adopciones / Historia destacada). Mismo patrón visual que el
   modal de Contigo, de arriba, pero más simple: foto opcional + título
   + texto breve. */
.p503-carrusel-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.p503-carrusel-modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.p503-carrusel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18,40,27,0.92);
}
.p503-carrusel-inner {
  position: relative;
  z-index: 1;
  width: min(94vw, 560px);
  max-height: 88vh;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
  transform: scale(.96) translateY(8px);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.p503-carrusel-modal.open .p503-carrusel-inner {
  transform: scale(1) translateY(0);
}
.p503-carrusel-scroll {
  max-height: 88vh;
  overflow-y: auto;
}
.p503-carrusel-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--green-dark);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20,30,20,0.18);
  transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.p503-carrusel-close:hover {
  background: var(--green-dark);
  color: #fff;
  transform: scale(1.08) rotate(90deg);
  box-shadow: 0 6px 16px rgba(20,30,20,0.24);
}
.p503-carrusel-photo {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.p503-carrusel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Mini carrusel de fotos del modal, cuando la tarjeta tiene varias imágenes
   (ver 'modal.foto' como array en content/configuracion.js). Reutiliza el
   mismo tamaño de .p503-carrusel-photo; solo agrega flechas sobre la foto
   y puntos debajo. */
.p503-carrusel-photo-track {
  display: flex;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.p503-carrusel-photo-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.p503-carrusel-photo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.p503-carrusel-photo-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--green-dark);
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20,20,10,0.18);
  transform: translateY(-50%);
  transition: transform .25s ease, box-shadow .25s ease;
}
.p503-carrusel-photo-nav:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 16px rgba(20,20,10,0.24);
}
.p503-carrusel-photo-prev {
  left: 10px;
}
.p503-carrusel-photo-next {
  right: 10px;
}
.p503-carrusel-photo-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-top: 12px;
}
.p503-carrusel-photo-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(30,61,43,0.18);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.p503-carrusel-photo-dots button.active {
  background: var(--clay);
  transform: scale(1.25);
}
@media (prefers-reduced-motion: reduce) {
  .p503-carrusel-photo-track {
    transition: none !important;
  }
}
.p503-carrusel-body {
  padding: 22px 22px 26px;
}
.p503-carrusel-titulo {
  margin: 4px 0 10px;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--green-dark);
}
.p503-carrusel-texto {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
@media (min-width:820px) {
  .p503-carrusel-photo {
    height: 240px;
  }
  .p503-carrusel-body {
    padding: 26px 30px 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p503-carrusel-inner, .p503-carrusel-close {
    transition: none !important;
  }
}

/* MODAL DE TARJETA DE PROGRAMA (portada) — mismo patrón visual que el modal
   de tarjeta del carrusel de arriba (overlay oscuro + tarjeta blanca
   redondeada), pero con secciones de texto (¿Qué es?, ¿En qué consiste?,
   ¿Por qué existe?) en vez de foto + párrafo único. */
.p503-programa-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.p503-programa-modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.p503-programa-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18,40,27,0.92);
}
.p503-programa-inner {
  position: relative;
  z-index: 1;
  width: min(94vw, 560px);
  max-height: 88vh;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
  transform: scale(.96) translateY(8px);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.p503-programa-modal.open .p503-programa-inner {
  transform: scale(1) translateY(0);
}
.p503-programa-scroll {
  max-height: 88vh;
  overflow-y: auto;
}
.p503-programa-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--green-dark);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20,30,20,0.18);
  transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.p503-programa-close:hover {
  background: var(--green-dark);
  color: #fff;
  transform: scale(1.08) rotate(90deg);
  box-shadow: 0 6px 16px rgba(20,30,20,0.24);
}
.p503-programa-body {
  padding: 26px 22px;
}
.p503-programa-titulo {
  margin: 4px 0 14px;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--green-dark);
}
.p503-programa-section {
  margin-bottom: 18px;
}
.p503-programa-section h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
}
.p503-programa-section p {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 8px;
}
.p503-programa-section p:last-child {
  margin-bottom: 0;
}
.p503-programa-cta {
  margin-top: 4px;
}
@media (min-width:820px) {
  .p503-programa-body {
    padding: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p503-programa-inner, .p503-programa-close {
    transition: none !important;
  }
}

/* ===== 08-galeria-home.css ===== */
/* GALERÍA (vista previa en la portada, entre Contigo y Cómo ayudar) */
.galeria-grid {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.galeria-text .lede {
  margin-bottom: 20px;
}
.btn-galeria {
  display: inline-flex;
  width: auto;
}
.galeria-preview-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}
.galeria-preview-item {
  aspect-ratio: 1/1;
  border-radius: 16px;
}
@media (min-width:820px) {
  .galeria-grid {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }
  .galeria-text {
    flex: 0 0 42%;
  }
  .galeria-preview-grid {
    flex: 1;
    gap: 16px;
  }
}

/* ===== 09-ayudar-donar.css ===== */
/* COMO AYUDAR */
.ayudar-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}
.ayudar-card {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(30,61,43,0.05);
}
.ayudar-card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
}
.ayudar-card h4 {
  margin-bottom: 3px;
  font-size: 14px;
}
.ayudar-card p {
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
/* DONAR */
.donar {
  background: var(--green-deep);
  color: #fff;
}
.donar .kicker {
  color: var(--mustard);
}

/* ===== 10-adopciones-page.css ===== */
/* ADOPCIONES (adopciones.html) */
.adopta-hero {
  padding: 34px 16px 30px;
  background: var(--green-deep);
  color: #fff;
  text-align: center;
}
.adopta-hero .kicker {
  color: var(--mustard);
  font-family: 'Caveat';
  font-weight: 700;
  font-size: 19px;
}
.adopta-hero h1 {
  margin: 8px 0 10px;
  font-family: 'Fraunces';
  font-size: 30px;
}
.adopta-hero p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 14.5px;
  opacity: .85;
}
.pet-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
  margin-top: 24px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px 10px;
}
.pet-card {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(30,61,43,0.07);
  overflow: hidden;
}
.pet-photo {
  position: relative;
  height: 250px;
  cursor: pointer;
}
.pet-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pet-status {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--mustard);
  color: var(--green-deep);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pet-body {
  padding: 18px 20px 20px;
}
.pet-body h3 {
  margin-bottom: 6px;
  font-family: 'Fraunces';
  font-size: 19px;
}
.pet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}
.pet-tags span {
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--cream-2);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
}
.pet-body p {
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}
.adopt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--clay);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
}
.adopta-info {
  max-width: 1100px;
  margin: 8px auto 0;
  padding: 0 16px 40px;
}
.adopta-info .box {
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--cream-2);
}
.adopta-info h4 {
  margin-bottom: 10px;
  font-family: 'Fraunces';
  font-size: 17px;
}
.adopta-info ul {
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.8;
}
@media (min-width:820px) {
  .adopta-hero {
    padding: 56px 16px 46px;
  }
  .adopta-hero h1 {
    font-size: 40px;
  }
  .pet-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
  }
  .pet-photo {
    height: 240px;
  }
}

/* ===== 11-programas-page.css ===== */
/* PROGRAMAS (programas.html) */
.programas-hero {
  padding: 34px 16px 30px;
  background: var(--green-deep);
  color: #fff;
  text-align: center;
}
.programas-hero .kicker {
  color: var(--mustard);
  font-family: 'Caveat';
  font-weight: 700;
  font-size: 19px;
}
.programas-hero h1 {
  margin: 8px 0 10px;
  font-family: 'Fraunces';
  font-size: 30px;
}
.programas-hero p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 14.5px;
  opacity: .85;
}
.prog-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 0 16px;
}
.prog-index a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(30,61,43,0.12);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}
.prog-index a i {
  color: var(--clay);
  font-size: 12px;
}
.prog-detail-list {
  display: flex;
  flex-direction: column;
  gap: 34px;
  max-width: 900px;
  margin: 36px auto 0;
  padding: 0 16px 50px;
}
.prog-detail-card {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(30,61,43,0.07);
  overflow: hidden;
  scroll-margin-top: 70px;
}
.prog-detail-card .prog-photo {
  height: 200px;
}
.prog-detail-card .prog-body {
  padding: 22px 24px 26px;
}
.prog-detail-card .prog-head {
  margin-bottom: 10px;
}
.prog-detail-card p {
  margin-bottom: 10px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}
@media (min-width:820px) {
  .prog-detail-card .prog-photo {
    height: 280px;
  }
}
/* Acordeón de programas */
.acc-item {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(30,61,43,0.07);
  overflow: hidden;
  scroll-margin-top: 70px;
  transition: box-shadow .25s ease;
}
.acc-item.open {
  box-shadow: 0 8px 22px rgba(30,61,43,0.12);
}
.acc-header {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 16px 18px;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.acc-header .prog-icon {
  flex-shrink: 0;
}
.acc-header-text {
  flex: 1;
  min-width: 0;
}
.acc-title {
  display: block;
  color: var(--ink);
  font-family: 'Fraunces';
  font-weight: 600;
  font-size: 15px;
}
.acc-sub {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
.acc-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--green-dark);
  font-size: 12px;
  transition: transform .3s ease;
}
.acc-item.open .acc-chevron {
  background: var(--mustard);
  color: var(--green-deep);
  transform: rotate(180deg);
}
.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s ease;
}
.acc-panel-inner {
  padding: 0 18px 26px;
}
/* Bloque superior: foto + contenido (icono, título, descripción, "¿En qué consiste?") */
.prog-top {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
  padding-top: 4px;
}
.prog-photo-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.prog-photo-wrap .prog-photo {
  height: 190px;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}
.prog-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 700;
}
.prog-badge i.fa-paw {
  color: var(--clay);
}
.prog-badge i.fa-heart {
  color: #d9636b;
}
.prog-top-content {
  display: flex;
  flex-direction: column;
}
.prog-icon-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  color: #fff;
  font-size: 18px;
}
.prog-title-lg {
  margin-bottom: 10px;
  color: var(--ink);
  font-family: 'Fraunces';
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
}
.prog-desc-lg {
  margin-bottom: 16px;
  color: var(--ink-soft);
  font-size: 13.8px;
  line-height: 1.65;
}
.prog-divider {
  height: 1px;
  margin-bottom: 16px;
  background: rgba(30,61,43,0.12);
}
.prog-section {
  margin-bottom: 0;
}
.prog-section h4, .why-col h4, .how-col h4, .prog-impact h4, .prog-gallery h4 {
  margin-bottom: 9px;
  color: var(--ink);
  font-family: 'Fraunces';
  font-size: 14.5px;
  font-weight: 600;
}
.prog-section p, .why-col p {
  color: var(--ink-soft);
  font-size: 13.3px;
  line-height: 1.65;
}
/* Tarjeta compartida "¿Por qué existe?" / "¿Cómo ayudamos?" */
.prog-why-how {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 18px;
  padding: 20px;
  border-radius: 14px;
  background: var(--cream-2);
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
}
.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}
.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
}
/* Impacto + Galería */
.prog-impact-gallery {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.prog-impact {
  margin-bottom: 0;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.impact-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
}
.impact-icon {
  font-size: 17px;
}
.impact-num {
  color: var(--ink);
  font-family: 'Fraunces';
  font-weight: 700;
  font-size: 18px;
}
.impact-label {
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.35;
}
.prog-gallery {
  margin-bottom: 0;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.gallery-item {
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
}
.gallery-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-item {
  cursor: pointer;
}
.btn-ver-fotos {
  padding: 10px 18px;
  border-radius: 12px;
  border: none;
  background: var(--green-dark);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .2s ease;
}
.btn-ver-fotos:hover {
  background: var(--green-deep);
}
@media (min-width:820px) {
  .acc-header {
    padding: 20px 24px;
  }
  .acc-title {
    font-size: 16px;
  }
  .acc-panel-inner {
    padding: 0 26px 32px;
  }
  .prog-top {
    flex-direction: row;
    align-items: stretch;
    gap: 36px;
    margin-bottom: 28px;
  }
  .prog-photo-wrap {
    flex: 0 0 42%;
  }
  .prog-photo-wrap .prog-photo {
    height: 100%;
    min-height: 340px;
  }
  .prog-top-content {
    flex: 1;
    justify-content: center;
  }
  .prog-title-lg {
    font-size: 25px;
  }
  .prog-desc-lg {
    font-size: 14px;
  }
  .prog-why-how {
    flex-direction: row;
    padding: 22px 24px;
  }
  .why-col {
    flex: 1;
  }
  .how-col {
    flex: 1.3;
  }
  .benefit-grid {
    grid-template-columns: repeat(4,1fr);
  }
  .prog-impact-gallery {
    flex-direction: row;
    gap: 40px;
  }
  .prog-impact {
    flex: 1;
  }
  .prog-gallery {
    flex: 1;
  }
  .impact-grid {
    grid-template-columns: repeat(3,1fr);
    max-width: 340px;
  }
}
/* Bloque final de la página de Programas */
.prog-final-cta {
  padding-top: 0;
}
.pfc-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--green-deep);
  color: #fff;
  overflow: hidden;
}
.pfc-photo {
  height: 200px;
}
.pfc-body {
  padding: 26px 22px 30px;
}
.pfc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(244,185,66,0.16);
  color: var(--mustard);
  font-size: 18px;
}
.pfc-body h2 {
  margin-bottom: 10px;
  font-family: 'Fraunces';
  font-size: 22px;
  line-height: 1.25;
}
.pfc-quote {
  margin-bottom: 12px;
  color: var(--mustard);
  font-family: 'Caveat';
  font-weight: 700;
  font-size: 20px;
}
.pfc-text {
  margin-bottom: 20px;
  color: #cfd6c9;
  font-size: 13.5px;
  line-height: 1.65;
}
@media (min-width:820px) {
  .pfc-card {
    flex-direction: row;
    align-items: stretch;
  }
  .pfc-photo {
    width: 42%;
    height: auto;
  }
  .pfc-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px 42px;
  }
  .pfc-body h2 {
    font-size: 28px;
  }
}
.donar h2.section-title {
  color: #fff;
}
.donar .lede {
  color: #cfd6c9;
}
.monthly-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(244,185,66,0.4);
  border-radius: 12px;
  background: rgba(244,185,66,0.14);
  color: var(--mustard);
  font-size: 12.5px;
  font-weight: 600;
}
.tabs {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
}
.tab-btn {
  flex: 1;
  padding: 10px 6px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #cfd6c9;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.tab-btn.active {
  background: var(--mustard);
  color: var(--green-deep);
}
.tab-panel {
  display: none;
  margin-top: 16px;
}
.tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.via-card {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
}
.via-card > div:nth-child(2) {
  flex: 1;
  min-width: 150px;
}
.via-card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mustard);
  color: var(--green-deep);
  font-size: 16px;
}
.via-card h4 {
  font-size: 13.5px;
}
.via-card p {
  color: #cfd6c9;
  font-size: 12px;
}
.copy-num {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.donar-note {
  margin-top: 18px;
  color: #cfd6c9;
  font-size: 12px;
  text-align: center;
}

/* ===== 12-footer-redes.css ===== */
/* REDES + FOOTER */
.redes-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 20px;
}
.red-card {
  padding: 14px 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(30,61,43,0.05);
  text-align: center;
}
.red-card .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
}
.red-card h5 {
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 700;
}
.red-card span {
  color: var(--ink-soft);
  font-size: 10px;
  word-break: break-word;
}
.redes-sanivet {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(30,61,43,0.1);
}
footer {
  padding: 30px 20px;
  background: var(--green-dark);
  color: #cfd6c9;
  font-size: 12px;
}
footer .foot-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
footer .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
footer .brand .mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mustard);
  font-size: 16px;
}
footer .brand b {
  color: #fff;
  font-family: 'Fraunces';
  font-size: 16px;
}
footer .tag {
  margin-top: 2px;
  color: var(--mustard);
  font-family: 'Caveat';
  font-size: 15px;
}
footer .loc {
  color: #cfd6c9;
  font-size: 12px;
}
footer nav.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 16px;
}
footer nav.foot-nav a {
  color: #cfd6c9;
  font-size: 12.5px;
}
footer hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
}
footer .bottom {
  display: flex;
  justify-content: space-between;
  color: #9aa79a;
  font-size: 11px;
}
@media (min-width:820px) {
  .burger {
    display: none;
  }
  .nav-social {
    display: flex;
  }
  .desktop-links {
    display: flex;
    gap: 22px;
    list-style: none;
  }
  .desktop-links a {
    color: #e9e6da;
    font-size: 14px;
    font-weight: 500;
  }
  .desktop-links a.nav-contigo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .desktop-links a.nav-contigo-link i {
    font-size: 11px;
    color: var(--mustard);
  }
  .mobile-menu {
    display: none;
  }
  h1.hero-title {
    max-width: 620px;
    font-size: 52px;
  }
  .hero-sub {
    max-width: 480px;
    font-size: 17px;
  }
  .cta-row {
    flex-direction: row;
  }
  .btn-primary {
    width: auto;
  }
  .stats-inner {
    grid-template-columns: repeat(4,1fr);
    padding: 34px 24px;
  }
  section {
    padding: 80px 24px;
  }
  .prog-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
  }
  .rest-wrap .prog-list {
    margin-top: 16px;
  }
  .toggle-row {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .btn-outline-dark {
    display: inline-flex;
    width: auto;
    padding: 13px 26px;
  }
  .btn-toggle-progs {
    flex-shrink: 0;
  }
  .or-divider {
    flex: none;
    gap: 8px;
    width: auto;
  }
  .or-divider::before, .or-divider::after {
    flex: none;
    width: 18px;
  }
  .btn-ver-detalle {
    flex-shrink: 0;
    width: auto;
  }
  .toggle-hint {
    width: 100%;
  }
  .historias-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }
  .ayudar-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
  }
  .redes-grid {
    grid-template-columns: repeat(3,1fr);
  }
  .tab-panel.active {
    display: grid;
    grid-template-columns: repeat(3,1fr);
  }
  #tab-local.tab-panel.active {
    grid-template-columns: repeat(2,1fr);
  }
  footer .foot-top {
    flex-direction: row;
    justify-content: space-between;
  }
  .urgencia {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
  }
  .urgencia .left {
    flex: 1;
  }
  .urgencia.urgencia-foto {
    flex-direction: row;
  }
  .urgencia .urgencia-foto-wrap {
    flex: 0 0 200px;
    height: 160px;
    margin: 0;
    border-radius: 16px;
  }
  .urgencia-prev {
    left: -18px;
  }
  .urgencia-next {
    right: -18px;
  }
  .kicker {
    font-size: 28px;
  }
  h2.section-title {
    font-size: 40px;
  }
  .somos-grid {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }
  .somos-grid .somos-photo {
    flex: 0 0 46%;
    height: 460px;
    margin: 0;
  }
  .somos-grid .somos-text {
    flex: 1;
    margin-top: 0;
  }
  .hero-inner {
    padding-bottom: 96px;
  }
  .scroll-cue {
    bottom: 56px;
    display: flex;
  }
  .scroll-cue-arrow {
    bottom: 18px;
  }
}

/* ===== 13-adopciones-enhancements.css ===== */
/* ===== Adopciones: contador, filtros y tarjetas compactas ===== */
.pet-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 30px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.pet-counter i {
  color: var(--mustard);
  font-size: 13px;
}
.filter-bar {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1100px;
  margin: -20px auto 0;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(30,61,43,0.1);
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-label {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.filter-btns {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: var(--cream-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filter-btns::-webkit-scrollbar {
  display: none;
}
.filter-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.filter-btn.active {
  background: var(--green-dark);
  color: #fff;
}
.fav-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1.5px solid var(--cream-2);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}
.fav-toggle i {
  color: var(--clay);
}
.fav-toggle.active {
  border-color: var(--clay);
  background: rgba(201,104,61,0.08);
  color: var(--clay);
}
@media (min-width:820px) {
  .filter-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 12px;
    padding: 18px 22px;
  }
  .filter-group {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .filter-btns {
    overflow-x: visible;
  }
  .filter-btn {
    flex: 1;
    padding: 9px 14px;
  }
  .fav-toggle {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    white-space: nowrap;
  }
}
@media (min-width:1180px) {
  .filter-btn {
    padding: 9px 20px;
  }
}
/* Tarjetas de mascota más modernas y compactas */
.pet-card {
  position: relative;
}
.pet-photo {
  height: 280px;
}
.pet-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  color: var(--clay);
  font-size: 14px;
  cursor: pointer;
}
.pet-fav.active {
  color: #e0435e;
}
.pet-body {
  padding: 14px 16px 16px;
}
.pet-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.pet-name-row h3 {
  margin: 0;
  font-size: 20.5px;
}
.pet-sex {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 20px;
  background: var(--cream-2);
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pet-sex i {
  font-size: 9px;
}
.pet-body p {
  margin-bottom: 18px;
  font-size: 13px;
}
.adopt-btn {
  justify-content: center;
  width: 100%;
  padding: 10px 18px;
  font-size: 13px;
}
.pet-card.hidden {
  display: none;
}
.no-results {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 20px;
  color: var(--ink-soft);
  text-align: center;
  font-size: 13.5px;
}
@media (min-width:820px) {
  .pet-photo {
    height: 280px;
  }
}
/* Requisitos para adoptar: dos columnas */
.adopta-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1100px;
  margin: 8px auto 0;
  padding: 0 16px 40px;
}
.req-columns {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.req-col {
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--cream-2);
}
.req-col h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: 'Fraunces';
  font-size: 16px;
}
.req-col.buscamos h4 i {
  color: #2f8f4e;
}
.req-col.ofrecemos h4 i {
  color: var(--clay);
}
.req-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.req-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 13.3px;
  line-height: 1.5;
}
.req-item .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--green-dark);
  font-size: 13px;
}
.adopta-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border: 1.5px dashed rgba(30,61,43,0.28);
  border-radius: 16px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}
.adopta-note i {
  color: var(--clay);
  font-size: 15px;
}
@media (min-width:820px) {
  .req-columns {
    flex-direction: row;
  }
  .req-col {
    flex: 1;
  }
}

/* ===== 14-microinteractions.css ===== */
/* =============================================================================
   MICROINTERACCIONES — capa adicional de detalles sutiles
   No modifica colores, tipografías, layout ni estructura existentes.
   ============================================================================= */
/* Transiciones suaves y consistentes para elementos interactivos */
a, button {
  -webkit-tap-highlight-color: transparent;
}
/* Botones principales: leve elevación + sombra al pasar el cursor, presión al hacer clic */
.btn-primary, .btn-ghost, .btn-outline-dark, .adopt-btn, .nav-cta, .btn-toggle-progs, .btn-ver-detalle, .btn-ver-fotos {
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.btn-primary:hover, .adopt-btn:hover, .nav-cta:hover {
  box-shadow: 0 8px 18px rgba(20,30,20,0.16);
  transform: translateY(-2px);
}
.btn-ghost:hover, .btn-outline-dark:hover, .btn-toggle-progs:hover, .btn-ver-detalle:hover, .btn-ver-fotos:hover {
  box-shadow: 0 6px 14px rgba(20,30,20,0.10);
  transform: translateY(-2px);
}
.btn-primary:active, .btn-ghost:active, .btn-outline-dark:active, .adopt-btn:active, .nav-cta:active, .btn-toggle-progs:active, .btn-ver-detalle:active, .btn-ver-fotos:active, .copy-num:active, .tab-btn:active, .filter-btn:active, .fav-toggle:active {
  transform: translateY(0) scale(.96);
}
.copy-num, .tab-btn, .filter-btn, .fav-toggle {
  transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
/* Tarjetas: elevación y sombra sutil al hover (donde aún no existía) */
.pet-card, .caso-card, .ayudar-card, .red-card, .via-card, .req-col, .acc-item {
  transition: box-shadow .3s ease, transform .3s ease, opacity .3s ease;
}
.pet-card:hover, .caso-card:hover, .red-card:hover {
  box-shadow: 0 10px 24px rgba(30,61,43,0.13);
  transform: translateY(-3px);
}
.ayudar-card:hover, .via-card:hover, .req-col:hover {
  box-shadow: 0 8px 18px rgba(30,61,43,0.1);
}
/* Zoom muy ligero en imágenes dentro de tarjetas al hacer hover */
.prog-photo, .pet-photo, .caso-ba .ba-item, .pfc-photo, .prog-photo-wrap .prog-photo, .gallery-item {
  overflow: hidden;
}
.prog-photo img, .pet-photo img, .caso-ba .ba-item img, .pfc-photo img, .gallery-item img, .gallery-item video {
  transition: transform .45s ease;
}
.prog-card:hover .prog-photo img, .pet-card:hover .pet-photo img, .caso-card:hover .caso-ba .ba-item img, .pfc-card:hover .pfc-photo img, .acc-item:hover .prog-photo-wrap .prog-photo img, .gallery-item:hover img, .gallery-item:hover video {
  transform: scale(1.03);
}
/* Enlaces del menú: transición elegante con indicador visual al hover */
.desktop-links a, footer nav.foot-nav a {
  position: relative;
  transition: color .2s ease;
}
.desktop-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1.5px;
  background: var(--mustard);
  transition: width .25s ease;
}
.desktop-links a:hover::after {
  width: 100%;
}
.mobile-menu a {
  transition: background .2s ease, padding-left .2s ease;
}
.mobile-menu a:hover {
  padding-left: 8px;
  background: rgba(255,255,255,0.04);
}
footer nav.foot-nav a:hover {
  color: #fff;
}
.prog-index a {
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.prog-index a:hover {
  border-color: rgba(30,61,43,0.22);
  box-shadow: 0 4px 12px rgba(30,61,43,0.1);
  transform: translateY(-1px);
}
/* Sombra sutil en el header al desplazarse (todas las páginas, no solo home) */
header {
  transition: box-shadow .3s ease, background .3s ease;
}
header.scrolled {
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
/* Íconos: leve movimiento/color al pasar el cursor sobre su tarjeta contenedora */
.prog-icon, .prog-icon-lg, .ayudar-card .icon, .red-card .ico, .req-item .ico, .via-card .icon, .benefit-icon {
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.prog-card:hover .prog-icon, .acc-header:hover .prog-icon, .ayudar-card:hover .icon, .red-card:hover .ico, .req-item:hover .ico, .via-card:hover .icon {
  transform: scale(1.08) translateY(-1px);
}
.pet-fav {
  transition: transform .2s ease, color .2s ease;
}
.pet-fav:hover {
  transform: scale(1.1);
}
.pet-fav:active {
  transform: scale(.92);
}
/* Botón flotante de WhatsApp: se oculta al desplazar activamente, reaparece al detenerse o subir */
.fab-whats {
  transition: transform .35s ease, opacity .35s ease, box-shadow .25s ease;
}
.fab-whats.fab-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(90px);
}
.fab-whats:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.3);
  transform: scale(1.06);
}
.fab-whats.fab-hidden:hover {
  transform: translateY(90px);
}
/* Botón "Volver al inicio" */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 89;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--green-dark);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  color: #fff;
  font-size: 15px;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, box-shadow .25s ease, background .2s ease;
}
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--green-deep);
  box-shadow: 0 8px 20px rgba(0,0,0,0.24);
}
.back-to-top:active {
  transform: translateY(0) scale(.92);
}
/* Respeta la preferencia de reducción de movimiento del usuario */
@media (prefers-reduced-motion: reduce) {
  .reveal, .btn-primary, .btn-ghost, .btn-outline-dark, .adopt-btn, .nav-cta, .btn-toggle-progs, .btn-ver-detalle, .btn-ver-fotos, .pet-card, .caso-card, .ayudar-card, .red-card, .via-card, .req-col, .acc-item, .prog-photo img, .pet-photo img, .caso-ba .ba-item img, .pfc-photo img, .gallery-item img, .desktop-links a::after, .prog-icon, .prog-icon-lg, .pet-fav, .fab-whats, .back-to-top, header {
    transition-duration: .01ms !important;
  }
}

/* ===== 15-lightbox.css ===== */
/* =============================================================================
   LIGHTBOX DE GALERÍA (programas.html) — mismo lenguaje visual del sitio
   ============================================================================= */
.p503-lightbox {
  position: fixed;
  inset: 0;
  /* Debe quedar siempre por encima de cualquier modal del sitio (Historia,
     Contigo, Carrusel, Programa — todos en z-index: 210), ya que el
     Lightbox puede abrirse desde dentro de esos modales (p.ej. al hacer
     clic en una foto de la galería de una Historia). */
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s cubic-bezier(.4,0,.2,1), visibility 0s linear .35s;
}
.p503-lightbox.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
}
.p503-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18,40,27,0.92);
}
.p503-lightbox-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(94vw, 900px);
  max-height: 90vh;
  transform: scale(.96);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.p503-lightbox.open .p503-lightbox-inner {
  transform: scale(1);
}
.p503-lightbox-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 78vh;
  border-radius: 16px;
  background: rgba(0,0,0,0.2);
  overflow: hidden;
}
.p503-lightbox-media img, .p503-lightbox-media video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  opacity: 1;
  transition: opacity .2s ease;
}
.p503-lightbox-media.is-switching img, .p503-lightbox-media.is-switching video {
  opacity: 0;
}
.p503-lightbox-close {
  position: absolute;
  top: -46px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.p503-lightbox-close:hover {
  background: rgba(255,255,255,0.22);
  transform: scale(1.06);
}
.p503-lightbox-nav {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s ease, transform .2s ease;
}
.p503-lightbox-nav:hover {
  background: var(--mustard);
  color: var(--green-deep);
  transform: translateY(-50%) scale(1.06);
}
.p503-lightbox-prev {
  left: -8px;
}
.p503-lightbox-next {
  right: -8px;
}
.p503-lightbox-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  color: #f1efe4;
  font-size: 12.5px;
}
.p503-lightbox-title {
  font-family: 'Fraunces';
  font-weight: 600;
  font-size: 14px;
}
.p503-lightbox-counter {
  color: #cfd6c9;
  white-space: nowrap;
}
body.p503-lightbox-lock {
  overflow: hidden;
}
@media (min-width:820px) {
  .p503-lightbox-prev {
    left: -56px;
  }
  .p503-lightbox-next {
    right: -56px;
  }
}
@media (max-width:520px) {
  .p503-lightbox-prev {
    left: 6px;
  }
  .p503-lightbox-next {
    right: 6px;
  }
  .p503-lightbox-close {
    top: -42px;
  }
}

/* ===== 16-historia-modal.css ===== */
/* =============================================================================
   MODAL DE HISTORIA (historias.html + portada) — mismo lenguaje visual del
   lightbox de arriba, adaptado a un panel de contenido con scroll en vez de
   un visor de una sola foto.
   ============================================================================= */
.p503-historia-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.p503-historia-modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.p503-historia-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18,40,27,0.92);
}
.p503-historia-inner {
  position: relative;
  z-index: 1;
  width: min(94vw, 640px);
  max-height: 88vh;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  transform: scale(.96) translateY(8px);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.p503-historia-modal.open .p503-historia-inner {
  transform: scale(1) translateY(0);
}
.p503-historia-scroll {
  max-height: 88vh;
  overflow-y: auto;
}
.p503-historia-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--green-dark);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20,30,20,0.18);
  transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.p503-historia-close:hover {
  background: var(--green-dark);
  color: #fff;
  transform: scale(1.08) rotate(90deg);
  box-shadow: 0 6px 16px rgba(20,30,20,0.24);
}
.p503-historia-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.p503-historia-ba .ba-item {
  height: 190px;
}
.p503-historia-ba .ba-item.ba-item-clickable {
  cursor: pointer;
}
.p503-historia-ba .ba-item:first-child {
  border-right: 2px solid #fff;
}
.p503-historia-body {
  padding: 22px 22px 26px;
}
.p503-historia-nombre {
  margin: 4px 0 8px;
  font-size: 22px;
  letter-spacing: -.01em;
}
.p503-historia-frase {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--mustard);
  border-radius: 0 10px 10px 0;
  background: var(--cream-2);
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
}
.p503-historia-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.p503-historia-meta-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--cream);
  font-size: 12.5px;
  transition: background .25s ease;
}
.p503-historia-meta-item:hover {
  background: var(--cream-2);
}
.p503-historia-meta-item i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(30,61,43,0.08);
  color: var(--green-dark);
  font-size: 12px;
}
.p503-historia-meta-item span {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
}
.p503-historia-meta-item b {
  display: block;
  margin-top: 1px;
  font-size: 13px;
}
.p503-historia-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(30,61,43,0.1);
}
.p503-historia-section h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--green-dark);
  font-family: 'Fraunces', serif;
  font-size: 15px;
}
.p503-historia-section h4 i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(30,61,43,0.08);
  font-size: 12px;
}
.p503-historia-section p {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.65;
}
.p503-historia-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
}
.p503-historia-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
}
.p503-historia-list li i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(30,61,43,0.1);
  color: var(--green-dark);
  font-size: 9px;
}
.p503-historia-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 4px;
  list-style: none;
}
.p503-historia-timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 15px;
  width: 2px;
  background: rgba(30,61,43,0.15);
}
.p503-historia-timeline li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.p503-historia-timeline .tl-dot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 0 0 4px rgba(30,61,43,0.08);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.p503-historia-timeline li:hover .tl-dot {
  transform: scale(1.1);
  box-shadow: 0 0 0 5px rgba(30,61,43,0.12);
}
.p503-historia-timeline .tl-content {
  padding-top: 5px;
}
.p503-historia-timeline .tl-content b {
  display: block;
  font-size: 13.5px;
}
.p503-historia-timeline .tl-content span {
  color: var(--ink-soft);
  font-size: 12px;
}
.p503-historia-gallery {
  margin-bottom: 0;
}
.p503-historia-gallery .gallery-item {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(30,61,43,0.08);
  transition: box-shadow .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
.p503-historia-gallery .gallery-item:hover {
  box-shadow: 0 10px 20px rgba(30,61,43,0.18);
  transform: translateY(-3px);
}
.p503-historia-gallery .gallery-item:has(video) {
  position: relative;
}
.p503-historia-gallery .gallery-item:has(video)::after {
  content: '\f04b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--green-dark);
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(20,30,20,0.2);
  pointer-events: none;
}
body.p503-lightbox-lock {
  overflow: hidden;
}
@media (min-width:820px) {
  /* En escritorio: modal un poco más ancho y fotos "Antes/Después" con más
     protagonismo. En móvil (abajo) no se toca nada de esto. */
  .p503-historia-inner {
    width: min(90vw, 760px);
  }
  .p503-historia-ba .ba-item {
    height: 260px;
  }
  .p503-historia-body {
    padding: 30px 34px 34px;
  }
  .p503-historia-nombre {
    font-size: 25px;
  }
  /* Lugar / Fecha / Diagnóstico en una sola fila horizontal, con espacio de
     sobra para que el texto respire (en móvil se quedan como estaban, en
     columna dentro de la fila que envuelve). */
  .p503-historia-meta {
    flex-wrap: nowrap;
    gap: 16px;
  }
  .p503-historia-meta-item {
    flex: 1;
  }
  /* Tratamientos a un costado, Historia al otro. Si una historia solo trae
     uno de los dos, ese ocupa todo el ancho automáticamente. */
  .p503-historia-twocol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 36px;
    align-items: start;
  }
  /* Línea de tiempo horizontal: los mismos datos e íconos, en fila en vez de
     columna, con el conector cruzando por el centro de los círculos. */
  .p503-historia-timeline {
    flex-direction: row;
    gap: 4px;
    padding-left: 0;
  }
  .p503-historia-timeline::before {
    top: 16px;
    bottom: auto;
    left: 16px;
    right: 16px;
    width: auto;
    height: 2px;
  }
  .p503-historia-timeline li {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .p503-historia-timeline .tl-content {
    padding-top: 0;
  }
  .p503-historia-timeline .tl-content b {
    font-size: 12.5px;
    line-height: 1.3;
  }
  .p503-historia-timeline .tl-content span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
  }
}
@media (max-width:520px) {
  .p503-historia-inner {
    max-height: 92vh;
  }
  .p503-historia-scroll {
    max-height: 92vh;
  }
  .p503-historia-ba .ba-item {
    height: 150px;
  }
  .p503-historia-body {
    padding: 18px 16px 22px;
  }
}

/* ===== 17-header-enhancements.css ===== */
/* =============================================================================
   ENCABEZADO — colapso del texto "Paraíso 503" + botón "Síguenos" al bajar
   =============================================================================
   Usa la misma identidad visual del header (colores, radios, tipografía). El
   texto del logo se contrae con una transición suave y en ese mismo espacio
   aparece el botón "Síguenos"; el logo (ícono) siempre permanece visible.
   ============================================================================= */
.logo .word {
  max-width: 160px;
  white-space: nowrap;
  opacity: 1;
  overflow: hidden;
  transition: opacity .3s ease, max-width .3s ease, margin .3s ease;
}
header.scrolled-deep .logo .word {
  max-width: 0;
  margin-left: -8px;
  opacity: 0;
}
.nav-follow {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 0;
  padding: 8px 0;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .35s ease, max-width .35s ease, padding .35s ease, background .2s ease, transform .2s ease;
}
header.scrolled-deep .nav-follow {
  max-width: 150px;
  padding: 8px 14px;
  opacity: 1;
  pointer-events: auto;
}
.nav-follow:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.nav-follow:active {
  transform: translateY(0) scale(.96);
}
@media (max-width:360px) {
  .nav-follow span {
    display: none;
  }
  header.scrolled-deep .nav-follow {
    justify-content: center;
    max-width: 42px;
    padding: 8px;
  }
}
/* En escritorio: sin botón "Síguenos" al hacer scroll y sin colapso del
   nombre del logo, para que el encabezado fijo se mantenga siempre
   alineado y con distribución uniforme entre logo, menú e íconos/botones.
   En móvil no se toca nada: el colapso + botón "Síguenos" sigue igual. */
@media (min-width:820px) {
  nav {
    gap: 24px;
  }
  .desktop-links a {
    white-space: nowrap;
  }
  .nav-follow {
    display: none;
  }
  header.scrolled-deep .logo .word {
    max-width: 160px;
    margin-left: 0;
    opacity: 1;
  }
}
/* Crédito discreto a la Clínica Veterinaria Sanivet, debajo del CTA de Historias */
.sanivet-credit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 460px;
  margin: 18px auto 0;
  padding: 14px 16px;
  border: 1px solid rgba(30,61,43,0.12);
  border-radius: 14px;
  background: var(--cream-2);
  transition: background .2s ease, transform .2s ease;
}
.sanivet-credit:hover {
  background: #efe7d4;
  transform: translateY(-1px);
}
.sanivet-credit-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(201,104,61,0.14);
  color: var(--clay);
  font-size: 14px;
}
.sanivet-credit-text p {
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}
.sanivet-credit-text b {
  color: var(--ink);
  font-weight: 700;
}
.sanivet-credit-text a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--clay);
  font-weight: 700;
  font-size: 11.5px;
  transition: color .2s ease, gap .2s ease;
}
.sanivet-credit-text a i {
  font-size: 10px;
}
.sanivet-credit-text a:hover {
  gap: 7px;
  color: var(--green-dark);
}
/* Bloque "Síguenos" con íconos de redes, al final del menú hamburguesa
   (mismo lenguaje visual del sitio: borde sutil, acento mostaza) */
.mobile-follow {
  margin: 4px 20px 18px;
  padding: 14px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  text-align: center;
}
.mobile-follow-label {
  display: block;
  margin-bottom: 10px;
  color: var(--mustard);
  font-family: 'Caveat';
  font-weight: 700;
  font-size: 17px;
}
.mobile-follow-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.mobile-follow-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #e9e6da;
  font-size: 14px;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.mobile-follow-icons a .social-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.mobile-follow-icons a:hover {
  padding-left: 0;
  background: var(--mustard);
  color: var(--green-deep);
  transform: translateY(-2px);
}

/* ===== 18-contigo-page.css ===== */
/* =============================================================================
   PROGRAMA CONTIGO — página completa (contigo.html)
   Reutiliza los tokens de color/tipografía y el mismo lenguaje visual de
   tarjetas (radio, sombras) que el resto del sitio. Estas reglas solo
   afectan a las clases nuevas de esta página; no tocan header/footer/menú.
   ============================================================================= */
.contigo-hero-highlight {
  display: block;
  margin-top: 16px;
  color: var(--mustard);
  font-weight: 700;
}
.contigo-top-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 16px 0;
}
.contigo-card {
  flex: 1;
  padding: 24px 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(30, 61, 43, 0.07);
}
.contigo-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.contigo-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-size: 15px;
}
.contigo-card h3 {
  font-family: 'Fraunces';
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.contigo-card p {
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.7;
}
.contigo-card p:last-child {
  margin-bottom: 0;
}
.contigo-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 14px;
}
.contigo-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.contigo-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--green-dark);
  font-size: 17px;
}
.contigo-step b {
  font-family: 'Fraunces';
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}
.contigo-step span {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}
.contigo-help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 0 16px;
}
.contigo-help-card {
  padding: 24px 18px;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  box-shadow: 0 2px 10px rgba(30, 61, 43, 0.05);
}
.contigo-help-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
}
.contigo-help-card h4 {
  margin-bottom: 6px;
  font-size: 14.5px;
  color: var(--ink);
}
.contigo-help-card p {
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}
.req-items.two-col {
  display: flex;
  flex-direction: column;
}
.contigo-closing {
  max-width: 640px;
  margin: 0 auto;
  padding: 46px 16px 10px;
  color: var(--green-dark);
  text-align: center;
  font-family: 'Fraunces';
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
}
.contigo-cta-wrap {
  max-width: 1100px;
  margin: 30px auto 0;
  padding: 0 16px 50px;
  text-align: center;
}
.contigo-cta-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 24px;
  border-radius: 22px;
  background: var(--green-deep);
  color: #fff;
  text-align: center;
}
.contigo-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: #25d366;
  font-size: 22px;
}
.contigo-cta-bar b {
  font-family: 'Fraunces';
  font-weight: 600;
  font-size: 18px;
  color: var(--mustard);
}
.contigo-cta-bar span {
  color: #d9e0d4;
  font-size: 13.5px;
}
.contigo-cta-note {
  display: block;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 12.5px;
}
@media (min-width: 820px) {
  .contigo-top-grid {
    flex-direction: row;
    align-items: stretch;
    padding-top: 50px;
  }
  .contigo-steps {
    position: relative;
    grid-template-columns: repeat(4, 1fr);
  }
  .contigo-steps::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 12%;
    right: 12%;
    z-index: 0;
    border-top: 2px dashed rgba(30, 61, 43, 0.18);
  }
  .contigo-step-icon {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(30, 61, 43, 0.06);
  }
  .contigo-help-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .req-items.two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 22px;
    row-gap: 12px;
  }
  .contigo-cta-bar {
    flex-direction: row;
    justify-content: center;
    text-align: left;
    padding: 26px 40px;
  }
}

/* ===== 19-galeria-page.css ===== */
/* =============================================================================
   GALERÍA (galeria.html)
   Todas las clases de esta sección usan los mismos colores, tipografías y
   espaciados que el resto del sitio (ver variables en :root, arriba). El
   contenido de esta página se genera desde content/galeria.js — estas
   reglas solo definen la apariencia, nunca el contenido.
   ============================================================================= */
.gal-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.gal-stat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
}
.gal-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mustard);
  color: var(--green-deep);
  font-size: 11px;
}
.gal-stat-chip b {
  display: block;
  font-family: 'Fraunces';
  font-size: 16px;
  line-height: 1.1;
  color: #fff;
}
.gal-stat-chip span {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  color: #cfd6c9;
}
/* Barra flotante con pestañas Fotos/Videos, filtros por categoría y buscador.
   Es "sticky": permanece en su lugar dentro del flujo normal de la página
   hasta que el scroll la alcanza, momento en el que se fija suavemente
   justo debajo del header principal (top: var(--header-h)) y vuelve a su
   posición original de forma automática y sin saltos al subir de nuevo.
   Mientras está fija (.is-stuck) se vuelve compacta: oculta las pestañas
   Fotografías/Videos, reduce paddings/gaps y deja categorías + buscador
   en una sola fila de ~55-60px de alto. Todo el cambio ocurre con
   transiciones suaves (nunca de golpe). */
.gal-toolbar {
  position: sticky;
  top: calc(var(--header-h, 70px) + 10px);
  z-index: 60;
  max-width: 1100px;
  margin: -20px auto 0;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(30,61,43,0.1);
  transition: box-shadow .3s ease, padding .3s ease;
}
.gal-toolbar.is-stuck {
  padding: 10px 16px;
  box-shadow: 0 12px 28px rgba(30,61,43,0.18);
}
.gal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  max-height: 70px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .32s ease, opacity .22s ease, margin-bottom .32s ease;
}
.gal-toolbar.is-stuck .gal-tabs {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;
}
.gal-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: var(--cream-2);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.gal-tab.active {
  background: var(--green-dark);
  color: #fff;
}
.gal-filters-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: gap .3s ease;
}
.gal-toolbar.is-stuck .gal-filters-row {
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
.gal-filters-row .filter-btns {
  flex: 1;
  min-width: 0;
  transition: padding .25s ease;
}
/* Texto de categoría un poco más oscuro que el resto del sitio (mismo color
   ya usado en el resto del sitio para texto principal, --ink) para mejorar
   la legibilidad de los filtros sobre fondo claro. */
#galCatFilters .filter-btn {
  color: var(--ink);
  transition: background .2s ease, color .2s ease, padding .25s ease, font-size .25s ease;
}
#galCatFilters .filter-btn.active {
  color: #fff;
}
.gal-toolbar.is-stuck #galCatFilters .filter-btn {
  padding: 7px 12px;
  font-size: 12px;
}
.gal-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--cream-2);
  border: 1.5px solid transparent;
  transition: border-color .2s ease, background .2s ease, padding .25s ease, max-width .3s ease;
}
.gal-search:focus-within {
  background: #fff;
  border-color: var(--green-dark);
}
.gal-search i {
  color: var(--ink-soft);
  font-size: 14px;
}
.gal-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--ink);
  transition: font-size .25s ease;
}
/* Modo compacto: el buscador se mantiene solo si hay espacio (se oculta en
   pantallas angostas para priorizar las categorías, que son lo esencial). */
.gal-toolbar.is-stuck .gal-search {
  width: auto;
  flex: 0 1 240px;
  min-width: 130px;
  padding: 7px 14px;
}
.gal-toolbar.is-stuck .gal-search input {
  font-size: 13px;
}
@media (max-width: 680px) {
  .gal-toolbar.is-stuck .gal-search {
    display: none;
  }
}
.gal-search input::placeholder {
  color: var(--ink-soft);
}
/* Paneles Fotos / Videos */
.gal-panel {
  display: none;
}
.gal-panel.active {
  display: block;
}
.gal-hidden {
  display: none !important;
}
/* Cuadrícula de fotografías */
.gal-photo-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  margin-top: 22px;
}
.gal-photo-card {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(30,61,43,0.07);
}
.gal-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.gal-photo-card:hover img {
  transform: scale(1.07);
}
.gal-photo-caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 7px 9px;
  border-radius: 11px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.gal-cat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.gal-cat-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #fff;
  font-size: 8.5px;
}
.gal-photo-date {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink-soft);
}
.gal-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
/* Video destacado */
.gal-featured {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 22px;
  padding: 14px;
  border-radius: 20px;
  background: var(--green-deep);
  color: #fff;
}
.gal-featured-media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.gal-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-featured-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.55));
}
.gal-play-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  color: var(--green-deep);
  font-size: 19px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: transform .2s ease;
}
.gal-featured-media:hover .gal-play-btn {
  transform: translate(-50%,-50%) scale(1.08);
}
.gal-featured-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.gal-featured-tag {
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--clay);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gal-featured-content h3 {
  font-family: 'Fraunces';
  font-size: 20px;
}
.gal-featured-content p {
  font-size: 13.5px;
  line-height: 1.6;
  opacity: .85;
}
.gal-featured-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  opacity: .75;
}
.gal-featured-content .btn-ver-detalle {
  margin-top: 2px;
}
/* Secciones "Videos recientes" / "Playlists" */
.gal-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 30px 0 14px;
}
.gal-section-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fraunces';
  font-size: 17px;
}
.gal-section-head i {
  color: var(--mustard);
}
.gal-video-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}
.gal-video-card {
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 3px 14px rgba(30,61,43,0.07);
}
.gal-video-thumb {
  position: relative;
  aspect-ratio: 16/10;
}
.gal-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--green-deep);
  font-size: 13px;
}
.gal-video-duration {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}
.gal-video-body {
  padding: 10px 11px 12px;
}
.gal-video-body h4 {
  margin-bottom: 2px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}
.gal-video-body span {
  font-size: 10.5px;
  color: var(--ink-soft);
}
/* Playlists (una por categoría, generadas automáticamente) */
.gal-playlist-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}
.gal-playlist-card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 14px rgba(30,61,43,0.07);
  cursor: pointer;
  transition: transform .2s ease;
}
.gal-playlist-card:hover {
  transform: translateY(-3px);
}
.gal-playlist-thumb {
  position: relative;
  aspect-ratio: 4/3;
}
.gal-playlist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-playlist-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.gal-playlist-body {
  padding: 11px 13px 13px;
}
.gal-playlist-body h4 {
  margin-bottom: 3px;
  font-family: 'Fraunces';
  font-size: 13.5px;
  line-height: 1.3;
}
.gal-playlist-body span {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--ink-soft);
}
.gal-playlist-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 11.5px;
}
/* Franja final antes del footer */
.gal-cta-strip {
  padding: 24px 20px;
  background: var(--cream-2);
  text-align: center;
}
.gal-cta-strip p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Fraunces';
  font-size: 14px;
  color: var(--ink);
}
.gal-cta-strip i {
  color: var(--clay);
}
/* Estado "de ejemplo" para videos/playlists cuando aún no hay un enlace real
   de YouTube: se ve la misma estructura, pero sin poder hacer clic, con una
   etiqueta "Próximamente" en vez de duración/botón. En cuanto se agregue un
   youtubeUrl válido en content/galeria.js, la tarjeta se activa sola. */
.gal-soon-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(32,38,31,0.08);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.gal-featured--placeholder .gal-soon-tag {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.gal-featured--placeholder .gal-featured-media {
  cursor: default;
}
.gal-video-card--placeholder,
.gal-playlist-card--placeholder {
  cursor: default;
}
.gal-video-card--placeholder .gal-video-thumb,
.gal-playlist-card--placeholder .gal-playlist-thumb {
  outline: 2px dashed rgba(30,61,43,0.2);
  outline-offset: -2px;
}
.gal-video-card--placeholder .gal-video-play {
  display: none;
}
@media (min-width:620px) {
  .gal-photo-grid {
    grid-template-columns: repeat(3,1fr);
  }
  .gal-playlist-grid {
    grid-template-columns: repeat(3,1fr);
  }
}
@media (min-width:820px) {
  .gal-toolbar {
    padding: 18px 22px;
  }
  .gal-tabs {
    max-width: 360px;
  }
  .gal-search {
    padding: 13px 18px;
  }
  .gal-photo-grid {
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
  }
  .gal-loadmore-wrap .btn-outline-dark {
    width: auto;
    padding: 13px 30px;
  }
  .gal-featured {
    flex-direction: row;
    padding: 20px;
  }
  .gal-featured-media {
    flex: 0 0 52%;
  }
  .gal-featured-content {
    flex: 1;
    justify-content: center;
  }
  .gal-video-grid {
    grid-template-columns: repeat(4,1fr);
  }
  .gal-playlist-grid {
    grid-template-columns: repeat(5,1fr);
  }
}
@media (min-width:1180px) {
  .gal-photo-grid {
    grid-template-columns: repeat(5,1fr);
    gap: 20px;
  }
}

/* ===== 20-donaciones-enhancements.css ===== */
/* =============================================================================
   FORMAS DE DONAR — PULIDO VISUAL
   Mantiene la estructura, tabs y comportamiento responsive existentes.
   Este módulo solo refina presentación, logos y controles de acción.
   ============================================================================= */

.donar .wrap {
  position: relative;
}

.monthly-note {
  min-height: 48px;
  padding: 11px 14px;
  border-color: rgba(244,185,66,.36);
  border-radius: 13px;
  background: rgba(244,185,66,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.monthly-note > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--mustard);
}

.tabs {
  gap: 6px;
  padding: 5px;
  border-radius: 15px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.tab-btn {
  min-height: 42px;
  border-radius: 11px;
  transition: background .22s ease, color .22s ease, transform .18s ease;
}

.tab-btn:not(.active):hover {
  background: rgba(255,255,255,.045);
  color: #fff;
}

.tab-panel.active {
  gap: 12px;
}

.via-card {
  position: relative;
  min-height: 84px;
  gap: 14px;
  padding: 14px 16px;
  border-color: rgba(255,255,255,.13);
  border-radius: 15px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.via-card .via-info {
  flex: 1 1 180px;
  min-width: 0;
}

.via-card h4 {
  margin-bottom: 2px;
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
}

.via-card p {
  color: #d5dbd1;
  line-height: 1.38;
}

.via-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 17px;
}

.via-card .brand-icon {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #fff;
}

.via-card .brand-logo {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.via-card .brand-bac .brand-logo,
.via-card .brand-nequi .brand-logo,
.via-card .brand-n1co .brand-logo {
  width: 84%;
  height: 84%;
}

.via-card .brand-n1co {
  background: #111;
}

.via-card .brand-chivo .brand-logo {
  width: 132%;
  height: 132%;
}

.copy-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  margin-left: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 9px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .18s ease;
}

.copy-num:hover {
  border-color: rgba(244,185,66,.28);
  background: rgba(244,185,66,.14);
}

.copy-num i {
  color: var(--mustard);
  font-size: 11px;
}

.via-link-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid rgba(62,122,78,.75);
  border-radius: 999px;
  color: #8fd39d;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.via-card-link:hover .via-link-label {
  border-color: rgba(143,211,157,.75);
  background: rgba(62,122,78,.16);
  color: #b7e8c1;
}

.via-link-label i {
  font-size: 10px;
  transition: transform .2s ease;
}

.via-card-link:hover .via-link-label i {
  transform: translateX(2px);
}

.donar .wrap > .btn-primary {
  border-radius: 13px;
  box-shadow: none;
}

.donar-note {
  margin-top: 20px;
  color: #d5dbd1;
}

@media (min-width:820px) {
  .tab-panel.active {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
  }

  .via-card {
    min-height: 86px;
    flex-wrap: nowrap;
  }

  .via-card .via-info {
    min-width: 0;
  }

  .copy-num {
    flex: 0 0 auto;
  }

  .via-card-link {
    align-items: center;
  }
}

@media (max-width:819px) {
  .monthly-note {
    padding: 10px 12px;
  }

  .via-card {
    min-height: 82px;
    padding: 14px;
  }

  .via-card .icon {
    width: 42px;
    height: 42px;
  }

  .via-card .via-info {
    flex-basis: calc(100% - 58px);
  }

  .copy-num {
    margin-left: 56px;
  }

  .via-link-label {
    margin: 2px 0 0 56px;
  }
}

@media (max-width:430px) {
  .copy-num,
  .via-link-label {
    max-width: calc(100% - 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-btn, .copy-num, .via-link-label, .via-link-label i {
    transition: none !important;
  }
}

/* ===== 21-color-refinement.css ===== */
/* =============================================================================
   PARAÍSO 503 — SISTEMA DE COLOR REFINADO
   Mantiene la paleta original y añade niveles de superficie para dar profundidad.
   El amarillo queda reservado para acciones/estados activos y el naranja para Adopta.
   ============================================================================= */

:root {
  --surface-green-base: #12281B;
  --surface-green-raised: #183425;
  --surface-green-card: #1C3A2A;
  --surface-green-hover: #214532;
  --border-green-soft: rgba(230,238,226,.13);
  --text-on-dark: #FFFFFF;
  --text-on-dark-soft: #D5DBD1;
  --action-gold: #F4B942;
  --action-adopt: #C9683D;
}

/* Donaciones: profundidad sutil sin alterar la identidad */
.donar {
  background: var(--surface-green-base);
}

.donar .lede,
.donar-note {
  color: var(--text-on-dark-soft);
}

.donar .monthly-note {
  border-color: rgba(244,185,66,.34);
  background: rgba(244,185,66,.095);
}

.donar .tabs {
  background: var(--surface-green-raised);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.donar .tab-btn:not(.active) {
  color: var(--text-on-dark-soft);
}

.donar .tab-btn.active {
  background: var(--action-gold);
  color: var(--surface-green-base);
}

.donar .via-card {
  border-color: var(--border-green-soft);
  background: var(--surface-green-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

@media (hover:hover) {
  .donar .via-card:hover {
    border-color: rgba(244,185,66,.20);
    background: var(--surface-green-hover);
  }
}

.donar .copy-num {
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.085);
}

.donar .copy-num:hover {
  border-color: rgba(244,185,66,.25);
  background: rgba(244,185,66,.12);
}

/* Los CTA principales conservan el dorado; Adopta conserva el naranja. */
.donar .btn-primary {
  background: var(--action-gold);
  color: var(--surface-green-base);
}

/* ===== 22-actualidad-historia-modales.css ===== */
/* =============================================================================
   PULIDO — Nuestra historia + carrusel de actualidad + modal breve de Programas
   ============================================================================= */

/* Nuestra historia: cada hito conserva el mismo tamaño y posición, pero gana
   identidad visual. Los tonos pertenecen a la paleta existente de Paraíso 503. */
.t-dot {
  color:#fff;
  box-shadow:0 4px 12px rgba(18,40,27,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.t-dot--inicio {
  background:var(--clay);
}
.t-dot--accion {
  background:var(--mustard);
  color:var(--green-deep);
}
.t-dot--futuro {
  background:#3E7A4E;
}
.t-item:hover .t-dot {
  transform:scale(1.06);
  box-shadow:0 6px 16px rgba(18,40,27,.18);
}

/* El carrusel ahora funciona como bloque de actualidad. Las tarjetas sin foto
   (por ejemplo, una alerta operativa sobre las motos) reciben un fondo con
   profundidad sutil, sin cambiar el diseño de las tarjetas que sí llevan foto. */
.urgencia.urgencia-foto:not(:has(.urgencia-foto-wrap)) {
  background:linear-gradient(135deg,var(--clay),#a94f2c);
}
.urgencia.urgencia-foto:not(:has(.urgencia-foto-wrap)) .tagtop {
  background:rgba(255,255,255,.18);
}

/* Modal de Programas: vista rápida, no repetición de la página completa. */
.p503-programa-inner {
  width:min(92vw,500px);
}
.p503-programa-body {
  padding:30px 24px 26px;
}
.p503-programa-eyebrow {
  display:inline-flex;
  align-items:center;
  margin-bottom:8px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(244,185,66,.16);
  color:#9b6520;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.p503-programa-titulo {
  margin:0 42px 10px 0;
  font-size:24px;
}
.p503-programa-resumen {
  margin:0 0 20px;
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.65;
}
.p503-programa-cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:0;
}

@media (min-width:820px) {
  .p503-programa-body {
    padding:34px 32px 30px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .t-dot {
    transition:none !important;
  }
}
/* =============================================================================
   AJUSTE DE ANCHO / OVERFLOW EN ESCRITORIO INTERMEDIO
   Evita que el header fuerce unos píxeles extra de ancho en viewports de
   escritorio estrechos (incluido "Sitio de escritorio" en teléfonos).
   No cambia el diseño normal de móvil ni el escritorio amplio.
   ============================================================================= */

html {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

nav,
.logo,
.desktop-links,
.nav-right {
  min-width: 0;
}

/* Entre tablet horizontal / escritorio estrecho, el conjunto logo + menú +
   redes + CTAs podía superar el ancho disponible. Conservamos el menú de
   escritorio, pero compactamos únicamente ese rango. */
@media (min-width:820px) and (max-width:1099px) {
  nav {
    gap: 10px;
  }

  .desktop-links {
    gap: 12px;
  }

  .desktop-links a {
    font-size: 13px;
  }

  .nav-social {
    display: none;
  }

  .nav-right {
    flex-shrink: 0;
  }
}

/* ===== Ajuste temporal de redes: tarjetas reorganizadas ===== */
.redes-grid--paraiso{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.redes-grid--paraiso .red-card{
  grid-column:span 2;
}
.redes-grid--paraiso .red-card:nth-child(4){
  grid-column:2 / span 2;
}
.redes-grid--paraiso .red-card:nth-child(5){
  grid-column:4 / span 2;
}
.redes-grid--sanivet{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:620px;
  margin:20px auto 0;
}
@media (max-width:430px){
  .redes-grid--sanivet{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ===== Actualidad: ajuste fino móvil REAL ===== */
@media (max-width:819px){
  /* Tarjetas sin foto: baja claramente el bloque de contenido. */
  .urgencia-slide .urgencia.urgencia-foto:not(:has(.urgencia-foto-wrap)) > .left{
    padding-top:54px;
  }

  /* Tarjetas con foto: da aire entre la fotografía y el texto. */
  .urgencia-slide .urgencia.urgencia-foto:has(.urgencia-foto-wrap) > .left{
    padding-top:18px;
  }

  /* Las flechas quedan en una zona baja y no encima de títulos/párrafos. */
  .urgencia-carousel .urgencia-nav{
    top:68%;
    width:29px;
    height:29px;
  }
  .urgencia-carousel .urgencia-prev{left:-2px;}
  .urgencia-carousel .urgencia-next{right:-2px;}

  /* Vista compacta de mapa dentro de Flor Amarilla. */
  .urgencia-con-mapa > .left{
    padding-top:28px !important;
  }
  .urgencia-map{
    margin:16px 0 8px;
    border-radius:14px;
    overflow:hidden;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.20);
  }
  .urgencia-map iframe{
    display:block;
    width:100%;
    height:155px;
    border:0;
  }
  .urgencia-map a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 12px;
    color:#fff;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    background:rgba(30,61,43,.28);
  }
}

/* En escritorio el mapa conserva una altura compacta. */
@media (min-width:820px){
  .urgencia-map{
    margin-top:14px;
    max-width:540px;
    border-radius:14px;
    overflow:hidden;
    background:rgba(255,255,255,.12);
  }
  .urgencia-map iframe{
    display:block;
    width:100%;
    height:170px;
    border:0;
  }
  .urgencia-map a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 12px;
    color:#fff;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    background:rgba(30,61,43,.28);
  }
}

/* ===== Footer legal + páginas legales ===== */
footer .bottom{gap:14px;align-items:center;flex-wrap:wrap}
footer .legal-links,.legal-footer .legal-links{display:flex;flex-wrap:wrap;gap:7px 14px}
footer .legal-links a,.legal-footer .legal-links a{color:#b8c4b8;text-decoration:none}
footer .legal-links a:hover,.legal-footer .legal-links a:hover{color:var(--mustard)}
.legal-header{position:sticky;top:0;z-index:50;background:var(--green-dark);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.legal-header nav{max-width:1120px;margin:auto}
.legal-home-link{display:inline-flex;align-items:center;gap:7px;color:#e9e6da;font-size:13px;font-weight:600}
.legal-main{background:#f7f6ee;min-height:70vh}
.legal-hero{max-width:860px;margin:auto;padding:72px 22px 34px}
.legal-hero .kicker{color:var(--clay);font-family:'Caveat';font-size:26px;font-weight:700}
.legal-hero h1{margin:6px 0 14px;color:var(--green-dark);font-family:'Fraunces';font-size:clamp(34px,7vw,54px);line-height:1.05}
.legal-hero>p{max-width:720px;color:#566057;font-size:17px;line-height:1.7}
.legal-updated{display:inline-block;margin-top:18px;padding:7px 11px;border-radius:999px;background:#ece9dc;color:#687068;font-size:11px;font-weight:600}
.legal-content{max-width:860px;margin:auto;padding:0 22px 70px}
.legal-section{padding:25px 0;border-top:1px solid #dddcd2}
.legal-section h2{margin:0 0 10px;color:var(--green-dark);font-family:'Fraunces';font-size:23px}
.legal-section p{margin:0 0 10px;color:#4e584f;font-size:15px;line-height:1.78}
.legal-note{margin-top:20px;padding:20px 22px;border-radius:16px;background:#fff;border-left:4px solid var(--mustard);color:#4e584f;line-height:1.65}
.legal-note a{color:var(--clay);font-weight:700}
.legal-footer{padding:28px 22px 34px;background:var(--green-dark);color:#cfd6c9}
.legal-footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.legal-footer-brand img{width:38px;height:38px;border-radius:50%}
.legal-footer-brand span{display:flex;flex-direction:column}
.legal-footer-brand b{color:#fff;font-family:'Fraunces';font-size:16px}
.legal-footer-brand small{margin-top:2px;color:#aeb9ae}
.legal-footer .legal-links{margin-bottom:18px}
.legal-copy{padding-top:16px;border-top:1px solid rgba(255,255,255,.12);color:#9aa79a;font-size:11px}

/* El botón de WhatsApp sube al entrar en el footer para no tapar enlaces legales. */
body.home:has(footer:hover) .fab-whats{bottom:90px}
@media(max-width:819px){
  footer .bottom{flex-direction:column;align-items:flex-start}
  footer .legal-links{gap:8px 16px}
  .legal-hero{padding-top:50px}
  .legal-home-link{font-size:0}
  .legal-home-link i{font-size:16px}
  .legal-page .legal-header nav{padding-left:14px;padding-right:14px}
}

body.footer-visible .fab-whats{bottom:118px}
@media(min-width:820px){body.footer-visible .fab-whats{bottom:86px}}