/* Animaciones e interactividad del landing (reemplazo de framer-motion) */

html { scroll-behavior: smooth; }

/* Rotación del título del hero */
.hero-anim {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease-in-out, transform .45s ease-in-out;
}
.hero-anim.is-exiting { opacity: 0; transform: translateY(-15px); }
.hero-anim.is-entering { opacity: 0; transform: translateY(15px); transition: none; }

/* Entradas al hacer scroll */
.reveal-up {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal-up-30 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal-up.is-visible,
.reveal-up-30.is-visible { opacity: 1; transform: translateY(0); }

/* Panel de beneficios */
.benefit-panel-anim {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .4s ease-out, transform .4s ease-out;
}
.benefit-panel-anim.is-entering { opacity: 0; transform: translateX(10px); transition: none; }

/* Barras comparativas */
.bar-fill {
  width: 0;
  transition: width 1.1s cubic-bezier(.25, .8, .3, 1);
}

/* Subrayado "3x más" */
#underline-3x { transition: width .9s ease-out .4s; }

/* ===== Layout del hero: video izquierda / texto derecha ===== */
.sgi-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.sgi-hero-media { width: 100%; max-width: 48rem; }
@media (min-width: 1024px) {
  /* row-reverse: el texto (primero en el HTML) queda a la DERECHA y el video a la IZQUIERDA */
  .sgi-hero-grid { flex-direction: row-reverse; align-items: center; gap: 64px; }
  .sgi-hero-copy {
    flex: 1 1 45%;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .sgi-hero-copy .sgi-hero-title-box { justify-content: flex-start; margin-bottom: 2rem; }
  .sgi-hero-media { flex: 1 1 55%; min-width: 0; max-width: none; }
}

/* ===== Frame del video en el hero =====
   Recuadro de líneas blancas con 1 cm de margen entre el video y el borde. */
.sgi-hero-frame {
  position: relative;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 10px;
  padding: 1cm;
  background: transparent;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.sgi-hero-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-radius: 4px;
}
@media (max-width: 640px) {
  /* En pantallas pequeñas el cm completo come mucho ancho; se reduce a la mitad */
  .sgi-hero-frame { padding: .5cm; }
}

/* ===== Chips de pares de divisas (Quiénes somos) ===== */
.sgi-pairs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.sgi-pair {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #008080;
  background: rgba(64, 224, 208, .1);
  border: 1px solid rgba(64, 224, 208, .35);
  border-radius: 999px;
  padding: 7px 16px;
}

/* ===== Contactos de socios (desplegable "Más información") ===== */
.partner-contact {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.partner-contact.is-open { display: flex; }
/* Hover del botón "Más información": fondo turquesa + letras blancas
   (las utilidades hover:bg-brand-teal no existen en el CSS compilado) */
.contact-toggle:hover {
  background-color: #40E0D0 !important;
  border-color: #40E0D0 !important;
  color: #fff !important;
}
/* En pantallas táctiles, área de toque más cómoda para "Más información" */
@media (max-width: 767px) {
  .contact-toggle { padding: 9px 18px !important; }
}

/* ===== Panel de beneficios ampliado (info + gráfico) ===== */
.sgi-benefit-grid { display: flex; flex-direction: column; gap: 28px; width: 100%; }
.sgi-benefit-info { flex: 1; min-width: 0; }
.sgi-benefit-graphic { width: 100%; max-width: 240px; margin: 0 auto; }
.sgi-benefit-graphic svg { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
  .sgi-benefit-grid { flex-direction: row; align-items: center; gap: 32px; }
  .sgi-benefit-graphic { width: 230px; flex-shrink: 0; margin: 0; }
}
.sgi-benefit-bullets {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sgi-benefit-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.55;
}
.sgi-benefit-bullets li svg { flex-shrink: 0; margin-top: 2px; }

/* ===== Subtítulos (captions) de los videos: blanco discreto ===== */
video::cue {
  color: rgba(255, 255, 255, .92);
  background: rgba(0, 0, 0, .38);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

/* ===== Timeline de "Pasos" ===== */
.sgi-timeline { position: relative; max-width: 940px; margin: 0 auto; }
.sgi-timeline::before {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 36px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #40E0D0, #008080);
  opacity: .28;
}
.sgi-tl-item { position: relative; padding: 0 0 40px 104px; }
.sgi-tl-item:last-child { padding-bottom: 0; }
.sgi-tl-node { position: absolute; left: 0; top: 0; width: 72px; height: 72px; }
.sgi-tl-node svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 16px rgba(0, 128, 128, .28));
}
.sgi-tl-num {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #001b3b;
  color: #fff;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-weight: 800;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.sgi-tl-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.sgi-tl-item:hover .sgi-tl-card {
  box-shadow: 0 10px 24px rgba(0, 128, 128, .10);
  border-color: rgba(64, 224, 208, .45);
  transform: translateY(-2px);
}
.sgi-tl-chip {
  display: inline-block;
  background: rgba(64, 224, 208, .14);
  color: #008080;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.sgi-tl-title {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-weight: 800;
  color: #0B0F17;
  font-size: 17px;
  margin: 0 0 6px;
}
.sgi-tl-desc { color: #64748b; font-size: 13px; line-height: 1.6; margin: 0; }

@media (min-width: 768px) {
  .sgi-timeline::before { left: 50%; margin-left: -1.5px; }
  .sgi-tl-item { width: 50%; padding: 0 76px 56px 0; }
  .sgi-tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 56px 76px; }
  .sgi-tl-item:last-child { padding-bottom: 0; }
  .sgi-tl-node { width: 96px; height: 96px; left: auto; right: -48px; }
  .sgi-tl-item:nth-child(even) .sgi-tl-node { right: auto; left: -48px; }
  .sgi-tl-item:nth-child(odd) .sgi-tl-card { text-align: right; }
}

/* Modales */
.modal-card { animation: modalIn .25s ease-out; }
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
body.modal-open { overflow: hidden; }