/* ============================================================
   FUENTES — Proxima Nova desde CDN MercadoLibre
============================================================ */
@font-face {
  font-family: 'Proxima Nova';
  src: url('https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   TOKENS — design system (scope CALM: .page-container en lugar de :root)
============================================================ */
.page-container {
  /* ---- COLORES ---- */
  --brand-yellow: #FFE600;
  --accent-blue: #3483FA;
  --accent-blue-dark: #2968C8;
  --text-primary: rgba(0,0,0,0.9);
  --text-secondary: rgba(0,0,0,0.55);
  --text-white: #FFFFFF;
  --text-link: #3483FA;
  --text-positive: #00A650;
  --bg-white: #FFFFFF;
  --bg-gray: #F5F5F5;
  --gray-dark: #1A1A1A;
  --divider: rgba(0,0,0,0.1);
  --shadow-flat: 0 1px 2px rgba(0,0,0,0.12);
  --andes-surface-secondary-idle: #f4f5f9;
  --andes-text-secondary-legal: #646587;
  --andes-text-primary-heavy: #282834;
  --footer-strip-bg: #f7f7f7;

  /* ---- BORDER RADIUS ---- */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-full: 100px;

  /* ---- ALIAS CALM ---- */
  --r-hero: 24px;
  --r-card: 20px;
  --r-sm: 12px;
  --r-pill: 9999px;

  /* ---- ESPACIADO (escala 8px) ---- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s7: 56px;
  --s8: 64px;
  --s10: 80px;

  /* ---- TIPOGRAFÍA ---- */
  --font: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Navbar height (móvil: 12 + 56 + 12) */
  --navbar-height: 80px;

  /* Inset horizontal */
  --page-gutter: 8px;
  --content-inset: 20px;

  /* Contenedor — siempre 100% */
  width: 100%;
}

/* ============================================================
   RESET & BASE
============================================================ */
.page-container img { display: block; max-width: 100%; }
.page-container a { text-decoration: none; color: inherit; }
.page-container button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* ============================================================
   TC CTA — Cross Sell
============================================================ */
.tc-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}
.tc-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
}
/* Visual: ellipse 176×176 + card 147×202 */
.tc-visual {
  position: relative;
  width: 168px;
  height: 202px;
  flex-shrink: 0;
}
.tc-ellipse {
  position: absolute;
  top: 14px;
  left: 0;
  width: 176px;
  height: 176px;
}
.tc-card-img {
  position: absolute;
  top: 0;
  left: 20.8px;
  width: 147px;
  height: 202px;
  object-fit: contain;
}
.tc-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  text-align: center;
}
.tc-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.tc-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 27px;
  color: var(--text-primary);
}
.tc-subtitle {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-primary);
}
.page-container .btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: none;
  color: var(--accent-blue);
  background: rgba(65, 137, 230, 0.15);
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  border-radius: var(--radius-6);
  white-space: nowrap;
  transition: background 0.15s;
  text-decoration: none;
}
.page-container .btn-quiet:hover { background: rgba(52, 131, 250, 0.22); }

/* ============================================================
   PRE-FOOTER — back to top + CTA amarillo
============================================================ */
.prefooter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.backtop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 153.816px;
  height: 40.985px;
  position: relative;
  margin-bottom: -1px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}
.backtop-btn img.backtop-ellipse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.backtop-chevron {
  position: relative;
  z-index: 1;
  transform: rotate(-90deg);
  width: 24px;
  height: 24px;
}
.prefooter-yellow {
  background: var(--brand-yellow);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 52px var(--content-inset);
  border-radius: var(--radius-16);
}
.prefooter-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 380px;
}
.prefooter-text {
  font-size: 24px;
  font-weight: 700;
  line-height: 27px;
  color: var(--text-primary);
  text-align: center;
}
.page-container .btn-primary-narrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-blue);
  color: var(--text-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  padding: 17px 24px 15px;
  border-radius: var(--radius-6);
  width: 100%;
  text-align: center;
  transition: background 0.15s;
}
.page-container .btn-primary-narrow:hover { background: var(--accent-blue-dark); }

/* ============================================================
   DESKTOP — 768px+
============================================================ */
@media (min-width: 768px) {

  /* Tokens desktop */
  .page-container {
    --content-inset: 40px;
  }

  /* Pre-footer desktop */
  .prefooter-yellow {
    padding: 72px var(--content-inset);
    border-radius: var(--radius-16);
  }
  .page-container .btn-primary-narrow { width: 320px; }
}