/* Theme */
:root {
  --navy: #000000;
  --gold: #F6B921;
  --text-light: #ffffff;
  --overlay: rgba(11, 28, 61, 0.55);
}

body {
  background: var(--navy);
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}

/* Navbar */
.navbar a.nav-link { transition: 0.3s; }
.navbar a.nav-link:hover { color: var(--gold) !important; }

/* Hero */
.hero {
  position: relative;
  color: var(--light);
  background: var(--navy);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--overlay), rgba(11, 28, 61, 0.25));
}
.hero .hero-content { position: relative; z-index: 1; }
.hero .hero-globe {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--hero-globe-size, 50vmin); height: var(--hero-globe-size, 50vmin);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 0 6px rgba(64,160,255,0.08), inset 0 -20px 40px rgba(0,0,0,0.25);
  /* Wireframe ligero por defecto */
  background-image:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 45%, rgba(0,0,0,0) 65%),
    repeating-conic-gradient(from 0deg, rgba(246,185,33,0.22) 0deg 6deg, transparent 6deg 18deg);
  background-blend-mode: screen;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.25));
}
.hero .hero-globe::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background-image: var(--hero-globe, none);
  background-size: 240% 100%;
  background-repeat: repeat-x;
  background-position: 0 50%;
  animation: globe-scroll 80s linear infinite;
  filter: saturate(1.05) contrast(1.05);
}
/* Capa de iluminación para efecto 3D */
.hero .hero-globe::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    /* Destello suave en el lado iluminado */
    radial-gradient(ellipse at 60% 50%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 22%, rgba(0,0,0,0.0) 45%),
    /* Terminador día/noche */
    linear-gradient(100deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 35%, rgba(0,0,0,0.0) 55%, rgba(255,255,255,0.10) 100%),
    /* Halo atmosférico azulado en el borde */
    radial-gradient(circle at 50% 50%, rgba(64,160,255,0.0) 70%, rgba(64,160,255,0.18) 86%, rgba(64,160,255,0.0) 100%);
  mix-blend-mode: multiply;
}
@keyframes globe-scroll { to { background-position: -240% 50%; } }
.hero .scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border: 2px solid var(--light-50);
  border-left: none;
  border-top: none;
  rotate: 45deg;
  border-radius: 2px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.hero .scroll-indicator::after { content: "\2193"; font-size: 16px; }
.hero .scroll-indicator:hover { background: var(--gold); color: var(--navy); }

/* Buttons */
.btn-gold {
  color: var(--gold); border-color: var(--gold);
}
.btn-gold:hover { color: var(--navy); background: var(--gold); }

/* Sections */
section { scroll-margin-top: 80px; }
footer { font-size: 0.9rem; }
/* Fondo del footer en azul oscuro consistente con el overlay del tema */
footer.bg-black {
  background-color: rgba(11, 28, 61, 1) !important; /* #0B1C3D */
  color: var(--text-light);
}
footer .social-links a {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
footer .social-links a:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* Cards */
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15);
 }

/* Animaciones reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms ease, transform 800ms ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: 120ms; }
.reveal.delay-2 { transition-delay: 240ms; }
.reveal.delay-3 { transition-delay: 360ms; }

/* Animación para barras del gráfico del hero (si se usa) */
.hero svg .chart-bar { transform-origin: bottom; transform: scaleY(0); animation: chart-grow 900ms ease-out forwards; }
@keyframes chart-grow { to { transform: scaleY(1); } }

/* Altura reducida del hero */
.hero-short { min-height: 60vh; }

/* Sección Mercados de Capitales */
.market-section {
  background: #ffffff;
  color: #111111;
}
.market-section .text-navy {
  color: var(--navy);
}
.market-chart svg { width: 100%; height: auto; display: block; }
.market-chart .bar { transform-origin: bottom; transform: scaleY(0); animation: barGrow 900ms ease-out forwards; }
.market-chart .bar-1 { animation-delay: 100ms; }
.market-chart .bar-2 { animation-delay: 250ms; }
.market-chart .bar-3 { animation-delay: 400ms; }
.market-chart .bar-4 { animation-delay: 550ms; }
.market-chart .bar-5 { animation-delay: 700ms; }
.market-chart .trend-arrow { animation: drawArrow 1100ms ease-out forwards 800ms; }

@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes drawArrow {
  to { stroke-dashoffset: 0; }
}

/* Noticias de Mercado */
.market-news .news-card {
  border-radius: 12px;
  background: linear-gradient(150deg, #cd5e21, #f4ac1f);
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.market-news .news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgb(255, 123, 0);
}
.market-news .news-title { color: #ffffff; }
.market-news .news-summary { color: #a81515; }
.market-news .news-meta { font-size: 0.85rem; color: #ffffff !important; opacity: 0.9; }

/* Gradiente para tarjetas de Propiedades y Opiniones */
#propiedades .card,
#propiedades-destacadas .card,
section.bg-white.text-dark .card.bg-black {
   background: linear-gradient(150deg, #cd5e21, #f4ac1f);
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Color de autores en Opiniones */
section.bg-white.text-dark .card.bg-black .text-secondary {
  color: #ffffff !important;
  opacity: 0.9;
}

/* Color de ubicación en tarjetas de Propiedades */
#propiedades .card .text-secondary,
#propiedades-destacadas .card .text-secondary {
  color: #ffffff !important;
  opacity: 0.9;
}

/* Carrusel Latam */
.latam-carousel {
  max-width: 100%;
  margin: 0 auto;
}
.latam-carousel .carousel-item img {
  max-height: 280px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

/* Carrusel Latam multi-item */
.latam-carousel { position: relative; }
.latam-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px)/5);
  gap: 12px;
  overflow-x: auto;
  padding: 8px 36px;
  scroll-snap-type: none; /* sin snap para movimiento continuo */
  -webkit-overflow-scrolling: touch;
}
.latam-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(11, 28, 61, 0.22);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  scroll-snap-align: none;
}
.latam-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.latam-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}
.latam-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: #ffffff;
  z-index: 1;
}
.latam-overlay .country { font-weight: 600; letter-spacing: 0.06em; }
.latam-overlay .count { font-size: 0.85rem; opacity: 0.85; }
.latam-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gold);
  color: rgba(11, 28, 61, 0.55);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.latam-nav.prev { left: 8px; }
.latam-nav.next { right: 8px; }
.latam-nav:hover { filter: brightness(1.05); }
.latam-track::-webkit-scrollbar { display: none; }
.latam-track { scrollbar-width: none; }

/* Responsivo carrusel Latam */
@media (max-width: 1200px) {
  .latam-track { grid-auto-columns: calc((100% - 36px)/4); }
}
@media (max-width: 992px) {
  .latam-track { grid-auto-columns: calc((100% - 24px)/3); }
}
@media (max-width: 768px) {
  .latam-track { grid-auto-columns: calc((100% - 12px)/2); }
}
@media (max-width: 480px) {
  .latam-track { grid-auto-columns: 100%; padding: 8px 44px; }
}
/* Fondo y overlay para sección Latam */
#latam-investments {
  position: relative;
  background-color: transparent;
  /* Aplico degradé directamente como fondo para que sea visible */
  background-image: var(--latam-bg, linear-gradient(to bottom,
    rgba(11, 28, 61, 0.85),
    rgba(11, 28, 61, 0.25)
  ));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Overlay con mayor profundidad y degradé visible (similar al Hero) */
#latam-investments::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Vignetado para profundidad en bordes */
    radial-gradient(ellipse at 50% 50%, rgba(11,28,61,0.0) 40%, rgba(11,28,61,0.22) 75%, rgba(11,28,61,0.42) 100%),
    /* Degradé vertical más oscuro arriba y más claro abajo */
    linear-gradient(to bottom, rgba(11, 28, 61, 0.75), rgba(11, 28, 61, 0.30));
}
#latam-investments .container-fluid,
#latam-investments h2,
#latam-investments .latam-carousel { position: relative; z-index: 1; }
#latam-investments h2 { color: #ffffff; }

/* Sección Servicios JC (fondo con imagen y overlay) */
#servicios-jc {
  position: relative;
  background-color: #0b0f16;
  background-image: var(--services-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#servicios-jc::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  pointer-events: none;
}
#servicios-jc .container, #servicios-jc h2 { position: relative; z-index: 1; }
.service-list { max-width: 720px; margin-left: auto; }
.service-item { display: flex; gap: 14px; padding: 14px 16px; border-radius: 10px; background: rgba(0,0,0,0.35); backdrop-filter: blur(3px); margin-bottom: 12px; }
.service-icon { color: var(--gold); font-size: 20px; line-height: 1; margin-top: 3px; }
.service-title { font-size: 0.95rem; letter-spacing: 0.12em; font-weight: 700; color: #ffffff; }
.service-desc { font-size: 0.9rem; color: rgba(255,255,255,0.85); }

/* Socios y Partners */
.partners-section {
  position: relative;
  /* Fondo blanco sólido */
  background: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.partners-copy h2, .partners-copy p { text-align: left; }
.partners-visual {
  min-height: 300px; /* aumentar para igualar y hacerla más grande */
  display: flex;
  align-items: center; /* centrar verticalmente para alinear con la línea roja */
  justify-content: center;
}
.partners-list { display: flex; flex-direction: column; gap: 16px; }
.handshake-visual {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
  border-radius: 14px; /* igual al radio de las tarjetas */
  border: none; /* quitar borde dorado */
  /* no usamos overflow hidden para no recortar la sombra del img */
}
.handshake-svg {
  width: 100%;
  max-width: 800px;
  height: auto;
}
.handshake-img {
  width: 100%;
  height: 240px; /* aumentar altura para que sea más grande */
  object-fit: cover; /* llenar el contenedor */
  display: block;
  border-radius: 14px; /* esquinas redondeadas en la imagen */
  box-shadow: 0 12px 28px rgba(0,0,0,0.20); /* sombra más marcada */
}
.handshake-svg-fill {
  width: 100%;
  height: 280px; /* mantener consistencia si se vuelve a usar SVG */
  display: block;
}

/* Igualar el ancho visual al de una tarjeta (col-md-4) */
@media (min-width: 992px) { /* lg y superior: 3 tarjetas por fila en la columna izquierda */
  .handshake-visual { width: 66.666%; margin: 0 auto; }
}
@media (min-width: 768px) and (max-width: 991.98px) { /* md: 3 tarjetas por fila */
  .handshake-visual { width: 66.666%; margin: 0 auto; }
}
@media (max-width: 767.98px) { /* sm y abajo: 2 tarjetas por fila */
  .handshake-visual { width: 100%; margin: 0 auto; }
}
.partners-section::before { content: none; display: none; }
.partners-section .container,
.partners-section h2,
.partners-section .partner-card { position: relative; z-index: 1; }
.partners-section h2 {
  color: #000000;
  font-family: inherit; /* usar la fuente global (Poppins) */
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.partners-section p {
  color: #000000;
  font-family: inherit; /* usar la fuente global (Poppins) */
  font-size: 1.2rem;
}
.partners-section .partner-card {
  background: linear-gradient(200deg, #11003f, #000258);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: left;
  display: flex;
  flex-direction: row; /* horizontal */
  align-items: center; /* centra verticalmente */
  gap: 14px; /* separación entre logo y nombre */
  min-height: 96px; /* tarjetas más bajas */
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.partners-section .partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgb(9, 0, 49);
 /*  border-color: var(--gold);*/
}
.partners-section .partner-logo {
  width: 96px; height: 96px; /* tamaño uniforme del círculo (más grande) */
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12); /* borde sutil sobre fondo blanco */
  background: #ffffff; /* fondo blanco detrás del logo */
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* asegura recorte circular del contenido */
  font-size: 30px;
  margin: 0; /* sin margen inferior para layout horizontal */
}
.partners-section .partner-name {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Imagen dentro del círculo de logo */
.partners-section .partner-logo img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  display: block;
}
/* =====================
   About Us – estilos
   ===================== */
:root { --gold: #f4ac1f; --gold-alt: #cd5e21; }
.about-page {
  position: relative;
  background-color: rgb(255, 255, 255); /* azul oscuro sólido */
  color: #000000;
  font-family: 'Poppins', sans-serif;
}
body.about-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgb(255, 255, 255); /* overlay más suave  background: rgb(0, 11, 32)*/
  z-index: -1;
  pointer-events: none;
}



.section-title { display: inline-block; position: relative; padding-bottom: 10px; margin-bottom: 8px; }
.section-title::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 120px; background: var(--gold); border-radius: 2px; }

.about-hero {
  position: relative;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgb(0, 6, 20) 0%,          /* azul muy oscuro en la parte superior */
    rgb(4, 21, 56) 40%,     /* transición suave */
    rgb(3, 18, 49) 100%     /* mantiene coherencia con el fondo del body */
  );
  color: #ffffff;
  overflow: hidden;
}

.about-hero .container {
  position: relative;
  z-index: 1;
}

.btn-gold { background: linear-gradient(150deg, #cd5e21, #f4ac1f); color: #000; border: 1px solid rgba(0,0,0,0.2); }
.btn-gold:hover { background: linear-gradient(150deg, #cd5e21, #f4ac1f); color: #000; box-shadow: 0 8px 18px rgba(244,172,31,0.35); transform: translateY(-1px); }

/* Texto dorado para títulos */
.text-gold { color: var(--gold); }
.card-dark {
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(#0e0147, #0e0033) padding-box,
              linear-gradient(150deg, #cd5e21, #f4ac1f) border-box;
  color: #ffffff;
}
/* Quitar fondo/borde azul específicamente en la caja de About */
.about-image.card-dark {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.card-dark h1,
.card-dark h2,
.card-dark h3,
.card-dark h4,
.card-dark h5,
.card-dark h6,
.card-dark p,
.card-dark label,
.card-dark strong,
.card-dark small,
.card-dark a { color: #ffffff; }
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,0.35); }

.icon-circle { width: 56px; height: 56px; border-radius: 50%; background: rgba(191,164,111,0.12); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.border-gold {
  border: 1px solid transparent;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
              linear-gradient(150deg, #cd5e21, #f4ac1f) border-box;
}

/* Tarjeta clara con borde dorado como en el index */
.card-gold {
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(150deg, #cd5e21, #f4ac1f) border-box;
  box-shadow: 0 8px 16px rgba(244,172,31,0.15);
}

.about-image .image-placeholder { width: 100%; height: 260px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06)); border: 1px solid rgba(191,164,111,0.2); }

/* Galería del equipo en About */
.team-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.team-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 340px;
  background: transparent;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72);
  transition: transform 0.4s ease, filter 0.3s ease;
}
.team-card .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: transparent;
}
.team-card .name {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,0.28); }
.team-card:hover img { transform: scale(1.06); filter: brightness(0.80); }

@media (max-width: 992px) {
  .team-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .team-gallery { grid-template-columns: 1fr; }
}

/* Imagen representativa dentro de tarjetas de servicios */
.service-card .image-placeholder {
  width: 100%;
  height: 240px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.18));
  border: 1px solid rgba(255,255,255,0.22);
}

.alliances-band { padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.ally-logo {
  width: 88px; height: 88px; border-radius: 50%;
  border: 2px solid var(--gold);
  background: #ffffff;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.ally-logo img { width: 70%; height: 70%; object-fit: contain; display: block; }

/* Footer About con el mismo fondo que el Hero */
.about-footer { background: rgb(0, 15, 46); }

/* Panel de filtros del catálogo */
.filter-panel .form-label { font-weight: 600; }
.filter-panel .form-select,
.filter-panel .form-control {
  background-color: #ffffff;
  color: #222222;
}
.filter-panel .btn.btn-gold { box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.filter-panel .collapse { transition: height .2s ease; }
.filter-panel span { color: #ffffff; }
.filter-panel .btn-outline-dark { color: #ffffff; border-color: #ffffff; }

/* Título del catálogo con fondo azul del sitio */
.catalog-title {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(180deg, rgb(0, 6, 20), rgb(4, 21, 56));
}

/* Contenedor de cada cuadrito con borde dorado */
.filter-item { border-radius: 12px; }

/* Hacer que el recuadro blanco se aplique al control, no al contenedor */
.filter-item.card-gold {
  background: none;
  box-shadow: none;
  border: none;
  padding: 0; /* que no agregue espacio extra */
  display: inline-block; /* que no ocupe todo el ancho de la columna */
}
.filter-item.card-gold .form-select,
.filter-item.card-gold .form-control {
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(150deg, #cd5e21, #f4ac1f) border-box; /* borde dorado alrededor del control */
}

/* Acceso oculto al panel admin: punto invisible abajo a la derecha */
.admin-access {
  position: fixed;
  bottom: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  opacity: 0; /* Invisible pero clickeable */
  z-index: 9999;
}
.admin-access:focus { outline: none; }