/* Página de checkout: el formulario de Fiti embebido. */ /* El fondo de la sección acompaña al de la página de Fiti. El resto del sitio es negro puro (#000), así que un marco gris sobre negro se veía como un recuadro pegado encima y delataba el embebido; igualando los dos, el marco desaparece. Si algún día cambian el tema de la página de ventas en el EVO —Configurações › Autoatendimento › Cor do tema—, hay que volver a mirar este color: es el único número de esta hoja que depende de cómo esté configurado el panel de ellos. */ .fr-checkout { --fr-checkout-fondo: #212121; background: var(--fr-checkout-fondo); padding-block: var(--space-7); } .fr-checkout__titulo { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 54px); line-height: 1; letter-spacing: var(--ls-display); text-transform: uppercase; } .fr-checkout__bajada { margin-top: var(--space-3); font-size: var(--text-body-lg); color: var(--republic-silver); } /* La línea del pedido de dígitos se lee como el segundo renglón de la bajada, no como otro párrafo: por eso sin aire arriba. Va aparte y no dentro de la bajada porque desaparece sola cuando la tarjeta da bien. */ .fr-checkout__bajada--bin { margin-top: 0; } /* La bajada lleva el enlace al paso de Itaú, así que necesita verse como enlace. Mismo trato que los de la línea de ayuda de abajo del marco. */ .fr-checkout__bajada a { color: var(--accent-luz); text-decoration: underline; } .fr-checkout__bajada strong { color: var(--text-body); } .fr-checkout__plan { margin-top: var(--space-5); font-size: var(--text-body-md); color: var(--republic-silver); } .fr-checkout__plan strong { color: var(--text-body); } /* El alto no sale de `aspect-ratio` aunque sea el idiom del resto del sitio, y no es un descuido: `aspect-ratio` dice «mi alto es función de mi ancho», que es verdad para una foto o un mapa y es justo al revés para un formulario de pago. Cuanto más angosta la pantalla, más alto es el formulario, porque los campos se apilan; con una proporción fija el marco se haría más corto exactamente donde necesita ser más largo. De ahí las dos variables, que llegan como estilo en línea desde el PHP. La página embebida no implementa `postMessage` ni iframeResizer, así que no hay forma de que se mida sola: el alto se ajusta a mano desde el panel. */ .fr-checkout__marco { width: 100%; height: var(--fr-checkout-h, 1500px); /* Piso, por si el valor guardado quedó en cero: un marco de 0 px no se ve y no avisa. */ min-height: 480px; margin-top: var(--space-3); /* Recorta la canaleta de la barra de scroll; ver la regla del iframe. */ overflow: hidden; } /* Los cuatro primeros hacen falta: `base.css` normaliza `img, svg, video` y no incluye `iframe`, así que acá no se hereda nada. Sin `border` queda el `2px inset` del navegador, y sin `display: block` el iframe es en línea y arrastra el hueco de la línea base. El `calc` del ancho esconde la barra de scroll del marco. Hace falta porque la página de Fiti declara un contenido de exactamente «alto del marco + 1 px»: ese píxel sobrante obliga al navegador a dibujar una barra de 16 px que no sirve para nada y que delata el embebido. No se usa `scrolling="no"`, que sería lo directo, porque en pantallas angostas el documento de Fiti **sí** desborda de verdad —unos 1990 px con las tarjetas apiladas— y recortarlo escondería planes sin manera de llegar a ellos. Ensanchando el iframe por el ancho exacto de la barra, el documento se maqueta en el ancho visible —su `clientWidth` no cambia— y lo único que queda afuera del recorte es la canaleta. No se pierde contenido y la rueda y el dedo siguen desplazando. El ancho lo mide `checkout.js`, porque depende del sistema. Donde las barras son superpuestas (macOS, teléfonos) vale 0: ahí no hay canaleta que esconder ni barra que moleste, y la regla se desactiva sola. */ .fr-checkout__marco iframe { display: block; width: calc(100% + var(--fr-checkout-barra, 0px)); height: 100%; border: 0; } /* --- Paso previo: con qué tarjeta se paga -------------------------------- */ /* Los dos caminos son enlaces, no botones de formulario: andan sin JavaScript y se pueden abrir en otra pestaña. El estilo sale de `.fr-btn`, que ya existe. */ /* El paso de elección va centrado porque lo que viene después —la tarjeta de Fiti— también lo está: alineado a la izquierda, el contenido saltaba de lado al avanzar. El título y la bajada se quedan donde estaban, que es como empieza cualquier sección del sitio. */ .fr-checkout__eleccion { display: flex; flex-direction: column; align-items: center; text-align: center; } /* Rejilla y no `flex`, para que los dos botones midan exactamente lo mismo: es una elección entre pares, y uno más corto que el otro se lee como «este es el bueno». El `auto-fit` los pasa a una sola columna en cuanto dejan de entrar dos, sin necesidad de un punto de quiebre inventado, y el `min()` evita que se desborden en pantallas muy angostas —`.fr-btn` no parte el texto en dos renglones—. */ .fr-checkout__medios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(296px, 100%), 1fr)); gap: var(--space-3); width: 100%; max-width: 640px; margin-top: var(--space-4); } /* Relleno sólido en lugar del contorno de `fr-btn--outline`. Sobre el gris de esta sección el fondo transparente se leía como un botón deshabilitado, y acá los dos caminos tienen que verse igual de posibles. Es un relleno neutro que el resto del sitio no usa; si aparece en otra parte, se muda a components.css. El :hover es el mismo del contorno, para que la respuesta al puntero sea la de siempre. */ .fr-checkout__medio--otras { background: var(--steel); color: var(--republic-white); } .fr-checkout__medio--otras:hover:not(:disabled), .fr-checkout__medio--otras:focus-visible { background: var(--republic-white); color: var(--republic-black); } /* El logo del banco es un cuadrado blanco con la palabra calada, así que sobre el rojo del botón las letras toman ese rojo. Entra tal cual, sin recolorear nada. La separación con el texto sale del `gap` que ya trae `.fr-btn`. */ .fr-checkout__marca { flex: none; width: 24px; height: 24px; } .fr-checkout__nota { margin-top: var(--space-3); font-size: var(--text-body-sm); color: var(--republic-silver); } /* El pedido de los primeros dígitos. Arranca con `hidden` desde el PHP y lo destapa el JavaScript: si no corre, queda el marco a la vista en vez de una puerta cerrada. Va centrado por lo mismo que el paso anterior: los tres momentos del checkout —elegir tarjeta, escribir los dígitos, el formulario de Fiti— son la misma columna, y alinear uno a la izquierda hacía que el contenido saltara de lado al avanzar. */ .fr-checkout__bin { max-width: 48ch; margin-top: var(--space-4); margin-inline: auto; /* El aire de arriba y abajo sale del archivo de diseño: ahí el campo flota en el recuadro en vez de apoyarse en sus bordes. En pantallas angostas se recorta, más abajo, porque 48 px arriba y abajo se comen media pantalla. */ padding: var(--space-6) var(--space-4); border: 1px solid var(--republic-silver); border-radius: 16px; text-align: center; /* Ancla del logo, que va absoluto. */ position: relative; } .fr-checkout__bin[hidden] { display: none; } /* El logo del banco, arriba a la izquierda del recuadro. Es lo único que dice, dentro del recuadro, que este paso es el del convenio. Va **absoluto** y no en el flujo: en el flujo sumaba su alto más el margen —medidos, 60 px— a una caja que ya tenía el aire que pide el diseño. Absoluto se apoya en ese relleno que ya existía y la caja no crece ni un píxel. Los 32 px salen de ahí: con 12 arriba terminan en 44, justo antes de los 48 donde arranca el contenido. Más grande y se le montaría encima. */ .fr-checkout__bin-marca { position: absolute; top: var(--space-3); left: var(--space-4); width: 32px; height: 32px; object-fit: contain; } /* La indicación va debajo del campo, no arriba: es la etiqueta del campo —de ahí el `