/* ==========================================================================
   YIELDEX Landing – Tema claro: blanco, gris, botones azul oscuro
   Palette: #FFFFFF (fondo) #AFAFAF (gris/texto) #0E2D50 (botones)
   ========================================================================== */

:root {
  --bg-deep: #FFFFFF;
  --bg-dark: #EDEDED;
  --bg-mid: #E8E8E8;
  --accent: #0E2D50;
  --gray-dark: #606060;
  --gray-mid: #707070;
  --gray-light: #AFAFAF;
  --white: #FFFFFF;
  --text-primary: #1a1a1a;
  --text-secondary: #606060;
  --font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --container: min(90vw, 1120px);
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --radius: 8px;
  --radius-lg: 12px;
  --header-h: 72px;
  --header-top-gap: 16px;
  --header-total: calc(var(--header-top-gap) + var(--header-h) + var(--header-top-gap));
}

*, *::before, *::after { box-sizing: border-box; }
html { 
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
  position: relative;
}

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

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
ul { list-style: none; margin: 0; padding: 0; }

/* -------------------------------------------------------------------------- */
/* Header – flotante, centrado, border-radius 16px, separación superior       */
/* -------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: var(--header-top-gap);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(calc(100% - 48px), 1120px);
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.header.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.08);
}

.header__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-md);
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

.header__logo {
  display: flex;
  align-items: center;
  justify-self: start;
  grid-column: 1;
}
.header__logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.header__nav {
  display: none;
  grid-column: 2;
  gap: var(--space-lg);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  justify-self: center;
}

.header__nav a:hover { color: var(--accent); }

.header__right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.header__lang {
  flex-shrink: 0;
}

.header__lang-select {
  padding: 4px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  cursor: pointer;
  min-width: 52px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 22px;
}

.header__lang-select:hover,
.header__lang-select:focus {
  border-color: var(--accent);
  outline: none;
}

.header__cta {
  flex-shrink: 0;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.header__cta--mobile {
  margin-top: var(--space-sm);
  text-align: center;
  display: block;
}

.header__menu-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-xs);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  grid-column: 3;
  justify-self: end;
}

.header__menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.header.is-open .header__menu-btn span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.header.is-open .header__menu-btn span:nth-child(2) { opacity: 0; }
.header.is-open .header__menu-btn span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.header__overlay {
  display: none;
  position: fixed;
  top: calc(var(--header-top-gap) + var(--header-h));
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.header.is-open .header__overlay {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.header__mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: fixed;
  top: calc(var(--header-top-gap) + var(--header-h));
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  padding: var(--space-lg);
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  z-index: 99;
  overflow-x: hidden;
}

.header.is-open .header__mobile {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.header__mobile a {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.header__mobile a:hover { color: var(--accent); }
.header__mobile a.header__cta--mobile {
  color: var(--white);
  font-size: 0.95rem;
}
.header__mobile a.header__cta--mobile:hover { color: var(--white); }

.header__lang--mobile {
  justify-content: center;
  padding: var(--space-xs) 0;
}

@media (max-width: 767px) {
  .header { 
    width: calc(100% - 24px);
    max-width: calc(100vw - 24px);
    left: 12px;
    right: 12px;
    transform: none;
  }
  .header__right { display: none !important; }
}

@media (min-width: 768px) {
  .header__nav { display: flex; }
  .header__menu-btn { display: none; }
  .header__overlay,
  .header__mobile { display: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-total);
  overflow: hidden;
  border-radius: 0 0 35px 35px;
}

.hero__video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 0 0 35px 35px;
  overflow: hidden;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.6) 40%,
    rgba(255, 255, 255, 0.85) 100%
  );
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.hero__brand {
  max-width: 640px;
}

.hero__title {
  margin: 0 0 var(--space-sm);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.1;
}

.hero__slogan {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  font-weight: 500;
  color: var(--text-primary);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .hero__slogan {
    font-size: clamp(1.55rem, 4vw, 2.15rem);
    max-width: 580px;
  }
}

.hero__support {
  margin: 0 0 var(--space-lg);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

@media (min-width: 768px) {
  .hero__support {
    font-size: clamp(1.1rem, 2.4vw, 1.25rem);
    max-width: 560px;
  }
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--white);
}
.btn--primary:hover {
  background: #0a1f3a;
  color: var(--white);
}

.btn--secondary {
  background: transparent;
  color: var(--gray-light);
  border: 1px solid var(--gray-light);
}
.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Botón solo borde azul, sin relleno (Hero "Seguridad y auditoría") */
.btn--outline {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.btn--outline:hover {
  background: rgba(14, 45, 80, 0.06);
  color: var(--accent);
  border-color: var(--accent);
}

.btn--wide { min-width: 220px; }

/* -------------------------------------------------------------------------- */
/* Sections – base                                                             */
/* -------------------------------------------------------------------------- */

/* Full-width scroll panels: 100vh, pin por GSAP */
.section {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-top-gap) + var(--header-h) + var(--space-2xl)) 0 var(--space-2xl);
  background: var(--bg-deep);
  overflow-x: hidden;
}

.section:nth-of-type(even) { background: var(--bg-dark); }

.section__title {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}

.section__title--large {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.section__lead {
  margin: 0 0 var(--space-lg);
  font-size: 1.05rem;
  color: var(--gray-light);
  max-width: 680px;
}

.section__lead--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Párrafo autocustodia: color más oscuro y un poco más grande */
.section--control .section__lead {
  color: var(--text-secondary);
  font-size: 1.12rem;
}

/* Móvil: menos espacio superior en sección autocustodia */
@media (max-width: 767px) {
  .section--control {
    padding-top: calc(var(--header-top-gap) + var(--header-h) + var(--space-md));
  }
  .section--control .section__lead {
    font-size: 1.12rem;
  }
}

.section__closure {
  margin: var(--space-lg) 0 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-mid);
}

.section__closure--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
  overflow-x: hidden;
}

.container--narrow { max-width: 640px; }

.section__grid { display: grid; gap: var(--space-xl); }
.section__grid--two {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .section__grid--two { grid-template-columns: 1fr 1fr; }
}

.section__main .section__lead { margin-bottom: var(--space-md); }

/* Section What – title scale + card slide (GSAP scrub) */
.section--what {
  overflow-x: hidden;
  justify-content: flex-start;
  padding-top: calc(var(--header-top-gap) + var(--header-h) + var(--space-md));
}

.section--what__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
}

.section__title--what {
  transform-origin: center top;
  margin-bottom: 0;
  align-self: center;
}

.what-lead {
  margin: 0;
  max-width: 560px;
  font-size: 1.05rem;
  line-height: 1.65;
  text-align: center;
  align-self: center;
  color: var(--text-secondary);
}

.what-lead__word {
  display: inline;
}

.what-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  width: 100%;
  max-width: 1120px;
  margin: var(--space-lg) auto 0;
  align-self: center;
}

/* Floating animation suave */
@keyframes float-soft {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.what-closure {
  margin-top: var(--space-2xl);
  margin-bottom: 0;
  text-align: center;
  color: var(--text-primary);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.5;
  max-width: 800px;
  align-self: center;
  position: relative;
  z-index: 1;
  animation: float-soft 4s ease-in-out infinite;
}

@media (min-width: 768px) {
  .what-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .what-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.what-card-item {
  background: #efefef;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: var(--space-sm);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s ease,
              background 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Móvil/tablet: cards visibles desde el inicio (animación scrub solo en desktop) */
@media (max-width: 767px) {
  .what-card-item {
    opacity: 1;
    transform: translateY(0);
  }
}

.what-card-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(14, 45, 80, 0.1);
  border-color: rgba(14, 45, 80, 0.15);
  background: #f5f5f5;
}

.what-card-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 16px;
}

.what-card-item__icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  display: block;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.what-card-item:hover .what-card-item__icon {
  transform: scale(1.1);
}


.what-card-item__text {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-align: center;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  z-index: 1;
  transition: color 0.4s ease;
}

.what-card-item:hover .what-card-item__text {
  color: var(--text-primary);
}

/* Floating animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.what-card-item.is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: float 3s ease-in-out infinite;
}

.what-card-item.is-visible:nth-child(1) { animation-delay: 0s; }
.what-card-item.is-visible:nth-child(2) { animation-delay: 0.5s; }
.what-card-item.is-visible:nth-child(3) { animation-delay: 1s; }
.what-card-item.is-visible:nth-child(4) { animation-delay: 1.5s; }


@media (min-width: 768px) {
  .transition-y__text {
    font-size: 1.5rem;
  }
}

/* Bullets */
.bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bullets--center { align-items: center; }
@media (min-width: 768px) {
  .bullets--center { align-items: flex-start; }
}

.bullets__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.95rem;
  color: var(--gray-light);
}

.bullets__icon {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* -------------------------------------------------------------------------- */
/* Self-custody flow                                                          */
/* -------------------------------------------------------------------------- */

/* Control Banner */
.control-banner {
  margin: var(--space-xl) auto var(--space-md) auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-banner__img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
  border-radius: 12px;
  animation: float-banner 3s ease-in-out infinite;
}

/* Móvil: imagen wallet-protocol-pools un poco más grande */
@media (max-width: 767px) {
  .control-banner {
    width: 100%;
    max-width: 100%;
  }
  .control-banner__img {
    width: 100%;
    max-width: 100%;
  }
}

@keyframes float-banner {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Control Cards - estilo TREZOR */
.control-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: var(--space-md) 0 var(--space-2xl) 0;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .control-cards {
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }
}

@media (min-width: 768px) {
  .control-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }
}

.control-card {
  background: #efefef;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  opacity: 0;
  transform: translateY(40px);
  transition: transform 0.35s ease,
              box-shadow 0.35s ease,
              border-color 0.35s ease,
              background 0.35s ease;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  box-shadow: 0 8px 32px rgba(14, 45, 80, 0.08);
}

.control-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 20px;
}

.control-card__icon {
  width: 64px;
  height: 64px;
  color: var(--accent);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-card__icon svg {
  width: 100%;
  height: 100%;
}

.control-card__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  position: relative;
  z-index: 1;
}

.control-card__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--accent);
  margin: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  font-weight: 500;
}

.control-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
  background: #f5f5f5;
}

.bullets--floating {
  margin-top: var(--space-2xl);
  animation: float-soft 4s ease-in-out infinite;
}

/* Control messages section */
.section--control-messages {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Control messages - textos que aparecen y desvanecen */
.control-messages {
  width: 100%;
  max-width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.control-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  opacity: 0;
  margin: 0;
  width: 100%;
  max-width: 800px;
  pointer-events: none;
  will-change: opacity;
}

/* -------------------------------------------------------------------------- */
/* How it works – steps                                                       */
/* -------------------------------------------------------------------------- */

.section--steps {
  min-height: auto;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  overflow: hidden;
}

.section--steps-teaser .section__cta-wrap {
  margin-top: var(--space-lg);
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

@media (min-width: 640px) {
  .steps { 
    grid-template-columns: repeat(2, 1fr);
  }
}

.steps__item {
  padding: var(--space-lg);
  background: #efefef;
  border: 1px solid rgba(14, 45, 80, 0.12);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s ease, background 0.25s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.steps__item:hover {
  border-color: rgba(14, 45, 80, 0.2);
  background: #f5f5f5;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.steps__num {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  background: var(--accent);
  border-radius: 50%;
  margin-bottom: var(--space-sm);
}

.steps__title {
  margin: 0 0 var(--space-xs);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.steps__desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gray-mid);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------- */
/* Liquidity pools – cards                                                    */
/* -------------------------------------------------------------------------- */

/* Párrafo de la sección pools: color más legible */
.section--pools .section__lead {
  color: var(--text-primary);
}

/* Menos espacio superior en pools en móvil */
@media (max-width: 767px) {
  .section--pools {
    padding-top: calc(var(--header-top-gap) + var(--header-h) + var(--space-md));
  }
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

.cards__item {
  padding: var(--space-md);
  background: #efefef;
  border: 1px solid rgba(14, 45, 80, 0.1);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color 0.25s ease, background 0.25s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.cards__icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
  flex-shrink: 0;
}

.cards__item:hover {
  border-color: rgba(14, 45, 80, 0.2);
  background: #f5f5f5;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.cards__pair {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.cards__info {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gray-mid);
}

.disclaimer {
  margin: var(--space-lg) 0 0;
  font-size: 0.85rem;
  color: var(--gray-mid);
  text-align: center;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Disclaimers de pools y seguridad: color más oscuro para mejor lectura */
.section--pools .disclaimer,
.section--security .disclaimer {
  color: var(--text-secondary);
}

.section__cta-wrap {
  margin-top: var(--space-md);
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Security – CertiK: dos columnas (texto + cards a la izquierda, logo a la derecha) */
/* -------------------------------------------------------------------------- */

/* Menos espacio entre pools cards y esta sección */
.section--security {
  padding-top: var(--space-lg);
  overflow: hidden;
}

@media (max-width: 767px) {
  .section--security {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    overflow: visible;
  }
  .section--security .container {
    overflow-x: visible;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  /* Forzar título y contenido visibles en móvil (GSAP los oculta por defecto) */
  .section--security .security__content--reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .section--security .section__title--left {
    display: block !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  .section--security .security__lead {
    display: block !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
  }
}

.section--security .section__title--left {
  text-align: left;
  margin-bottom: var(--space-md);
}

@media (max-width: 767px) {
  .section--security .section__title--left {
    text-align: center;
  }
}

.security__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
  align-items: center;
}

@media (max-width: 767px) {
  .security__inner {
    justify-items: center;
    min-width: 0;
    width: 100%;
  }
  .security__logo-wrap {
    width: 100%;
    justify-content: center;
    display: flex;
  }
}

@media (min-width: 768px) {
  .security__inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-2xl);
  }
}

.security__content {
  max-width: 560px;
}

@media (max-width: 767px) {
  .security__content {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }
}

.security__lead {
  margin: 0 0 var(--space-lg);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.security-cards-wrapper {
  width: 100%;
  overflow: hidden;
}

.security-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  justify-items: stretch;
}

.security-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  background: #efefef;
  border: 1px solid rgba(14, 45, 80, 0.15);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (max-width: 767px) {
  .security-cards-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  .security-cards {
    display: flex;
    gap: 8px;
    animation: carousel-scroll 14s linear infinite;
    width: max-content;
  }
  
  /* 2 cards visibles: ancho para que quepan 2 sin overflow (contenedor ~100vw - padding) */
  .security-card {
    flex: 0 0 calc((100vw - 3rem - 8px) / 2);
    width: calc((100vw - 3rem - 8px) / 2);
    min-width: 0;
    padding: 0.5rem 0.35rem;
    font-size: 0.7rem;
    line-height: 1.3;
  }
  
  .security-card__icon {
    margin-bottom: 0.25rem;
  }
  
  .security-card__icon svg {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .security-cards {
    gap: 10px;
  }
  .security-card {
    flex: 0 0 calc((100vw - 3rem - 10px) / 2);
    width: calc((100vw - 3rem - 10px) / 2);
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
  }
}

@media (min-width: 768px) {
  .security-cards {
    gap: var(--space-sm);
  }
  .security-cards .security-card:nth-child(n+4) {
    display: none;
  }
  .security-card {
    padding: var(--space-md);
    font-size: 0.9rem;
  }
}

/* Carrusel infinito: 6 cards (3 duplicadas), movemos 50% = 3 cards; al reiniciar se ve igual */
@keyframes carousel-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.security-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xs);
  color: var(--accent);
}

.security-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

@media (min-width: 640px) {
  .security-card__icon {
    margin-bottom: var(--space-sm);
  }
  .security-card__icon svg {
    width: 32px;
    height: 32px;
  }
}

.security-card__text {
  display: block;
  text-align: center;
  line-height: 1.4;
}

.security-card:hover {
  border-color: var(--accent);
  background: #f5f5f5;
  box-shadow: 0 4px 16px rgba(14, 45, 80, 0.08);
}

.security__logo-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}

.security__logo {
  max-width: 480px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@keyframes float-certik {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 767px) {
  .security__logo {
    max-width: 260px;
    width: auto;
    margin: 0 auto;
    display: block;
    animation: float-certik 4s ease-in-out infinite;
  }
}

.section--security .disclaimer {
  margin-top: var(--space-md);
}

@media (max-width: 767px) {
  .section--security .disclaimer {
    margin-top: var(--space-sm);
  }
}


/* -------------------------------------------------------------------------- */
/* Ecosystem                                                                  */
/* -------------------------------------------------------------------------- */

.ecosystem-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.ecosystem-diagram__core {
  padding: var(--space-md) var(--space-lg);
  background: rgba(14, 45, 80, 0.08);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

.ecosystem-diagram__branch {
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(14, 45, 80, 0.12);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--text-secondary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* -------------------------------------------------------------------------- */
/* FAQ – Glassmorphism tonos grises, 2 columnas (2 izq + 2 der)               */
/* -------------------------------------------------------------------------- */

.section--faq {
  position: relative;
  padding: var(--space-2xl) var(--space-md);
  overflow: hidden;
}

.faq-tech-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #f8f9fa 0%, #f0f2f5 30%, #e8ecf0 60%, #e2e6eb 100%);
  z-index: 0;
}

.section--faq .container {
  position: relative;
  z-index: 1;
}

.section--faq .container--narrow {
  max-width: min(94%, 1000px);
}

.faq__section-title {
  color: #1a2a3a !important;
  text-align: center;
  margin-bottom: var(--space-xl);
}

.faq--glass {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq--two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
}

@media (max-width: 768px) {
  .faq--two-cols {
    grid-template-columns: 1fr;
  }
}

.faq__item--glass {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(24px) saturate(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  border: 1px solid rgba(14, 45, 80, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.faq__item--glass:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(14, 45, 80, 0.12);
}

.faq__item--glass.is-open {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(14, 45, 80, 0.2);
  box-shadow:
    0 8px 32px rgba(14, 45, 80, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a2a3a;
  text-align: left;
  transition: color 0.25s ease;
}

.faq__trigger:hover {
  color: var(--accent);
}

.faq__trigger .faq__q {
  margin: 0;
  flex: 1;
}

.faq__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease, background 0.3s ease;
}

.faq__icon svg {
  width: 20px;
  height: 20px;
}

.faq__trigger:hover .faq__icon {
  color: #fff;
  background: var(--accent);
}

.faq__item.is-open .faq__icon {
  transform: rotate(180deg);
  color: #fff;
  background: var(--accent);
}

.faq__a-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__item.is-open .faq__a-wrap {
  max-height: 500px;
}

.faq__a-content {
  padding: 0 var(--space-xl) var(--space-xl);
  border-top: 1px solid rgba(14, 45, 80, 0.08);
}

.faq__item.is-open .faq__a-content {
  border-top-color: rgba(14, 45, 80, 0.12);
  animation: faq-reveal 0.4s ease;
}

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.faq__a-wrap .faq__a {
  margin: var(--space-md) 0 0;
  padding: 0;
  font-size: 0.95rem;
  color: #3d4f5f;
  line-height: 1.7;
}

.faq__a-wrap .faq__a:first-child {
  margin-top: 0;
}

.faq__a--ext {
  color: #5a6b7a !important;
  font-size: 0.9rem;
  margin-top: var(--space-sm);
}

/* -------------------------------------------------------------------------- */
/* Comparativa – Hacerlo solo vs hacerlo con YIELDEX                          */
/* -------------------------------------------------------------------------- */

.section--comparativa {
  min-height: auto !important;
  padding: var(--space-2xl) var(--space-md);
  background: linear-gradient(180deg, #0e2d50 0%, #153557 40%, #0e2d50 100%) !important;
  position: relative;
  overflow: hidden !important;
}

.section--comparativa::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 20%, rgba(98, 126, 234, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.comparativa-wrap {
  max-width: min(94%, 960px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.comparativa__title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0 0 var(--space-2xl);
  letter-spacing: 0.02em;
}

.comparativa__table {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
  .comparativa__table {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
}

.comparativa__col {
  padding: var(--space-xl) var(--space-lg);
}

.comparativa__col--solo {
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 767px) {
  .comparativa__col--solo {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

.comparativa__col--yieldex {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 767px) {
  .comparativa__col--yieldex {
    border-left: none;
  }
}

.comparativa__col-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-md);
  color: rgba(255, 255, 255, 0.9);
}

.comparativa__col--solo .comparativa__col-title {
  color: rgba(255, 255, 255, 0.6);
}

.comparativa__col--yieldex .comparativa__col-title {
  color: #fff;
}

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

.comparativa__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--space-sm);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.comparativa__list li:last-child {
  margin-bottom: 0;
}

.comparativa__col--solo .comparativa__list li {
  color: rgba(255, 255, 255, 0.7);
}

.comparativa__col--solo .comparativa__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.comparativa__col--yieldex .comparativa__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235dd9c4' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.comparativa__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
  .comparativa__vs {
    padding: var(--space-sm);
  }
}

.comparativa__vs span {
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.2em;
}

.comparativa__closure {
  margin: var(--space-2xl) auto 0;
  padding: var(--space-xl) var(--space-lg);
  max-width: 560px;
  text-align: center;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  line-height: 1.5;
  color: #fff;
  font-style: italic;
  border: none;
  position: relative;
}

.comparativa__closure::before {
  content: '"';
  position: absolute;
  top: -0.2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.12);
  font-family: Georgia, serif;
  line-height: 1;
}

.comparativa__closure strong {
  font-weight: 700;
  color: #5dd9c4;
  font-style: normal;
}

/* -------------------------------------------------------------------------- */
/* CTA final – Banner con border-radius, imagen de fondo + overlay           */
/* -------------------------------------------------------------------------- */

.section.section--cta-final {
  min-height: auto;
  overflow-y: visible;
  overflow-x: hidden;
  background-color: var(--bg-dark);
  background-image: url("../img/hecho-para-quien-valora.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.section--cta-final {
  position: relative;
  max-width: min(92%, 1200px);
  margin: 0 auto;
  border-radius: 32px;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: var(--bg-dark);
  background-image: url("../img/hecho-para-quien-valora.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  min-height: auto;
  max-height: none;
  padding: var(--space-2xl) var(--space-md);
}

@media (max-width: 767px) {
  .section.section--cta-final {
    min-height: 280px;
    max-height: none;
    padding: var(--space-xl) var(--space-md);
    overflow: visible;
    overflow-x: hidden;
    background-image: url("../img/hecho-para-quien-valora.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .section--cta-final > .container {
    overflow: visible;
    max-height: none;
  }
}

/* Overlay oscuro suave: la foto se ve mucho y el tono es más oscuro para contraste */
.section--cta-final::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(
    180deg,
    rgba(14, 45, 80, 0.25) 0%,
    rgba(14, 45, 80, 0.4) 50%,
    rgba(14, 45, 80, 0.5) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.section--cta-final > .container {
  position: relative;
  z-index: 1;
  overflow: visible;
  max-height: none;
}

/* Texto blanco bien legible sobre fondo oscuro */
.section--cta-final .section__title,
.section--cta-final .section__lead {
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 0, 0, 0.35);
}

.section--cta-final .section__title--large {
  color: #FFFFFF !important;
}

/* Botón que se perciba bien sobre el fondo oscuro */
.section--cta-final .btn--primary {
  background: #0E2D50;
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.section--cta-final .btn--primary:hover {
  background: #0a1f3a;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.cta-final__action {
  margin-top: var(--space-xl);
  text-align: center;
}

@media (max-width: 767px) {
  .section--cta-final .section__title--large {
    margin-bottom: var(--space-sm);
  }
  .section--cta-final .section__lead {
    margin-bottom: var(--space-md);
  }
  .cta-final__action {
    margin-top: var(--space-lg);
  }
}

/* -------------------------------------------------------------------------- */
/* Footer – Azul con textos blancos, border-radius arriba                     */
/* -------------------------------------------------------------------------- */

.footer {
  margin-top: var(--space-2xl);
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  background: var(--accent);
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  max-width: 100%;
}

.footer__main {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  text-align: center;
}

@media (min-width: 768px) {
  .footer__main {
    grid-template-columns: 1fr auto 1fr;
    text-align: left;
  }
}

.footer__col--audit {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
}

@media (min-width: 768px) {
  .footer__col--audit {
    display: flex;
  }
}

.footer__audit-label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.footer__audit-logo {
  max-width: 120px;
  height: auto;
  display: block;
}

.footer__col {
  display: flex;
  flex-direction: column;
}

.footer__col--brand {
  align-items: center;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .footer__col--brand {
    align-items: flex-start;
  }
}

.footer__logo {
  max-width: 180px;
  height: auto;
}

.footer__slogan {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
}

.footer__col--links {
  align-items: flex-start;
}

@media (min-width: 768px) {
  .footer__col--links {
    align-items: flex-end;
  }
}

.footer__heading {
  margin: 0 0 var(--space-sm);
  padding: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  text-align: left;
  display: block;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
}

.footer__nav a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
  text-align: left;
}

@media (max-width: 767px) {
  .footer__col--links {
    align-items: center;
    text-align: center;
  }
  .footer .footer__heading {
    text-align: center;
  }
  .footer .footer__nav {
    align-items: center;
  }
  .footer .footer__nav a {
    text-align: center;
  }
}

.footer__nav a:hover {
  color: var(--white);
}

/* Línea divisoria */
.footer__divider {
  max-width: var(--container);
  margin: var(--space-lg) auto;
}

.footer__disclaimer {
  max-width: var(--container);
  margin: 0 auto var(--space-lg);
  padding: 0 var(--space-md);
}

.footer__disclaimer-text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
}

@media (min-width: 768px) {
  .footer__disclaimer-text {
    padding: var(--space-md) var(--space-xl);
  }
}

/* Fila inferior: copyright + redes sociales */
.footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer__copyright {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer__social-wrap {
  display: flex;
  gap: var(--space-sm);
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  transition: background 0.2s ease, color 0.2s ease;
}

.footer__social:hover {
  background: var(--white);
  color: var(--accent);
}

.footer__social svg {
  width: 20px;
  height: 20px;
}

/* -------------------------------------------------------------------------- */
/* GSAP-ready classes (visibility toggled by JS)                              */
/* -------------------------------------------------------------------------- */

.gsap-reveal {
  opacity: 0;
  transform: translateY(24px);
}

.gsap-reveal--hero {
  opacity: 0;
  transform: translateY(16px);
}

/* -------------------------------------------------------------------------- */
/* Scroll to Top – botón flotante                                             */
/* -------------------------------------------------------------------------- */

.scroll-top {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: #0a1f3a;
}

.scroll-top svg {
  width: 24px;
  height: 24px;
}

/* -------------------------------------------------------------------------- */
/* Lang Float – selector de idioma flotante (izquierda, alineado con scroll)  */
/* -------------------------------------------------------------------------- */

.lang-float {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 90;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.lang-float__btn {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease, transform 0.2s ease;
}

.lang-float__btn:hover,
.lang-float__btn:focus {
  background: #0a1f3a;
  outline: none;
}

.lang-float__btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.lang-float__abbr {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.lang-float__flag {
  font-size: 0.65rem;
  line-height: 1;
  margin-top: 1px;
}

.lang-float__dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
  min-width: 72px;
}

.lang-float.is-open .lang-float__dropdown {
  display: flex;
}

.lang-float__option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lang-float__option:hover,
.lang-float__option:focus {
  background: rgba(14, 45, 80, 0.08);
  outline: none;
}

.lang-float__option.is-active {
  background: rgba(14, 45, 80, 0.12);
  color: var(--accent);
}