/* ==========================================================================

   GUÍA INGRUMÁ · DIRECTORIO TURÍSTICO Y COMERCIAL DE RIOSUCIO, CALDAS

   Arquitectura Visual Dark Luxury · Minimalismo Editorial de Alta Gama

   Alianza: Corporación Perla del Ingrumá · Aquí-Estoy.com · Chiva Estudio

   Versión: Refinamiento Maestro Septiembre 2026 (Brief Oficial)

   ========================================================================== */



/* --------------------------------------------------------------------------

   FUENTES TIPOGRÁFICAS OFICIALES (BRIEF)

   -------------------------------------------------------------------------- */

@font-face {

  font-family: 'Funnel Display';

  src: url('../assets/fonts/FunnelDisplay-ExtraBold.ttf') format('truetype');

  font-weight: 800;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Funnel Display';

  src: url('../assets/fonts/FunnelDisplay-Regular.ttf') format('truetype');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Montserrat Alternates';

  src: url('../assets/fonts/MontserratAlternates-Bold.ttf') format('truetype');

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Montserrat Alternates';

  src: url('../assets/fonts/MontserratAlternates-Regular.ttf') format('truetype');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}



:root {

  /* PALETA CANÓNICA GUÍA INGRUMÁ */

  --c-oro: #FFBB00;

  --c-oro-glow: rgba(255, 187, 0, 0.45);

  

  --c-night-blue: #130940;

  --c-night-blue-light: #1A0E5A;

  --c-night-blue-vivid: #1B1454;

  

  --c-cyan: #3DFFFF;

  --c-cyan-glow: rgba(61, 255, 255, 0.45);

  --c-cyan-dim: rgba(61, 255, 255, 0.28);

  

  --c-white: #FFFFFF;

  --c-white-mint: #F5FFF4;

  --c-black: #000000;

  

  --c-slate: #9C99B8;

  --c-purple-deep: #2B1B54;

  --c-purple-card: rgba(43, 27, 84, 0.65);

  

  --c-corporacion-red: #B5182D;

  --c-corporacion-red-glow: rgba(181, 24, 45, 0.5);

  

  --c-text-muted: #94A3B8;

  --c-text-subtle: #64748B;

  

  --c-green-wa: #25D366;

  --c-green-wa-dark: #1EBE5D;

  --c-maps: #3B82F6;

  --c-waze: #38BDF8;



  --radius-sm: 8px;

  --radius-md: 14px;

  --radius-lg: 22px;

  --radius-full: 9999px;



  --shadow-dark-sm: 0 4px 14px rgba(0, 0, 0, 0.4);

  --shadow-dark-md: 0 10px 32px rgba(0, 0, 0, 0.6);

  --shadow-dark-lg: 0 20px 60px rgba(0, 0, 0, 0.85);



  --font-h1: 'Funnel Display', sans-serif;

  --font-h2: 'Montserrat Alternates', sans-serif;

  --font-body: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

}



/* --------------------------------------------------------------------------

   REINICIO Y BASE

   -------------------------------------------------------------------------- */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;

}



html {

  scroll-behavior: smooth;

}



body {

  font-family: var(--font-body);

  background-color: var(--c-black);

  color: var(--c-white);

  line-height: 1.55;

  overflow-x: hidden;

}



img, video {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  text-decoration: none;

  color: inherit;

}



button {

  cursor: pointer;

  border: none;

  background: none;

  font-family: inherit;

}



/* ==========================================================================

   1. TICKER SUPERIOR (PULSO LOCAL EN VIVO)

   ========================================================================== */

.ticker-wrap {

  background: var(--c-night-blue);

  color: var(--c-white-mint);

  font-size: 0.76rem;

  font-weight: 500;

  overflow: hidden;

  white-space: nowrap;

  border-bottom: 1px solid rgba(61, 255, 255, 0.15);

  height: 34px;

  display: flex;

  align-items: center;

  position: relative;

  z-index: 105;

}



.ticker-content {

  display: inline-flex;

  gap: 3rem;

  animation: tickerScroll 32s linear infinite;

  padding-left: 100%;

}



.ticker-item {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

}



.ticker-item strong {

  color: var(--c-oro);

  font-weight: 700;

}



.ticker-separator {

  color: var(--c-cyan);

  opacity: 0.6;

  font-size: 0.7rem;

}



@keyframes tickerScroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



/* ==========================================================================

   2. NAVEGACIÓN INSTITUCIONAL MINIMALISTA

   ========================================================================== */

.main-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background: var(--c-black);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  padding: 0.65rem 1.25rem;

  transition: all 0.3s ease;

}



.header-container {

  max-width: 1240px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.brand-group {

  display: flex;

  align-items: center;

}



.header-logo-guia {

  height: 36px;

  width: auto;

  object-fit: contain;

  transition: transform 0.25s ease;

}



.header-logo-guia:hover {

  transform: scale(1.02);

}



.header-actions {

  display: flex;

  align-items: center;

  gap: 0.85rem;

}



.lang-switch {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: var(--c-white);

  font-size: 0.72rem;

  font-weight: 600;

  padding: 0.36rem 0.75rem;

  border-radius: var(--radius-full);

  letter-spacing: 0.6px;

  transition: all 0.2s ease;

}



.lang-switch:hover {

  background: rgba(61, 255, 255, 0.12);

  border-color: var(--c-cyan);

  color: var(--c-cyan);

}



/* ==========================================================================

   3. HERO CINEMÁTICO (SOLO VIDEO / IMAGEN CON GRADIENTES 20%)

   ========================================================================== */

.hero-media-section {

  position: relative;

  width: 100%;

  height: 520px;

  max-height: 70vh;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--c-black);

}



.hero-img-bg {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform: scale(1.03);

  animation: heroCinematicZoom 22s infinite alternate ease-in-out;

}



.hero-video-bg {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform: none;

  animation: none;

}



@keyframes heroCinematicZoom {

  0% { transform: scale(1.02) translate(0, 0); }

  50% { transform: scale(1.08) translate(-1%, -0.8%); }

  100% { transform: scale(1.04) translate(0.8%, 0); }

}



.hero-mask-top {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 22%;

  background: linear-gradient(to bottom, var(--c-black) 0%, transparent 100%);

  pointer-events: none;

  z-index: 2;

}



.hero-mask-bottom {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 22%;

  background: linear-gradient(to top, var(--c-black) 0%, transparent 100%);

  pointer-events: none;

  z-index: 2;

}



.btn-hero-audio-toggle {

  position: absolute;

  bottom: 24px;

  right: 24px;

  z-index: 10;

  background: rgba(0, 0, 0, 0.70);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.22);

  color: var(--c-white);

  border-radius: var(--radius-full);

  padding: 0.45rem 0.95rem;

  font-size: 0.78rem;

  font-weight: 600;

  display: flex;

  align-items: center;

  gap: 0.45rem;

  cursor: pointer;

  transition: all 0.25s ease;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);

}



.btn-hero-audio-toggle:hover {

  background: rgba(61, 255, 255, 0.18);

  border-color: var(--c-cyan);

  color: var(--c-cyan);

  transform: scale(1.04);

}



/* ==========================================================================

   4. SECCIÓN NARRATIVA & SEO (FONDO NEGRO ABSOLUTO)

   ========================================================================== */

.narrative-section {

  background: var(--c-black);

  padding: 3rem 1.25rem 2.5rem;

  text-align: center;

  position: relative;

  z-index: 3;

}



.narrative-container {

  max-width: 860px;

  margin: 0 auto;

}



.narrative-kicker {

  font-family: var(--font-h2);

  font-size: 0.88rem;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 1.25rem;

  display: inline-block;

  background: linear-gradient(90deg, #FFFFFF 0%, #3DFFFF 40%, #FFBB00 60%, #FFFFFF 100%);

  background-size: 250% auto;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: textShimmerLoop 5s linear infinite;

}



@keyframes textShimmerLoop {

  0% { background-position: 0% center; }

  100% { background-position: 250% center; }

}



.narrative-title {

  font-family: var(--font-h1);

  font-size: 2.5rem;

  font-weight: 800;

  line-height: 1.15;

  color: var(--c-white);

  letter-spacing: -0.5px;

  margin-bottom: 1.35rem;

}



.narrative-title .h1-line-1 {

  display: block;

}



.narrative-title .h1-line-2 {

  display: block;

  margin-top: 0.2rem;

}



.narrative-title .accent-vive {

  color: var(--c-oro);

  font-style: normal;

  text-shadow: 0 0 20px var(--c-oro-glow);

}



.narrative-desc {

  font-family: var(--font-body);

  font-size: 0.98rem;

  font-weight: 300;

  color: var(--c-white-mint);

  max-width: 660px;

  margin: 0 auto 2.25rem;

  line-height: 1.65;

}



/* ==========================================================================

   5. BUSCADOR IMÁN STICKY (MAGNET SEARCH)

   ========================================================================== */

.magnet-search-wrapper {

  max-width: 680px;

  margin: 0 auto;

  position: relative;

  z-index: 50;

  transition: all 0.3s ease;

}



.magnet-search-wrapper.is-sticky {

  position: fixed;

  top: 54px;

  left: 50%;

  transform: translateX(-50%);

  width: calc(100% - 2rem);

  max-width: 640px;

  z-index: 9999;

  animation: stickyPopIn 0.3s ease-out;

}



@keyframes stickyPopIn {

  from { opacity: 0; transform: translate(-50%, -10px); }

  to { opacity: 1; transform: translate(-50%, 0); }

}



.search-input-box {

  display: flex;

  align-items: center;

  background: var(--c-night-blue);

  border: 2px solid var(--c-cyan);

  border-radius: var(--radius-full);

  padding: 0.5rem 0.8rem 0.5rem 1.4rem;

  box-shadow: 0 0 20px var(--c-cyan-dim), var(--shadow-dark-md);

  transition: all 0.25s ease;

}



.search-input-box:focus-within {

  box-shadow: 0 0 28px var(--c-cyan-glow), var(--shadow-dark-lg);

  border-color: #7AFFFF;

}



.search-icon-cyan {

  width: 22px;

  height: 22px;

  color: var(--c-cyan);

  margin-right: 0.85rem;

  flex-shrink: 0;

}



.search-field {

  flex: 1;

  background: transparent;

  border: none;

  outline: none;

  font-family: var(--font-body);

  font-size: 0.95rem;

  color: var(--c-white);

}



.search-field::placeholder {

  color: var(--c-slate);

  font-style: italic;

  font-weight: 300;

  font-size: 0.88rem;

}



.search-clear-btn {

  display: none;

  color: var(--c-slate);

  font-size: 1.1rem;

  padding: 0 0.6rem;

  transition: color 0.2s;

}



.search-clear-btn.active {

  display: block;

}



.search-clear-btn:hover {

  color: var(--c-white);

}



.search-results-dropdown {

  position: absolute;

  top: calc(100% + 8px);

  left: 0;

  width: 100%;

  background: #1A1D24;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: var(--radius-md);

  max-height: 380px;

  overflow-y: auto;

  box-shadow: var(--shadow-dark-lg);

  display: none;

  z-index: 100;

}



.search-results-dropdown.active {

  display: block;

}



.search-result-item {

  padding: 0.85rem 1.25rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  cursor: pointer;

  transition: background 0.2s ease;

}



.search-result-item:hover {

  background: rgba(61, 255, 255, 0.08);

}



.search-result-name {

  font-weight: 600;

  font-size: 0.92rem;

  color: var(--c-white);

}



.search-result-name strong {

  color: var(--c-oro);

}



.search-result-cat {

  font-size: 0.72rem;

  color: var(--c-cyan);

  background: rgba(61, 255, 255, 0.1);

  padding: 0.18rem 0.55rem;

  border-radius: var(--radius-sm);

  border: 1px solid rgba(61, 255, 255, 0.25);

}



/* ==========================================================================

   6. LA ÓRBITA SAGRADA DE CHIVA ESTUDIO (6 EJES TERRITORIALES)

   ========================================================================== */

.orbit-section {

  max-width: 1240px;

  margin: 3.5rem auto 4rem;

  padding: 0 1.25rem;

}



.orbital-ecosystem-card {

  background: radial-gradient(circle at 30% 50%, #1A0E5A 0%, var(--c-night-blue) 60%, #08041E 100%);

  border: 2px solid rgba(61, 255, 255, 0.15);

  border-radius: var(--radius-lg);

  padding: 2.5rem;

  box-shadow: 0 0 40px rgba(19, 9, 64, 0.8), var(--shadow-dark-lg);

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  gap: 2.5rem;

}



.orbital-stage {

  flex: 1;

  height: 440px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  user-select: none;

}



.orbital-center-axis {

  position: absolute;

  width: 90px;

  height: 90px;

  border-radius: var(--radius-full);

  background: var(--c-black);

  border: 2px solid var(--c-oro);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 20;

  box-shadow: 0 0 25px var(--c-oro-glow);

  padding: 10px;

}



.orbital-center-axis img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.orbital-ring {

  position: absolute;

  width: 320px;

  height: 320px;

  border-radius: var(--radius-full);

  border: 1.5px dashed rgba(61, 255, 255, 0.2);

  pointer-events: none;

  z-index: 10;

}



.nodes-container {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.orbital-node {

  position: absolute;

  cursor: pointer;

  user-select: none;

  will-change: transform;

  transition: transform 0.1s linear, z-index 0.2s;

}



.node-icon-wrapper {

  width: 60px;

  height: 60px;

  border-radius: var(--radius-full);

  background: var(--c-black);

  border: 2px solid var(--c-cyan-dim);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

  box-shadow: var(--shadow-dark-sm);

  padding: 8px;

}



.node-icon-wrapper img {

  width: 32px;

  height: 32px;

  object-fit: contain;

}



.node-label {

  position: absolute;

  top: 64px;

  left: 50%;

  transform: translateX(-50%);

  background: rgba(0, 0, 0, 0.88);

  border: 1px solid rgba(61, 255, 255, 0.2);

  backdrop-filter: blur(8px);

  padding: 0.16rem 0.55rem;

  border-radius: var(--radius-sm);

  white-space: nowrap;

  font-size: 0.7rem;

  font-weight: 500;

  color: var(--c-white);

  pointer-events: none;

}



.orbital-node.active-node .node-icon-wrapper {

  border-color: var(--c-cyan);

  box-shadow: 0 0 24px var(--c-cyan-glow);

  transform: scale(1.1);

}



.orbital-node.active-node .node-label {

  border-color: var(--c-cyan);

  color: var(--c-cyan);

  font-weight: 700;

}



.orbital-details-card {

  flex: 0 0 420px;

  min-height: 420px;

  background: rgba(19, 9, 64, 0.7);

  border: 2px solid rgba(61, 255, 255, 0.25);

  border-radius: var(--radius-md);

  padding: 2rem;

  backdrop-filter: blur(16px);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  position: relative;

  overflow: hidden;

  box-shadow: var(--shadow-dark-md);

}



.orbital-details-card::before {

  content: '';

  position: absolute;

  inset: -2px;

  border-radius: inherit;

  padding: 2px;

  background: linear-gradient(90deg, transparent 0%, var(--c-cyan) 50%, transparent 100%);

  background-size: 300% 300%;

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  animation: borderGlowLoop 4s linear infinite;

  pointer-events: none;

}



@keyframes borderGlowLoop {

  0% { background-position: 0% 0%; }

  50% { background-position: 100% 100%; }

  100% { background-position: 0% 0%; }

}



.detail-layer-tag {

  font-family: var(--font-h2);

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: var(--c-cyan);

  margin-bottom: 0.4rem;

  display: block;

}



.detail-title {

  font-family: var(--font-h1);

  font-size: 1.85rem;

  font-weight: 800;

  color: var(--c-white);

  line-height: 1.2;

  margin-bottom: 0.3rem;

}



.detail-subtitle {

  font-family: var(--font-h2);

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--c-oro);

  text-transform: uppercase;

  letter-spacing: 0.6px;

  margin-bottom: 1.2rem;

}



.detail-desc-box {

  background: rgba(0, 0, 0, 0.45);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: var(--radius-sm);

  padding: 1rem;

  margin-bottom: 1.5rem;

}



.detail-desc-text {

  font-size: 0.88rem;

  color: var(--c-white-mint);

  line-height: 1.55;

  font-weight: 300;

}



.btn-orbital-cta {

  width: 100%;

  background: var(--c-night-blue);

  color: var(--c-white);

  font-family: var(--font-body);

  font-size: 0.88rem;

  font-weight: 700;

  padding: 0.95rem 1.4rem;

  border-radius: var(--radius-sm);

  border: 2px solid var(--c-cyan);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.6rem;

  text-transform: uppercase;

  letter-spacing: 0.8px;

  transition: all 0.25s ease;

  box-shadow: 0 0 16px var(--c-cyan-dim);

}



.btn-orbital-cta:hover {

  background: var(--c-cyan);

  color: var(--c-black);

  box-shadow: 0 0 28px var(--c-cyan-glow);

  transform: translateY(-2px);

}



/* ==========================================================================

   7. SECCIÓN DIRECTORIO INSTITUCIONAL & EMERGENCIAS (ESCENARIO INGRUMÁ)

   ========================================================================== */

.civic-section {

  position: relative;

  background-color: var(--c-slate); /* #9C99B8 de la hojita más pequeña */

  background-image: 

    radial-gradient(circle at 50% 0%, rgba(19, 9, 64, 0.95) 0%, transparent 70%),

    radial-gradient(circle at 50% 100%, rgba(19, 9, 64, 0.95) 0%, transparent 70%),

    linear-gradient(180deg, #080A12 0%, #9C99B8 22%, #9C99B8 78%, #080A12 100%);

  padding: 5rem 1.25rem;

  min-height: 720px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.civic-mask-top {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 120px;

  background: linear-gradient(to bottom, #080A12 0%, transparent 100%);

  pointer-events: none;

  z-index: 5;

}



.civic-mask-bottom {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 120px;

  background: linear-gradient(to top, #080A12 0%, transparent 100%);

  pointer-events: none;

  z-index: 5;

}



/* Orbes y partículas de luz en movimiento continuo */

.flow-liquid-background {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: radial-gradient(circle at 20% 30%, rgba(27, 20, 84, 0.45) 0%, transparent 55%),

              radial-gradient(circle at 80% 70%, rgba(19, 9, 64, 0.5) 0%, transparent 55%),

              radial-gradient(circle at 50% 50%, rgba(156, 153, 184, 0.25) 0%, transparent 70%);

  filter: blur(40px);

  animation: flowMeshWave 16s ease-in-out infinite alternate;

  pointer-events: none;

}



.civic-ambient-orb {

  position: absolute;

  width: 320px;

  height: 320px;

  border-radius: var(--radius-full);

  pointer-events: none;

  filter: blur(70px);

  z-index: 2;

  opacity: 0.35;

}



.civic-ambient-orb-1 {

  top: 15%;

  left: -80px;

  background: radial-gradient(circle, var(--c-cyan) 0%, transparent 70%);

  animation: floatOrbOne 12s ease-in-out infinite alternate;

}



.civic-ambient-orb-2 {

  bottom: 12%;

  right: -80px;

  background: radial-gradient(circle, var(--c-oro) 0%, transparent 70%);

  animation: floatOrbTwo 14s ease-in-out infinite alternate;

}



@keyframes floatOrbOne {

  0% { transform: translateY(0) scale(1); }

  100% { transform: translateY(40px) translateX(30px) scale(1.15); }

}



@keyframes floatOrbTwo {

  0% { transform: translateY(0) scale(1); }

  100% { transform: translateY(-35px) translateX(-25px) scale(1.1); }

}



/* Tarjeta Contenedora Flotante Central (Azul Noche / Grafito) */

.floating-institutional-card {

  position: relative;

  z-index: 10;

  width: 100%;

  max-width: 460px; /* Ancho fiel al esquema en móvil */

  background: linear-gradient(180deg, #100832 0%, #130940 45%, #0A0520 100%);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 24px;

  padding: 2.2rem 1.4rem 2rem;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(19, 9, 64, 0.8);

  transition: max-width 0.4s ease;

}



@media (min-width: 900px) {

  .floating-institutional-card {

    max-width: 980px;

    padding: 2.8rem 2.4rem 2.5rem;

  }

}



.civic-header {

  text-align: center;

  margin-bottom: 2rem;

}



.civic-kicker {

  font-family: var(--font-h2);

  font-size: 0.72rem;

  font-weight: 700;

  color: var(--c-slate);

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 0.5rem;

  display: block;

}



.civic-title {

  font-family: var(--font-h1);

  font-size: clamp(1.65rem, 4vw, 2.25rem);

  font-weight: 800;

  color: var(--c-white);

  line-height: 1.18;

  margin-bottom: 0.6rem;

}



.civic-sub {

  font-family: var(--font-body);

  font-size: 0.85rem;

  color: var(--c-white-mint);

  font-weight: 300;

  line-height: 1.5;

  max-width: 540px;

  margin: 0 auto;

}



/* Grilla de Emergencias 2x2 en móvil / 4 columnas en desktop */

.emergency-cards-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 0.85rem;

  margin-bottom: 1.75rem;

  align-items: stretch;

}



@media (min-width: 900px) {

  .emergency-cards-grid {

    grid-template-columns: repeat(4, 1fr);

    gap: 1.25rem;

  }

}



/* Tarjeta individual de emergencia */

.emergency-item {

  position: relative;

  background: rgba(14, 11, 38, 0.85);

  border-radius: 16px;

  padding: 1.1rem 0.9rem;

  display: flex;

  flex-direction: column;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

  overflow: hidden;

  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s ease;

  will-change: transform, opacity;

  height: 100%;

}



/* Coreografía de Entrada y Salida */

.emergency-item.fly-from-left {

  opacity: 0;

  transform: translateX(-120px) scale(0.92);

}



.emergency-item.fly-from-right {

  opacity: 0;

  transform: translateX(120px) scale(0.92);

}



.emergency-item.settled {

  opacity: 1;

  transform: translateX(0) scale(1);

}



/* Borde de haz de luz rotatorio en sentido horario (Clockwise Conic Gradient) */

.emergency-item::before {

  content: '';

  position: absolute;

  inset: -50%;

  background: conic-gradient(

    from 0deg,

    transparent 0deg,

    rgba(255, 187, 0, 0.0) 60deg,

    rgba(255, 187, 0, 0.85) 120deg,

    rgba(61, 255, 255, 0.9) 180deg,

    transparent 240deg,

    transparent 360deg

  );

  opacity: 0;

  transition: opacity 0.8s ease;

  pointer-events: none;

  z-index: 1;

}



.emergency-item.settled::before {

  opacity: 1;

  animation: rotateClockwiseGlow 7s linear infinite;

}



/* Desfases de giro horario para que no roten en bloque */

#cardPolicia.settled::before { animation-delay: 0s; }

#cardTransito.settled::before { animation-delay: -1.75s; }

#cardBomberos.settled::before { animation-delay: -3.5s; }

#cardHospital.settled::before { animation-delay: -5.25s; }



@keyframes rotateClockwiseGlow {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



/* Relleno interior para tapar el centro del conic gradient y dejar solo el marco */

.emergency-item::after {

  content: '';

  position: absolute;

  inset: 1.5px;

  background: linear-gradient(180deg, #130D35 0%, #0A061D 100%);

  border-radius: 14.5px;

  z-index: 2;

}



.emergency-item-inner {

  position: relative;

  z-index: 3;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  text-align: center;

  height: 100%;

  width: 100%;

}



/* Zona de Logo con formato cuadrado uniforme para los 4 emblemas oficiales */

.inst-logo-zone {

  height: 84px;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 0.65rem;

}



.inst-logo-img {

  width: 78px;

  height: 78px;

  border-radius: 12px;

  object-fit: cover;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);

  border: 1px solid rgba(255, 255, 255, 0.16);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.emergency-item:hover .inst-logo-img {

  transform: scale(1.05);

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7);

}



/* Zona de Título única y centrada con altura fija */

.inst-info-zone {

  min-height: 38px;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  margin-bottom: 0.85rem;

}



.inst-entity-title {

  font-family: var(--font-h1);

  font-size: 0.95rem;

  font-weight: 800;

  color: #FFFFFF;

  letter-spacing: 0.8px;

  line-height: 1.15;

  margin: 0;

  text-align: center;

}



/* Botón de Llamada de Emergencia (Rojo vibrante de alto impacto) */

.btn-emergency-dial {

  width: 100%;

  min-height: 50px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: linear-gradient(180deg, #C91D34 0%, #B5182D 50%, #921324 100%);

  color: #FFFFFF;

  border-radius: 10px;

  padding: 0.45rem 0.5rem;

  box-shadow: 0 4px 14px rgba(181, 24, 45, 0.45);

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  text-decoration: none;

}



.btn-emergency-dial:hover {

  background: linear-gradient(180deg, #D9233C 0%, #B5182D 100%);

  box-shadow: 0 0 20px rgba(181, 24, 45, 0.8);

  transform: translateY(-2px);

  color: #FFFFFF;

}



.dial-main-text {

  font-family: var(--font-h2);

  font-size: 0.76rem;

  font-weight: 800;

  letter-spacing: 0.4px;

  line-height: 1.15;

}



.dial-sub-text {

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.8px;

  opacity: 0.92;

  margin-top: 1px;

}



/* Botón Otras Instituciones Locales (Estilo editorial sobrio integrado a Guía Ingrumá) */

.emergency-footer-action {

  text-align: center;

  display: flex;

  justify-content: center;

}



.btn-more-institutions {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.55rem;

  width: 100%;

  max-width: 380px;

  background: rgba(19, 9, 64, 0.8);

  backdrop-filter: blur(10px);

  border: 1.5px solid var(--c-cyan);

  color: #FFFFFF;

  font-family: var(--font-h2);

  font-size: 0.82rem;

  font-weight: 700;

  letter-spacing: 1.1px;

  text-transform: uppercase;

  padding: 0.85rem 1.4rem;

  border-radius: var(--radius-full);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 14px var(--c-cyan-dim);

  cursor: pointer;

  transition: all 0.25s ease;

}



.btn-more-institutions:hover {

  background: var(--c-cyan);

  color: var(--c-black);

  box-shadow: 0 0 24px var(--c-cyan-glow);

  transform: translateY(-2px);

}



/* ==========================================================================

   8. MARCAS DE AUTOR & SOCIOS HONORARIOS (CARRUSEL VIP & GRILLA 2X2 CON SWIPE)

   ========================================================================== */

.honorary-section {

  position: relative;

  padding: 4.5rem 1.25rem;

  background: radial-gradient(circle at 50% 40%, var(--c-night-blue-vivid) 0%, #0E0B2E 70%, var(--c-black) 100%);

  overflow: hidden;

}



.honorary-mask-top {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 25%;

  background: linear-gradient(to bottom, #030508 0%, transparent 100%);

  pointer-events: none;

  z-index: 2;

}



.honorary-mask-bottom {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 25%;

  background: linear-gradient(to top, var(--c-black) 0%, transparent 100%);

  pointer-events: none;

  z-index: 2;

}



.honorary-container {

  position: relative;

  z-index: 3;

  max-width: 1240px;

  margin: 0 auto;

}



.honorary-header {

  text-align: center;

  margin-bottom: 2.75rem;

}



.honorary-kicker {

  font-family: var(--font-h2);

  font-size: 0.78rem;

  font-weight: 700;

  color: var(--c-oro);

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 0.45rem;

  display: block;

}



.honorary-title {

  font-family: var(--font-h1);

  font-size: 2.2rem;

  font-weight: 800;

  color: var(--c-white);

  margin-bottom: 0.6rem;

}



.honorary-sub {

  font-size: 0.92rem;

  color: var(--c-white-mint);

  font-weight: 300;

  max-width: 640px;

  margin: 0 auto;

}



/* --------------------------------------------------------------------------

   7.1 SELECTOR DE CATEGORÍAS EN ÓRBITA (STICKY DE 7 BOTONES CON OTROS)

   -------------------------------------------------------------------------- */

.honorary-categories-sticky {

  position: sticky;

  top: 72px;

  z-index: 25;

  background: rgba(25, 15, 74, 0.94);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 20px;

  padding: 0.85rem 1.15rem;

  margin-bottom: 2rem;

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(61, 255, 255, 0.08);

}



.honorary-categories-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 0.65rem;

  font-family: var(--font-h2);

  font-size: 0.74rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}



.categories-label-badge {

  color: var(--c-cyan);

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 0.35rem;

}



.categories-active-count {

  color: var(--c-oro);

  font-weight: 800;

}



.honorary-categories-row {

  display: grid;

  gap: 0.55rem;

}



.honorary-categories-row.row-top {

  grid-template-columns: repeat(4, 1fr);

  margin-bottom: 0.55rem;

}



.honorary-categories-row.row-bottom {

  grid-template-columns: repeat(3, 1fr);

}



.honorary-cat-btn {

  background: rgba(43, 27, 84, 0.65);

  border: 1px solid rgba(156, 153, 184, 0.25);

  border-radius: 12px;

  padding: 0.5rem 0.35rem;

  color: #FFFFFF;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0.25rem;

  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

  cursor: pointer;

}



.honorary-cat-btn .cat-icon {

  font-size: 1.15rem;

  line-height: 1;

}



.honorary-cat-btn .cat-name {

  font-family: var(--font-h2);

  font-size: 0.72rem;

  font-weight: 700;

  line-height: 1.15;

  text-align: center;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 100%;

}



.honorary-cat-btn:hover {

  background: rgba(61, 255, 255, 0.15);

  border-color: rgba(61, 255, 255, 0.6);

  color: var(--c-cyan);

  transform: translateY(-2px);

}



.honorary-cat-btn.active {

  background: linear-gradient(135deg, rgba(255, 187, 0, 0.25) 0%, rgba(61, 255, 255, 0.2) 100%);

  border: 1.5px solid var(--c-oro);

  color: #FFFFFF;

  box-shadow: 0 0 16px rgba(255, 187, 0, 0.45);

}



.honorary-cat-btn.btn-otros {

  background: linear-gradient(135deg, rgba(181, 24, 45, 0.35) 0%, rgba(43, 27, 84, 0.75) 100%);

  border: 1.5px dashed rgba(255, 187, 0, 0.75);

}



.honorary-cat-btn.btn-otros .cat-name {

  color: var(--c-oro);

  font-weight: 800;

}



.honorary-cat-btn.btn-otros.active {

  background: linear-gradient(135deg, rgba(181, 24, 45, 0.6) 0%, rgba(255, 187, 0, 0.35) 100%);

  border: 1.5px solid var(--c-oro);

  box-shadow: 0 0 18px rgba(255, 187, 0, 0.6);

}



/* --------------------------------------------------------------------------

   7.2 GRILLA VIP 6x6 & TARJETAS HOMOGÉNEAS CON BORDE GRADIENTE

   -------------------------------------------------------------------------- */

.honorary-grid-wrap {

  position: relative;

}



.honorary-grid-top-meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 0.85rem;

  font-family: var(--font-h2);

  font-size: 0.76rem;

  color: var(--c-slate);

}



.catalog-vip-tag {

  letter-spacing: 0.05em;

  text-transform: uppercase;

}



.catalog-page-indicator {

  color: var(--c-cyan);

  font-weight: 700;

}



.honorary-cards-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.25rem;

  min-height: 480px;

}



.honorary-cards-grid.fade-in-grid {

  animation: honoraryFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



@keyframes honoraryFadeIn {

  from {

    opacity: 0;

    transform: translateY(12px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.honorary-card {

  background: linear-gradient(160deg, rgba(27, 18, 64, 0.95) 0%, rgba(19, 9, 64, 0.98) 100%) padding-box,

              linear-gradient(135deg, rgba(61, 255, 255, 0.75) 0%, rgba(255, 187, 0, 0.85) 50%, rgba(181, 24, 45, 0.6) 100%) border-box;

  border: 1.5px solid transparent;

  border-radius: 18px;

  padding: 1rem;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  text-align: center;

  position: relative;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 15px rgba(61, 255, 255, 0.1);

  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);

  cursor: pointer;

}



.honorary-card:hover {

  transform: translateY(-4px) scale(1.015);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 25px rgba(255, 187, 0, 0.35);

  background: linear-gradient(160deg, rgba(35, 22, 85, 0.96) 0%, rgba(24, 12, 78, 0.99) 100%) padding-box,

              linear-gradient(135deg, rgba(61, 255, 255, 0.95) 0%, rgba(255, 187, 0, 1) 50%, rgba(255, 75, 95, 0.8) 100%) border-box;

}



.honorary-card-ref {

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 5;

  font-family: var(--font-h2);

  font-size: 0.65rem;

  font-weight: 800;

  color: var(--c-oro);

  background: rgba(0, 0, 0, 0.65);

  border: 1px solid rgba(255, 187, 0, 0.4);

  padding: 0.15rem 0.45rem;

  border-radius: 6px;

  letter-spacing: 0.05em;

}



.honorary-card-media-square {

  width: 100%;

  aspect-ratio: 16 / 10;

  max-height: 95px;

  border-radius: 10px;

  background: #10082c;

  border: 1px solid rgba(255, 255, 255, 0.1);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0.5rem;

  overflow: hidden;

  margin-bottom: 0.75rem;

  transition: border-color 0.25s ease;

}



.honorary-card:hover .honorary-card-media-square {

  border-color: rgba(255, 187, 0, 0.4);

}



.honorary-card-media-square img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));

  transition: transform 0.35s ease;

}



.honorary-card:hover .honorary-card-media-square img {

  transform: scale(1.06);

}



.honorary-card-title {

  font-family: var(--font-h1);

  font-size: 1.02rem;

  font-weight: 800;

  color: #FFFFFF;

  line-height: 1.25;

  margin-bottom: 0.35rem;

  min-height: 2.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

}



.honorary-card-desc {

  font-family: var(--font-body);

  font-size: 0.8rem;

  color: var(--c-slate);

  line-height: 1.35;

  margin-bottom: 0.85rem;

  min-height: 2.2rem;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.btn-honorary-enter {

  width: 100%;

  padding: 0.55rem 0.75rem;

  background: var(--c-purple-card);

  border: 1.5px solid rgba(255, 187, 0, 0.6);

  color: var(--c-oro);

  font-family: var(--font-h2);

  font-size: 0.82rem;

  font-weight: 700;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  transition: all 0.25s ease;

  cursor: pointer;

}



.btn-honorary-enter:hover {

  background: linear-gradient(135deg, #FFBB00 0%, #FFD54F 100%);

  color: #000000;

  border-color: #FFBB00;

  box-shadow: 0 0 16px rgba(255, 187, 0, 0.5);

}



/* --------------------------------------------------------------------------

   7.3 PAGINACIÓN DE 6 EN 6 (ATRÁS / ADELANTE & DOTS)

   -------------------------------------------------------------------------- */

.honorary-pagination-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 1.75rem;

  padding-top: 1.25rem;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.btn-honorary-page {

  padding: 0.6rem 1.15rem;

  border-radius: 12px;

  background: #23154f;

  border: 1.5px solid;

  font-family: var(--font-h2);

  font-size: 0.82rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  cursor: pointer;

  transition: all 0.25s ease;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);

}



.btn-honorary-page.btn-prev {

  color: var(--c-cyan);

  border-color: rgba(61, 255, 255, 0.4);

}



.btn-honorary-page.btn-prev:hover:not(:disabled) {

  background: #341f77;

  border-color: var(--c-cyan);

  box-shadow: 0 0 14px var(--c-cyan-glow);

  transform: translateX(-2px);

}



.btn-honorary-page.btn-next {

  color: var(--c-oro);

  border-color: rgba(255, 187, 0, 0.4);

}



.btn-honorary-page.btn-next:hover:not(:disabled) {

  background: #341f77;

  border-color: var(--c-oro);

  box-shadow: 0 0 14px var(--c-oro-glow);

  transform: translateX(2px);

}



.btn-honorary-page:disabled {

  opacity: 0.28;

  pointer-events: none;

  filter: grayscale(1);

}



.honorary-pagination-dots {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.honorary-dot {

  width: 11px;

  height: 11px;

  border-radius: 50%;

  background: #473a70;

  border: none;

  cursor: pointer;

  transition: all 0.25s ease;

}



.honorary-dot:hover {

  background: var(--c-slate);

}



.honorary-dot.active {

  background: var(--c-oro);

  transform: scale(1.25);

  box-shadow: 0 0 10px var(--c-oro-glow);

}



/* ==========================================================================

   9. SEGUNDO HERO: EL PULSO COMERCIAL DE RIOSUCIO ($100.000 COP)

   ========================================================================== */

.commercial-section {

  position: relative;

  padding: 5rem 1.25rem 4rem;

  background: linear-gradient(180deg, var(--c-black) 0%, var(--c-purple-deep) 35%, #180D35 85%, var(--c-black) 100%);

  border-top: 1px solid rgba(255, 255, 255, 0.06);

}



.commercial-container {

  max-width: 1240px;

  margin: 0 auto;

}



.commercial-header {

  text-align: center;

  margin-bottom: 2.75rem;

}



.commercial-kicker {

  font-family: var(--font-h2);

  font-size: 0.78rem;

  font-weight: 700;

  color: var(--c-cyan);

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 0.45rem;

  display: block;

}



.commercial-title {

  font-family: var(--font-h1);

  font-size: 2.4rem;

  font-weight: 800;

  color: var(--c-white);

  margin-bottom: 0.65rem;

}



.commercial-sub {

  font-size: 0.95rem;

  color: var(--c-white-mint);

  font-weight: 300;

  max-width: 660px;

  margin: 0 auto;

}



.categories-prism {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  margin-bottom: 2.75rem;

}



.prism-btn {

  background: rgba(0, 0, 0, 0.45);

  border: 2px solid rgba(255, 255, 255, 0.15);

  border-radius: var(--radius-full);

  color: var(--c-white);

  font-family: var(--font-body);

  font-size: 0.82rem;

  font-weight: 600;

  padding: 0.5rem 1.15rem;

  transition: all 0.25s ease;

}



.prism-btn:hover {

  border-color: var(--c-cyan);

  color: var(--c-cyan);

  transform: translateY(-1px);

}



.prism-btn.active {

  background: var(--c-cyan);

  border-color: var(--c-cyan);

  color: var(--c-black);

  font-weight: 700;

  box-shadow: 0 0 18px var(--c-cyan-glow);

}



.listings-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

  gap: 1.5rem;

  margin-bottom: 3rem;

}



.merchant-card {

  background: rgba(0, 0, 0, 0.50);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 2px solid rgba(255, 255, 255, 0.12);

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-dark-md);

  display: flex;

  flex-direction: column;

  transition: all 0.25s ease;

}



.merchant-card:hover {

  border-color: var(--c-cyan);

  box-shadow: 0 10px 32px var(--c-cyan-dim);

  transform: translateY(-3px);

}



.merchant-cover-wrap {

  width: 100%;

  height: 180px;

  position: relative;

  overflow: hidden;

  background: #080A12;

}



.merchant-cover-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}



.merchant-card:hover .merchant-cover-img {

  transform: scale(1.05);

}



.merchant-badge-verified {

  position: absolute;

  top: 10px;

  left: 10px;

  background: rgba(0, 0, 0, 0.85);

  border: 1px solid var(--c-cyan);

  color: var(--c-cyan);

  font-size: 0.65rem;

  font-weight: 700;

  padding: 0.2rem 0.55rem;

  border-radius: var(--radius-full);

}



.merchant-body {

  padding: 1.35rem;

  display: flex;

  flex-direction: column;

  flex: 1;

}



.merchant-title {

  font-family: var(--font-h1);

  font-size: 1.25rem;

  font-weight: 800;

  color: var(--c-white);

  margin-bottom: 0.35rem;

  cursor: pointer;

  transition: color 0.2s;

}



.merchant-title:hover {

  color: var(--c-cyan);

}



.merchant-address {

  font-size: 0.78rem;

  color: var(--c-slate);

  margin-bottom: 0.75rem;

}



.merchant-desc {

  font-size: 0.84rem;

  color: var(--c-white-mint);

  line-height: 1.5;

  margin-bottom: 1.25rem;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  flex: 1;

}



.merchant-actions-row {

  display: grid;

  grid-template-columns: 1fr auto auto;

  gap: 0.55rem;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding-top: 1rem;

}



.btn-card-wa {

  background: var(--c-green-wa);

  color: #FFFFFF;

  font-size: 0.84rem;

  font-weight: 700;

  padding: 0.65rem 0.95rem;

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  transition: background 0.2s;

}



.btn-card-wa:hover {

  background: var(--c-green-wa-dark);

}



.btn-card-icon {

  width: 40px;

  height: 40px;

  border-radius: var(--radius-sm);

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.15);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--c-white);

  font-size: 0.95rem;

  transition: all 0.2s;

}



.btn-card-icon:hover {

  background: rgba(61, 255, 255, 0.15);

  border-color: var(--c-cyan);

  color: var(--c-cyan);

}



/* ==========================================================================

   10. SECCIONES EN STAND BY (CLASIFICADOS & AGENDA CULTURAL)

   ========================================================================== */

.standby-section {

  max-width: 1240px;

  margin: 0 auto 3.5rem;

  padding: 0 1.25rem;

}



.standby-box {

  background: rgba(0, 0, 0, 0.45);

  border: 1px dashed rgba(255, 255, 255, 0.2);

  border-radius: var(--radius-md);

  padding: 1.75rem;

  text-align: center;

}



.standby-badge {

  display: inline-block;

  background: rgba(255, 187, 0, 0.15);

  border: 1px solid var(--c-oro);

  color: var(--c-oro);

  font-size: 0.68rem;

  font-weight: 700;

  padding: 0.2rem 0.75rem;

  border-radius: var(--radius-full);

  margin-bottom: 0.75rem;

  letter-spacing: 1px;

}



.standby-title {

  font-family: var(--font-h1);

  font-size: 1.4rem;

  color: var(--c-white);

  margin-bottom: 0.4rem;

}



.standby-desc {

  font-size: 0.85rem;

  color: var(--c-slate);

  max-width: 580px;

  margin: 0 auto;

}



/* ==========================================================================

   11. BANNER CALL TO ACTION DE AFILIACIÓN ($100.000 COP)

   ========================================================================== */

.cta-banner-section {

  max-width: 1240px;

  margin: 0 auto 4rem;

  padding: 0 1.25rem;

}



.cta-banner-card {

  background: radial-gradient(circle at center, #1B1454 0%, var(--c-night-blue) 100%);

  border: 2px solid var(--c-oro);

  border-radius: var(--radius-lg);

  padding: 3rem 2rem;

  text-align: center;

  box-shadow: 0 0 35px var(--c-oro-glow);

}



.cta-banner-badge {

  font-family: var(--font-h2);

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--c-oro);

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 0.75rem;

  display: block;

}



.cta-banner-title {

  font-family: var(--font-h1);

  font-size: 2.2rem;

  font-weight: 800;

  color: var(--c-white);

  margin-bottom: 0.85rem;

}



.cta-banner-desc {

  font-size: 0.98rem;

  color: var(--c-white-mint);

  max-width: 660px;

  margin: 0 auto 2.25rem;

  font-weight: 300;

  line-height: 1.6;

}



.btn-cta-merchant {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  background: var(--c-oro);

  color: var(--c-black);

  font-family: var(--font-body);

  font-size: 0.95rem;

  font-weight: 800;

  padding: 1rem 2rem;

  border-radius: var(--radius-full);

  text-transform: uppercase;

  letter-spacing: 0.6px;

  transition: all 0.25s ease;

  box-shadow: 0 0 24px var(--c-oro-glow);

}



.btn-cta-merchant:hover {

  background: #FFAA00;

  transform: translateY(-2px);

  box-shadow: 0 0 36px rgba(255, 187, 0, 0.7);

}



/* ==========================================================================

   12. FRANJA DIVISORIA ARQUITECTÓNICA (50PX BLANCO PURO)

   ========================================================================== */

.architectural-white-band {

  width: 100%;

  height: 50px;

  background-color: var(--c-white);

}



/* ==========================================================================

   13. FOOTER INSTITUCIONAL TRIPARTITO DEPURADO

   ========================================================================== */

.main-footer {

  background: var(--c-black);

  color: var(--c-white);

  padding: 4rem 1.25rem 2.5rem;

  position: relative;

}



.footer-container {

  max-width: 1240px;

  margin: 0 auto;

  text-align: center;

}



.footer-logo-wrap {

  margin-bottom: 1.75rem;

  display: inline-block;

  position: relative;

  overflow: hidden;

}



.footer-logo-guia {

  height: 48px;

  width: auto;

  object-fit: contain;

  margin: 0 auto;

}



.footer-logo-wrap::after {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 60%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);

  transform: skewX(-20deg);

  animation: logoShimmerPass 6s infinite ease-in-out;

}



@keyframes logoShimmerPass {

  0% { left: -100%; }

  35%, 100% { left: 150%; }

}



.footer-authority-text {

  font-size: 0.92rem;

  color: var(--c-slate);

  max-width: 680px;

  margin: 0 auto 2rem;

  line-height: 1.6;

  font-weight: 300;

}



.footer-authority-text strong {

  color: var(--c-white);

  font-weight: 600;

}



.footer-cta-contact {

  margin-bottom: 2.75rem;

}



.btn-footer-contact {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  background: rgba(255, 255, 255, 0.06);

  border: 1.5px solid var(--c-cyan);

  color: var(--c-cyan);

  padding: 0.65rem 1.5rem;

  border-radius: var(--radius-full);

  font-size: 0.85rem;

  font-weight: 700;

  letter-spacing: 0.5px;

  transition: all 0.25s ease;

}



.btn-footer-contact:hover {

  background: var(--c-cyan);

  color: var(--c-black);

  box-shadow: 0 0 20px var(--c-cyan-glow);

}



.footer-legal-rights {

  font-size: 0.78rem;

  color: var(--c-text-subtle);

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding-top: 2rem;

  margin-bottom: 2rem;

}



.footer-tech-seal {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.65rem;

}



.tech-seal-label {

  font-size: 0.7rem;

  letter-spacing: 1.5px;

  color: var(--c-slate);

  text-transform: uppercase;

}



.tech-seal-logo-wrap {

  position: relative;

  display: inline-block;

  overflow: hidden;

}



.tech-seal-logo {

  height: 28px;

  width: auto;

  opacity: 0.85;

  filter: brightness(1.1);

  transition: opacity 0.2s;

}



.tech-seal-logo:hover {

  opacity: 1;

}



/* ==========================================================================

   14. MODAL INTERACTIVO DE NEGOCIOS

   ========================================================================== */

.modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.88);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  z-index: 1000;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 1rem;

}



.modal-overlay.active {

  display: flex;

}



.modal-container {

  background: #0D0826;

  border: 2px solid var(--c-cyan);

  border-radius: var(--radius-lg);

  max-width: 640px;

  width: 100%;

  max-height: 90vh;

  overflow-y: auto;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 35px var(--c-cyan-dim);

  position: relative;

  animation: modalSlideUp 0.25s ease-out;

}



@keyframes modalSlideUp {

  from { opacity: 0; transform: translateY(20px); }

  to { opacity: 1; transform: translateY(0); }

}



.modal-close-btn {

  position: absolute;

  top: 14px;

  right: 14px;

  width: 36px;

  height: 36px;

  border-radius: var(--radius-full);

  background: rgba(0, 0, 0, 0.7);

  color: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.25rem;

  z-index: 10;

  border: 1px solid rgba(255, 255, 255, 0.2);

  transition: all 0.2s;

}



.modal-close-btn:hover {

  background: var(--c-corporacion-red);

  border-color: var(--c-corporacion-red);

}



.modal-header-img {

  width: 100%;

  height: 220px;

  object-fit: cover;

}



.modal-body-content {

  padding: 1.75rem;

}



.modal-biz-title {

  font-family: var(--font-h1);

  font-size: 1.65rem;

  font-weight: 800;

  color: var(--c-white);

  margin-bottom: 0.35rem;

}



.modal-biz-cat {

  font-size: 0.8rem;

  color: var(--c-cyan);

  font-weight: 600;

  margin-bottom: 1rem;

  display: block;

}



.modal-biz-desc {

  font-size: 0.92rem;

  color: var(--c-white-mint);

  line-height: 1.6;

  margin-bottom: 1.75rem;

}



.modal-actions-grid {

  display: grid;

  grid-template-columns: 1fr auto auto;

  gap: 0.75rem;

}



/* ==========================================================================

   15. RESPONSIVIDAD MÓVIL EXTREMA

   ========================================================================== */

@media (max-width: 992px) {

  .orbital-ecosystem-card {

    flex-direction: column;

    padding: 1.75rem;

    gap: 2.25rem;

    align-items: stretch;

  }

  

  .orbital-stage {

    flex: 0 0 380px;

    width: 100%;

    height: 380px;

    min-height: 380px;

  }

  

  .orbital-details-card {

    flex: 0 0 auto;

    width: 100%;

    min-height: auto;

  }



  .honorary-cards-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 640px) {

  .ticker-wrap {

    height: 30px;

    font-size: 0.7rem;

  }

  

  .header-logo-guia {

    height: 30px;

  }



  .hero-media-section {

    height: 440px;

  }



  .narrative-title {

    font-size: 1.85rem;

  }



  .narrative-desc {

    font-size: 0.88rem;

  }



  .orbital-ecosystem-card {

    padding: 1.25rem 0.85rem;

    gap: 1.75rem;

  }



  .orbital-stage {

    flex: 0 0 330px;

    width: 100%;

    height: 330px;

    min-height: 330px;

  }



  .orbital-ring {

    width: 200px;

    height: 200px;

  }



  .orbital-center-axis {

    width: 68px;

    height: 68px;

    padding: 6px;

  }



  .node-icon-wrapper {

    width: 46px;

    height: 46px;

  }



  .node-icon-wrapper img {

    width: 24px;

    height: 24px;

  }



  .node-label {

    top: 50px;

    font-size: 0.62rem;

    padding: 0.12rem 0.45rem;

  }



  .orbital-details-card {

    padding: 1.35rem 1.15rem;

  }



  .detail-title {

    font-size: 1.45rem;

  }



  .emergency-grid {

    grid-template-columns: 1fr;

  }



  .honorary-categories-sticky {

    padding: 0.65rem 0.75rem;

    border-radius: 16px;

    top: 60px;

  }



  .honorary-categories-row.row-top {

    gap: 0.35rem;

  }



  .honorary-categories-row.row-bottom {

    gap: 0.35rem;

  }



  .honorary-cat-btn {

    padding: 0.4rem 0.2rem;

    border-radius: 8px;

  }



  .honorary-cat-btn .cat-icon {

    font-size: 0.95rem;

  }



  .honorary-cat-btn .cat-name {

    font-size: 0.64rem;

  }



  .honorary-cards-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 0.75rem;

  }



  .honorary-card {

    padding: 0.75rem 0.65rem;

  }



  .honorary-card-title {

    font-size: 0.88rem;

    min-height: 2.2rem;

  }



  .honorary-card-desc {

    font-size: 0.72rem;

    min-height: 2rem;

  }



  .btn-honorary-enter {

    font-size: 0.75rem;

    padding: 0.45rem 0.5rem;

  }



  .btn-honorary-page {

    padding: 0.5rem 0.85rem;

    font-size: 0.75rem;

  }



  .listings-grid {

    grid-template-columns: 1fr;

  }



  .cta-banner-title {

    font-size: 1.65rem;

  }



  .btn-cta-merchant {

    width: 100%;

    justify-content: center;

    font-size: 0.84rem;

    padding: 0.85rem 1.25rem;

  }



  .modal-actions-grid {

    grid-template-columns: 1fr;

  }



  .btn-card-icon {

    width: 100%;

    height: 38px;

  }

}



/* ==========================================================================
   SECCIONES MIGRACIÓN MASTER (SANDBOX SALA DE JUNTAS -> PRODUCCIÓN)
   ========================================================================== */

/* 1. RAMPAS DE TRANSICIÓN CONTINUA */
.ramp-honorary-to-dir {
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, #0C0624 0%, #221408 25%, #8C6500 65%, #FFBB00 100%);
}
.ramp-dir-to-clas {
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, #FFBB00 0%, #FFD54F 35%, #FFF9C4 70%, #FFFFFF 100%);
}
.ramp-clas-to-agenda {
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, #FFFFFF 0%, #B8B5C8 30%, #2A203F 65%, #000000 100%);
}

/* 2. DIRECTORIO GENERAL (FONDO AMARILLO/ORO DE LA HOJA DEL LOGO #FFBB00) */
.dir-section-outer {
  background: #FFBB00;
  padding: 1.25rem 0.75rem 2rem;
}
.dir-main-card {
  max-width: 680px;
  margin: 0 auto;
  background: #0A0520;
  border: 1px solid rgba(255, 187, 0, 0.4);
  border-radius: 1.25rem;
  padding: 1.15rem 0.85rem 1.25rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.dir-badge {
  display: inline-block;
  font-family: var(--font-h2);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3DFFFF;
  border: 1px solid rgba(61, 255, 255, 0.4);
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.35rem;
}
.dir-title {
  font-family: var(--font-h2);
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
}
.dir-subtitle {
  font-size: 0.72rem;
  color: #CBD5E1;
  font-weight: 300;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}
.dir-ribbon-bar {
  background: #1A122E;
  border: 1px solid rgba(255, 187, 0, 0.4);
  border-radius: 0.65rem;
  padding: 0.5rem 0.75rem;
  text-align: center;
  margin-bottom: 0.85rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.dir-ribbon-title {
  display: block;
  font-family: var(--font-h2);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #FFBB00;
  letter-spacing: 0.03em;
}
.dir-ribbon-sub {
  display: block;
  font-size: 0.65rem;
  color: #CBD5E1;
  margin-top: 0.15rem;
}
.dir-body-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.65rem;
  align-items: stretch;
  text-align: left;
}
@media (max-width: 480px) {
  .dir-body-grid {
    grid-template-columns: 105px 1fr;
    gap: 0.5rem;
  }
}
.dir-dock-doors {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
}
@keyframes pulseDockGlow {
  0%, 100% {
    border-color: rgba(255, 187, 0, 0.4);
    box-shadow: 0 0 10px rgba(255, 187, 0, 0.2);
  }
  50% {
    border-color: rgba(255, 187, 0, 0.85);
    box-shadow: 0 0 20px rgba(255, 187, 0, 0.45);
  }
}
.dock-door-item {
  flex: 1;
  background: #181130;
  border: 1.5px solid rgba(255, 187, 0, 0.4);
  border-radius: 0.65rem;
  padding: 0.5rem 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  animation: pulseDockGlow 3.5s ease-in-out infinite;
  transition: all 0.2s ease;
}
.dock-door-item.active {
  background: rgba(255, 187, 0, 0.22) !important;
  border-color: #FFBB00 !important;
  box-shadow: 0 0 16px rgba(255, 187, 0, 0.55) !important;
}
.dock-door-icon {
  width: 22px;
  height: 22px;
  color: #FFBB00;
  margin-bottom: 0.25rem;
}
.dock-door-name {
  font-family: var(--font-h2);
  font-size: 0.68rem;
  font-weight: 800;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1.1;
}
.dock-door-desc {
  font-size: 0.56rem;
  color: rgba(255, 235, 150, 0.85);
  line-height: 1.1;
  margin-top: 0.2rem;
}
.cards-2x2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}
.cuadradito-card {
  background: #0D1322;
  border: 1.5px solid #233554;
  border-radius: 0.65rem;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}
.cuadradito-card:hover {
  border-color: #3DFFFF;
  box-shadow: 0 4px 14px rgba(61, 255, 255, 0.2);
}
.card-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.58rem;
  font-family: monospace;
  color: #3DFFFF;
  margin-bottom: 0.25rem;
}
.card-top-tag {
  color: #94A3B8;
  font-weight: 700;
  font-size: 0.55rem;
  text-transform: uppercase;
}
.card-logo-box {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #070A14;
  border: 1px solid rgba(61, 255, 255, 0.2);
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  margin-bottom: 0.35rem;
}
.card-logo-img {
  max-height: 28px;
  width: auto;
  object-fit: contain;
}
.card-title-text {
  font-family: var(--font-h2);
  font-size: 0.72rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-desc-text {
  font-size: 0.6rem;
  color: #CBD5E1;
  line-height: 1.15;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.btn-cuadradito-contact {
  margin-top: 0.45rem;
  width: 100%;
  padding: 0.32rem 0.2rem;
  border: 1px solid #3DFFFF;
  color: #3DFFFF;
  background: transparent;
  font-family: var(--font-h2);
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: 0.35rem;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-cuadradito-contact:hover {
  background: #3DFFFF;
  color: #000000;
}
.pagination-simple-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.btn-page-step {
  font-family: var(--font-h2);
  font-size: 0.68rem;
  font-weight: 800;
  background: #FFBB00;
  color: #000000;
  border: none;
  border-radius: 0.35rem;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-page-step:hover {
  background: #FFFFFF;
}
.page-step-indicator {
  font-size: 0.68rem;
  font-family: monospace;
  color: #FFBB00;
}

/* 3. TABLÓN DE CLASIFICADOS (FONDO BLANCO, CONTENEDOR AZUL, DOCK DERECHO) */
.clas-section-outer {
  background: #FFFFFF;
  padding: 1.25rem 0.75rem 2rem;
}
.clas-main-card {
  max-width: 680px;
  margin: 0 auto;
  background: #0B081E;
  border: 2px solid #FFBB00;
  border-radius: 1.25rem;
  padding: 1.15rem 0.85rem 1.25rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.clas-yellow-ribbon {
  background: #FFE000;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 0.65rem;
  padding: 0.45rem 0.75rem;
  text-align: center;
  margin-bottom: 0.85rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.clas-yellow-title {
  display: block;
  font-family: var(--font-h2);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.clas-yellow-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  color: #1A1A1A;
  margin-top: 0.15rem;
}
.clas-body-grid {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 0.65rem;
  align-items: stretch;
  text-align: left;
}
@media (max-width: 480px) {
  .clas-body-grid {
    grid-template-columns: 1fr 105px;
    gap: 0.5rem;
  }
}
.clas-card-dark {
  background: #070512;
  border: 1.5px solid rgba(255, 187, 0, 0.35);
}
.clas-card-dark:hover {
  border-color: #FFBB00;
}
.btn-clas-contact {
  margin-top: 0.45rem;
  width: 100%;
  padding: 0.32rem 0.2rem;
  background: #FFBB00;
  color: #000000;
  font-family: var(--font-h2);
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: 0.35rem;
  text-transform: uppercase;
  text-align: center;
  display: block;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-clas-contact:hover {
  background: #FFFFFF;
}

/* 4. AGENDA CULTURAL & CASAS MATRICES (NEGRO ABSOLUTO #000000 + VIDEO INTERMEDIO) */
.agenda-section-outer {
  position: relative;
  background: #000000;
  padding: 2.25rem 0.75rem 2.75rem;
  overflow: hidden;
}
.agenda-content-wrap {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.agenda-history-header {
  text-align: center;
  margin-bottom: 1.15rem;
}

/* Video Intermedio Cinematic (video-2.mp4) */
.agenda-video-intermedio-box {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto 1.25rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #000000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95);
}
.agenda-video-media {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  display: block;
}
.agenda-video-fade-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45px;
  background: linear-gradient(180deg, #000000 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.agenda-video-fade-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55px;
  background: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* Texto Narrativo debajo del video */
.agenda-history-copy-box {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 1.5rem;
}
.agenda-history-text {
  font-size: 0.76rem;
  line-height: 1.55;
  color: #E2E8F0;
}
.agenda-history-text strong {
  color: #FFBB00;
}

/* 4 Cuadraditos de Casas Matrices en Azul Noche */
.cultural-4-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .cultural-4-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cultural-card-item {
  background: #110B29;
  border: 1px solid rgba(255, 187, 0, 0.35);
  border-radius: 0.85rem;
  padding: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 105px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.cultural-card-item:hover {
  transform: translateY(-3px);
  border-color: #FFBB00;
  box-shadow: 0 12px 28px rgba(255, 187, 0, 0.18);
}
.cultural-card-tag {
  font-size: 0.6rem;
  font-weight: 800;
  color: #FFBB00;
  text-transform: uppercase;
  display: block;
}
.cultural-card-title {
  font-family: var(--font-h2);
  font-size: 0.82rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-top: 0.2rem;
}
.cultural-card-desc {
  font-size: 0.64rem;
  color: #CBD5E1;
  margin-top: 0.2rem;
  line-height: 1.35;
}
.cultural-card-link {
  font-size: 0.62rem;
  font-weight: 800;
  color: #FFBB00;
  margin-top: 0.45rem;
  display: block;
}

/* Aliado Noti Riosucio */
.cultural-card-partner {
  background: #0E1F18;
  border-color: rgba(34, 197, 94, 0.45);
}
.cultural-card-partner:hover {
  border-color: #22C55E;
  box-shadow: 0 12px 28px rgba(34, 197, 94, 0.18);
}
.cultural-partner-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}
.cultural-partner-avatar {
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  object-fit: cover;
}
.cultural-partner-label {
  font-size: 0.55rem;
  font-weight: 800;
  color: #86EFAC;
  text-transform: uppercase;
  display: block;
}
.cultural-partner-followers {
  font-size: 0.65rem;
  font-family: monospace;
  font-weight: 700;
  color: #FFFFFF;
}
.cultural-partner-link {
  font-size: 0.62rem;
  font-weight: 800;
  color: #86EFAC;
  text-decoration: none;
  margin-top: 0.45rem;
  display: block;
}

/* Banner Comercio Padrino (Galería / Sismo 10 de Agosto) */
.padrino-banner-card {
  background: #140D2B;
  border: 2px solid rgba(255, 187, 0, 0.45);
  border-radius: 1.15rem;
  padding: 1.15rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75);
}
@media (max-width: 600px) {
  .padrino-banner-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}
.padrino-icon-seal {
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: rgba(255, 187, 0, 0.18);
  border: 2px solid #FFBB00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.padrino-info-wrap {
  flex: 1;
}
.padrino-badge-highlight {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #FFBB00;
  letter-spacing: 0.05em;
  display: block;
}
.padrino-main-heading {
  font-family: var(--font-h2);
  font-size: 0.92rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-top: 0.2rem;
  line-height: 1.3;
}
.padrino-quote-text {
  font-family: var(--font-h2);
  font-size: 0.78rem;
  font-weight: 700;
  color: #34D399;
  margin: 0.4rem 0 0.35rem;
  font-style: italic;
}
.padrino-desc-paragraph {
  font-size: 0.69rem;
  color: #CBD5E1;
  line-height: 1.4;
  margin-top: 0.25rem;
}
.padrino-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
@media (max-width: 600px) {
  .padrino-actions-row {
    justify-content: center;
  }
}
.btn-padrino-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: #FFBB00;
  color: #000000;
  font-family: var(--font-h2);
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-padrino-primary:hover {
  background: #FFA500;
  transform: translateY(-2px);
}
.btn-padrino-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-h2);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.2s ease;
}
.btn-padrino-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* 5. CALL TO ACTION PERMANENTE */
.cta-comerciantes-section {
  background: #000000;
  border-top: 1px solid rgba(255, 187, 0, 0.2);
  padding: 2.5rem 1rem;
  text-align: center;
}
.cta-comerciantes-card {
  max-width: 540px;
  margin: 0 auto;
}
.btn-wa-institutional {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.65rem 1.4rem;
  background: linear-gradient(90deg, #FFBB00, #FFA500);
  color: #000000;
  font-family: var(--font-h2);
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(255, 187, 0, 0.4);
  transition: all 0.2s ease;
}
.btn-wa-institutional:hover {
  background: #FFFFFF;
  color: #000000;
}

/* 6. FOOTER OFICIAL DE IDENTIDAD CHIVA (DARK LUXURY) */
.footer-master-wrap {
  background: #060314;
  color: #E2E8F0;
  padding: 2.5rem 1rem 2rem;
  border-top: 2px solid rgba(255, 187, 0, 0.4);
}
.footer-master-container {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .footer-master-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.footer-corp-box {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.footer-corp-badge {
  padding: 0.4rem 0.6rem;
  background: #0E0728;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-corp-img {
  height: 38px;
  width: auto;
  object-fit: contain;
}
.footer-aquiestoy-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #0E0728;
  padding: 0.55rem 0.95rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(61, 255, 255, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.footer-aquiestoy-img {
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(61, 255, 255, 0.3));
}
.footer-legal-copy {
  max-width: 720px;
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.65rem;
  color: #94A3B8;
}

/* 7. MODAL ANTI-RIO360 (A 0 MS) */
.anti-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 3, 16, 0.88);
  backdrop-filter: blur(10px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.anti-modal.active {
  display: flex;
}
.anti-modal-card {
  background: #0F1422;
  border: 2px solid rgba(255, 187, 0, 0.6);
  border-radius: 1rem;
  max-width: 380px;
  width: 100%;
  padding: 1rem;
  color: #E2E8F0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  position: relative;
}
.anti-modal-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}
.anti-modal-close:hover {
  color: #FFFFFF;
}


/* FRANJA BLANCA DE DELIMITACIÓN (CTA -> FOOTER) */
.cta-to-footer-white-band {
  width: 100%;
  height: 38px;
  background: #FFFFFF;
  display: block;
}

/* BUSCADOR STICKY: BARRA COMPLETA 100% OPACA PARA QUE NINGÚN TEXTO SE TRASPASE */
.magnet-search-wrapper.is-sticky {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  transform: none;
  background: #060312 !important;
  border-bottom: 1px solid rgba(61, 255, 255, 0.25);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.95);
  padding: 0.45rem 1rem 0.55rem;
  z-index: 9999;
}
.magnet-search-wrapper.is-sticky .search-input-box {
  max-width: 640px;
  margin: 0 auto;
  background: #0E0728;
}

/* ESPACIADOR ANTI-SALTO DE LAYOUT */
.magnet-search-spacer {
  display: none;
  height: 56px;
  width: 100%;
}

/* TARJETAS SOCIOS HONORARIOS: COMPACTAS, ELEGANTES Y PROPORCIONADAS */
.honorary-card {
  background: linear-gradient(160deg, rgba(27, 18, 64, 0.95) 0%, rgba(19, 9, 64, 0.98) 100%) padding-box,
              linear-gradient(135deg, rgba(61, 255, 255, 0.75) 0%, rgba(255, 187, 0, 0.85) 50%, rgba(181, 24, 45, 0.6) 100%) border-box !important;
  border: 1.5px solid transparent !important;
  border-radius: 12px !important;
  padding: 0.55rem 0.5rem 0.65rem !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55) !important;
}
.honorary-card-media-square {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 75px !important;
  border-radius: 8px !important;
  background: #0E0726 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.35rem !important;
  overflow: hidden !important;
  margin-bottom: 0.35rem !important;
}
.honorary-card-media-square img {
  max-width: 100% !important;
  max-height: 48px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)) !important;
}
.honorary-card-title {
  font-size: 0.78rem !important;
  min-height: 1.5rem !important;
  line-height: 1.15 !important;
  margin-bottom: 0.15rem !important;
}
.honorary-card-desc {
  font-size: 0.62rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.35rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.btn-honorary-card {
  padding: 0.28rem 0.5rem !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
}

/* ==========================================================================
   MASTER FIXES V2.6: DEFINITIVE STACKING CONTEXT & SHIMMER FIXES
   ========================================================================== */

/* HEADER GLOBAL: SIEMPRE ARRIBA */
.master-header {
  z-index: 999999 !important;
}

/* NARRATIVE SECTION: ELEVADA PARA QUE SU HIJO FIXED NUNCA SEA ATRAPADO */
.narrative-section {
  position: relative !important;
  z-index: 999990 !important;
}

/* 1. BUSCADOR STICKY: BARRA COMPLETA 100% OPACA Y SUPERIOR A TODAS LAS SECCIONES */
.magnet-search-wrapper.is-sticky {
  position: fixed !important;
  top: 48px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  background: #080417 !important;
  border-bottom: 1px solid rgba(61, 255, 255, 0.3) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.98) !important;
  padding: 0.4rem 0.75rem 0.5rem !important;
  z-index: 999999 !important;
}
.magnet-search-wrapper.is-sticky .search-input-box {
  max-width: 640px !important;
  margin: 0 auto !important;
  background: #11092e !important;
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 16px rgba(61, 255, 255, 0.35) !important;
}

/* 2. CATEGORÍAS EN ÓRBITA: NUNCA STICKY PARA NO CHOCAR NI TAPAR EL BUSCADOR */
.honorary-categories-sticky {
  position: relative !important;
  top: auto !important;
  z-index: 5 !important;
  background: rgba(18, 10, 48, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(61, 255, 255, 0.2) !important;
  border-radius: 16px !important;
  padding: 0.65rem 0.6rem 0.75rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65) !important;
}
.honorary-categories-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 0.5rem !important;
  font-family: var(--font-h2) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0 0.2rem !important;
}
.categories-label-badge {
  color: var(--c-cyan) !important;
  font-weight: 800 !important;
}
.categories-active-count {
  color: var(--c-oro) !important;
  font-weight: 800 !important;
}
.honorary-categories-row.row-top {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.35rem !important;
  margin-bottom: 0.35rem !important;
}
.honorary-categories-row.row-bottom {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.35rem !important;
}
.honorary-cat-btn {
  background: rgba(27, 18, 64, 0.75) !important;
  border: 1px solid rgba(156, 153, 184, 0.25) !important;
  border-radius: 12px !important;
  padding: 0.45rem 0.2rem !important;
  color: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.honorary-cat-btn:hover {
  background: rgba(61, 255, 255, 0.15) !important;
  border-color: var(--c-cyan) !important;
  transform: translateY(-2px) !important;
}
.honorary-cat-btn.active {
  background: rgba(255, 187, 0, 0.2) !important;
  border-color: var(--c-oro) !important;
  box-shadow: 0 0 14px rgba(255, 187, 0, 0.5) !important;
}
.cat-node-circle {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #181135 !important;
  border: 1.5px solid rgba(255, 187, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 0.25rem !important;
  transition: all 0.2s ease !important;
}
.cat-orbital-icon {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}
.honorary-cat-btn.btn-otros {
  border: 1.5px dashed rgba(255, 187, 0, 0.8) !important;
  background: rgba(36, 26, 11, 0.7) !important;
}
.honorary-cat-btn.btn-otros .cat-node-circle {
  border-color: var(--c-oro) !important;
  background: rgba(255, 187, 0, 0.15) !important;
}
.honorary-cat-btn.btn-otros .otros-star-icon {
  font-size: 0.95rem !important;
  color: var(--c-oro) !important;
}
.honorary-cat-btn.btn-otros .cat-name {
  color: var(--c-oro) !important;
  font-weight: 800 !important;
}
.honorary-cat-btn .cat-name {
  font-family: var(--font-h2) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* 3. GRILLA Y TARJETAS SOCIOS HONORARIOS: 3 COLUMNAS COMPACTAS (IMAGEN 1) */
.honorary-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem !important;
  min-height: 400px;
  margin-bottom: 1.25rem;
}
@media (max-width: 900px) {
  .honorary-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.45rem !important;
  }
}
@media (max-width: 640px) {
  .honorary-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.4rem !important;
  }
}
.honorary-card {
  background: linear-gradient(160deg, rgba(27, 18, 64, 0.95) 0%, rgba(19, 9, 64, 0.98) 100%) padding-box,
              linear-gradient(135deg, rgba(61, 255, 255, 0.75) 0%, rgba(255, 187, 0, 0.85) 50%, rgba(181, 24, 45, 0.6) 100%) border-box !important;
  border: 1.5px solid transparent !important;
  border-radius: 12px !important;
  padding: 0.45rem 0.35rem 0.55rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: center !important;
  position: relative !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}
.honorary-card:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 24px rgba(255, 187, 0, 0.35) !important;
}
.honorary-card-ref {
  display: none !important;
}
.honorary-card-media-square {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  max-height: 55px !important;
  border-radius: 8px !important;
  background: #0d0726 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.3rem !important;
  overflow: hidden !important;
  margin-bottom: 0.35rem !important;
}
.honorary-card-media-square img {
  max-width: 100% !important;
  max-height: 40px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)) !important;
}
.honorary-card-title {
  font-family: var(--font-h1) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  margin-bottom: 0.15rem !important;
  min-height: 1.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.honorary-card-desc {
  font-family: var(--font-body) !important;
  font-size: 0.56rem !important;
  color: var(--c-slate) !important;
  line-height: 1.15 !important;
  margin-bottom: 0.4rem !important;
  min-height: 1.45rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.btn-honorary-enter {
  width: 100% !important;
  padding: 0.3rem 0.4rem !important;
  background: #1c113b !important;
  border: 1.2px solid rgba(255, 187, 0, 0.7) !important;
  color: var(--c-oro) !important;
  font-family: var(--font-h2) !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-honorary-enter:hover {
  background: #FFBB00 !important;
  color: #000000 !important;
  box-shadow: 0 0 12px rgba(255, 187, 0, 0.6) !important;
}

/* 4. PALETA DE COLOR: REEMPLAZO DE VERDES POR CIAN */
.cultural-card-partner {
  background: #0B1626 !important;
  border-color: rgba(61, 255, 255, 0.45) !important;
}
.cultural-card-partner:hover {
  border-color: #3DFFFF !important;
  box-shadow: 0 12px 28px rgba(61, 255, 255, 0.25) !important;
}
.cultural-partner-label {
  color: #3DFFFF !important;
}
.cultural-partner-link {
  color: #3DFFFF !important;
}
.padrino-quote-text {
  color: #3DFFFF !important;
  text-shadow: 0 0 12px rgba(61, 255, 255, 0.4) !important;
}

/* 5. EFECTO DE REFLEJO Y ANIMACIÓN HACES DE LUZ EN BOTONES (SHIMMER)
   Misma técnica exacta que .footer-logo-wrap::after con alto contraste y visibilidad garantizada */
.btn-shimmer-pass,
.btn-padrino-primary,
.btn-padrino-secondary,
.btn-honorary-enter,
.btn-more-institutions,
.btn-emergency-dial,
.btn-wa-institutional,
.btn-footer-contact {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.btn-shimmer-pass > *,
.btn-padrino-primary > *,
.btn-padrino-secondary > *,
.btn-honorary-enter > *,
.btn-more-institutions > *,
.btn-emergency-dial > *,
.btn-wa-institutional > *,
.btn-footer-contact > * {
  position: relative !important;
  z-index: 2 !important;
}

.btn-shimmer-pass::after,
.btn-padrino-primary::after,
.btn-padrino-secondary::after,
.btn-honorary-enter::after,
.btn-more-institutions::after,
.btn-emergency-dial::after,
.btn-wa-institutional::after,
.btn-footer-contact::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%) !important;
  transform: skewX(-20deg) !important;
  animation: btnGlowShimmer 3.2s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* Efecto especial extra brillante en el botón dorado principal */
.btn-padrino-primary::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 45%, rgba(61, 255, 255, 0.8) 75%, transparent 100%) !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.8) !important;
}

@keyframes btnGlowShimmer {
  0% { left: -120%; }
  35%, 100% { left: 160%; }
}

/* ==========================================================================
   FASE 0: AJUSTES FINALES Y CONGELAMIENTO DEFINITIVO DE LA LANDING
   ========================================================================== */

/* 1. CATEGORÍAS EN ÓRBITA: RESPLANDOR ROTATORIO EN BUCLE (rotateClockwiseGlow / vip-orbital-node) */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateClockwiseGlowAngle {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

.vip-orbital-node {
  position: relative !important;
  border-radius: 50% !important;
  background: #181135 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  isolation: isolate !important;
  transition: all 0.25s ease !important;
}
.vip-orbital-node::before {
  content: '' !important;
  position: absolute !important;
  inset: -2.5px !important;
  border-radius: 50% !important;
  background: conic-gradient(from var(--angle, 0deg), transparent 20%, #FFBB00 50%, #3DFFFF 70%, transparent 90%) !important;
  animation: rotateClockwiseGlowAngle 4.5s linear infinite !important;
  z-index: 0 !important;
  opacity: 0.9 !important;
}
.vip-orbital-node::after {
  content: '' !important;
  position: absolute !important;
  inset: 1.5px !important;
  background: #181135 !important;
  border-radius: 50% !important;
  z-index: 1 !important;
}
.vip-orbital-node > * {
  position: relative !important;
  z-index: 2 !important;
}
.honorary-cat-btn:hover .vip-orbital-node {
  transform: translateY(-2px) scale(1.05) !important;
}

/* Desfases escalonados para efecto orgánico en nodos de categorías */
.honorary-categories-row.row-top .honorary-cat-btn:nth-child(1) .vip-orbital-node::before { animation-delay: 0s !important; }
.honorary-categories-row.row-top .honorary-cat-btn:nth-child(2) .vip-orbital-node::before { animation-delay: -0.9s !important; }
.honorary-categories-row.row-top .honorary-cat-btn:nth-child(3) .vip-orbital-node::before { animation-delay: -1.8s !important; }
.honorary-categories-row.row-top .honorary-cat-btn:nth-child(4) .vip-orbital-node::before { animation-delay: -2.7s !important; }
.honorary-categories-row.row-bottom .honorary-cat-btn:nth-child(1) .vip-orbital-node::before { animation-delay: -3.4s !important; }
.honorary-categories-row.row-bottom .honorary-cat-btn:nth-child(2) .vip-orbital-node::before { animation-delay: -1.3s !important; }
.honorary-categories-row.row-bottom .honorary-cat-btn:nth-child(3) .vip-orbital-node::before { animation-delay: -2.5s !important; }

/* 2. DIRECTORIO GENERAL: COLOR DINÁMICO + REFLEJO EN BUCLE (SHIMMER) */
.dir-ribbon-bar {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: all 0.3s ease !important;
}
.dir-ribbon-bar > * {
  position: relative !important;
  z-index: 3 !important;
}
.dir-ribbon-bar::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%) !important;
  transform: skewX(-20deg) !important;
  animation: btnGlowShimmer 4s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Temas dinámicos de color según pestaña activa */
.dir-ribbon-bar.theme-productos {
  border-color: rgba(61, 255, 255, 0.75) !important;
  background: linear-gradient(135deg, rgba(8, 22, 38, 0.95) 0%, rgba(13, 10, 36, 0.98) 100%) !important;
  box-shadow: 0 0 22px rgba(61, 255, 255, 0.3) !important;
}
.dir-ribbon-bar.theme-productos .dir-ribbon-title {
  color: #3DFFFF !important;
  text-shadow: 0 0 10px rgba(61, 255, 255, 0.4) !important;
}

.dir-ribbon-bar.theme-servicios {
  border-color: rgba(255, 187, 0, 0.75) !important;
  background: linear-gradient(135deg, rgba(38, 26, 8, 0.95) 0%, rgba(18, 11, 38, 0.98) 100%) !important;
  box-shadow: 0 0 22px rgba(255, 187, 0, 0.3) !important;
}
.dir-ribbon-bar.theme-servicios .dir-ribbon-title {
  color: #FFBB00 !important;
  text-shadow: 0 0 10px rgba(255, 187, 0, 0.4) !important;
}

.dir-ribbon-bar.theme-todo {
  border-color: rgba(181, 24, 45, 0.75) !important;
  background: linear-gradient(135deg, rgba(42, 12, 26, 0.95) 0%, rgba(20, 10, 42, 0.98) 100%) !important;
  box-shadow: 0 0 22px rgba(181, 24, 45, 0.4), 0 0 16px rgba(61, 255, 255, 0.2) !important;
}
.dir-ribbon-bar.theme-todo .dir-ribbon-title {
  color: #FFD28C !important;
  text-shadow: 0 0 10px rgba(255, 210, 140, 0.4) !important;
}

/* Shimmer en las compuertas laterales de Directorio General */
.dir-body-grid .dir-dock-doors .dock-door-item {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.dir-body-grid .dir-dock-doors .dock-door-item > * {
  position: relative !important;
  z-index: 2 !important;
}
.dir-body-grid .dir-dock-doors .dock-door-item::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%) !important;
  transform: skewX(-20deg) !important;
  animation: btnGlowShimmer 3.8s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#btnDoorProductos::after { animation-delay: 0s !important; }
#btnDoorServicios::after { animation-delay: 1.2s !important; }
#btnDoorTodo::after { animation-delay: 2.4s !important; }

/* 3. CLASIFICADOS: REFLEJO EN CONTENEDORES DE CATEGORÍAS (TABLÓN AMARILLO INTACTO) */
.clas-body-grid .dir-dock-doors .dock-door-item {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.clas-body-grid .dir-dock-doors .dock-door-item > * {
  position: relative !important;
  z-index: 2 !important;
}
.clas-body-grid .dir-dock-doors .dock-door-item::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 187, 0, 0.4) 50%, transparent 100%) !important;
  transform: skewX(-20deg) !important;
  animation: btnGlowShimmer 3.8s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#btnClasCompraventa::after { animation-delay: 0s !important; }
#btnClasRebusque::after { animation-delay: 1.2s !important; }
#btnClasCivica::after { animation-delay: 2.4s !important; }

/* 4. AGENDA CULTURAL: REFLEJO EN LAS 4 TARJETAS + PULSO EN NOTI RIOSUCIO */
.cultural-4-grid .cultural-card-item {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.cultural-4-grid .cultural-card-item > * {
  position: relative !important;
  z-index: 2 !important;
}
.cultural-4-grid .cultural-card-item::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%) !important;
  transform: skewX(-20deg) !important;
  animation: btnGlowShimmer 4.6s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.cultural-4-grid .cultural-card-item:nth-child(1)::after { animation-delay: 0s !important; }
.cultural-4-grid .cultural-card-item:nth-child(2)::after { animation-delay: 1.1s !important; }
.cultural-4-grid .cultural-card-item:nth-child(3)::after { animation-delay: 2.2s !important; }
.cultural-4-grid .cultural-card-item:nth-child(4)::after { animation-delay: 3.3s !important; }

/* Pulso suave de Medio Aliado en Noti Riosucio */
@keyframes allyPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 6px 20px rgba(61, 255, 255, 0.25);
    border-color: rgba(61, 255, 255, 0.45);
  }
  50% {
    transform: scale(1.018);
    box-shadow: 0 10px 32px rgba(61, 255, 255, 0.65), 0 0 18px rgba(61, 255, 255, 0.5);
    border-color: #3DFFFF;
  }
}
.cultural-card-partner {
  animation: allyPulse 3.2s infinite ease-in-out !important;
}

/* 5. PACTO TERRITORIAL (COMERCIO PADRINO): RESPLANDOR CIAN PURO ROTATORIO + VIDEO */
.padrino-banner-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: none !important;
  background: #140D2B !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 28px rgba(61, 255, 255, 0.35) !important;
}
.padrino-banner-card::before {
  content: '' !important;
  position: absolute !important;
  inset: -120% !important;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(61, 255, 255, 0.0) 60deg,
    rgba(61, 255, 255, 0.85) 120deg,
    rgba(61, 255, 255, 1) 180deg,
    rgba(61, 255, 255, 0.4) 210deg,
    transparent 240deg
  ) !important;
  animation: rotateClockwiseGlow 8s linear infinite !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.padrino-banner-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  background: #140D2B !important;
  border-radius: 1.05rem !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.padrino-banner-card > * {
  position: relative !important;
  z-index: 3 !important;
}

/* Video de la Plaza de Mercado */
.padrino-video-box {
  width: 100% !important;
  margin: 0.65rem 0 0.5rem !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1.2px solid rgba(61, 255, 255, 0.5) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 14px rgba(61, 255, 255, 0.25) !important;
  background: #000000 !important;
}
.padrino-video-media {
  width: 100% !important;
  max-height: 220px !important;
  display: block !important;
  object-fit: cover !important;
}

/* 6. CTA & FOOTER: RESPLANDOR PERIMETRAL EN CTA, REFLEJO EN AQUIESTOY Y PULSO EN DIRECCIÓN */
.cta-comerciantes-card {
  position: relative !important;
  padding: 1.75rem 1.25rem !important;
  background: linear-gradient(145deg, #160D33 0%, #0A051C 100%) !important;
  border: 1.5px solid rgba(255, 187, 0, 0.7) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 24px rgba(255, 187, 0, 0.35) !important;
  animation: ctaCardGlow 4s infinite ease-in-out !important;
}
@keyframes ctaCardGlow {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 187, 0, 0.3);
    border-color: rgba(255, 187, 0, 0.6);
  }
  50% {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 32px rgba(255, 187, 0, 0.55);
    border-color: #FFBB00;
  }
}

/* Mismo reflejo del logo de Guía Ingrumá al logo de aquiestoy.com en el footer */
.tech-seal-logo-wrap {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
}
.tech-seal-logo-wrap::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent) !important;
  transform: skewX(-20deg) !important;
  animation: logoShimmerPass 6s infinite ease-in-out !important;
  pointer-events: none !important;
}

/* Pulso suave en bucle para el botón Contactar a Dirección Institucional */
@keyframes footerContactPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(61, 255, 255, 0.25);
  }
  50% {
    transform: scale(1.035);
    box-shadow: 0 8px 24px rgba(61, 255, 255, 0.65), 0 0 16px rgba(61, 255, 255, 0.45);
  }
}
.btn-footer-contact {
  animation: footerContactPulse 2.8s infinite ease-in-out !important;
}