/*
 * Escalera brief (Maurizio, 16 Oct 2026): confianza → propósito → cómo funciona → venta.
 * Theme-owned styles for the blocks that brief adds to /ve/ and /co/.
 */

/* Confianza: six real faces next to the fixed downloads figure (no counter). */
.tt-faces { display: inline-flex; flex: none; padding-left: 10px; border-radius: 999px; }
.tt-faces img { width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; object-fit: cover; object-position: center 30%; border: 2.5px solid #071556; transition: translate .3s cubic-bezier(.16, 1, .3, 1); }
.tt-faces:hover img { translate: 0 -2px; }
.tt-faces:hover img:nth-child(even) { translate: 0 -4px; }
.tt-proof { display: flex; align-items: center; gap: 14px; }
.tt-proof p { margin: 0; line-height: 1.35; }
.tt-proof-sub { display: block; font-size: .9375rem; color: var(--color-navy-100, #c4d0f8); }
.co-hero-proof .tt-faces { margin-bottom: 14px; }
@media (max-width: 1023px) { .tt-proof { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* Propósito: the two kinds of turn. */
.tt-two-turns { margin-top: 32px; max-width: 30ch; font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--color-navy, #0023d1); text-wrap: balance; }

/* Colombia price: the 150.000 chain leads; 300.000 reads as also available. */
html[data-country='co'] [aria-labelledby='price-title'] dl > div:nth-child(2) dd.font-black { font-size: clamp(1.6rem, 2.2vw, 2rem); }

/* Venta: «Si eres constante, TuTurno no te cobra el servicio». The medals are the path. */
.tt-venta { padding-block: 88px; background: #fff; color: var(--color-ink, #0b1240); scroll-margin-top: 96px; }
.tt-venta-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: end; }
.tt-venta h2 { font-size: clamp(2.25rem, 4.6vw, 3.9rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.tt-venta h2 span { color: var(--color-navy, #0023d1); }
.tt-venta-note { max-width: 40ch; font-size: 1.125rem; line-height: 1.5; color: var(--color-ink-soft, #3a4166); }
.tt-venta-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; font-weight: 700; color: var(--color-navy, #0023d1); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; cursor: pointer; }
.tt-venta-link::after { content: ''; width: 18px; height: 18px; background: currentColor; transition: translate .3s cubic-bezier(.16, 1, .3, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5.5-5.5L19 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5.5-5.5L19 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.tt-venta-link:hover::after { translate: 4px 0; }

.tt-venta-path { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 56px 0 0; padding: 0; list-style: none; }
.tt-venta-path::before, .tt-venta-path::after { content: ''; position: absolute; top: 58px; left: 16.66%; right: 16.66%; height: 4px; border-radius: 4px; }
.tt-venta-path::before { background: var(--color-hairline, #d8dce8); }
.tt-venta-path::after { background: linear-gradient(90deg, #b87333, #c0c6d4 38%, #e3b23c 62%, var(--color-sky, #4fa8ff)); transform-origin: 0 50%; }
.tt-venta-step { position: relative; z-index: 1; text-align: center; }
.tt-venta-medals { display: inline-flex; align-items: center; justify-content: center; height: 120px; padding-inline: 14px; background: #fff; }
.tt-venta-medals img { width: 88px; height: 88px; object-fit: contain; }
.tt-venta-medals img + img { margin-left: -22px; }
.tt-venta-goal .tt-venta-medals img { width: 120px; height: 120px; filter: drop-shadow(0 10px 22px rgb(79 168 255 / .45)); }
.tt-venta-step h3 { max-width: 20ch; margin: 18px auto 0; font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 750; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.tt-venta-step p { margin-top: 8px; font-size: .9375rem; font-weight: 600; color: var(--color-ink-soft, #3a4166); }
.tt-venta-goal h3 { color: var(--color-navy, #0023d1); }
.tt-venta-goal p { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #e3f9ec; color: #0b5c32; }

.tt-venta-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-hairline, #d8dce8); font-size: 1rem; line-height: 1.5; color: var(--color-ink-soft, #3a4166); }
.tt-venta-foot strong { color: var(--color-ink, #0b1240); font-weight: 700; }

@media (max-width: 767px) {
  .tt-venta { padding-block: 56px; }
  .tt-venta-head { grid-template-columns: 1fr; gap: 18px; }
  .tt-venta-path { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .tt-venta-path::before, .tt-venta-path::after { top: 38px; bottom: 38px; left: 37px; right: auto; width: 3px; height: auto; }
  .tt-venta-path::after { background: linear-gradient(180deg, #b87333, #c0c6d4 38%, #e3b23c 62%, var(--color-sky, #4fa8ff)); transform-origin: 50% 0; }
  .tt-venta-step { display: grid; grid-template-columns: 76px 1fr; column-gap: 16px; align-items: center; padding-block: 10px; text-align: left; }
  .tt-venta-medals { grid-row: span 2; width: 76px; height: 76px; padding: 0; }
  .tt-venta-medals img { width: 56px; height: 56px; }
  .tt-venta-medals img + img { margin-left: -36px; }
  .tt-venta-goal .tt-venta-medals img { width: 72px; height: 72px; }
  .tt-venta-step h3 { max-width: none; margin: 0; align-self: end; }
  .tt-venta-step p { margin-top: 4px; align-self: start; justify-self: start; }
  .tt-venta-foot { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; padding-top: 20px; }
}

/* One moment: on arrival the path fills medal to medal and Diamante lights up once.
   Without JS or with reduced motion everything is already in its final state. */
.motion .tt-venta-path::after { transition: transform 1.5s cubic-bezier(.16, 1, .3, 1) .15s; }
.motion .tt-venta-path:not(.is-in)::after { transform: scaleX(0); }
.motion .tt-venta-medals img { transition: opacity .7s cubic-bezier(.16, 1, .3, 1), translate .7s cubic-bezier(.16, 1, .3, 1); }
.motion .tt-venta-path:not(.is-in) .tt-venta-medals img { opacity: 0; translate: 0 14px; }
.motion .tt-venta-step:nth-child(2) .tt-venta-medals img { transition-delay: .45s; }
.motion .tt-venta-step:nth-child(2) .tt-venta-medals img + img { transition-delay: .6s; }
.motion .tt-venta-step:nth-child(3) .tt-venta-medals img { transition-delay: .95s; }
.motion .tt-venta-path.is-in .tt-venta-goal .tt-venta-medals img { animation: tt-diamond 1.4s cubic-bezier(.16, 1, .3, 1) 1.5s 1 both; }
@keyframes tt-diamond { 40% { filter: drop-shadow(0 10px 34px rgb(79 168 255 / .85)) brightness(1.08); } }
@media (max-width: 767px) { .motion .tt-venta-path:not(.is-in)::after { transform: scaleY(0); } }