/* Portada: botón que invita a ver cómo funciona y recorrido de 3 pantallas (blanco y negro, con animaciones que se reinician al llegar a cada una). */
button.cp-hero__crear { cursor: pointer; gap: 10px; }
.cp-flecha { width: 18px; height: 18px; animation: tr-flecha 1.8s ease-in-out infinite; }
@keyframes tr-flecha { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

html.tr-abierto, html.tr-abierto body { overflow: hidden; }
.tr { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; overflow: hidden; color: #fff; text-align: center;
  background: linear-gradient(172deg, #8657ff 0%, #6d3ff4 48%, #5a2ce2 100%) no-repeat #5a2ce2;
  opacity: 0; transform: translateX(60px); transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.tr[hidden] { display: none; }
.tr.abierto { opacity: 1; transform: none; }
/* El recorrido entra por la derecha: el texto de la portada sale hacia la izquierda y el fondo queda quieto */
.cp-hero__contenido { transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
html.tr-abierto .cp-hero__contenido { transform: translateX(-60px); opacity: 0; }
.tr__cerrar, .tr__saltar { position: absolute; top: calc(.9rem + env(safe-area-inset-top)); z-index: 3; }
.tr__cerrar { left: 1rem; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.tr__cerrar:active { transform: scale(.9); }
.tr__cerrar svg { width: 18px; height: 18px; }
.tr__saltar { right: 1.2rem; padding: .55rem .4rem; color: #fff; opacity: .8; font: 600 .95rem Inter, system-ui, sans-serif; text-decoration: none; transition: opacity .25s ease; }
.tr__saltar:hover { opacity: 1; text-decoration: underline; }
.tr__saltar.oculto { opacity: 0; pointer-events: none; }
.tr__pista { flex: 1; min-height: 0; display: flex; width: 100%; transition: transform .6s cubic-bezier(.22, 1, .36, 1); touch-action: pan-y; }
.tr__slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4.6rem 1.5rem 1rem; }
.tr__slide h2 { margin: 1.4rem 0 .6rem; max-width: 16ch; font: 800 clamp(1.6rem, 6.4vw, 2.2rem) / 1.12 Poppins, sans-serif; letter-spacing: -.02em; }
.tr__slide h2 mark { display: inline-block; padding: 0 .3em; border-radius: 10px; background: #ffd43b; color: #1d1036; }
.tr__slide p { margin: 0; max-width: 34ch; opacity: .92; font-size: 1.02rem; line-height: 1.45; }
.tr__slide.on h2 { animation: tr-sube .7s cubic-bezier(.22, 1, .36, 1) .25s both; }
.tr__slide.on p { animation: tr-sube .7s cubic-bezier(.22, 1, .36, 1) .4s both; }
@keyframes tr-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.tr__pie { width: 100%; max-width: 520px; margin: 0 auto; padding: .6rem 1.5rem calc(1.6rem + env(safe-area-inset-bottom)); }
.tr__puntos { display: flex; justify-content: center; gap: 8px; margin-bottom: 1.2rem; }
.tr__puntos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .4s cubic-bezier(.22, 1, .36, 1), background .3s ease; }
.tr__puntos button.on { width: 28px; background: #ffd43b; }
.tr__sig { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border: 1px solid #fff; border-radius: 16px; background: #fff; color: #000; cursor: pointer;
  font: 600 1.05rem Inter, system-ui, sans-serif; transition: background .15s ease, color .15s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) { .tr__sig:hover { background: transparent; color: #fff; } }
.tr__sig { outline: none; -webkit-tap-highlight-color: transparent; }
.tr__sig:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tr__puntos button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tr__sig:active { background: #e6e6e6; color: #000; }
.tr__sig:active { transform: scale(.97); }

/* Dibujos animados */
.tr__arte { position: relative; width: min(300px, 84vw); height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tr .ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #fff; color: #6c3cf5; }
.tr .ic svg { width: 18px; height: 18px; fill: currentColor; }
.a3__tel { border: 1px solid rgba(255, 255, 255, .26);
  background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .09));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 34px rgba(30, 10, 80, .3); }

/* 1 · catálogo con código QR: una tarjeta con el QR de un lado y el catálogo del otro; se escanea y se da vuelta */
.a1__giro { position: absolute; top: calc(50% - 22px); left: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; perspective: 900px; }
.a1__carta { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.a1__cara { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.a1__marco { display: flex; align-items: center; justify-content: center; padding: 22px; border-radius: 28px; color: #1d1036; overflow: hidden; }
.a1__qr { display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 1; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 16px 36px rgba(30, 10, 80, .35); }
.a1__esq { position: absolute; width: 26px; height: 26px; border: 0 solid #ffd43b; }
.a1__esq--1 { top: 4px; left: 4px; border-width: 4px 0 0 4px; border-top-left-radius: 12px; }
.a1__esq--2 { top: 4px; right: 4px; border-width: 4px 4px 0 0; border-top-right-radius: 12px; }
.a1__esq--3 { bottom: 4px; left: 4px; border-width: 0 0 4px 4px; border-bottom-left-radius: 12px; }
.a1__esq--4 { bottom: 4px; right: 4px; border-width: 0 4px 4px 0; border-bottom-right-radius: 12px; }
.a1__barrido { position: absolute; left: 10px; right: 10px; top: 16px; height: 3px; border-radius: 3px; background: #ffd43b; box-shadow: 0 0 14px 3px rgba(255, 212, 59, .75), 0 -22px 26px 4px rgba(255, 212, 59, .18); opacity: 0; }
.a3__tel.a1__tel { height: 190px; margin: 0; padding: 12px; gap: 8px; border-radius: 28px; }
.a1__pedir { position: absolute; top: calc(50% + 94px); left: 50%; width: 190px; padding: 12px 0; border-radius: 14px; background: #ffd43b; color: #1d1036; font: 700 .95rem Inter, sans-serif; opacity: 0; transform: translateX(-50%) scale(.4); box-shadow: 0 12px 28px rgba(30, 10, 80, .4); }
.a1__dorso { transform: rotateY(180deg); }
.a1__cara { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.a1__ok { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 14px; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(.5); }
.a1__ok span { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #ffd43b; color: #6c3cf5; box-shadow: 0 0 0 10px rgba(255, 212, 59, .22), 0 18px 40px rgba(30, 10, 80, .45); }
.a1__ok svg { width: 46px; height: 46px; stroke-dasharray: 24; stroke-dashoffset: 0; }
.a1__ok b { font: 800 1.3rem Poppins, sans-serif; letter-spacing: -.01em; }
.on .a1__giro { animation: tr-giro-ciclo 7s ease-in-out infinite .3s; }
.on .a1__carta { animation: tr-carta-ciclo 7s ease-in-out infinite .3s; }
.on .a1__esq { animation: tr-esq 7s ease-in-out infinite .3s; }
.on .a1__barrido { animation: tr-barrido 7s ease-in-out infinite .3s; }
.on .a1__tel .a3__grilla span { animation: tr-tile-ciclo 7s cubic-bezier(.34, 1.56, .64, 1) infinite; animation-delay: calc(.3s + var(--k) * .1s); }
.on .a1__pedir { animation: tr-pedir-ciclo 7s cubic-bezier(.34, 1.56, .64, 1) infinite .3s; }
.on .a1__ok { animation: tr-ok-ciclo 7s cubic-bezier(.34, 1.56, .64, 1) infinite .3s; }
.on .a1__ok svg { animation: tr-tilde 7s ease infinite .3s; }
/* Mientras espera su turno, cada pieza queda en su estado inicial (si no, el QR se ve un instante y se esconde antes de empezar). */
.on .a1__giro, .on .a1__carta, .on .a1__esq, .on .a1__barrido, .on .a1__tel .a3__grilla span, .on .a1__pedir, .on .a1__ok, .on .a1__ok svg { animation-fill-mode: backwards; }
@keyframes tr-giro-ciclo { 0% { opacity: 0; transform: scale(.7); } 6%, 70% { opacity: 1; transform: scale(1); } 77%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes tr-carta-ciclo { 0%, 33% { transform: rotateY(0); } 38% { transform: rotateY(90deg) scale(1.08); } 43%, 99% { transform: rotateY(180deg); } 100% { transform: rotateY(0); } }
@keyframes tr-esq { 0%, 6% { transform: scale(1.1); } 14%, 100% { transform: none; } }
@keyframes tr-barrido { 0%, 10% { opacity: 0; top: 16px; } 14% { opacity: 1; } 31% { opacity: 1; top: calc(100% - 20px); } 33%, 100% { opacity: 0; top: calc(100% - 20px); } }
@keyframes tr-tile-ciclo { 0%, 37% { opacity: 0; transform: scale(.5); } 47%, 70% { opacity: 1; transform: none; } 77%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes tr-pedir-ciclo { 0%, 44% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.4); background: #ffd43b; } 52% { opacity: 1; transform: translateX(-50%) scale(1.08); } 55%, 62% { opacity: 1; transform: translateX(-50%) scale(1); background: #ffd43b; } 65% { opacity: 1; transform: translateX(-50%) scale(.92); background: #f5c518; } 70% { opacity: 1; transform: translateX(-50%) scale(1); background: #ffd43b; } 77%, 100% { opacity: 0; transform: translateX(-50%) scale(.8); background: #ffd43b; } }
@keyframes tr-ok-ciclo { 0%, 72% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 83%, 92% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 98%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); } }
@keyframes tr-tilde { 0%, 76% { stroke-dashoffset: 24; } 86%, 100% { stroke-dashoffset: 0; } }

/* 2 · carta, tienda o emprendimiento, con plantillas */
.a2__tabs { display: flex; gap: 8px; }
.a2__tabs span { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; font: 700 .82rem Inter, sans-serif; background: rgba(255, 255, 255, .15); }
.a2__vista { position: relative; width: 100%; height: 150px; margin-top: 14px; }
.a2__p { position: absolute; inset: 0; display: grid; gap: 8px; align-content: center; padding: 12px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 20px; opacity: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .09)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 34px rgba(30, 10, 80, .3); }
.a2__p:first-child { opacity: 1; }
.a2__item { display: flex; align-items: center; gap: 10px; }
.a2__item i { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .4); }
.a2__item b { font: 700 .85rem Poppins, sans-serif; }
.a2__p--grilla { grid-template-columns: repeat(4, 1fr); }
.a2__p--grilla span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); }
.a2__p--grilla span:first-child { background: #fff; border-color: #fff; }
.a2__p--grilla span:first-child svg { fill: #6c3cf5; }
.a2__p--grilla span:last-child { background: #ffd43b; border-color: #ffd43b; }
.a2__p--grilla span:last-child svg { fill: #1d1036; }
.a2__p--grilla svg { width: 22px; height: 22px; fill: #fff; }
.a2__banner { display: grid; place-items: center; height: 62px; border-radius: 14px; background: #fff; color: #6c3cf5; }
.a2__banner svg { width: 28px; height: 28px; fill: currentColor; }
.a2__p--marca i { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .4); }
.a2__p--marca i + i { width: 60%; background: #ffd43b; }
.a2__temas { display: flex; gap: 8px; margin-top: 16px; }
.tm { width: 52px; height: 72px; padding: 6px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .3); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.tm b { display: block; width: 100%; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.tm i { display: block; width: 100%; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
/* 1 · lista oscura */
.tm--1 i:nth-child(4), .tm--1 i:nth-child(5) { width: 70%; }
/* 2 · tienda clara en grilla */
.tm--2 { background: #fff; border-color: #fff; }
.tm--2 b { background: #6c3cf5; }
.tm--2 i { width: calc(50% - 2px); height: 18px; background: #dcd3fb; }
/* 3 · portada grande con vidrio */
.tm--3 { background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .05)); }
.tm--3 b { height: 4px; width: 40%; background: #fff; }
.tm--3 i:nth-child(2) { height: 28px; border-radius: 6px; background: #fff; }
.tm--3 i:nth-child(n + 3) { height: 5px; background: rgba(255, 255, 255, .7); }
.tm--3 i:nth-child(5) { width: 60%; }
/* 4 · editorial, con títulos grandes */
.tm--4 { background: #1d1036; border-color: #1d1036; }
.tm--4 b { height: 14px; background: #fff; }
.tm--4 i { height: 4px; background: rgba(255, 255, 255, .55); }
.tm--4 i:nth-child(3) { width: 80%; }
.tm--4 i:nth-child(5) { width: 55%; }
/* 5 · centrada y redondeada */
.tm--5 { align-content: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05) 70%); }
.tm--5 b { width: 18px; height: 18px; margin: 0 auto 2px; border-radius: 50%; background: #fff; }
.tm--5 i { height: 4px; margin: 0 auto; width: 70%; border-radius: 99px; }
.tm--5 i:nth-child(4) { width: 50%; }
.tm--5 i:nth-child(5) { width: 32px; height: 8px; background: #ffd43b; }
.on .a2__p { animation: tr-vista 9s ease infinite; animation-delay: calc(var(--k) * 3s); }
.on .a2__tabs span { animation: tr-tab 9s ease infinite; animation-delay: calc(var(--k) * 3s); }
.on .a2__temas span { animation: tr-tema 9s cubic-bezier(.34, 1.56, .64, 1) infinite; animation-delay: calc(var(--k) * 1.8s); }
@keyframes tr-vista { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 5%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes tr-tab { 0%, 33% { background: #ffd43b; color: #1d1036; border-color: #ffd43b; } 34%, 100% { background: rgba(255, 255, 255, .15); color: #fff; border-color: rgba(255, 255, 255, .35); } }
@keyframes tr-tema { 0% { transform: scale(1); border-color: rgba(255, 255, 255, .3); } 4%, 16% { transform: scale(1.18) translateY(-4px); border-color: #ffd43b; box-shadow: 0 10px 22px rgba(30, 10, 80, .4), 0 0 0 2px #ffd43b; } 22%, 100% { transform: none; border-color: rgba(255, 255, 255, .3); box-shadow: none; } }

/* Cara del catálogo (la usa la tarjeta del QR) */
.a3__tel { width: 190px; height: 268px; margin-top: 52px; padding: 14px 12px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 30px; display: flex; flex-direction: column; gap: 10px; }
.a3__url { padding: 4px 0; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .66rem; letter-spacing: .02em; }
.a3__grilla { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a3__grilla span { display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.a3__grilla svg { width: 26px; height: 26px; fill: #fff; }
.a3__grilla span:first-child { background: #fff; border-color: #fff; }
.a3__grilla span:first-child svg { fill: #6c3cf5; }
.a3__grilla span:last-child { background: #ffd43b; border-color: #ffd43b; }
.a3__grilla span:last-child svg { fill: #1d1036; }

/* 3 · finanzas */
.a4 { gap: 12px; }
.a4__card, .a4__mini { border: 1px solid rgba(255, 255, 255, .26); background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .09));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 34px rgba(30, 10, 80, .3); }
.a4__card { width: 100%; padding: 16px 16px 12px; border-radius: 22px; text-align: left; }
.a4__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.a4__cab span { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.a4__cab strong { display: block; font: 800 1.9rem / 1.15 Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.a4__sube { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; padding: 5px 10px 5px 6px; border-radius: 999px; background: #ffd43b; color: #1d1036; font: 700 .8rem Inter, sans-serif; font-style: normal; }
.a4__sube svg { width: 14px; height: 14px; }
.a4__grafico { display: block; width: 100%; margin-top: 8px; overflow: visible; }
.a4__guias line { stroke: rgba(255, 255, 255, .14); stroke-dasharray: 3 6; }
.a4__barra { fill: rgba(255, 255, 255, .35); transform-box: fill-box; transform-origin: bottom; }
.a4__barra:last-of-type { fill: #ffd43b; }
.a4__linea { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.a4__punto { fill: #ffd43b; }
.a4__halo { fill: rgba(255, 212, 59, .4); transform-box: fill-box; transform-origin: center; }
.a4__minis { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.a4__mini { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 18px; text-align: left; }
.a4__mini em, .a4__mini b { display: block; line-height: 1.25; font-style: normal; }
.a4__mini em { font-size: .68rem; opacity: .7; }
.a4__mini b { font: 700 .9rem Poppins, sans-serif; }
.a4__mini .ic { width: 32px; height: 32px; }
.on .a4__barra { animation: tr-barra .8s cubic-bezier(.34, 1.56, .64, 1) calc(.5s + var(--i) * .09s) both; }
.on .a4__linea { animation: tr-dibuja 1.6s ease-in-out 1s both; }
.on .a4__punto, .on .a4__halo { animation: tr-pop .4s ease-out 2.5s both; }
.on .a4__halo { animation: tr-pop .4s ease-out 2.5s both, tr-pulso 1.8s ease-out 3s infinite; }
.on .a4__sube { animation: tr-pop .5s cubic-bezier(.34, 1.56, .64, 1) 2.3s both; }
.on .a4__mini { animation: tr-fila .6s cubic-bezier(.22, 1, .36, 1) calc(1.8s + var(--k) * .2s) both; }
@keyframes tr-barra { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes tr-dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tr-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes tr-pulso { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
@keyframes tr-fila { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .tr, .tr__pista, .cp-hero__contenido { transition: none; } .tr *, .cp-flecha { animation: none !important; } }

/* PC: el dibujo grande a la derecha y el texto alineado a la izquierda. Se agranda con zoom (no con transform) para que se dibuje nítido y no una imagen chica estirada. */
@media (min-width: 992px) {
  .tr { text-align: left; }
  .tr__slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 3rem; align-items: center;
    padding: 5rem calc(max(0px, (100vw - 1180px) / 2) + 4rem) 1rem; }
  .tr__slide h2 { grid-column: 1; grid-row: 2; align-self: end; margin: 0 0 1rem; max-width: 13ch; font-size: clamp(2.6rem, 4.2vw, 3.6rem); }
  .tr__slide p { grid-column: 1; grid-row: 3; align-self: start; max-width: 34ch; font-size: 1.2rem; }
  .tr__arte { grid-column: 2; grid-row: 1 / 5; justify-self: center; margin: 0; zoom: 1.55; text-align: center; }
  .tr__pie { max-width: none; margin: 0; padding: .6rem calc(max(0px, (100vw - 1180px) / 2) + 4rem) 2.4rem; }
  .tr__puntos { justify-content: flex-start; }
  .tr__sig { width: 320px; }
}
@media (min-width: 992px) and (max-height: 820px) { .tr__arte { zoom: 1.2; } }

/* Entre pantallas el fondo no se mueve: sale el texto hacia un lado y entra el de la nueva pantalla desde el otro */
.cp-hero__contenido { --dx: 0px; }
html:not(.vt).sale-adelante .cp-hero__contenido { opacity: 0; transform: translateX(-48px); transition: transform .22s ease-in, opacity .22s ease-in; }
html:not(.vt).sale-atras .cp-hero__contenido { opacity: 0; transform: translateX(48px); transition: transform .22s ease-in, opacity .22s ease-in; }
html:not(.vt).entra-atras .cp-hero__contenido { --dx: -48px; animation: cp-entra-x .35s cubic-bezier(.22, 1, .36, 1) backwards; }
html:not(.vt).entra-adelante .cp-hero__contenido { --dx: 48px; animation: cp-entra-x .35s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes cp-entra-x { from { opacity: 0; transform: translateX(var(--dx)); } to { opacity: 1; transform: none; } }

/* Transición entre páginas del propio navegador: la portada y las pantallas de acceso se ven como una sola hoja.
   El fondo se mezcla sin moverse; solo el contenido (texto y botones) se desliza: primero sale el viejo y enseguida entra el nuevo, sin superponerse. */
@view-transition { navigation: auto; }
.cp-hero__contenido { view-transition-name: c-portada; }
.ac-cuerpo { view-transition-name: c-acceso; }
.ac-barra h1 { view-transition-name: titulo; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
html.sale-adelante::view-transition-old(c-portada), html.sale-adelante::view-transition-old(c-acceso), html.sale-adelante::view-transition-old(titulo) { animation: vt-sale-izq .18s cubic-bezier(.4, 0, 1, 1) both; }
html.sale-atras::view-transition-old(c-portada), html.sale-atras::view-transition-old(c-acceso), html.sale-atras::view-transition-old(titulo) { animation: vt-sale-der .18s cubic-bezier(.4, 0, 1, 1) both; }
html.entra-adelante::view-transition-new(c-portada), html.entra-adelante::view-transition-new(c-acceso), html.entra-adelante::view-transition-new(titulo) { animation: vt-entra-der .35s cubic-bezier(.22, 1, .36, 1) .14s both; }
html.entra-atras::view-transition-new(c-portada), html.entra-atras::view-transition-new(c-acceso), html.entra-atras::view-transition-new(titulo) { animation: vt-entra-izq .35s cubic-bezier(.22, 1, .36, 1) .14s both; }
@keyframes vt-sale-izq { to { opacity: 0; transform: translateX(-60px); } }
@keyframes vt-sale-der { to { opacity: 0; transform: translateX(60px); } }
@keyframes vt-entra-der { from { opacity: 0; transform: translateX(60px); } }
@keyframes vt-entra-izq { from { opacity: 0; transform: translateX(-60px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* El logo, igual que en iniciar sesión y crear cuenta (blanco, 84 px, centrado arriba), fijo en las 3 pantallas del recorrido */
.tr__logo { position: absolute; top: calc(95px + env(safe-area-inset-top)); left: 50%; z-index: 2; width: 84px; height: 84px; margin-left: -42px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M43.3 20.7A16 16 0 1 0 43.3 43.3' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='46' cy='32' r='4.3' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
.tr__slide { padding-top: calc(190px + env(safe-area-inset-top)); }
.tr__slide h2 { margin-top: 1rem; }
/* En celulares el dibujo se achica para que entre el logo arriba sin tapar nada */
@media (max-width: 991px) and (max-height: 880px) { .tr__arte { zoom: .78; } }
@media (max-width: 991px) and (max-height: 760px) { .tr__arte { zoom: .62; } .tr__slide p { font-size: .95rem; } }
@media (min-width: 992px) {
  .tr__slide { padding-top: 200px; }
  .tr__arte { zoom: 1.25; }
}
@media (min-width: 992px) and (max-height: 820px) { .tr__arte { zoom: 1; } }

/* Pantallas de crear cuenta e iniciar sesión dentro del recorrido: ocupan todo el espacio, sin puntitos ni botón de abajo */
.tr__slide--form { display: block; padding: 0; }
.tr__marcos { position: absolute; inset: env(safe-area-inset-top) 0 0; z-index: 1; pointer-events: none; }
.tr__marco { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s;
  background: linear-gradient(172deg, #8657ff 0%, #6d3ff4 48%, #5a2ce2 100%) no-repeat #8657ff; }   /* el mismo violeta que crear cuenta e iniciar sesión, así no se ve otro color mientras carga */
.tr__marco.activo { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; }
.tr--form .tr__pie { display: none; }
.tr__logo { transition: opacity .25s ease; }
.tr__logo.oculto { opacity: 0; }
.tr--login .tr__logo { display: none; }
@media (min-width: 992px) { .tr__slide.tr__slide--form { display: block; padding: 0; } }
/* Botón "Siguiente" en amarillo con texto oscuro; el de línea ("Crear mi cuenta", última pantalla) va de vidrio debajo */
.tr__sig { background: #ffd43b; border-color: #ffd43b; color: #1d1036; font-family: Poppins, sans-serif; font-weight: 700; }
.tr__sig:active { background: #f5c518; border-color: #f5c518; color: #1d1036; }
@media (hover: hover) { .tr__sig:hover { background: #f5c518; border-color: #f5c518; color: #1d1036; } }
.tr__sig.tr__sig--linea { margin-top: 10px; background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .35); color: #fff; font-family: Inter, system-ui, sans-serif; font-weight: 600; }
.tr__sig.tr__sig--linea:active { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
@media (hover: hover) { .tr__sig.tr__sig--linea:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; } }
.tr__sig[hidden] { display: none; }
/* App instalada en iPhone: como la página se dibuja debajo de la barra de estado, el iPhone deja la pantalla corta abajo
   (justo el alto de esa barra). Se estira el fondo y lo de abajo para que llegue hasta el borde. Solo en la app instalada: en Safari no pasa. */
@media (display-mode: standalone) {
  .tr { bottom: calc(-1 * env(safe-area-inset-top)); }
}