diff --git a/.gitattributes b/.gitattributes index 2259c0ef20bc6f0af2720ffbabe193b7ddd41d1c..92fc8965e6ce2be7c5d93f3ccf087d77eb872ec4 100644 --- a/.gitattributes +++ b/.gitattributes @@ -379,3 +379,21 @@ a/Curso[[:space:]]de[[:space:]]Ecuaciones[[:space:]]Diferenciales/06-Transformad a/Curso[[:space:]]de[[:space:]]Ecuaciones[[:space:]]Diferenciales/06-Transformada[[:space:]]de[[:space:]]laplace/04-Propiedades[[:space:]]de[[:space:]]la[[:space:]]Transformada[[:space:]]de[[:space:]]Laplace.mp4 filter=lfs diff=lfs merge=lfs -text a/Curso[[:space:]]de[[:space:]]Ecuaciones[[:space:]]Diferenciales/06-Transformada[[:space:]]de[[:space:]]laplace/05-Transformada[[:space:]]Inversa[[:space:]]de[[:space:]]Laplace[[:space:]]Propiedades[[:space:]]y[[:space:]]Uso[[:space:]]de[[:space:]]Tablas.mp4 filter=lfs diff=lfs merge=lfs -text a/Curso[[:space:]]de[[:space:]]Ecuaciones[[:space:]]Diferenciales/06-Transformada[[:space:]]de[[:space:]]laplace/06-Transformada[[:space:]]Inversa[[:space:]]de[[:space:]]Laplace[[:space:]]Ejemplo[[:space:]]Práctico.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/01-Introducción[[:space:]]a[[:space:]]Macros[[:space:]]y[[:space:]]VBA/01-Macros[[:space:]]y[[:space:]]Visual[[:space:]]Basic[[:space:]]en[[:space:]]Excel[[:space:]]Avanzado.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/01-Introducción[[:space:]]a[[:space:]]Macros[[:space:]]y[[:space:]]VBA/01-slides-curso-de-excel-avanzado-con-macros_456dbdf3-f5ea-4474-b596-70908cf46d8c_fc611315-c344-42e9-802c-c1c3ac8be73c.pdf filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/01-Introducción[[:space:]]a[[:space:]]Macros[[:space:]]y[[:space:]]VBA/02-Uso[[:space:]]de[[:space:]]Macros[[:space:]]en[[:space:]]Excel[[:space:]]con[[:space:]]Visual[[:space:]]Basic.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/01-Introducción[[:space:]]a[[:space:]]Macros[[:space:]]y[[:space:]]VBA/02-slides-curso-de-excel-avanzado-con-macros_456dbdf3-f5ea-4474-b596-70908cf46d8c.pdf filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/01-Introducción[[:space:]]a[[:space:]]Macros[[:space:]]y[[:space:]]VBA/03-Creación[[:space:]]de[[:space:]]Diagramas[[:space:]]de[[:space:]]Flujo[[:space:]]para[[:space:]]Solución[[:space:]]de[[:space:]]Problemas.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/01-Introducción[[:space:]]a[[:space:]]Macros[[:space:]]y[[:space:]]VBA/04-Variables[[:space:]]y[[:space:]]Tipos[[:space:]]de[[:space:]]Datos[[:space:]]en[[:space:]]Visual[[:space:]]Basic.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/01-Introducción[[:space:]]a[[:space:]]Macros[[:space:]]y[[:space:]]VBA/05-Funciones[[:space:]]y[[:space:]]Subrutinas[[:space:]]en[[:space:]]Visual[[:space:]]Basic.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/01-Introducción[[:space:]]a[[:space:]]Macros[[:space:]]y[[:space:]]VBA/06-Automatización[[:space:]]de[[:space:]]Tareas[[:space:]]con[[:space:]]Macros[[:space:]]en[[:space:]]Excel.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/01-Introducción[[:space:]]a[[:space:]]Macros[[:space:]]y[[:space:]]VBA/06-peliculas-de-netflix_fe8390ff-ec52-4b81-a6e5-d657268afe62.xlsx filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/02-Funciones[[:space:]]y[[:space:]]subrutinas/01-Sintaxis[[:space:]]de[[:space:]]Funciones[[:space:]]y[[:space:]]Subrutinas[[:space:]]en[[:space:]]Visual[[:space:]]Basic.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/02-Funciones[[:space:]]y[[:space:]]subrutinas/02-Creación[[:space:]]de[[:space:]]Funciones[[:space:]]en[[:space:]]Visual[[:space:]]Basic[[:space:]]para[[:space:]]Excel.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/02-Funciones[[:space:]]y[[:space:]]subrutinas/03-Creación[[:space:]]de[[:space:]]Subrutinas[[:space:]]en[[:space:]]Visual[[:space:]]Basic[[:space:]]para[[:space:]]Excel.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/02-Funciones[[:space:]]y[[:space:]]subrutinas/04-Uso[[:space:]]de[[:space:]]MessageBox[[:space:]]en[[:space:]]Visual[[:space:]]Basic[[:space:]]para[[:space:]]Mostrar[[:space:]]Resultados.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/02-Funciones[[:space:]]y[[:space:]]subrutinas/05-Input[[:space:]]Box[[:space:]]en[[:space:]]Visual[[:space:]]Basic[[:space:]]Solicitar[[:space:]]Datos[[:space:]]al[[:space:]]Usuario.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/02-Funciones[[:space:]]y[[:space:]]subrutinas/06-Uso[[:space:]]de[[:space:]]Select[[:space:]]Case[[:space:]]en[[:space:]]Visual[[:space:]]Basic[[:space:]]para[[:space:]]Condicionales.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/02-Funciones[[:space:]]y[[:space:]]subrutinas/07-Condicionales[[:space:]]IFTHEN[[:space:]]en[[:space:]]Visual[[:space:]]Basic[[:space:]]Funciones[[:space:]]y[[:space:]]Ejercicios[[:space:]]Prácticos.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/02-Funciones[[:space:]]y[[:space:]]subrutinas/08-Ciclos[[:space:]]For[[:space:]]Next[[:space:]]en[[:space:]]Visual[[:space:]]Basic[[:space:]]para[[:space:]]Excel[[:space:]]Fibonacci[[:space:]]Automático.mp4 filter=lfs diff=lfs merge=lfs -text +a/Curso[[:space:]]de[[:space:]]Excel[[:space:]]Avanzado[[:space:]]con[[:space:]]Macros/02-Funciones[[:space:]]y[[:space:]]subrutinas/09-Ciclos[[:space:]]DoWhile[[:space:]]en[[:space:]]Visual[[:space:]]Basic[[:space:]]Suma[[:space:]]de[[:space:]]Dados[[:space:]]hasta[[:space:]]100.mp4 filter=lfs diff=lfs merge=lfs -text diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Lecturas recomendadas.txt" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..1a6037e3c9ffa25a01387eb8dfdebae96996a9cd --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://platzi.com/cursos/pensamiento-logico/ diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Macros y Visual Basic en Excel Avanzado.mp4" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Macros y Visual Basic en Excel Avanzado.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..aa6249816843b860c467f0495f1329d3fe639b3a --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Macros y Visual Basic en Excel Avanzado.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2bc40e9d3c4e6eeae684cf8895c2e8e7377e3509d86e8a0c76951d74710fe87f +size 38981365 diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Macros y Visual Basic en Excel Avanzado.vtt" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Macros y Visual Basic en Excel Avanzado.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..c6d85b5cb56050a126db5767f94c56915305c02c --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Macros y Visual Basic en Excel Avanzado.vtt" @@ -0,0 +1,139 @@ +WEBVTT + +00:00.000 --> 00:05.520 +Platzi, educación profesional efectiva. + +00:05.520 --> 00:08.760 +Hola, te doy la bienvenida al curso de +Excel avanzado en donde + +00:08.760 --> 00:10.160 +hablaremos de +macros. + +00:10.160 --> 00:13.520 +Yo soy Annie Martínez Parente y soy +analista senior de Business + +00:13.520 --> 00:15.400 +Intelligence en +Platzi. + +00:15.400 --> 00:17.040 +A lo largo de mi carrera profesional, + +00:17.040 --> 00:19.960 +me he dado cuenta que Excel es una +herramienta sumamente útil, + +00:19.960 --> 00:22.840 +ya que nos permite limpiar, analizar, + +00:22.840 --> 00:26.480 +manejar nuestra información y así obtener +lo que necesitamos + +00:26.480 --> 00:29.440 +para tener una buena toma de decisiones. + +00:29.440 --> 00:31.720 +Adicional al uso típico que tiene Excel, + +00:31.720 --> 00:35.400 +nosotros podemos utilizar el entorno de +Visual Basic for + +00:35.400 --> 00:38.960 +Applications, en donde nosotros podemos +grabar macros o crear + +00:38.960 --> 00:42.840 +subrutinas y funciones que nos agilicen +todo nuestro trabajo + +00:42.840 --> 00:45.600 +en +Excel. + +00:45.600 --> 00:48.480 +Visual Basic for Applications es el +lenguaje de macros que + +00:48.480 --> 00:52.000 +utiliza Microsoft a través de diferentes +aplicaciones. + +00:52.000 --> 00:54.560 +Esta es una manera muy específica en la +que nosotros + +00:54.560 --> 00:58.000 +nos vamos a comunicar con las aplicaciones +de Microsoft para + +00:58.000 --> 01:01.360 +que la computadora nos entienda +exactamente lo que nosotros + +01:01.360 --> 01:02.520 +necesitamos que +haga. + +01:05.680 --> 01:09.240 +Las macros son conjuntos de acciones que +se pueden ejecutar + +01:09.240 --> 01:11.600 +todas las veces que nosotros desemos. + +01:11.600 --> 01:14.440 +Es decir, si nosotros tenemos un documento +en el que + +01:14.440 --> 01:17.520 +constantemente tenemos que poner el mismo +formato, + +01:17.520 --> 01:21.080 +borrar las mismas columnas, agregar las +mismas fórmulas, + +01:21.080 --> 01:25.160 +podemos utilizar una macro que podemos +grabar o crear desde + +01:25.160 --> 01:28.760 +cero y de esta manera hacer que el trabajo +sea automático y que + +01:28.760 --> 01:31.040 +nos ahorre muchísimo +tiempo. + +01:31.040 --> 01:33.640 +Ahora te invito a que continues con +nosotros en este + +01:33.640 --> 01:38.920 +aprendizaje para que tú aprendas las +diferentes maneras en las + +01:38.920 --> 01:41.520 +que nosotros podemos utilizar las macros y +para que nos van + +01:41.520 --> 01:44.760 +a funcionar, que aprendas sobre los +diferentes tipos de datos + +01:44.760 --> 01:49.040 +que tenemos, cómo podemos hacer una +función y una subrutina + +01:49.040 --> 01:51.720 +dentro de nuestro entorno de Visual Basic. + +01:51.720 --> 01:55.360 +Nos vemos en la siguiente +clase. + diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Resumen.html" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..9f9264096b550bc8943581d6dacf18a25cbba3fb --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-Resumen.html" @@ -0,0 +1,81 @@ + + + + + + + Macros y Visual Basic en Excel Avanzado + + + +
+
+

Resumen

En el dinámico mundo de los negocios y la analítica de datos, Excel se posiciona como una herramienta invaluable. Este software no solo es el puente entre los análisis de datos masivos y las decisiones estratégicas, sino que también permite automatizar procesos gracias a las macros. Vamos a sumergirnos en el fascinante universo de las macros en Excel, una habilidad que te permitirá optimizar tus flujos de trabajo y ahorrar tiempo valioso.

+

¿Qué son las macros y cómo pueden revolucionar tu uso de Excel?

+

Las macros son secuencias de acciones automatizadas que puedes ejecutar tantas veces como lo necesites. ¿Te imaginas tener que dar el mismo formato, eliminar columnas, o agregar fórmulas repetidamente cada día? Con macros, estas tareas repetitivas se automatizan, acelerando significativamente tu productividad y reduciendo los errores humanos.

+

Aprender macros: una inversión de tiempo que transforma tu día a día

+
    +
  • Ahorro de tiempo: Al automatizar tareas tediosas, los profesionales pueden enfocarse en análisis más complejos y decisiones estratégicas.
    • +
  • Reducción de errores: Al realizar tareas automáticamente, la probabilidad de errores humanos disminuye.
    • +
  • Consistencia: Garantiza que las tareas se realicen del mismo modo cada vez, manteniendo la calidad y el formato del trabajo.
    • +
+

¿Qué es Visual Basic for Applications (VBA) y por qué es fundamental?

+

Visual Basic for Applications (VBA) es el lenguaje de programación utilizado por Microsoft para personalizar y automatizar tareas en sus aplicaciones, incluyendo Excel. Es mediante este entorno que se pueden crear macros, subrutinas y funciones, personalizando Excel más allá de sus capacidades por defecto.

+

Conociendo el entorno VBA: ¿Cómo empezar?

+
    +
  1. Grabación de macros: Permite capturar secuencias de acciones exactas en Excel sin necesidad de conocer código.
    2. +
  2. Creación desde cero: Programar desde cero permite personalizar hasta el más mínimo detalle.
    3. +
  3. Subrutinas y funciones: Con el conocimiento de VBA, se pueden crear potentes subrutinas (secuencias de comandos que ejecutan tareas específicas) y funciones para manipular y analizar datos de maneras más sofisticadas.
    4. +
+

¿Cómo benefician las macros a un Analista de Inteligencia de Negocios?

+

Para un analista de inteligencia de negocios, como Annie Martínez Parente de Platzi, Excel se convierte en más que una hoja de cálculo; es una plataforma de análisis y manipulación de datos. Con el uso eficiente de macros, las siguientes tareas se vuelven simples y rápidas:

+
    +
  • Limpieza de datos: Permitirte eliminar rápidamente duplicados, eliminar espacios en blanco innecesarios o transformar datos a formatos específicos.
    • +
  • Análisis de grandes volúmenes: Posibilitar ejecutar modelos de análisis complejos repetidamente con un solo clic.
    • +
  • Reporting constante: Facilitar la creación de informes regulares, asegurando que cada uno cumpla con estándares formales de presentación.
    • +
+

Ser competente en el uso de macros en Excel y VBA no solo potencia tu carrera profesional, sino que además, te da herramientas efectivas para manejar y presentar datos de forma eficiente. Te invitamos a continuar este viaje de aprendizaje y descubrir todo lo que las macros pueden ofrecerte. ¡Nos vemos en la siguiente clase para explorar aún más!

+
+
+ + \ No newline at end of file diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-slides-curso-de-excel-avanzado-con-macros_456dbdf3-f5ea-4474-b596-70908cf46d8c_fc611315-c344-42e9-802c-c1c3ac8be73c.pdf" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-slides-curso-de-excel-avanzado-con-macros_456dbdf3-f5ea-4474-b596-70908cf46d8c_fc611315-c344-42e9-802c-c1c3ac8be73c.pdf" new file mode 100644 index 0000000000000000000000000000000000000000..0573f01e9194f0286dfc2eb094e646cda092398b --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/01-slides-curso-de-excel-avanzado-con-macros_456dbdf3-f5ea-4474-b596-70908cf46d8c_fc611315-c344-42e9-802c-c1c3ac8be73c.pdf" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3c3896ae2f29e6aa696889c0f8819864f1df60bd5e541a961e57e385ecb060e7 +size 264188 diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-Resumen.html" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..45980a1c9709f3d76bf8202bd72efc381b903906 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-Resumen.html" @@ -0,0 +1,130 @@ + + + + + + + Uso de Macros en Excel con Visual Basic + + + +
+
+

Resumen

¿Por dónde empezar con Visual Basic en Excel?

+

Si alguna vez has querido ir más allá de las hojas de cálculo en Excel y estás pensando en automatizar tareas repetitivas, ¡la herramienta que necesitas es Visual Basic for Applications (VBA)! En esta guía, aprenderás cómo ingresar al entorno de Visual Basic desde tu documento de Excel y explorar sus funcionalidades, lo que te permitirá programar macros que transformen tu manera de trabajar.

+

¿Cómo acceder a la pestaña de desarrollador en Excel?

+

La pestaña desarrollador no aparece por defecto en Excel, pero activarla es un proceso sencillo:

+
    +
  1. Abre un libro nuevo de Excel.
    2. +
  2. Ve a la ficha Archivo y selecciona Más, luego haz clic en Opciones.
    3. +
  3. Dirígete a Personalizar cinta de opciones.
    4. +
  4. En la derecha, selecciona la pestaña Programador y haz clic en Aceptar.
    5. +
+

Una vez que habilites esta pestaña, verás diferentes secciones, como código y controles, listas para que las explores y comiences a programar.

+

¿Cómo guardar un archivo habilitado para macros?

+

Cuando utilizas macros en Excel, es crucial guardar tu archivo con el formato correcto para no perder ningún ajuste del entorno Visual Basic. Sigue estos pasos:

+
    +
  1. Clic en Archivo ➜ Guardar como.
    2. +
  2. Selecciona la carpeta destino.
    3. +
  3. En el tipo de archivo, elige Libro de Excel habilitado para macros (.xlsm).
    4. +
  4. Asigna un nombre al archivo y presiona Guardar.
    5. +
+

Si intentas guardar el documento en el formato estándar .xlsx mientras contiene una macro, recibirás un mensaje de error, ya que esta información no será compatible y podría perderse.

+

¿Cómo comenzar a programar en VBA?

+

Para insertar y escribir código VBA, sigue estas instrucciones:

+
    +
  1. Haz clic en la ficha Programador y selecciona Visual Basic.
    2. +
  2. En la ventana que aparece, notarás un panel izquierdo que muestra los proyectos y objetos de VBA.
    3. +
  3. Inserta un módulo desde el menú Insertar. Así, podrás comenzar a escribir tu código en el entorno expandido a la derecha.
    4. +
+

En este espacio, usando comandos en inglés, podrás indicar a Excel las tareas específicas que necesitas realizar. Recuerda que funciones y nombres como "This Workbook" estarán en inglés debido a las configuraciones internas del entorno VBA.

+

¿Cuáles son los siguientes pasos para aprovechar al máximo VBA?

+

Activar la ficha de desarrollador y explorar el entorno de Visual Basic es solo el comienzo. Aquí hay algunas sugerencias de lo que puedes hacer a continuación:

+
    +
  • Familiarízate con el lenguaje de programación VBA. Hay muchos recursos disponibles en línea, desde tutoriales hasta foros donde puedes resolver dudas específicas.
    • +
  • Comienza con pequeñas tareas automatizadas. Por ejemplo, prueba grabar una macro sencilla y edítala en VBA para entender su funcionamiento.
    • +
  • Explora ejemplos de código en línea. El aprendizaje se acelera cuando analizas y ajustas códigos existentes según tus necesidades.
    • +
+

¡La clave está en la práctica! Anímate a abrir Excel y sumergirte en el poderoso mundo de VBA. Compártelo en los comentarios qué funcionalidades del entorno te entusiasman más para utilizar y sigue progresando en tus habilidades de programación.

+
+
+ + \ No newline at end of file diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-Uso de Macros en Excel con Visual Basic.mp4" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-Uso de Macros en Excel con Visual Basic.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..f888484269ad020274296be70b9f6ef2d2d5264d --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-Uso de Macros en Excel con Visual Basic.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f097d85e6722c954e400164c0dbdf2d5050edd8d21c941c912643db2b7900500 +size 41160222 diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-Uso de Macros en Excel con Visual Basic.vtt" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-Uso de Macros en Excel con Visual Basic.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..d3925edd17343906fef0936782a7cf778036e2ae --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-Uso de Macros en Excel con Visual Basic.vtt" @@ -0,0 +1,387 @@ +WEBVTT + +00:00.000 --> 00:01.480 +¿Ah? + +00:01.480 --> 00:05.560 +Platzi, educación profesional efectiva. + +00:05.560 --> 00:07.960 +Hola, te doy la bienvenida a esta clase. + +00:07.960 --> 00:10.640 +Hoy vamos a explorar el espacio de Visual +Basic y vamos a + +00:10.640 --> 00:13.720 +aprender cómo desde nuestro documento de +Excel podemos + +00:13.720 --> 00:15.320 +ingresar a +esto. + +00:15.320 --> 00:18.920 +Para eso vamos a necesitar abrir un libro +nuevo de Excel. + +00:18.920 --> 00:20.120 +Vamos a nuestro +documento. + +00:20.120 --> 00:22.600 +Cuando nosotros abrimos un libro nuevo de +Excel, + +00:22.600 --> 00:24.320 +lo vemos de la siguiente +manera. + +00:24.320 --> 00:27.120 +Y vamos a ver que tenemos algunas fichas +en la parte + +00:27.120 --> 00:28.480 +superior. + +00:28.480 --> 00:31.520 +Por default, Excel no nos va a mostrar una +ficha que se llama + +00:31.520 --> 00:32.720 +desarrollador. + +00:32.720 --> 00:35.800 +Y para eso necesitamos ir a la +configuración de nuestro libro + +00:35.800 --> 00:38.200 +para poderlo +abrir. + +00:38.200 --> 00:42.840 +Entonces, nos vamos a ir a la ficha +archivo y en donde dice + +00:42.840 --> 00:46.720 +más, vamos a dar clic en +opciones. + +00:46.720 --> 00:51.400 +Se nos va a abrir nuestro menú de las +opciones de Excel y + +00:51.400 --> 00:56.760 +vamos a dar clic en personalizar la cinta +de opciones. + +00:56.760 --> 00:59.280 +En la parte de la derecha vamos a ver que +tenemos las + +00:59.280 --> 01:03.360 +diferentes pestañas principales y aparecen +marcadas. + +01:03.360 --> 01:06.440 +Aquí nosotros podemos seleccionar la +pestaña de + +01:06.440 --> 01:09.160 +programador y dar clic en +aceptar. + +01:11.840 --> 01:14.720 +Ahora sí, nos va a aparecer en la parte +superior la pestaña de + +01:14.720 --> 01:18.800 +programador y vamos a ver que incluye +diferentes secciones. + +01:18.800 --> 01:21.520 +Primero tenemos la sección de código en +donde vemos Visual + +01:21.520 --> 01:23.040 +Basic. + +01:23.040 --> 01:26.840 +Donde vemos también el botón de macros, +la opción de grabar + +01:26.840 --> 01:29.080 +macros, las referencias y la seguridad. + +01:29.080 --> 01:31.080 +Vamos a ver también los complementos, + +01:31.080 --> 01:35.800 +los diferentes controles y el +XML. + +01:35.800 --> 01:39.560 +Cuando nosotros vamos a utilizar una macro +en nuestro documento, + +01:39.560 --> 01:42.240 +es necesario que cambiemos el formato con +el que lo estamos + +01:42.240 --> 01:43.760 +guardando. + +01:43.760 --> 01:46.680 +Por default, Excel va a guardar nuestro +documento con la + +01:46.680 --> 01:50.040 +terminación.xlsx. + +01:50.040 --> 01:54.840 +Y nosotros lo necesitamos cambiar para que +sea.xslm. + +01:54.840 --> 01:57.840 +Vamos a +hacerlo. + +01:57.840 --> 02:00.520 +Nos vamos a ir a +archivo. + +02:00.520 --> 02:03.760 +Vamos a dar clic en guardar +como. + +02:03.760 --> 02:06.960 +Vamos a elegir en la carpeta en la que +nosotros queremos que + +02:06.960 --> 02:08.360 +esto +quede. + +02:08.360 --> 02:13.280 +Y en el tipo vamos a seleccionar en el +menú desplegable, + +02:13.280 --> 02:20.160 +donde dice libro de Excel habilitado para +macros. + +02:20.160 --> 02:23.760 +Le voy a poner el nombre macros y damos +clic en guardar. + +02:26.560 --> 02:29.880 +Si nosotros estamos utilizando una macro y +queremos guardar + +02:29.880 --> 02:33.560 +nuestro documento en el formato default +que nos da Excel, + +02:33.560 --> 02:37.320 +automáticamente nos aparecerá un mensaje +de error diciendo que + +02:37.320 --> 02:39.720 +el formato pues no va a ser compatible o +que se perderán + +02:39.720 --> 02:42.400 +los cambios de lo que nosotros hayamos +hecho en el entorno + +02:42.400 --> 02:44.600 +Visual +Basic. + +02:44.600 --> 02:47.680 +Ahora, para poder acceder, vamos a dar +clic nosotros en la + +02:47.680 --> 02:52.240 +ficha de programador, en el botón que dice +Visual Basic. + +02:52.240 --> 02:55.640 +Nos va a aparecer ahora esta ventana en +donde nosotros ya + +02:55.640 --> 02:58.520 +podemos ver que en la parte superior nos +aparece el nombre + +02:58.520 --> 03:01.600 +como nosotros guardamos el documento con +la terminación + +03:01.600 --> 03:04.920 +.xlsx. + +03:04.920 --> 03:07.320 +De esta manera, nosotros estamos seguros +de que todo lo + +03:07.320 --> 03:09.880 +que trabajemos en este entorno sí se va a +guardar de manera + +03:09.880 --> 03:11.560 +correcta. + +03:11.560 --> 03:14.040 +Después, en la ventana de la izquierda, + +03:14.040 --> 03:19.840 +nosotros vamos a ver vbaproject y del +archivo de macros, + +03:19.840 --> 03:22.720 +que es el documento sobre el cual estamos +trabajando. + +03:22.720 --> 03:25.480 +Después, nos aparece la carpeta con todos +los objetos que va + +03:25.480 --> 03:29.960 +a incluir las hojas que tenga este +documento y la sección de + +03:29.960 --> 03:31.240 +este +documento. + +03:31.240 --> 03:33.840 +Y si nos fijamos, en la parte de la +derecha nos aparece una + +03:33.840 --> 03:37.720 +sección en gris en donde nosotros no +podemos hacer nada. + +03:37.720 --> 03:41.320 +Para comenzar a trabajar, nosotros +necesitamos insertar un + +03:41.320 --> 03:42.360 +módulo. + +03:42.360 --> 03:49.240 +Nos vamos a ir al menú Insertar y vamos a +seleccionar Módulo. + +03:49.240 --> 03:52.080 +Si nos fijamos, en nuestro menú de la +izquierda ahora nos + +03:52.080 --> 03:55.600 +aparecen los objetos de Excel y también +nos aparece el folder + +03:55.600 --> 03:56.760 +con los +módulos. + +03:56.760 --> 03:59.080 +Y este es el módulo +1. + +03:59.080 --> 04:04.920 +Nosotros aquí podemos importar o exportar +este archivo o podemos + +04:04.920 --> 04:07.960 +quitar este módulo si ya no lo necesitamos. + +04:07.960 --> 04:10.760 +De igual manera, nosotros lo podemos +ocultar para que no se + +04:10.760 --> 04:11.260 +vea. + +04:14.920 --> 04:18.480 +En la parte de la derecha ya nos aparece +en blanco el entorno + +04:18.480 --> 04:22.440 +donde nosotros podemos empezar a escribir +directamente el código + +04:22.440 --> 04:24.680 +para darle instrucciones a nuestro Excel +sobre lo que + +04:24.680 --> 04:26.280 +nosotros necesitamos +hacer. + +04:29.040 --> 04:31.760 +Cuando nosotros estamos utilizando Visual +Basic for + +04:31.760 --> 04:34.280 +Applications, nos vamos a dar cuenta que a +pesar de que + +04:34.280 --> 04:37.240 +nuestro Excel esté en español, va a haber +muchas cosas que nos + +04:37.240 --> 04:38.720 +aparecerán en +inglés. + +04:38.720 --> 04:41.800 +Por ejemplo, aquí nos aparece This Workbook. + +04:41.800 --> 04:44.880 +Esto no lo vamos a poder cambiar ya que en +el entorno hay + +04:44.880 --> 04:48.680 +muchas cosas que simplemente están en este +idioma. + +04:48.680 --> 04:52.080 +De igual manera, cuando nosotros estemos +utilizando el lenguaje + +04:52.080 --> 04:55.440 +de programación para escribir directamente +en nuestra ventana + +04:55.440 --> 04:58.640 +de módulo, vamos a tener que utilizar los +comandos en + +04:58.640 --> 04:59.600 +inglés. + +04:59.600 --> 05:02.120 +Ahora te invito a que tú, desde tu Excel, + +05:02.120 --> 05:05.080 +actives esta ficha para que puedas entrar +al entorno de + +05:05.080 --> 05:07.760 +Visual Basic, entres y lo +explores. + +05:07.760 --> 05:11.200 +Y nos dejes en los comentarios qué cosas +tienes muchas ganas + +05:11.200 --> 05:14.600 +de ya empezar a utilizar en nuestro +entorno de macros. + +05:14.600 --> 05:39.560 +Nos vemos en la siguiente +clase. + diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-slides-curso-de-excel-avanzado-con-macros_456dbdf3-f5ea-4474-b596-70908cf46d8c.pdf" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-slides-curso-de-excel-avanzado-con-macros_456dbdf3-f5ea-4474-b596-70908cf46d8c.pdf" new file mode 100644 index 0000000000000000000000000000000000000000..0573f01e9194f0286dfc2eb094e646cda092398b --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/02-slides-curso-de-excel-avanzado-con-macros_456dbdf3-f5ea-4474-b596-70908cf46d8c.pdf" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3c3896ae2f29e6aa696889c0f8819864f1df60bd5e541a961e57e385ecb060e7 +size 264188 diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Creaci\303\263n de Diagramas de Flujo para Soluci\303\263n de Problemas.mp4" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Creaci\303\263n de Diagramas de Flujo para Soluci\303\263n de Problemas.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..ac8e5931abf38315566513db9e6052c33a6ed522 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Creaci\303\263n de Diagramas de Flujo para Soluci\303\263n de Problemas.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f4ca2344bb29fba8e68887ab04729e006e3e6355a533ccb0f154b245aa375b05 +size 81593189 diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Creaci\303\263n de Diagramas de Flujo para Soluci\303\263n de Problemas.vtt" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Creaci\303\263n de Diagramas de Flujo para Soluci\303\263n de Problemas.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..b7b2f8cf07098a262f991b08e261c0d4e516003b --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Creaci\303\263n de Diagramas de Flujo para Soluci\303\263n de Problemas.vtt" @@ -0,0 +1,262 @@ +WEBVTT + +00:00.000 --> 00:05.640 +Platzi, educación profesional efectiva. + +00:05.640 --> 00:08.120 +Hola, te doy la bienvenida a esta clase. + +00:08.120 --> 00:11.080 +Hoy vamos a platicar sobre los diagramas +de flujo. + +00:11.080 --> 00:13.600 +Un diagrama de flujo es una manera visual +en la que + +00:13.600 --> 00:17.240 +nosotros podemos poner el algoritmo o el +proceso que vamos + +00:17.240 --> 00:20.880 +a utilizar para resolver un problema en +específico. + +00:20.880 --> 00:22.880 +Esto se relaciona con el tema de macros, + +00:22.880 --> 00:26.200 +ya que cuando nosotros queremos llegar a +un resultado, + +00:26.200 --> 00:29.960 +necesitamos mapear y tener claro cuáles +van a ser + +00:29.960 --> 00:32.760 +estos pasos a seguir antes de pasar al +entorno de Visual + +00:32.760 --> 00:35.240 +Basic y comenzar directamente a programarlo. + +00:38.240 --> 00:40.600 +Cuando nosotros trabajamos con diagramas +de flujo, + +00:40.600 --> 00:44.320 +una muy buena práctica es utilizar una +figura distinta + +00:44.320 --> 00:47.920 +para el contenido de cada uno de estos pasos. + +00:47.920 --> 00:52.080 +Nosotros vamos a utilizar un círculo para +el inicio y los + +00:52.080 --> 00:55.040 +datos y parámetros, que es la información +con la que + +00:55.040 --> 00:57.800 +nosotros vamos a alimentar a nuestro proceso, + +00:57.800 --> 01:01.760 +va a ir siempre en un rectángulo inclinado. + +01:01.760 --> 01:04.680 +Las flechas nos van a indicar cuál es el +proceso a seguir o + +01:04.680 --> 01:07.400 +los diferentes caminos que se pueden tomar. + +01:07.400 --> 01:10.640 +Después, con estos parámetros, vamos a +pasar hacia alguna + +01:10.640 --> 01:12.320 +actividad en +específico. + +01:12.320 --> 01:15.440 +Las actividades las vamos a ver en un +rectángulo. + +01:15.440 --> 01:17.400 +Después de que se completa esta actividad, + +01:17.400 --> 01:20.800 +podemos pasar a una decisión, en donde +normalmente hay un + +01:20.800 --> 01:21.480 +condicional. + +01:21.480 --> 01:24.280 +Si pasa esto, entonces sigue por este camino. + +01:24.280 --> 01:27.640 +Y si pasa esta otra cosa, entonces ve por +el otro camino. + +01:27.640 --> 01:29.680 +Y como vemos en el ejemplo de +acá, + +01:29.680 --> 01:32.840 +si se toma dependiendo del resultado de la +decisión, + +01:32.840 --> 01:36.760 +va a devolverse hacia los datos o +parámetros o ahí terminará + +01:36.760 --> 01:37.640 +nuestro +flujo. + +01:41.600 --> 01:45.600 +En este caso, nosotros tenemos un flujo en +donde nosotros el + +01:45.600 --> 01:49.240 +problema que intentamos resolver es cuál +de los tres números es + +01:49.240 --> 01:50.320 +mayor. + +01:50.320 --> 01:53.480 +En este caso, vemos el inicio con un +círculo y luego los tres + +01:53.480 --> 01:55.920 +parámetros distintos, que son A, B y C. + +01:55.920 --> 01:58.760 +Cada una de estas letras está relacionada +con un número que + +01:58.760 --> 02:00.960 +vemos en un momento +dado. + +02:00.960 --> 02:05.040 +Después, vemos que tenemos un rombo que +esto implica una + +02:05.040 --> 02:06.720 +decisión +específica. + +02:06.720 --> 02:10.760 +Entonces, primero va a ser la comparación +de A y B. + +02:10.760 --> 02:14.360 +Si A es mayor que B y A también es mayor +que C, + +02:14.360 --> 02:17.640 +entonces vamos a seguir por la flecha +donde esta respuesta es + +02:17.640 --> 02:18.280 +sí. + +02:18.280 --> 02:21.680 +Y entonces la acción será dar el valor de A. + +02:21.680 --> 02:24.600 +Y el siguiente paso será terminar con esto. + +02:24.600 --> 02:27.560 +Si en nuestra decisión la respuesta es que no, + +02:27.560 --> 02:30.440 +que A no es mayor que B o que no es mayor +que C, + +02:30.440 --> 02:33.840 +entonces pasaremos a otra decisión en +donde comparamos si + +02:33.840 --> 02:36.880 +el valor de B es mayor al de +C. + +02:36.880 --> 02:40.840 +Si la respuesta es sí, entonces la acción +que vamos a hacer es + +02:40.840 --> 02:43.240 +arrojar el valor de B y si la respuesta es no, + +02:43.240 --> 02:45.040 +arrojaremos el valor de +C. + +02:45.040 --> 02:48.000 +Y en ese punto termina nuestro flujo. + +02:48.000 --> 02:50.840 +Si se dan cuenta, es importante que nosotros, + +02:50.840 --> 02:54.880 +aunque parezcan obvios los pasos, vayamos +desglosándolos. + +02:54.880 --> 02:57.960 +Porque de esta manera nosotros vamos a +poder transmitirle al + +02:57.960 --> 03:00.960 +espacio Visual Basic cuáles son los pasos +que necesitamos que + +03:00.960 --> 03:03.720 +siga para arrojarnos el resultado correcto. + +03:03.720 --> 03:07.680 +Ahora te invito a que hagas tú tu propio +diagrama de flujo. + +03:07.680 --> 03:12.880 +Puedes utilizar el ejercicio de hacer una +suma desde el 0 hasta + +03:12.880 --> 03:15.800 +un número n que tú +elijas. + +03:15.800 --> 03:18.160 +O puedes utilizar cualquier otro ejemplo +que te parezca + +03:18.160 --> 03:19.160 +interesante. + +03:19.160 --> 03:21.520 +Nos puedes dejar en los comentarios cómo +se ve tu + +03:21.520 --> 03:22.400 +diagrama. + +03:22.400 --> 03:25.440 +Y también en la sección de recursos de +este curso te voy a + +03:25.440 --> 03:29.080 +dejar la liga hacia un curso de Platzi en +donde tú vas a poder + +03:29.080 --> 03:31.200 +profundizar sobre los diagramas de flujo. + +03:31.200 --> 03:50.640 +Nos vemos en la siguiente +clase. + diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Lecturas recomendadas.txt" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..1a6037e3c9ffa25a01387eb8dfdebae96996a9cd --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://platzi.com/cursos/pensamiento-logico/ diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Resumen.html" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..48e71dec60fb88d1043d0739dfc325e95da274ce --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/03-Resumen.html" @@ -0,0 +1,119 @@ + + + + + + + Creación de Diagramas de Flujo para Solución de Problemas + + + +
+
+

Resumen

¿Qué son los diagramas de flujo y por qué son importantes?

+

Los diagramas de flujo son herramientas visuales esenciales para desglosar un algoritmo o proceso que buscamos implementar para resolver un problema específico. Son utilizados ampliamente en el ámbito de la programación, gestión de procesos y enseñanza de conceptos complejos, ya que permiten visualizar y comprender cada paso de un proceso en particular. Esto se alinea especialmente con el ámbito de las macros, donde es crucial tener claridad respecto a los pasos a seguir antes de adentrarse en la programación en Visual Basic. La capacidad de mapear y clarificar un proceso a través de los diagramas de flujo facilita que podamos comunicar eficazmente nuestros objetivos dentro del entorno de programación.

+

¿Cuáles son los elementos básicos de un diagrama de flujo?

+

Para crear un diagrama de flujo efectivo, una buena práctica consiste en usar diferentes formas para representar cada tipo de elemento del proceso:

+
    +
  • Inicio y fin: Se representa mediante un círculo.
    • +
  • Datos y parámetros: Se colocan dentro de un rectángulo inclinado y representan la información que alimentará al proceso.
    • +
  • Flechas: Indican el flujo o las diferentes rutas que se pueden tomar dentro del proceso.
    • +
  • Actividades: Se muestran dentro de un rectángulo y representan acciones específicas en el proceso.
    • +
  • Decisiones: Se simbolizan con un rombo, caracterizando la bifurcación del flujo según ciertas condiciones o condicionales.
    • +
+

¿Cómo se representan las decisiones y los condicionales en los diagramas de flujo?

+

Las decisiones en un diagrama de flujo son momentos críticos donde se determina el camino a seguir basándose en ciertas condiciones. Por ejemplo, en el problema de determinar cuál de tres números es mayor, se utiliza un rombo para representar una decisión donde se comparan dos o más valores. Dependiendo del resultado, se sigue un camino diferente:

+
    +
  1. Comparación de valores: Se utiliza para verificar condiciones. Por ejemplo, comparar A y B o verificar si A es mayor que C.
    2. +
  2. Resultado de la decisión: Si un condicional es verdadero, se sigue el camino marcado como "sí". Si es falso, se elige la ruta "no".
    3. +
  3. Finalización del proceso: Después de recorrer los caminos de decisiones, el flujo concluirá al obtener el resultado esperado, como determinar qué número es el mayor.
    4. +
+

¿Cómo iniciar la creación de tu propio diagrama de flujo?

+

El desarrollo de un diagrama de flujo puede parecer sencillo, pero es un ejercicio meticuloso que te ayudará a estructurar tus pensamientos y procesos. Te propongo un ejercicio práctico para iniciar:

+
    +
  • Ejercicio de suma: Crea un diagrama de flujo que calcule la suma desde 0 hasta un número n que elijas. Representa cada paso desde la inicialización hasta la recopilación de la suma total.
    • +
  • Compartir resultados: Una vez concluido, puedes compartir tu diagrama en los comentarios. Esto no solo te servirá de retroalimentación, sino que también enriquecerá el aprendizaje de los demás.
    • +
+

Como puedes ver, el uso de diagramas de flujo no solo mejora la planificación en procesos complejos sino que también es una habilidad esencial en el perfil de cualquier profesional dedicado a la automatización y optimización de tareas.

+
+
+ + \ No newline at end of file diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/04-Resumen.html" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/04-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..f6c00d37a2dae64c03779aa93c555ea3e3ee6482 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/04-Resumen.html" @@ -0,0 +1,132 @@ + + + + + + + Variables y Tipos de Datos en Visual Basic + + + +
+
+

Resumen

Las variables y tipos de datos son elementos fundamentales en la programación con Visual Basic, constituyendo la base para almacenar y manipular información de manera eficiente. Dominar estos conceptos es esencial para desarrollar aplicaciones robustas y optimizadas, permitiéndote crear soluciones más efectivas en tus proyectos de programación.

+

¿Qué son las variables y cuál es su importancia en Visual Basic?

+

Las variables actúan como contenedores versátiles que almacenan diferentes tipos de información durante la ejecución de un programa. Pueden guardar desde valores numéricos hasta cadenas de texto, funcionando como elementos fundamentales para el procesamiento de datos.

+

¿Por qué es crucial elegir el tipo de dato correcto?

+

La selección adecuada del tipo de dato impacta directamente en:

+
    +
  • El rendimiento del programa
    • +
  • La optimización del espacio en memoria
    • +
  • La precisión de los cálculos
    • +
  • La eficiencia general de la aplicación
    • +
+

¿Cuáles son los principales tipos de datos en Visual Basic?

+

¿Cómo manejar datos numéricos enteros?

+
    +
  • Integer: ideal para números enteros de longitud corta
    • +
  • Long: perfecto para números enteros de mayor magnitud
    • +
  • La elección entre ambos dependerá del rango de valores necesarios
    • +
+

¿Qué opciones existen para números decimales?

+
    +
  • Single: permite almacenar números con decimales
    • +
  • Double: ofrece mayor precisión en decimales
    • +
  • La selección dependerá de la exactitud requerida en los cálculos
    • +
+

¿Qué otros tipos de datos son fundamentales?

+
    +
  • String: diseñado para almacenar cadenas de texto
    • +
  • Boolean: específico para valores verdadero/falso, destacando por su eficiencia
    • +
  • Variant: versátil pero pesado, permite almacenar cualquier tipo de dato
    • +
+

¿Cuáles son las mejores prácticas al trabajar con tipos de datos?

+
    +
  • Utilizar boolean cuando solo necesites valores verdadero/falso
    • +
  • Optar por long cuando tengas dudas sobre el tamaño de los números enteros
    • +
  • Evitar el uso excesivo de variant para optimizar el rendimiento
    • +
  • Considerar la precisión necesaria al elegir entre single y double
    • +
+

La comprensión y aplicación adecuada de variables y tipos de datos en Visual Basic te permitirá desarrollar programas más eficientes y mejor estructurados, estableciendo una base sólida para tu crecimiento como programador.

+
+
+ + \ No newline at end of file diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/04-Variables y Tipos de Datos en Visual Basic.mp4" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/04-Variables y Tipos de Datos en Visual Basic.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..bda1267391d8539e3ddcc48fc16dbd3484bac0d5 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/04-Variables y Tipos de Datos en Visual Basic.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:24aa6ac39e607aa5c1a5c04dc1a156b3981bec52d282ba8bb2dc4baeb94fc7ca +size 61783039 diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/04-Variables y Tipos de Datos en Visual Basic.vtt" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/04-Variables y Tipos de Datos en Visual Basic.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..1bce30b22cd353e8daecdc7ab284647322f8b589 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/04-Variables y Tipos de Datos en Visual Basic.vtt" @@ -0,0 +1,180 @@ +WEBVTT + +00:00.000 --> 00:05.000 +Platzi, educación profesional efectiva. + +00:05.000 --> 00:08.000 +Hola, qué gusto tenerte aquí de nuevo. + +00:08.000 --> 00:11.500 +Hoy vamos a platicar sobre las variables y +los tipos de datos + +00:11.500 --> 00:15.000 +que vamos a estar utilizando en el entorno +de Visual Basic. + +00:15.000 --> 00:18.500 +Las variables van a ser estas letras que +nosotros vamos a + +00:18.500 --> 00:21.500 +utilizar para guardar algún otro valor. + +00:21.500 --> 00:25.000 +Estas variables, por ejemplo, una x podría +representar el + +00:25.000 --> 00:35.000 +valor de 18 o una z podría incluso +contener algún valor de texto. + +00:35.000 --> 00:38.000 +También vamos a ver que nosotros tenemos +diferentes tipos de + +00:38.000 --> 00:41.000 +datos con los que vamos a estar trabajando. + +00:41.000 --> 00:44.000 +Vamos a tener que ir definiendo los datos, +el tipo de datos de + +00:44.000 --> 00:49.000 +cada una de las variables dependiendo de +la información que va a contener. + +00:49.000 --> 00:52.000 +Como lo habíamos platicado en la clase pasada, +sabemos que + +00:52.000 --> 00:55.000 +cuando estamos trabajando en el entorno de +Visual Basic vamos a + +00:55.000 --> 00:59.000 +tener que utilizar los nombres de las +cosas en inglés. + +00:59.000 --> 01:04.000 +En este caso, los tipos de datos los vamos +a tener que poner en este formato. + +01:04.000 --> 01:08.000 +Entonces, el primer tipo de dato que +tenemos es ínteger. + +01:08.000 --> 01:11.000 +Este tipo de dato nos va a funcionar +cuando nosotros estemos + +01:11.000 --> 01:17.000 +trabajando con números enteros que sean de +una longitud relativamente corta. + +01:17.000 --> 01:20.000 +Después tenemos el tipo de dato long. + +01:20.000 --> 01:24.000 +Esto también va a almacenar números enteros, +pero de una longitud + +01:24.000 --> 01:28.000 +mucho más grande que los datos ínteger. + +01:28.000 --> 01:33.000 +Cuando nosotros no sabemos exactamente la +longitud y cuál nos conviene usar, + +01:33.000 --> 01:37.000 +nos podemos ir a la segura utilizando long, +pero eso va a implicar que + +01:37.000 --> 01:41.000 +ocupe mucho más espacio este tipo de dato. + +01:41.000 --> 01:46.000 +Después tenemos el dato single, que aquí +vamos a nosotros a poder + +01:46.000 --> 01:49.000 +almacenar números +decimales. + +01:49.000 --> 01:53.000 +Aquí el tipo de dato double nos va a +permitir también almacenar decimales, + +01:53.000 --> 01:57.000 +pero como va a contener muchos más decimales, +la precisión va a ser + +01:57.000 --> 01:59.000 +mucho +mayor. + +01:59.000 --> 02:02.000 +Cuando nosotros estamos trabajando con +cadenas de texto, + +02:02.000 --> 02:06.000 +vamos a utilizar el tipo de dato string. + +02:06.000 --> 02:10.000 +También tenemos el tipo de dato boolean, +en el que nosotros podemos + +02:10.000 --> 02:15.000 +almacenar valores de verdadero o de falso, +y solamente es eso, es binario. + +02:15.000 --> 02:20.000 +Este es un tipo de dato sumamente útil +porque es muy ligero y no tiene + +02:20.000 --> 02:24.000 +mucho peso, entonces si nosotros +necesitamos almacenar nada más esta + +02:24.000 --> 02:28.000 +información, lo podemos hacer para ser +mucho más eficiente en nuestra + +02:28.000 --> 02:30.000 +macro o +programa. + +02:30.000 --> 02:34.000 +Y por último tenemos el tipo de dato variant. + +02:34.000 --> 02:38.000 +Este tipo de dato nos permite almacenar +cualquier valor que nosotros + +02:38.000 --> 02:40.000 +necesitemos. + +02:40.000 --> 02:44.000 +Esto nos va a ayudar cuando nosotros no +estamos seguros del tipo de + +02:44.000 --> 02:48.000 +resultado que vamos a tener y podemos pues +dejarlo abierto. + +02:48.000 --> 02:53.000 +Pero la contraparte es que este tipo de +dato es sumamente pesado porque + +02:53.000 --> 02:55.000 +va a ocupar mucho +espacio. + +02:55.000 --> 02:59.000 +Ahora te invito a que respondas el quiz y +que continúes aprendiendo. + +02:59.000 --> 03:14.000 +Nos vemos en la siguiente +clase. + diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/05-Funciones y Subrutinas en Visual Basic.mp4" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/05-Funciones y Subrutinas en Visual Basic.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..a08cf6e79e0928a2682ad29afe2b6b21a44dd8d6 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/05-Funciones y Subrutinas en Visual Basic.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ae1de0bfb3b1718ab855fb57ca6a8e6ae935db7604c4b10a7b8fd44df86fded7 +size 41212905 diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/05-Funciones y Subrutinas en Visual Basic.vtt" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/05-Funciones y Subrutinas en Visual Basic.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..c87ca8af638f55db34a843c2f11b733465a84b76 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/05-Funciones y Subrutinas en Visual Basic.vtt" @@ -0,0 +1,149 @@ +WEBVTT + +00:00.000 --> 00:05.560 +Platzi, educación profesional efectiva. + +00:05.560 --> 00:07.840 +Hola, te doy la bienvenida a esta clase. + +00:07.840 --> 00:11.160 +Hoy vamos a platicar sobre las funciones y +las subrutinas. + +00:11.160 --> 00:13.440 +Cuando nosotros estamos trabajando en el +espacio de + +00:13.440 --> 00:17.760 +Visual Basic, podemos ya sea grabar o +programar directamente + +00:17.760 --> 00:21.360 +una función o una +subrutina. + +00:21.360 --> 00:25.480 +Las funciones y subrutinas son +procedimientos que realizan una + +00:25.480 --> 00:28.080 +o varias +actividades. + +00:28.080 --> 00:30.460 +Nosotros también podemos utilizar estas +funciones y + +00:30.460 --> 00:32.840 +subrutinas las veces que nosotros +consideremos + +00:32.840 --> 00:37.280 +necesario y que vuelvan a repetir estas +actividades. + +00:37.280 --> 00:40.760 +También se pueden conectar con otro tipo +de procedimientos o + +00:40.760 --> 00:44.760 +con otras funciones y subrutinas y +activarlas desde + +00:44.760 --> 00:49.240 +la misma subrutina +original. + +00:49.240 --> 00:52.440 +Estas funciones también pueden o no tener +un parámetro. + +00:52.440 --> 00:55.960 +Es decir, de pronto van a necesitar que el +usuario les + +00:55.960 --> 00:58.720 +ingrese algún dato o algo de información +para que puedan + +00:58.720 --> 01:00.760 +seguir avanzando y hacer las actividades +que les + +01:00.760 --> 01:01.760 +corresponden. + +01:01.760 --> 01:04.460 +Pero también hay casos en los que no +necesitan nada de + +01:04.460 --> 01:07.000 +información de parte del +usuario. + +01:07.000 --> 01:10.240 +La diferencia entre funciones y subrutinas +es que las + +01:10.240 --> 01:12.720 +funciones son aquellos procedimientos que +nos van a + +01:12.720 --> 01:14.880 +arrojar un valor de +retorno. + +01:14.880 --> 01:17.840 +Y las subrutinas no tendrán un valor de +retorno, + +01:17.840 --> 01:21.920 +sino que simplemente realizarán una acción +dentro de nuestro + +01:21.920 --> 01:25.040 +documento, que obviamente vamos a poder +ver los resultados como + +01:25.040 --> 01:26.120 +tal. + +01:26.120 --> 01:30.440 +Entonces, digamos que una función sería si +nosotros + +01:30.440 --> 01:34.840 +ingresamos el algoritmo para hacer un +cálculo de ver cuál + +01:34.840 --> 01:38.600 +sería nuestra edad en el +2050. + +01:38.600 --> 01:40.680 +Y nos arrojaría un +resultado. + +01:40.680 --> 01:43.900 +Y una subrutina sería cuando nosotros +utilicemos el + +01:43.900 --> 01:47.720 +procedimiento para, por ejemplo, dar +formato a nuestro + +01:47.720 --> 01:51.960 +documento de Excel o quitar algunas columnas. + +01:51.960 --> 01:55.440 +Ahora te voy a dejar un quiz para que nos +demuestres lo + +01:55.440 --> 01:58.120 +mucho que has aprendido sobre las +funciones y subrutinas. + +01:58.120 --> 02:23.080 +Y nos vemos en la siguiente +clase. + diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/05-Resumen.html" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/05-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..773038614909768156e7e0905a5c9e1a20c1a0da --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/05-Resumen.html" @@ -0,0 +1,126 @@ + + + + + + + Funciones y Subrutinas en Visual Basic + + + +
+
+

Resumen

Las funciones y subrutinas son elementos fundamentales en la programación con Visual Basic, actuando como bloques de construcción que permiten automatizar y organizar tareas de manera eficiente. Estos componentes son esenciales para cualquier desarrollador que busque crear soluciones robustas y mantenibles en Excel.

+

¿Cuál es la diferencia entre funciones y subrutinas?

+

La distinción principal radica en su propósito y comportamiento. Las funciones son procedimientos que devuelven un valor específico como resultado de su ejecución. Por ejemplo, si creamos una función para calcular la edad en el año 2050, esta nos devolverá un número concreto.

+

Las subrutinas, por su parte, ejecutan acciones sin devolver valores. Su objetivo es realizar tareas específicas como dar formato a una hoja de cálculo o manipular columnas en Excel.

+

¿Qué características comparten las funciones y subrutinas?

+

Reutilización de código

+
    +
  • Pueden ejecutarse múltiples veces según sea necesario
    • +
  • Permiten mantener el código organizado y eficiente
    • +
+

Interconectividad

+
    +
  • Se pueden conectar con otros procedimientos
    • +
  • Facilitan la activación desde diferentes puntos del programa
    • +
+

Gestión de parámetros

+
    +
  • Pueden requerir datos de entrada del usuario
    • +
  • También pueden funcionar de manera autónoma sin inputs
    • +
+

¿Cómo se implementan en Visual Basic?

+

Métodos de creación

+
    +
  • Grabación directa de acciones
    • +
  • Programación manual del código
    • +
+

Flexibilidad de uso

+
    +
  • Adaptables a diferentes necesidades
    • +
  • Permiten automatizar tareas repetitivas
    • +
+

La implementación efectiva de funciones y subrutinas mejora significativamente la eficiencia y mantenibilidad del código, permitiendo crear soluciones más elegantes y profesionales en Visual Basic. Su correcta utilización es fundamental para el desarrollo de aplicaciones robustas y escalables.

+
+
+ + \ No newline at end of file diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-Automatizaci\303\263n de Tareas con Macros en Excel.mp4" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-Automatizaci\303\263n de Tareas con Macros en Excel.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..8798c155d88e37bd756051373a3dfe488b54a0fb --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-Automatizaci\303\263n de Tareas con Macros en Excel.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:193808aa8be9616721af1e3dbc85fa8b0df0a2383f78e1d2cfe6bcad31029eeb +size 91660626 diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-Automatizaci\303\263n de Tareas con Macros en Excel.vtt" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-Automatizaci\303\263n de Tareas con Macros en Excel.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..df21f58998777ffc3d40f20f0845536c5fc33537 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-Automatizaci\303\263n de Tareas con Macros en Excel.vtt" @@ -0,0 +1,581 @@ +WEBVTT + +00:00.000 --> 00:05.500 +Platzi, educación profesional efectiva. + +00:05.500 --> 00:07.700 +Hola, yo doy la bienvenida a esta clase. + +00:07.700 --> 00:10.800 +Hoy vamos a platicar sobre cómo nosotros +podemos grabar macros + +00:10.800 --> 00:12.660 +y cómo podemos +correrlas. + +00:12.660 --> 00:14.640 +Cuando nosotros decimos grabar macros, + +00:14.640 --> 00:16.700 +nos estamos refiriendo a +qué. + +00:16.700 --> 00:19.300 +Una actividad que nosotros realizamos +dentro de nuestro + +00:19.300 --> 00:22.660 +documento, la podemos almacenar y +repetirla a las veces que + +00:22.660 --> 00:24.780 +nosotros consideremos +necesario. + +00:24.780 --> 00:27.300 +Esto es sumamente útil cuando nosotros, +por ejemplo, + +00:27.300 --> 00:30.820 +tenemos que descargar archivos todos los +días y darles un + +00:30.820 --> 00:33.700 +formato específico, hacer ciertas operaciones, + +00:33.700 --> 00:36.580 +eliminar celdas o columnas, etcétera. + +00:36.580 --> 00:39.260 +Entonces, vamos a nuestro archivo de Excel +para ver cómo + +00:39.260 --> 00:42.060 +podemos +utilizarlo. + +00:42.060 --> 00:45.020 +En este caso, yo te dejé en los recursos +de la clase este + +00:45.020 --> 00:48.660 +documento que incluye las películas de +Netflix. + +00:48.660 --> 00:54.620 +Este documento ya está guardado con la +terminación.xslm, + +00:54.620 --> 00:57.780 +es decir, que ya está habilitado como +archivo de Excel para + +00:57.780 --> 00:59.460 +macros. + +00:59.460 --> 01:02.860 +Nosotros nos vamos a dar cuenta que +tenemos la información de + +01:02.860 --> 01:06.380 +nuestro documento, pero el formato no es +muy amigable. + +01:06.380 --> 01:09.900 +Entonces, si nosotros nos topamos algún +día con el + +01:09.900 --> 01:13.140 +problema de que tenemos que dar formato a +un documento que + +01:13.140 --> 01:17.060 +vamos a estar teniendo que descargar +múltiples veces al + +01:17.060 --> 01:19.580 +mes, o que lo vamos a tener que hacer con +los archivos de todos + +01:19.580 --> 01:22.180 +los meses, o tal, que se vuelven muy +repetitivo, + +01:22.180 --> 01:25.420 +podemos grabar una macro para poder +repetir este proceso + +01:25.420 --> 01:27.460 +después. + +01:27.460 --> 01:31.980 +Para hacer eso, lo primero es que vamos a +duplicar nuestra + +01:31.980 --> 01:34.220 +hoja con las películas de +Netflix. + +01:34.220 --> 01:40.180 +Entonces, vamos a crear una copia y la +vamos a mover al + +01:40.180 --> 01:40.700 +final. + +01:43.540 --> 01:44.700 +Listo. + +01:44.700 --> 01:47.660 +De esta manera, nosotros vamos a mantener +la información + +01:47.660 --> 01:51.540 +original y podemos volver a probar nuestra +macro y ver si + +01:51.540 --> 01:55.660 +realmente hace todo lo que nosotros +necesitamos o si hay + +01:55.660 --> 01:58.100 +que hacer algún ajuste sobre +esto. + +01:58.100 --> 01:59.620 +Listo. + +01:59.620 --> 02:02.780 +Entonces, para poder comenzar a grabar +nuestra macro, + +02:02.780 --> 02:06.860 +nos vamos a ir a Inicio a la ficha de +Programador. + +02:06.860 --> 02:11.380 +En esta sección, vamos a ver que nos +aparece la parte de código + +02:11.380 --> 02:15.260 +donde vemos el botón que dice Grabar Macro. + +02:15.260 --> 02:17.540 +Cuando nosotros le damos clic +ahí, + +02:17.540 --> 02:20.460 +nos va a abrir una ventana en donde +nosotros podemos elegir + +02:20.460 --> 02:23.380 +el nombre que le vamos a dar a nuestra macro. + +02:23.380 --> 02:27.820 +En este caso, yo le voy a poner Formato. + +02:27.820 --> 02:32.380 +También nos da la opción de que nosotros +queremos algún atajo + +02:32.380 --> 02:35.620 +con el que vayamos a llamar a esta macro +para que empiece a + +02:35.620 --> 02:37.660 +hacer las actividades correspondientes. + +02:37.660 --> 02:40.820 +Si lo dejamos en blanco, no pasa nada. + +02:40.820 --> 02:43.460 +Es importante que nosotros elijamos dónde +guardar la + +02:43.460 --> 02:44.340 +macro. + +02:44.340 --> 02:47.820 +La podemos guardar en el libro de macros +personales, + +02:47.820 --> 02:50.540 +en un libro nuevo o en el libro sobre el +que estamos + +02:50.540 --> 02:51.580 +trabajando. + +02:51.580 --> 02:54.180 +Una buena práctica es guardarla sobre el +libro en el que + +02:54.180 --> 02:56.140 +estamos +trabajando. + +02:56.140 --> 02:59.340 +Si nosotros vamos a compartir esta macro +con alguien más, + +02:59.340 --> 03:02.180 +es bueno que agreguemos una descripción +explicando un poco + +03:02.180 --> 03:03.940 +lo que +hace. + +03:03.940 --> 03:04.900 +Y +listo. + +03:04.900 --> 03:07.860 +Luego damos clic en +Aceptar. + +03:07.860 --> 03:10.500 +Nosotros podemos ver que la macro se está +grabando, + +03:10.500 --> 03:13.500 +ya que en la ficha de Programador ahora +nos aparece + +03:13.500 --> 03:17.300 +el botón de Detener Grabación en lugar del +de Grabar Macro que + +03:17.300 --> 03:19.140 +aparecía +anteriormente. + +03:19.140 --> 03:21.940 +Y ahora sí, nosotros podemos darle formato +a nuestro + +03:21.940 --> 03:25.620 +documento como +necesitemos. + +03:25.620 --> 03:29.540 +En este caso, yo voy a seleccionar todas +las columnas + +03:29.540 --> 03:33.140 +y voy a ponerles que tengan un ancho en +donde quepa toda la + +03:33.140 --> 03:35.140 +información. + +03:35.140 --> 03:41.620 +También voy a darles un formato a los +encabezados. + +03:41.620 --> 03:43.460 +Los voy a poner en +negrillas. + +03:43.460 --> 03:46.340 +Los voy a +centrar. + +03:46.340 --> 03:50.980 +Y voy a ocultar la información de los +directores, + +03:50.980 --> 03:54.700 +del elenco y del país, porque en este +momento no la necesito + +03:54.700 --> 03:56.700 +ver. + +03:56.700 --> 03:59.660 +Listo. + +03:59.660 --> 04:02.900 +Si este es el formato final que yo quiero +ver en mi documento, + +04:02.900 --> 04:08.380 +ahora yo me puedo ir a la celda A1 y +seleccionarla para que se + +04:08.380 --> 04:11.860 +sea el lugar en el que termine nuestra +actividad. + +04:11.860 --> 04:15.300 +Si nosotros dejamos nuestro cursor en +alguna otra celda + +04:15.300 --> 04:18.420 +cuando la volvamos a correr, no nos +aparecerá en la parte de + +04:18.420 --> 04:20.660 +hasta arriba, sino que nos llevará hacia +ese lugar del + +04:20.660 --> 04:24.380 +documento donde nosotros dejamos la selección. + +04:24.380 --> 04:28.660 +Vamos a Programador y vamos a Detener +Grabación. + +04:28.660 --> 04:30.140 +Listo. + +04:30.140 --> 04:33.540 +Si nosotros queremos consultar cuáles +fueron las actividades + +04:33.540 --> 04:37.100 +que se grabaron, podemos abrir nuestro +entorno de Visual Basic + +04:37.100 --> 04:40.340 +en la ficha de Programador, en la sección +de código. + +04:40.340 --> 04:42.700 +Cuando nosotros abrimos el entorno de +Visual Basic, + +04:42.700 --> 04:46.420 +nos vamos a encontrar con que en la parte +izquierda vamos a ver + +04:46.420 --> 04:49.460 +el nombre de nuestro libro y vamos a ver +cómo se agregó un + +04:49.460 --> 04:51.380 +nuevo +módulo. + +04:51.380 --> 04:54.980 +En nuestro nuevo módulo vamos a poder ver +la macro que acabamos + +04:54.980 --> 04:56.100 +de +grabar. + +04:56.100 --> 04:59.100 +Nosotros le dimos el nombre de formato y +por eso nos aparece + +04:59.100 --> 05:02.300 +en la parte +superior. + +05:02.300 --> 05:03.900 +Nosotros vemos que dice +Sub. + +05:03.900 --> 05:07.620 +Esto se refiere a que esta actividad es +una subrutina, + +05:07.620 --> 05:10.220 +que quiere decir que no nos va a arrojar +ningún valor de + +05:10.220 --> 05:13.700 +regreso, sino que va a actuar sobre el +documento. + +05:13.700 --> 05:17.020 +Nosotros aquí podemos ir línea a línea +viendo cuáles fueron las + +05:17.020 --> 05:21.140 +actividades y la forma en la que nuestro +entorno de Visual + +05:21.140 --> 05:22.980 +Basic las +entiende. + +05:22.980 --> 05:26.260 +No es necesario que nosotros nos metamos +aquí ni a mover nada, + +05:26.260 --> 05:27.900 +ni a entenderlo, ni +tal. + +05:27.900 --> 05:31.020 +Simplemente, si nosotros hicimos de manera +correcta nuestra + +05:31.020 --> 05:33.780 +grabación, lo vamos a poder replicar. + +05:33.780 --> 05:38.300 +Entonces, ahora vamos a probar si nos +quedó bien nuestra macro + +05:38.300 --> 05:41.700 +replicándolo con el archivo original de +Netflix. + +05:41.700 --> 05:46.820 +Vamos a cerrar nuestro entorno de Visual +Basic y nuevamente voy + +05:46.820 --> 05:52.180 +a hacer una copia de nuestra información. + +05:56.300 --> 05:57.060 +Listo. + +05:57.060 --> 06:00.780 +Para nosotros poder correr una macro que +ya hemos grabado + +06:00.780 --> 06:05.300 +anteriormente, nos vamos a ir a la ficha +de programador y en la + +06:05.300 --> 06:09.740 +sección de código vamos a dar clic en +donde dice macros. + +06:09.740 --> 06:12.820 +Ahora nos va a aparecer una ventana en +donde vamos a poder + +06:12.820 --> 06:15.100 +ver los nombres de las diferentes macros +que nosotros + +06:15.100 --> 06:16.380 +tenemos. + +06:16.380 --> 06:19.260 +Podemos, en la sección de abajo, elegir si +queremos ver las + +06:19.260 --> 06:22.940 +macros que están en los libros abiertos, +en este libro o en un + +06:22.940 --> 06:26.100 +libro en +específico. + +06:26.100 --> 06:30.140 +Nosotros podemos elegir si lo queremos +ejecutar donde todas + +06:30.140 --> 06:33.340 +las acciones se harán de una sola vez o si +queremos que + +06:33.340 --> 06:35.940 +estas acciones se vayan haciendo paso a paso. + +06:35.940 --> 06:39.860 +También podemos modificar que nos llevará +directamente al + +06:39.860 --> 06:43.580 +entorno de Visual Basic, la podemos +eliminar o podemos + +06:43.580 --> 06:46.540 +también ver las distintas opciones que tiene. + +06:46.540 --> 06:48.620 +Cuando nosotros damos clic en las opciones, + +06:48.620 --> 06:51.900 +nos damos cuenta que otra vez nos aparece +la opción de + +06:51.900 --> 06:55.220 +agregar un atajo con el que nosotros +podemos correr esta + +06:55.220 --> 06:58.500 +macro que grabamos o de editar la +descripción que teníamos. + +06:58.500 --> 07:02.340 +Si la queremos ejecutar, es importante que +nosotros estemos + +07:02.340 --> 07:06.100 +en la hoja donde queremos que se realicen +estas acciones, + +07:06.100 --> 07:09.700 +ya que en nuestro código no está +especificado en qué hoja se + +07:09.700 --> 07:12.420 +deberían de +hacer. + +07:12.420 --> 07:15.060 +Entonces, estamos en la hoja que dice Netflix, + +07:15.060 --> 07:19.060 +que es la copia 3, donde tenemos el +archivo sin formato y damos + +07:19.060 --> 07:21.380 +clic en +ejecutar. + +07:21.380 --> 07:24.580 +Y vemos que de manera súper fácil y súper +rápida, + +07:24.580 --> 07:26.780 +todo nuestro documento está ejecutado. + +07:26.780 --> 07:29.620 +Todo nuestro documento ahora aparece con +el formato que + +07:29.620 --> 07:32.540 +nosotros habíamos elegido previamente. + +07:32.540 --> 07:35.180 +¿Se imaginan la cantidad de tiempo que nos +podemos ahorrar + +07:35.180 --> 07:36.900 +haciendo +esto? + +07:36.900 --> 07:41.460 +Ahora te invito a que tú vayas a tu +documento de las películas, + +07:41.460 --> 07:44.260 +des el formato que tú quieras y hagas los +cambios que + +07:44.260 --> 07:48.740 +consideres necesarios grabando una macro y +después pruébala. + +07:48.740 --> 07:51.820 +Déjanos en los comentarios una captura de +pantalla de cómo se + +07:51.820 --> 07:54.700 +ve tu código en el entorno de Visual Basic. + +07:54.700 --> 07:57.740 +Nos vemos en la siguiente +clase. + diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-Resumen.html" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..d93ae4547e491ebdd4d956a8d7ea4ff4794b28df --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-Resumen.html" @@ -0,0 +1,122 @@ + + + + + + + Automatización de Tareas con Macros en Excel + + + +
+
+

Resumen

¿Qué es grabar y correr macros en Excel?

+

Grabar macros en Excel es una manera efectiva de automatizar tareas repetitivas, ahorrando tiempo y esfuerzo considerable. Al grabar una macro, registras una secuencia de acciones que posteriormente puedes repetir con un simple comando. Esto es especialmente útil para tareas como descargar archivos regularmente y darles un formato, realizar operaciones matemáticas, o modificar celdas y columnas.

+

¿Cómo iniciar con las macros?

+

Para empezar a trabajar con macros, necesitas un documento de Excel que esté habilitado para macros (.xslm). Este formato permite que tus macros se ejecuten correctamente. Al abrir el documento, asegúrate de que el formato es amigable y cómodo para trabajar. Si trabajarás frecuentemente con este archivo, considera grabar una macro para facilitar el proceso de formateo.

+

¿Cómo grabar una macro?

+

Sigue estos pasos para grabar una macro en Excel:

+
    +
  1. Duplicar la hoja: Antes de comenzar, haz una copia de tu hoja de trabajo. Esto te permitirá mantener la información original e intentar nuevamente si es necesario.
    2. +
  2. Acceder a la ficha Programador: Dirígete al menú 'Inicio' y selecciona 'Programador'. Aquí encontrarás el botón 'Grabar Macro'.
    3. +
  3. Asignar nombre y atajo: Al darle clic a 'Grabar Macro', se abrirá una ventana para que asignes un nombre, como "Formato". Puedes también establecer un atajo para ejecutar la macro rápidamente.
    4. +
  4. Elegir dónde guardar: Decide el libro donde se guardará tu macro. Es recomendable elegir el mismo libro en el que estás trabajando.
    5. +
  5. Descripción de la macro: Asegúrate de añadir una descripción corta explicando la función de la macro. Esto es útil si deseas compartir o referenciar la macro más adelante.
    6. +
  6. Realizar acciones: Comienza a realizar las acciones que deseas automatizar. Por ejemplo, ajustar el ancho de las columnas, aplicar negritas a los encabezados, centrar texto, y ocultar información innecesaria.
    7. +
  7. Finalizar grabación: Una vez finalizadas las acciones, selecciona la celda final, ve a la ficha 'Programador' y selecciona 'Detener Grabación'.
    8. +
+

¿Cómo revisar y editar macros en Visual Basic?

+

Si deseas comprobar las acciones registradas por la macro o hacer ajustes, puedes acceder al entorno de Visual Basic desde la ficha 'Programador'. En Visual Basic, encontrarás el nombre de tu libro y un nuevo módulo que contiene la macro grabada. Aunque no es necesario editar el código a menos que tengas conocimientos avanzados, esta herramienta te permite confirmar que todas las acciones se han registrado correctamente.

+

¿Cómo ejecutar una macro grabada?

+

Cuando necesitas ejecutar una macro que has grabado previamente, aquí tienes los pasos a seguir:

+
    +
  1. Accede al menú de macros: Ve a la ficha 'Programador' y selecciona 'Macros' en la sección de código.
    2. +
  2. Selecciona la macro: En la ventana emergente, elige la macro que deseas ejecutar de entre las listadas. Puedes decidir ver las macros disponibles en los libros abiertos, en un libro específico o solo en el actual.
    3. +
  3. Elegir método de ejecución: Decide si deseas ejecutar la macro de una sola vez o paso a paso para verificar cada acción.
    4. +
  4. Editar o eliminar: Si lo necesitas, tienes la opción de modificar la macro llevándola al entorno de Visual Basic, o eliminarla si ya no es necesaria.
    5. +
  5. Ejecutar: Asegúrate de estar en la hoja correcta donde deseas aplicar las acciones antes de hacer clic en 'Ejecutar'. Verás cómo el formato predefinido se aplica de manera rápida y sin esfuerzo.
    6. +
+

Invitación a practicar

+

Te animamos a practicar grabando y ejecutando tu propia macro en un archivo de películas o en cualquier otro que desees formatear automáticamente. Una vez que lo hayas hecho, comparte una captura de pantalla del código generado en el entorno de Visual Basic en los comentarios para recibir feedback y continuar mejorando tus habilidades con Excel.

+
+
+ + \ No newline at end of file diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-peliculas-de-netflix_fe8390ff-ec52-4b81-a6e5-d657268afe62.xlsx" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-peliculas-de-netflix_fe8390ff-ec52-4b81-a6e5-d657268afe62.xlsx" new file mode 100644 index 0000000000000000000000000000000000000000..504e2c499d3d248b677e01735fd77ae2636be3b5 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/06-peliculas-de-netflix_fe8390ff-ec52-4b81-a6e5-d657268afe62.xlsx" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0e762881e6f5402c8da3b280f44f5013dfb359c1c0830c42d56bf2af35ab8a3c +size 1230119 diff --git "a/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/07-Quiz.mhtml" "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/07-Quiz.mhtml" new file mode 100644 index 0000000000000000000000000000000000000000..da6d01a14a5588e6badf670a1035a481ed07ed08 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/01-Introducci\303\263n a Macros y VBA/07-Quiz.mhtml" @@ -0,0 +1,13228 @@ +From: +Snapshot-Content-Location: https://platzi.com/clases/quiz/13033/ +Subject: +Date: Sun, 9 Nov 2025 16:13:53 -0500 +MIME-Version: 1.0 +Content-Type: multipart/related; + type="text/html"; + boundary="----MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU----" + + +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: text/html +Content-ID: +Content-Transfer-Encoding: quoted-printable +Content-Location: https://platzi.com/clases/quiz/13033/ + + + =20 + + =20 + + + + + + + + + + + + =20 + + =20 + + + + + + + + + + + + + + + + + + + + + =20 + =20 + =20 + + =20 + + =20 + + + =20 + + =20 + + + + =20 + + + =20 + =20 + =20 + + +
  • Cloud Computing y DevOps<= +!-- -->

    Rutas 9

  • Ingl=C3=A9s

    Escuelas 1

  • Marketing<= +svg aria-hidden=3D"true" focusable=3D"false" data-prefix=3D"far" data-icon= +=3D"chevron-right" class=3D"svg-inline--fa fa-chevron-right ExploreMenu-hov= +er" role=3D"img" xmlns=3D"http://www.w3.org/2000/svg" viewBox=3D"0 0 320 51= +2">

    Escuelas 1

    • <= +/li>
  • Liderazgo

    Escuelas 2= +

    = +
  • Recursos Humanos

    Rutas 8

  • Negocios y Emprendimiento

    Escuelas 3

  • Finanzas e Inversiones

    Rutas 9

  • Startups

    Escuelas= + 1

  • Finanzas y Operaciones en Ecommerce= +
  • Startups Web3 y Bl= +ockchain
  • Startups con Impacto Social
  • Expansi=C3=B3n y Ecosistema Startup
  • <= +/path>Dise=C3=B1o y UX

    Escuelas 2<= +/p>

  • Contenido Digital

    Escuelas 1

  • Ver todos los cursos
    • = +
    3D"Dereck"1.243 pts= +
  • Lanzamientos
  • T= +V
  • Planes
  • Cont=C3=A1ctanos
    • = +
    = +
    <= +path fill=3D"#fff" d=3D"M0 0h200v52.503H0z">= +
    3D"Curso

    Quiz

    Curso de Excel Avanzado co= +n Macros

    Prep=C3=A1rate, en este Quiz validar=C3= +=A1s tus conocimientos en

    • Puedes tomar el quiz tantas veces como quieras.
    • El quiz consta de 5 preguntas.
    • No tienes l=C3=ADmite de tiempo para p= +resentarlo, sin estr=C3=A9s.
    • Al finalizar sabr=C3=A1s qu=C3=A9= + conocimientos debes reforzar para dominarlos.
    <= +/div>
    +
    =20 +
    + =20 + =20 + =20 + =20 + =20 + =20 + =20 + =20 + =20 + =20 + =20 + =20 + =20 + + =20 + + + + =20 + =20 + =20 +     +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: image/png +Content-Transfer-Encoding: base64 +Content-Location: https://static.platzi.com/cdn-cgi/image/width=1024,quality=85,format=auto/media/achievements/badge-excel-avanzado-macros-c9f51408-8e0f-4f55-8ea0-f1d85557aa76.png + +iVBORw0KGgoAAAANSUhEUgAAAKEAAAChCAMAAACYjy+EAAAA0lBMVEUAAABZTitZTitZTitZTitZ +TitZTitZTitZTitZTitZTitZTitZTitZTitZTitZTiv/uwBZTiugfBj///+AYxNjVCeshRb1tAKD +aSBHPiLnqwaXdxvBkg/WoAt4YiPgpwjrrQW4jBKOcR24nVJuXCZ2XhiYdhfLmQ2NcB6IaRTQnAyD +emC2ixPQvoxVSilMQiRrWiZ9ZSL/7r/W08pjWTj29fJuZEbq6eWsp5V4b1C2sqLBvbCim4iXkHuN +hW3g3tfLyL3/xijhpwj/6q//4Y/KpD2sbQX8AAAAEHRSTlMAv4BAEO/fMGCfIM9wj69QqKGsTwAA +CBpJREFUeNrtndl22zYQQM1VlCxKAF0STLkmpUOmVlcvibM4adr+/y81kh1NhYUgCQj2g+9DXecl +92AwgwEJMCfPPB1cx1nb31k6zuwJuTnL0PIxB2tlrx9bdBHMT7EEy3bcR9Jbz308EGtpfiyDFR6H +H5qUdOYenoC/XJhJ2qWPJ7Nyjp8boYeV8IPj+s0x8AQdXZlfnN5TPo6jawvj23RJXlTogKJIojQW +Ojr6Bdc+f9i6pEBi6jYqBTmjOa8X3PJXJhWSQ9qMN5aerVNw6XH0NjUaDFfyVFsNdy02uFGFRpKn +mGGpaQVhBrDJCZpAzQ6k5WoQtDFF2qKpkIR29BztES4hdRUc9UV6dkrHF6lCMkpxriRITcGEIA1U +qbbJGFATsEKa2MSHZcfVIhhvkD7I4TD6Mw2CJQzgEYbRmykLZgRppiopRSXBOEf6IR2lqCJYoaOQ +KKSLczAFCToS+WTFmXdUQaCKMWCNWOo8KkcMKI5bXU7/L4iAoysGAwXnlKBBxdnoNC4RMqroD8mW +hWcmSYACA6txk7AhyAj5qHbRVirU6qXbW8gqIQZaZIyOUxXlMY6QOUgzNM5LvCdFJqkwxNkdtpjE +teABQtTPL2d9/P2XsF8ctrTMpZPwZTTFELgWKqZ4jzMkTTrEpY6mGQL/IAF1PCBZLIgxQVx+Vjb8 +Ew2IcyBvCjfIvCEqYfGTDmGJTBkS/uoXyIawMGaY5QjIJINoUWliwrDGzcFvvYO4wHtqY4bd4ZRP +etN5TnWtJgxbamkgMfSyfctJbcqwiukmNOlZWALxLNRvCIKgSM9EV9zUFIYM831Im4qTzoFwwSuR +EcO64z6YrGCDTxmG+Du5CcM6Y14uMAsL1Wz7fSsykP8g4s3rUWNYpPiArGb2LEtBkDM0zhB4PW4e +FjH4lVA+iCDMNvSFkw3fjMwUUnJHJYMwczM5RgCJYjyI+HykIciwM7/lZrPLDXKKB3M+yZCUvHnF +3d0HvCBXeDi/vnjx4je85fanfv6l++pSuDP1uGsyApJJhr9H/byk++pK/ARixpmGqWFD1ECM2ZVv +yZmGiWlD6GCBhp2IDqzJZg2hg+XWG59TDZFhwxTCxtv0uUyilOYMwaUSP090mB1KZtYwFzwEZFMF +EkVkeHe25RI/8G73642CITSIrCL0NyGzhyqEY3i5c7rAO66ut7+8UxzDBFbNVlCzLSaVa6HhzcMg +whC+vVIyLEqMgY73N0N7s4ZU5htCYC/A9g4rGBJmzY+4yUwXm0ZgCJHdDeKH7f99UcgUtsmOE+rx +iMAwZQ2BT98H8Xb78/pGwZB5v9yR/nIzlxpCslw+/Hynodpkwq0RGNLlsNfw9n4QL7b//YzVDdkO +Vm6Y9Bri97tBvNx5KhtCWdkgdUNIlgc+YD2GpIGpxTW0pYZMsuy4vlI2hHWv1mYIK8vZR339YRkh +DqV+w/j8G6+2lLgPJqhpgjikUw0/CqMc7/d6f4wyLHBMJFFWyBQlQwhnpNHwy1bu/U7zQo9hBBtg +vuGaMox6De/uO5qPux8aDKGDldbDlXTVgxh/wvgtrHqTDUEQFMWG8s4BVpTP+6p4o2pIMuErsAoM +R3RfF9Af7gbxUtEwj8Wnawt6sxcM6GCvHrRA9k7FsGbKZsd9LsLsAgjPEGJ8dguFG4rieEP2THGT +c/9mf/hO6nZfBmEQ3ysYUscPE8FDB4vZjW5Ehp8hO6idn0IuJ7DVEyx6c+bRVyQyvNhyC7Ny9/uN +rnooWVKYggiGEtTXlAxabEGxUX+ypL4ud4gmZ5+1w4a5UjdU720i9jHxAlJF3VC9Pywhldk3Ut0T +MCSQKJwn7bFhw5ZzNirnnQwKeDW7Pb4haTiZksGaByy4D3jKKW98slf9JNJqE3PPOvi89oakwwX3 +hpHqM4eW/3I05NYbVBcU0TmHrR8Yqj63yfiHMRwIs8Lb21GGNUQIR4QOMnsqyINslhgqCIIh3X3F +ORvkUHTapkU9tK8FgN8gQ9KIOtiODjIb5lThnMOIKBcHjmkNL/WoILPZjGsDhrD8QoypP7TF57Az +A4bMbpQ9VrWQHEwzYMjrYJO+4/cr2DWYMAShAvGGcN13QDKuTRmiVPRK2+8/zp4ZM6xwQ7hDGEju +pdSmDFHG6ZmhuxYXnNSYYUW4h0xt6eWe1oAhQye/GgCD2BDzhu2A6xWO9OrHV2XDXH4BBBKZxZIe +yd6oGgqTMMJ9tRAWFlmcyUslv+SrJMbSWz6h/KYe+XE64qWAxAMv7bk+3pMjg6SSSgM4Jq+aAdGI +S4Vzaioav7DngIs8zqUhxQoD4bjL1ZkZwRhTx3Ml2IYVSTP6Nr1lVJGU4y8wuz6laEwwnHSNPjMg +OP4i/RobUqzKqR8jCA4UiYEshnvBAwlNfNAhj1U+ijE//kcxEkwJqijijYHPiigqdpojXTS0oLJi +U+iNsKogpAsQEb1FRl0Qig68ZtUBiTR+3W3taf8YFNQYKNQqzHzMXLlSom30fO4LcFdYo2ObYopA +54fnwLGYGF8YP+YzWnoiDZT56LyuOffC5u6JHtwQM8TZmMQmeYkZvPWJPhwfcyXJoNHbdJjDytX8 +JVPMJU0K0muXZ42pr5kuVj0fW20L1q3YJPC51WN+JhRwLNxHmaZplHwjS1NQ4xJCgPU7amAOzfRT +dPRC8DsSs7mCn790zXwh+3RieNcnxpiFPh7JKoDhMyRpDx9JD/TM4q5DuaVn2bPH/wcNPEFeWPZa +lLnmPZ2lbYfWPSvbttfO4vmfynhmKP8BMhgr8IA45/cAAAAASUVORK5CYII= + +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: text/css +Content-Transfer-Encoding: quoted-printable +Content-Location: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/monokai.min.css + +@charset "utf-8"; + +.hljs { display: block; overflow-x: auto; padding: 0.5em; background: rgb(3= +9, 40, 34); color: rgb(221, 221, 221); } + +.hljs-tag, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-strong, = +.hljs-name { color: rgb(249, 38, 114); } + +.hljs-code { color: rgb(102, 217, 239); } + +.hljs-class .hljs-title { color: white; } + +.hljs-attribute, .hljs-symbol, .hljs-regexp, .hljs-link { color: rgb(191, 1= +21, 219); } + +.hljs-string, .hljs-bullet, .hljs-subst, .hljs-title, .hljs-section, .hljs-= +emphasis, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-at= +tr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-t= +ag, .hljs-template-variable { color: rgb(166, 226, 46); } + +.hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta { color: rgb(117, 11= +3, 94); } + +.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-title= +, .hljs-section, .hljs-type, .hljs-selector-id { font-weight: bold; } +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: text/css +Content-Transfer-Encoding: quoted-printable +Content-Location: https://static.platzi.com/mf-classes/assets/start-quiz.2150be5dc038e1965127.css + +@charset "utf-8"; + +.ModalCloseExam { background-color: rgb(30, 34, 41); border-radius: 12px; p= +adding: 1.5rem 2rem; text-align: center; box-shadow: rgba(0, 0, 0, 0.3) 0px= + 24px 40px 4px; border: 1px solid rgb(45, 50, 58); } + +@media only screen and (max-width: 30rem) { + .ModalCloseExam { border-bottom-left-radius: 0px; border-bottom-right-rad= +ius: 0px; } +} + +.ModalCloseExam_title { font-weight: 500; font-size: 1.375rem; letter-spaci= +ng: -0.008rem; text-transform: none; text-decoration: none; line-height: 1.= +75rem; margin-bottom: 1rem; color: rgb(255, 255, 255); } + +.ModalCloseExam_description { font-weight: 400; font-size: 1rem; letter-spa= +cing: 0.013rem; text-transform: none; text-decoration: none; line-height: 1= +.5rem; color: rgb(196, 200, 206); margin-bottom: 1.5rem; } + +.ModalCloseExam_ctas { display: flex; -webkit-box-pack: center; justify-con= +tent: center; gap: 1rem; } + +.StartQuizOverview { background: radial-gradient(34.61% 63.77% at 100% 0px,= + rgba(196, 200, 206, 0.14) 0px, rgba(196, 200, 206, 0) 100%); } + +.StartQuizOverview_content { display: flex; -webkit-box-orient: vertical; f= +lex-direction: column; -webkit-box-pack: center; justify-content: center; m= +in-height: 90vh; gap: 1.5rem; padding: 0px 1rem; } + +@media only screen and (min-width: 48rem) { + .StartQuizOverview_content { padding: 0px 1.5rem; } +} + +@media only screen and (min-width: 64rem) { + .StartQuizOverview_content { display: grid; grid-template-columns: auto a= +uto; -webkit-box-align: center; align-items: center; gap: 30px; min-height:= + 80vh; } +} + +.StartQuizOverview_content_details_badge { width: 3.5rem; height: 3.5rem; b= +order-radius: 50%; box-shadow: rgba(119, 249, 115, 0.4) 0px 0px 40px 0px; m= +argin-bottom: 1rem; } + +.StartQuizOverview_content_details_badge img { width: 100%; } + +.StartQuizOverview_content_details_concept { font-weight: 500; font-size: 0= +.875rem; letter-spacing: 0.05rem; text-decoration: none; line-height: 1.25r= +em; color: rgb(10, 233, 138); text-transform: uppercase; } + +@media only screen and (min-width: 64rem) { + .StartQuizOverview_content_details_concept { font-weight: 500; font-size:= + 1rem; letter-spacing: 0.038rem; text-transform: uppercase; text-decoration= +: none; line-height: 1.5rem; } +} + +.StartQuizOverview_content_details_title { color: rgb(255, 255, 255); font-= +weight: 400; font-size: 1.5rem; letter-spacing: -0.008rem; text-transform: = +none; text-decoration: none; line-height: 2rem; margin-bottom: 1rem; margin= +-top: 0px; } + +@media only screen and (min-width: 48rem) { + .StartQuizOverview_content_details_title { font-weight: 400; font-size: 1= +.5rem; letter-spacing: -0.008rem; text-transform: none; text-decoration: no= +ne; line-height: 2rem; } +} + +@media only screen and (min-width: 64rem) { + .StartQuizOverview_content_details_title { font-weight: 400; font-size: 2= +rem; letter-spacing: -0.008rem; text-transform: none; text-decoration: none= +; line-height: 2.5rem; } +} + +.StartQuizOverview_content_details_description { color: rgb(196, 200, 206);= + font-weight: 500; font-size: 0.875rem; letter-spacing: -0.008rem; text-tra= +nsform: none; text-decoration: none; line-height: 1.125rem; margin-bottom: = +1rem; } + +@media only screen and (min-width: 48rem) { + .StartQuizOverview_content_details_description { font-weight: 400; font-s= +ize: 0.875rem; letter-spacing: 0.019rem; text-transform: none; text-decorat= +ion: none; line-height: 1.25rem; } +} + +@media only screen and (min-width: 64rem) { + .StartQuizOverview_content_details_description { font-weight: 400; font-s= +ize: 1rem; letter-spacing: 0.013rem; text-transform: none; text-decoration:= + none; line-height: 1.5rem; } +} + +.StartQuizOverview_content_details_ctas, .StartQuizOverview_content_details= +_ctas button span { display: flex; gap: 0.5rem; } + +.StartQuizOverview_content_details_ctas button span { -webkit-box-align: ce= +nter; align-items: center; } + +.StartQuizOverview_content_details_ctas button span svg { width: 0.6rem; he= +ight: 0.6rem; } + +.StartQuizOverview_content_details_ctas_spinner { min-width: 96px; } + +.StartQuizOverview_content_details_ctas_spinner div { } + +.StartQuizOverview_info { border-radius: 0.5rem; border: 1px solid rgba(255= +, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); padding: 1rem; } + +.StartQuizOverview_info_subtitle { font-weight: 500; font-size: 1rem; lette= +r-spacing: -0.008rem; text-transform: none; text-decoration: none; line-hei= +ght: 1.375rem; color: rgb(255, 255, 255); margin-bottom: 0.75rem; } + +.StartQuizOverview_info_list { color: rgb(196, 200, 206); font-weight: 400;= + font-size: 0.875rem; letter-spacing: 0.019rem; text-transform: none; text-= +decoration: none; line-height: 1.25rem; list-style: none; padding-left: 1.5= +rem; } + +@media only screen and (min-width: 48rem) { + .StartQuizOverview_info_list { font-weight: 400; font-size: 1rem; letter-= +spacing: 0.013rem; text-transform: none; text-decoration: none; line-height= +: 1.5rem; } +} + +.StartQuizOverview_info_list li { margin-bottom: 0.75rem; position: relativ= +e; } + +.StartQuizOverview_info_list li:last-child { margin-bottom: 0px; } + +.StartQuizOverview_info_list li::before { content: ""; position: absolute; = +width: 6px; height: 6px; border-radius: 50%; left: -1.5rem; top: 10px; back= +ground-color: rgb(10, 233, 138); } + +* { font-family: "IBM Plex Sans"; } + +body { background-color: rgb(19, 22, 28); } + +body .Modal-overlay { background-color: rgba(0, 0, 0, 0.8) !important; } + +@media only screen and (max-width: 30rem) { + body .Modal .showModal { padding: 0px; margin-bottom: 0px; } +} + +.Header-v2 { display: none; } + +@media only screen and (min-width: 48rem) { + #evaluationHeader div > div { max-width: 1120px; } +} + +#evaluationHeader div > svg { height: 24px; width: 90px; } + +@media only screen and (min-width: 48rem) { + #evaluationHeader div > svg { height: 32px; } +} +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: text/css +Content-Transfer-Encoding: quoted-printable +Content-Location: https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap + +@charset "utf-8"; + +@font-face { font-family: Roboto; font-style: normal; font-weight: 400; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2") format("woff2")= +; unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, = +U+FE2E-FE2F; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 400; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2") format("woff2")= +; unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 400; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2") format("woff2")= +; unicode-range: U+1F00-1FFF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 400; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2") format("woff2")= +; unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3= +FF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 400; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2") format("woff2")= +; unicode-range: U+302-303, U+305, U+307-308, U+310, U+312, U+315, U+31A, U= ++326-327, U+32C, U+32F-330, U+332-333, U+338, U+33A, U+346, U+34D, U+391-3A= +1, U+3A3-3A9, U+3B1-3C9, U+3D1, U+3D5-3D6, U+3F0-3F1, U+3F4-3F5, U+2016-201= +7, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2= +070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+210= +0-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE,= + U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-23= +0B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, = +U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U= ++25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, = +U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; = +} + +@font-face { font-family: Roboto; font-style: normal; font-weight: 400; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2") format("woff2")= +; unicode-range: U+1-C, U+E-1F, U+7F-9F, U+20DD-20E0, U+20E2-20E4, U+2150-2= +18F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219,= + U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U= ++2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, = +U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-= +102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-= +1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F3= +2C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3= +AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+= +1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+= +1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F4= +7D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+= +1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4= +FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-= +1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+= +1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+= +1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+= +1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+= +1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F9= +96, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+= +1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 400; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2") format("woff2")= +; unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1= +AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;= + } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 400; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2") format("woff2")= +; unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+3= +04, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A= +B, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 400; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2") format("woff2"); = +unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+= +304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2= +215, U+FEFF, U+FFFD; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 700; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2") format("woff2")= +; unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, = +U+FE2E-FE2F; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 700; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2") format("woff2")= +; unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 700; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2") format("woff2")= +; unicode-range: U+1F00-1FFF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 700; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2") format("woff2")= +; unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3= +FF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 700; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2") format("woff2")= +; unicode-range: U+302-303, U+305, U+307-308, U+310, U+312, U+315, U+31A, U= ++326-327, U+32C, U+32F-330, U+332-333, U+338, U+33A, U+346, U+34D, U+391-3A= +1, U+3A3-3A9, U+3B1-3C9, U+3D1, U+3D5-3D6, U+3F0-3F1, U+3F4-3F5, U+2016-201= +7, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2= +070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+210= +0-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE,= + U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-23= +0B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, = +U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U= ++25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, = +U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; = +} + +@font-face { font-family: Roboto; font-style: normal; font-weight: 700; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2") format("woff2")= +; unicode-range: U+1-C, U+E-1F, U+7F-9F, U+20DD-20E0, U+20E2-20E4, U+2150-2= +18F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219,= + U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U= ++2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, = +U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-= +102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-= +1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F3= +2C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3= +AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+= +1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+= +1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F4= +7D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+= +1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4= +FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-= +1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+= +1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+= +1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+= +1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+= +1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F9= +96, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+= +1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 700; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2") format("woff2")= +; unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1= +AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;= + } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 700; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2") format("woff2")= +; unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+3= +04, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A= +B, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 700; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2") format("woff2"); = +unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+= +304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2= +215, U+FEFF, U+FFFD; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 900; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2") format("woff2")= +; unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, = +U+FE2E-FE2F; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 900; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2") format("woff2")= +; unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 900; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2") format("woff2")= +; unicode-range: U+1F00-1FFF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 900; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2") format("woff2")= +; unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3= +FF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 900; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2") format("woff2")= +; unicode-range: U+302-303, U+305, U+307-308, U+310, U+312, U+315, U+31A, U= ++326-327, U+32C, U+32F-330, U+332-333, U+338, U+33A, U+346, U+34D, U+391-3A= +1, U+3A3-3A9, U+3B1-3C9, U+3D1, U+3D5-3D6, U+3F0-3F1, U+3F4-3F5, U+2016-201= +7, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2= +070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+210= +0-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE,= + U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-23= +0B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, = +U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U= ++25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, = +U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; = +} + +@font-face { font-family: Roboto; font-style: normal; font-weight: 900; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2") format("woff2")= +; unicode-range: U+1-C, U+E-1F, U+7F-9F, U+20DD-20E0, U+20E2-20E4, U+2150-2= +18F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219,= + U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U= ++2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, = +U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-= +102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-= +1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F3= +2C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3= +AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+= +1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+= +1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F4= +7D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+= +1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4= +FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-= +1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+= +1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+= +1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+= +1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+= +1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F9= +96, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+= +1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 900; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2") format("woff2")= +; unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1= +AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;= + } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 900; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2") format("woff2")= +; unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+3= +04, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A= +B, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } + +@font-face { font-family: Roboto; font-style: normal; font-weight: 900; fon= +t-stretch: 100%; font-display: swap; src: url("https://fonts.gstatic.com/s/= +roboto/v49/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2") format("woff2"); = +unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+= +304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2= +215, U+FEFF, U+FFFD; } +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: text/css +Content-Transfer-Encoding: quoted-printable +Content-Location: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400;500;600;700&display=swap + +@charset "utf-8"; + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 200; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbABA= +.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+= +2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 200; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbABA= +.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0= +-4B1, U+2116; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 200; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbABA= +.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U= ++38C, U+38E-3A1, U+3A3-3FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 200; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA= +.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U= ++168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+3= +29, U+1EA0-1EF9, U+20AB; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 200; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA= +.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U= ++2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-= +1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 200; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.wo= +ff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, = +U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+21= +91, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 300; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbABA= +.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+= +2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 300; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbABA= +.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0= +-4B1, U+2116; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 300; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbABA= +.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U= ++38C, U+38E-3A1, U+3A3-3FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 300; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA= +.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U= ++168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+3= +29, U+1EA0-1EF9, U+20AB; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 300; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA= +.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U= ++2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-= +1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 300; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.wo= +ff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, = +U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+21= +91, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 400; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbABA= +.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+= +2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 400; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbABA= +.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0= +-4B1, U+2116; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 400; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbABA= +.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U= ++38C, U+38E-3A1, U+3A3-3FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 400; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA= +.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U= ++168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+3= +29, U+1EA0-1EF9, U+20AB; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 400; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA= +.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U= ++2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-= +1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 400; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.wo= +ff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, = +U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+21= +91, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 500; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbABA= +.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+= +2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 500; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbABA= +.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0= +-4B1, U+2116; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 500; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbABA= +.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U= ++38C, U+38E-3A1, U+3A3-3FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 500; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA= +.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U= ++168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+3= +29, U+1EA0-1EF9, U+20AB; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 500; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA= +.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U= ++2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-= +1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 500; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.wo= +ff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, = +U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+21= +91, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 600; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbABA= +.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+= +2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 600; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbABA= +.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0= +-4B1, U+2116; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 600; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbABA= +.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U= ++38C, U+38E-3A1, U+3A3-3FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 600; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA= +.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U= ++168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+3= +29, U+1EA0-1EF9, U+20AB; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 600; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA= +.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U= ++2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-= +1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 600; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.wo= +ff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, = +U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+21= +91, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 700; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbABA= +.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+= +2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 700; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbABA= +.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0= +-4B1, U+2116; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 700; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbABA= +.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U= ++38C, U+38E-3A1, U+3A3-3FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 700; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA= +.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U= ++168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+3= +29, U+1EA0-1EF9, U+20AB; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 700; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA= +.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U= ++2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-= +1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } + +@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight:= + 700; font-stretch: 100%; font-display: swap; src: url("https://fonts.gstat= +ic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.wo= +ff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, = +U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+21= +91, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: text/css +Content-Transfer-Encoding: quoted-printable +Content-Location: https://static.platzi.com/mf-classes/assets/dlls.2150be5dc038e1965127.css + +@charset "utf-8"; + +@import url("https://fonts.googleapis.com/css2?family=3DIBM+Plex+Sans:wght@= +200;300;400;500;600;700&display=3Dswap"); + +@import url("https://fonts.googleapis.com/css2?family=3DRoboto:wght@400;700= +;900&display=3Dswap"); + +.StarsSelector { -webkit-box-align: center; align-items: center; display: f= +lex; } + +.StarsSelector-content { border-bottom: 1px solid rgb(36, 56, 91); padding:= + 1rem 0px; } + +.StarsSelector-title { color: rgb(141, 162, 192); font-size: 1rem; line-hei= +ght: 1.5; margin-right: 0.5rem; } + +@media only screen and (min-width: 48rem) { + .StarsSelector-title { margin-right: 2rem; } +} + +.StarsSelector-items-star { background-color: transparent; border: none; ma= +rgin-right: 12px; min-width: 16px; outline: none; padding: 0px; } + +.StarsSelector-items-star:hover { cursor: pointer; } + +.StarsSelector-items-star svg { color: rgb(99, 122, 157); font-size: 1.5rem= +; } + +.StarsSelector-items-star--active svg { color: rgb(51, 177, 255); } + +.radio-label { color: rgb(19, 29, 48); } + +.FormCheckbox { margin-right: 0.5rem; } + +.FormCheckbox.switch { display: inline-block; height: 24px; position: relat= +ive; width: 42px; } + +.FormCheckbox-field, .FormCheckbox.switch .FormCheckbox-label { display: no= +ne; } + +.FormCheckbox-field:checked + .FormCheckbox-label { color: rgb(255, 255, 25= +5); font-size: 30px; line-height: 17px; position: relative; text-align: cen= +ter; transition: 0.1s; } + +.FormCheckbox-field:checked + .FormCheckbox-label::before { -webkit-font-sm= +oothing: antialiased; speak: none; background-color: rgb(7, 145, 230); bord= +er-color: rgb(7, 145, 230); content: "=EE=A4=9A"; font-family: icomoon; fon= +t-size: 0.75rem; font-style: normal; font-variant: normal; font-weight: 400= +; } + +.FormCheckbox-field:checked + .FormCheckbox-switch { background-color: rgb(= +51, 177, 255); } + +.FormCheckbox-field:checked + .FormCheckbox-switch::before { transform: tra= +nslateX(15px); } + +.FormCheckbox-field:focus + .FormCheckbox-switch { box-shadow: rgb(51, 177,= + 255) 0px 0px 1px; } + +.FormCheckbox-field.error ~ .FormCheckbox-label::before { border: 1px solid= + rgb(255, 72, 66); } + +.FormCheckbox-field.switch { height: 0px; opacity: 0; width: 0px; } + +.FormCheckbox-label { cursor: pointer; display: inline-block; user-select: = +none; vertical-align: middle; } + +.FormCheckbox-label::before { background: rgb(255, 255, 255); border: 1px s= +olid rgb(168, 177, 192); border-radius: 0.25rem; content: ""; display: bloc= +k; height: 22px; line-height: 22px; transition: 0.1s; vertical-align: middl= +e; width: 22px; } + +.FormCheckbox-switch { background-color: rgb(64, 88, 124); border-radius: 3= +4px; inset: 0px; cursor: pointer; position: absolute; transition: 0.4s; } + +.FormCheckbox-switch::before { background-color: rgb(255, 255, 255); border= +-radius: 50%; bottom: 2px; content: ""; height: 20px; left: 4px; position: = +absolute; transition: 0.4s; width: 20px; } + +.Stars { display: flex; } + +.Stars-icon { margin-right: 2px; } + +.Stars-icon path { fill: rgb(141, 162, 192); } + +.Stars-icon--active path { fill: rgb(254, 214, 52); } + +.ArrowIndicator svg { color: rgb(152, 202, 63); } + +.LoginView { margin: 0px; } + +@media only screen and (min-width: 48rem) { + .LoginView { margin: 2rem 0px; } +} + +.Loginv2 { text-align: center; } + +@media only screen and (min-width: 48rem) { + .Loginv2 { -webkit-box-pack: center; display: grid; grid-template-columns= +: minmax(auto, 376px); justify-content: center; } +} + +@media only screen and (min-width: 64rem) { + .Loginv2 { grid-template-columns: minmax(auto, 405px); } +} + +.Loginv2-container { margin-bottom: 1.5rem; } + +@media only screen and (min-width: 48rem) { + .Loginv2-container { background-color: rgb(255, 255, 255); box-shadow: rg= +ba(0, 0, 0, 0.08) 0px 1px 8px 0px; margin: 0px auto 1.5rem; width: 376px; } +} + +.Loginv2-logo { margin: 0px auto; width: 250px; } + +.Loginv2-logo img { width: 100%; } + +.Loginv2-loginTop { padding-top: 2rem; } + +.Loginv2-link { font-size: 1.1rem; font-weight: 700; padding: 1rem 0px; tex= +t-decoration: none; } + +@media only screen and (min-width: 48rem) { + body { background-color: rgb(243, 248, 251); } +} + +.register-v2 { -webkit-box-orient: vertical; -webkit-box-pack: center; disp= +lay: flex; flex-direction: column; justify-content: center; margin: 0px; te= +xt-align: center; } + +.register-v2-thanks-payment { font-size: 20px; font-weight: 600; } + +@media only screen and (min-width: 48rem) { + .registerV2-container { background-color: rgb(255, 255, 255); box-shadow:= + rgba(0, 0, 0, 0.08) 0px 1px 8px 0px; margin: 1em auto 0px; padding-top: 1p= +x; width: 432px; } +} + +.registerV2-disclaimer { font-weight: 700; line-height: 20px; margin: 2rem = +0px -0.5rem; text-align: center; } + +.registerV2-registerTop { padding-top: 2rem; } + +.NewSearch { -webkit-box-pack: center; grid-area: search; justify-content: = +center; margin: 0px 0.85rem; } + +@media only screen and (min-width: 48rem) { + .NewSearch { -webkit-box-pack: end; display: flex; justify-content: flex-= +end; left: unset; position: relative; top: unset; width: auto; } +} + +@media only screen and (min-width: 75rem) { + .NewSearch { margin: 0px 0.75rem 0px 1.5rem; } +} + +.NewSearch *, .NewSearch--active { box-sizing: border-box; } + +.NewSearch--active { -webkit-box-align: center; -webkit-box-orient: vertica= +l; align-items: center; flex-direction: column; grid-area: initial; height:= + 100%; left: 0px; margin: 0px; padding: 0px 0.5rem; top: 0px; width: 100%; = +z-index: 10; } + +.NewSearch--active, .NewSearch--active .NewSearch-box { display: flex; } + +.NewSearch-mobileBtn { background: none; border: 1px solid rgb(152, 202, 63= +); border-radius: 0.5rem; color: rgb(152, 202, 63); cursor: pointer; displa= +y: inline-block; padding: 0.5rem; } + +@media only screen and (min-width: 48rem) { + .NewSearch-mobileBtn { display: none; } +} + +.NewSearch-mobileBtn:hover { border: 1px solid rgb(193, 223, 139); color: r= +gb(193, 223, 139); } + +.NewSearch-mobileBtn--inactive { display: none; } + +.NewSearch-box-container { -webkit-box-align: center; -webkit-box-pack: cen= +ter; align-items: center; display: none; height: 52px; justify-content: cen= +ter; width: 100%; } + +@media only screen and (min-width: 48rem) { + .NewSearch-box-container { display: flex; width: 360px; } +} + +@media only screen and (min-width: 64rem) { + .NewSearch-box-container { width: 400px; } +} + +@media only screen and (min-width: 83.125rem) { + .NewSearch-box-container { width: 215px; } +} + +@media only screen and (min-width: 1520px) { + .NewSearch-box-container { width: 400px; } +} + +.NewSearch-box-container--active { display: flex; } + +@media only screen and (min-width: 48rem) { + .NewSearch--noLogged .NewSearch-box-container, .NewSearch--noLogged .NewS= +earch-dropdown { width: 240px; } +} + +@media only screen and (min-width: 75rem) { + .NewSearch--noLogged .NewSearch-box-container, .NewSearch--noLogged .NewS= +earch-dropdown { width: 400px; } +} + +@media only screen and (min-width: 83.125rem) { + .NewSearch--noLogged .NewSearch-box-container, .NewSearch--noLogged .NewS= +earch-dropdown { width: 215px; } +} + +@media only screen and (min-width: 1520px) { + .NewSearch--noLogged .NewSearch-box-container, .NewSearch--noLogged .NewS= +earch-dropdown { width: 400px; } +} + +.NewSearch-box { -webkit-box-align: center; align-items: center; animation-= +duration: 0.3s; animation-name: mobileSearch; animation-timing-function: ea= +se-in; background-color: rgb(3, 9, 30); border: 1px solid rgb(64, 88, 124);= + border-radius: 0.5rem; display: none; padding: 0.5rem 1rem; width: 100%; } + +@media only screen and (min-width: 48rem) { + .NewSearch-box { display: flex; width: 360px; } +} + +@media only screen and (min-width: 64rem) { + .NewSearch-box { width: 400px; } +} + +@media only screen and (min-width: 75rem) { + .NewSearch-box { animation-name: none; } +} + +@media only screen and (min-width: 83.125rem) { + .NewSearch-box { width: 215px; } +} + +@media only screen and (min-width: 1520px) { + .NewSearch-box { width: 400px; } +} + +.NewSearch-box:focus-within { border: 1px solid rgb(51, 177, 255); } + +.NewSearch-button { background: transparent; border: none; cursor: pointer;= + } + +.NewSearch-button svg { color: rgb(152, 202, 63); display: inline-block; ma= +rgin-right: 0.5rem; } + +.NewSearch-input { background: transparent; border: 0px; color: rgb(239, 24= +3, 248); font-size: 0.875rem; padding: 0px; width: 100%; } + +.NewSearch-input::placeholder { color: rgb(99, 122, 157); } + +.NewSearch-input:focus { outline: none; } + +.NewSearch-input-clear { background: none; border: 0px; color: rgb(99, 122,= + 157); cursor: pointer; height: 1.125rem; padding: 0px; } + +.NewSearch-input-clear:hover { color: rgb(141, 162, 192); } + +.NewSearch-dropdown { display: none; overflow: hidden; } + +.NewSearch-dropdown--active { background-color: rgb(36, 56, 91); border: 1p= +x solid rgb(64, 88, 124); border-radius: 0.5rem; display: block; list-style= +-type: none; margin: 0px; padding: 0px; width: 100%; } + +@media only screen and (min-width: 48rem) { + .NewSearch-dropdown--active { position: absolute; top: 3rem; width: 360px= +; z-index: 10; } +} + +@media only screen and (min-width: 64rem) { + .NewSearch-dropdown--active { width: 400px; } +} + +@media only screen and (min-width: 83.125rem) { + .NewSearch-dropdown--active { width: 215px; } +} + +@media only screen and (min-width: 1520px) { + .NewSearch-dropdown--active { width: 400px; } +} + +.NewSearch-dropdown-item:last-child { margin-bottom: 0px; } + +.NewSearch-dropdown-link { -webkit-box-orient: horizontal; -webkit-box-alig= +n: center; align-items: center; background: transparent; border: none; colo= +r: rgb(239, 243, 248); cursor: pointer; display: flex; flex-direction: row;= + font-size: 0.875rem; padding: 0.57rem 1rem; text-decoration: none; width: = +100%; } + +.NewSearch-dropdown-link svg { margin: 0px 0.75rem 0px 0.25rem; } + +.NewSearch-dropdown-link img { height: 1.25rem; margin-right: 0.5rem; width= +: 1.25rem; } + +.NewSearch-dropdown-link div { text-align: left; } + +.NewSearch-dropdown-link div p { color: rgb(141, 162, 192); font-size: 0.75= +rem; margin-top: 0.25rem; } + +.NewSearch-dropdown-link:focus { background-color: rgb(64, 88, 124); outlin= +e: none; } + +.NewSearch-dropdown-link:hover { background-color: rgb(64, 88, 124); } + +.NewSearch-dropdown hr { border-bottom: 0px; } + +.NewSearch-dropdown-all-results, .NewSearch-dropdown hr { border-top: 1px s= +olid rgb(64, 88, 124); } + +.NewSearch-dropdown-all-results img { height: 10px; margin-right: 0.8rem; w= +idth: 9px; } + +@-webkit-keyframes mobileSearch {=20 + 0% { width: 60%; } + 100% { width: 100%; } +} + +@keyframes mobileSearch {=20 + 0% { width: 60%; } + 100% { width: 100%; } +} + +.Star { -webkit-box-orient: vertical; -webkit-box-align: center; align-item= +s: center; align-self: flex-start; background: rgb(255, 255, 255); border-r= +adius: 0.5rem; box-shadow: rgba(0, 0, 0, 0.62) 2px 2px 4px -3px; box-sizing= +: border-box; color: rgb(0, 0, 0); cursor: pointer; display: flex; flex-dir= +ection: column; margin: 0px auto; max-width: 40px; overflow: visible; text-= +align: center; transition: 0.1s; user-select: none; width: 100%; will-chang= +e: border-color, color, transform, text-shadow, box-shadow; z-index: 2 !imp= +ortant; } + +.Star-wrapper { padding-top: 0px; } + +.Star:hover { box-shadow: rgba(0, 0, 0, 0.38) 5px 4px 4px -4px; } + +.Star-icon { color: rgb(169, 170, 173); font-size: 23px; transition: 0.3s; = +} + +.Star-icon.is-loved { background-position: -582px -2px; color: rgb(152, 202= +, 63); } + +.Star-icon.animated-like { animation: 1s steps(29) 0s 1 normal forwards run= +ning filledHeart; } + +.Star-heart { animation-duration: 1s; animation-fill-mode: forwards; animat= +ion-timing-function: steps(29); background-image: url("https://static.platz= +i.com/ui/assets/image/like-animation_20px0971bad2087a133b0144.svg"); backgr= +ound-position: -2px -2px; background-repeat: no-repeat; height: 16px; width= +: 16px; } + +.Star-heart.is-loved { background-position: -582px -2px; color: rgb(152, 20= +2, 63); } + +.Star-heart.animated-like { animation: 1s steps(29) 0s 1 normal forwards ru= +nning filledHeart; } + +.Star-number { font-size: 12px; margin-bottom: 0.25rem; text-shadow: none; = +} + +.Star.is-small .Star-icon { font-size: 25px; } + +.Star.is-small .Star-number { color: rgb(34, 51, 84); font-size: 0.875em; f= +ont-weight: 400; } + +.Star.is-medium { padding: 0px 1rem; } + +.Star.is-card { -webkit-box-orient: horizontal; -webkit-box-align: center; = +align-items: center; border: none; box-shadow: none; flex-direction: row; m= +ax-width: 70px; } + +.Star.is-card .Star-number { margin-bottom: 0px; margin-left: 2px; } + +.Star.is-card .Star-icon { background-size: 234px 18px; color: rgb(169, 170= +, 173); cursor: pointer; font-size: 25px; margin-left: 5px; transform: scal= +e(0.6); will-change: transform; } + +.Star.is-card .Star-icon.is-active, .Star.is-card .Star-icon.is-liked, .Sta= +r.is-card .Star-icon.is-loved { background-position: -582px -2px; color: rg= +b(152, 202, 63); } + +.Star.is-card .Star-icon.animated-like { animation: 1s steps(29) 0s 1 norma= +l forwards running filledHeart; } + +@-webkit-keyframes like {=20 + 0% { background-position-x: 0px; } + 100% { background-position-x: 100%; } +} + +@keyframes like {=20 + 0% { background-position-x: 0px; } + 100% { background-position-x: 100%; } +} + +@-webkit-keyframes dislike {=20 + 0% { background-position-x: 100%; } + 100% { background-position-x: 0px; } +} + +@keyframes dislike {=20 + 0% { background-position-x: 100%; } + 100% { background-position-x: 0px; } +} + +@-webkit-keyframes difusion {=20 + 100% { color: transparent; text-shadow: 40.4509px 29.3892px, 8.498px 26.1= +54px, -15.4508px 47.5529px, -22.2479px 16.1641px, -50px 0.0001327px, -22.24= +8px -16.164px, -15.451px -47.5528px, 8.49786px -26.1541px, 40.4507px -29.38= +95px, 27.5px -0.000145942px; transform: none; } +} + +@keyframes difusion {=20 + 100% { color: transparent; text-shadow: 40.4509px 29.3892px, 8.498px 26.1= +54px, -15.4508px 47.5529px, -22.2479px 16.1641px, -50px 0.0001327px, -22.24= +8px -16.164px, -15.451px -47.5528px, 8.49786px -26.1541px, 40.4507px -29.38= +95px, 27.5px -0.000145942px; transform: none; } +} + +@-webkit-keyframes filledHeart {=20 + 0% { background-position: -2px -2px; } + 100% { background-position: -582px -2px; } +} + +@keyframes filledHeart {=20 + 0% { background-position: -2px -2px; } + 100% { background-position: -582px -2px; } +} + +.Tag { border-radius: 17px; display: inline-block; font-size: 10px; line-he= +ight: 1.25; max-width: 85px; padding: 2px 5px; text-align: center; user-sel= +ect: none; } + +@media only screen and (min-width: 48rem) { + .Tag { font-size: 12px; line-height: 1.5; max-width: unset; padding: 2px = +10px; } +} + +.ProgressBar-platziDay { background-color: rgb(200, 228, 245); border-radiu= +s: 8px; box-sizing: border-box; display: block; padding: 1rem; width: 100%;= + } + +.ProgressBar-platziDay-container { background-color: rgb(255, 255, 255); he= +ight: 4px; position: relative; width: 100%; } + +.ProgressBar-platziDay-container-bar { background-color: rgb(7, 145, 230); = +height: 100%; left: 0px; position: absolute; } + +.ProgressBar-platziDay-description { -webkit-box-orient: horizontal; color:= + rgb(64, 88, 124); display: flex; flex-direction: row; font-size: 0.875rem;= + margin-bottom: 0.5rem; } + +.ProgressBar-platziDay-description span { margin-right: 0.5rem; } + +.ProgressBar-platziDay-description span svg { color: rgb(7, 145, 230); } + +.ProgressBar-reached { background-color: rgb(214, 239, 216); border-radius:= + 8px; box-sizing: border-box; display: block; padding: 1rem; width: 100%; } + +.ProgressBar-reached-description { -webkit-box-orient: horizontal; display:= + flex; flex-direction: row; font-size: 0.875rem; margin-bottom: 0.5rem; } + +.ProgressBar-reached-description span { margin-right: 0.5rem; } + +.ProgressBar-reached-description span svg { color: rgb(152, 202, 63); } + +.ProgressBar-reached-continue { background-color: rgb(152, 202, 63); border= +-radius: 4px; color: rgb(255, 255, 255); display: inline-block; font-size: = +0.75rem; margin-left: 20px; padding: 0.5rem 1rem; text-decoration: none; te= +xt-transform: uppercase; } + +.ProgressBar-reached-continue:hover { background: rgb(171, 222, 80); } + +.ProgressBar-reached-continue:focus { box-shadow: rgba(7, 145, 230, 0.32) 0= +px 0px 0px 4px; outline: none; } + +.ProgressBar.isDark .ProgressBar-platziDay { background-color: rgb(29, 79, = +124); } + +.ProgressBar.isDark .ProgressBar-platziDay-description { color: rgb(239, 24= +3, 248); } + +.ProgressBar.isDark .ProgressBar-platziDay-container { background-color: rg= +ba(51, 177, 255, 0.2); } + +.ProgressBar.isDark .ProgressBar-platziDay-container-bar { background-color= +: rgb(51, 177, 255); } + +.Card { background-color: rgb(255, 255, 255); border-radius: 4px; box-shado= +w: rgba(36, 56, 91, 0.16) 1px 2px 4px 0px; box-sizing: border-box; margin-b= +ottom: 1rem; padding: 1rem; } + +.Card--dark { background-color: rgb(36, 56, 91); border-radius: 12px; box-s= +hadow: none; color: rgb(239, 243, 248); } + +.Progress { background-color: rgb(66, 92, 61); width: 100%; } + +.Progress, .Progress-bar { display: block; height: 8px; } + +.Progress-bar { background-color: rgb(152, 202, 63); } + +.PricePlans * { box-sizing: border-box; } + +.PricePlans--darker .PriceAltTabs-tabs .Tab { color: rgb(44, 241, 206); } + +.PricePlans--darker .PriceAltTabs-tabs .is-active { border-bottom: 1px soli= +d rgb(44, 241, 206) !important; color: rgb(44, 241, 206) !important; } + +.PricePlans--darker .PriceAltTabs-tabs .is-active > p { color: rgb(44, 241,= + 206) !important; } + +.PricePlans--mobile { display: block; margin: 1rem 0px 2rem; } + +@media only screen and (min-width: 48rem) { + .PricePlans--mobile { margin: 1.5rem 0px; } +} + +@media only screen and (min-width: 64rem) { + .PricePlans--mobile { display: none; } +} + +.PricePlans--desktop { display: none; } + +@media only screen and (min-width: 64rem) { + .PricePlans--desktop { display: block; margin: 2.5rem 0px; } +} + +.PricePlans--light .PriceAltTabs-tabs .Tab { color: rgb(18, 31, 61); } + +.PricePlans-container { align-items: stretch; column-gap: 1rem; display: fl= +ex; justify-content: center; } + +.PricePlans-container .is-b2b { align-items: flex-start; } + +.PricePlans .ModalDark-headerIcon { font-size: 1.5rem; height: auto; width:= + auto; } + +.PricePlans .ModalDark-actions { text-align: right; } + +.PricePlans .ModalDark-actions .Button:last-child { margin-right: 0px; } + +.PriceAltTabs { margin: 0px auto; max-width: 520px; } + +.PriceAltTabs-tabs { border-bottom: 1px solid rgb(36, 56, 91); display: fle= +x; justify-content: center; margin-bottom: 2.5rem; width: 100%; } + +.PriceAltTabs-tabs .Tab { border-bottom: 2px solid transparent; color: rgb(= +190, 205, 227); cursor: pointer; font-size: 0.75rem; font-weight: 700; marg= +in-right: 1.5rem; padding: 0.75rem 0px; text-align: center; transition: 0.2= +s; } + +.PriceAltTabs-tabs .Tab:last-child { margin-right: 0px; } + +.PriceAltTabs-tabs .Tab:hover, .PriceAltTabs-tabs .Tab:hover p { color: rgb= +(239, 243, 248); } + +.PriceAltTabs-tabs .Tab.is-active { border-bottom: 2px solid rgb(51, 177, 2= +55); color: rgb(51, 177, 255); } + +.PriceAltTabs-tabs .Tab.is-active p, .PriceAltTabs-tabs .Tab.is-active p:ho= +ver { color: rgb(51, 177, 255); } + +.PriceAltTabs-tabs .Tab span { color: rgb(99, 123, 157); margin-left: 0.25r= +em; } + +.PriceAltTabs-tabs .Tab p { color: rgb(141, 162, 192); font-size: 0.75rem; = +font-weight: 400; letter-spacing: -0.008rem; line-height: 1rem; margin-top:= + 0.25rem; text-align: center; } + +.Loader { -webkit-box-pack: center; display: flex; justify-content: center;= + } + +.Loader-circle { animation: 1s linear 0s infinite normal none running spin;= + border-radius: 23px; border-width: 0.2rem; border-style: solid; border-col= +or: rgb(168, 177, 192) rgb(217, 223, 230) rgb(217, 223, 230); border-image:= + initial; height: 1.5rem; width: 1.5rem; } + +@-webkit-keyframes spin {=20 + 0% { transform: rotate(0deg); } + 100% { transform: rotate(1turn); } +} + +@keyframes spin {=20 + 0% { transform: rotate(0deg); } + 100% { transform: rotate(1turn); } +} + +.Categories { padding-bottom: 3rem; padding-top: 3rem; } + +@media only screen and (min-width: 64rem) { + .Categories { padding-bottom: 7.5rem; padding-top: 7.5rem; } +} + +.Categories-title { color: rgb(239, 243, 248); font-size: 1.75rem; font-wei= +ght: 700; letter-spacing: -0.008em; line-height: 120%; margin-bottom: 1.25r= +em; position: relative; text-align: center; } + +.Categories-title::before { background-color: rgb(152, 202, 63); border-rad= +ius: 0.5rem; content: ""; display: none; height: 0.625rem; left: 50%; posit= +ion: absolute; top: -1.875rem; transform: translateX(-50%); width: 3.125rem= +; } + +@media only screen and (min-width: 64rem) { + .Categories-title::before { display: block; } +} + +@media only screen and (min-width: 48rem) { + .Categories-title { font-size: 2.5rem; font-weight: 900; } +} + +.Categories-description { color: rgb(190, 205, 227); font-size: 1.125rem; f= +ont-weight: 400; letter-spacing: -0.004em; line-height: 152%; text-align: c= +enter; } + +.Categories-list { gap: 0.75rem; display: grid; grid-template-columns: 1fr;= + list-style: none; margin: 2.5rem 0px 0px; padding: 0px; } + +@media only screen and (min-width: 48rem) { + .Categories-list { grid-template-columns: 1fr 1fr; } +} + +.Categories-category-item { background-color: rgb(12, 22, 51); border-radiu= +s: 0.5rem; box-sizing: border-box; display: grid; grid-template-columns: au= +to 1fr; height: 100%; max-width: 35.125rem; padding: 1rem; text-decoration:= + none; } + +@media only screen and (min-width: 48rem) { + .Categories-category-item { grid-template-columns: 1fr; } +} + +.Categories-category-item-icon { border-radius: 50%; height: 2.5rem; width:= + 2.5rem; } + +.Categories-category-item-logo { height: 100%; width: 100%; } + +.Categories-category-item-title { color: rgb(255, 255, 255); font-weight: 7= +00; margin: 0px; } + +@media only screen and (min-width: 48rem) { + .Categories-category-item-title { margin-bottom: 2rem; margin-top: 0.5rem= +; } +} + +.Categories-category-item-info-wraper { -webkit-box-align: center; align-it= +ems: center; display: flex; margin-left: 1rem; } + +@media only screen and (min-width: 48rem) { + .Categories-category-item-info-wraper { margin-left: 0px; } +} + +.Categories-category-item-info { color: rgb(141, 162, 192); font-size: 14px= +; margin-top: 0.5rem; } + +.Categories-category-item:hover { background-color: rgb(3, 9, 30); cursor: = +pointer; } + +@media only screen and (min-width: 48rem) { + .Categories-category-item { column-gap: 1rem; grid-template-columns: auto= + 1fr; } + .Categories-category-item-title { margin-bottom: 0px; } +} + +.Categories-button { -webkit-box-pack: center; display: flex; font-size: 1.= +125rem; font-weight: 400; justify-content: center; line-height: 1.5rem; mar= +gin: 2.5rem auto; max-width: 14.5rem; padding: 1rem; text-align: center; wi= +dth: -webkit-fill-available; } + +@media only screen and (min-width: 48rem) { + .Categories-button { width: auto; } +} + +.SocialNetworkSSO.Button { -webkit-box-pack: center; -webkit-box-align: cen= +ter; align-items: center; background-color: rgb(36, 56, 91); border-radius:= + 8px; box-sizing: border-box; color: rgb(255, 255, 255); display: flex; fon= +t-size: 1rem; font-style: normal; font-weight: 500; gap: 0.75rem; justify-c= +ontent: center; letter-spacing: 0.2px; line-height: 24px; margin-bottom: 0.= +75rem; padding: 0.75rem; text-transform: none; width: 100%; } + +.SocialNetworkSSO:hover { background-color: rgb(64, 88, 124); } + +.SocialNetworkSSO--email.Button, .SocialNetworkSSO--rrss.Button { margin: 2= +rem auto 0px; padding: 0.5rem 1rem; width: fit-content; } + +.InnerRegisterModal { border-radius: 12px; max-width: 100vw; overflow: hidd= +en; } + +@media only screen and (min-width: 48rem) { + .InnerRegisterModal { max-width: 560px; } +} + +.InnerRegisterModal .ModalHead { padding: 1.5rem 2rem; } + +.InnerRegisterModal.ModalBase { max-width: 560px; overflow: hidden; } + +.InnerRegisterModal .ModalBody { padding: 0px; } + +.InnerRegisterModal-loader { margin: 1.5rem 0px; } + +.InnerRegisterModal-head { background-color: rgb(36, 56, 91); letter-spacin= +g: -0.008em; } + +.InnerRegisterModal-head-info { -webkit-box-align: center; align-items: cen= +ter; display: flex; gap: 0.75rem; margin-bottom: 0.75rem; } + +.InnerRegisterModal-head-info img { height: auto; width: 28px; } + +.InnerRegisterModal-head-title { color: rgb(255, 255, 255); font-size: 1.37= +5rem; font-style: normal; font-weight: 400; letter-spacing: -0.13px; line-h= +eight: 28px; } + +.InnerRegisterModal-head-description { color: rgb(190, 205, 227); font-size= +: 0.875rem; font-style: normal; font-weight: 400; letter-spacing: 0.3px; li= +ne-height: 20px; } + +.InnerRegisterModal-body { padding: 1.5rem; } + +@media only screen and (min-width: 48rem) { + .InnerRegisterModal-body { padding: 2rem 5rem; } +} + +.InnerRegisterModal-body-title { color: rgb(255, 255, 255); font-size: 0.87= +5rem; font-style: normal; font-weight: 400; letter-spacing: 0.3px; line-hei= +ght: 20px; margin-bottom: 1rem; } + +.InnerRegisterModal-body-social { margin-bottom: 1.25rem; margin-top: 1rem;= + } + +.InnerRegisterModal-body-register-input { margin-bottom: 0.75rem; min-width= +: 0px; } + +.InnerRegisterModal-body-register-input label { display: none !important; } + +.InnerRegisterModal-body-register-submit.Button { font-size: 1rem; font-sty= +le: normal; font-weight: 500; letter-spacing: 0.2px; line-height: 24px; mar= +gin-top: 1.5rem; text-transform: none; width: 100%; } + +.InnerRegisterModal-body-register-fullname, .InnerRegisterModal-body-regist= +er-tyc { -webkit-box-align: center; align-items: center; display: flex; gap= +: 0.75rem; } + +.InnerRegisterModal-body-register-tyc { color: rgb(190, 205, 227); display:= + block; font-size: 0.875rem; font-style: normal; font-weight: 500; letter-s= +pacing: 0.3px; line-height: 20px; margin: auto; max-width: 80%; text-align:= + center; } + +.InnerRegisterModal-body-register-tyc a { color: rgb(255, 255, 255); text-a= +lign: center; text-decoration: underline; } + +.InnerRegisterModal-body-register-tyc a:hover { color: rgb(199, 204, 212); = +} + +.InnerRegisterModal-body-register-error { -webkit-box-align: start; align-i= +tems: flex-start; color: rgb(255, 96, 91); display: flex; gap: 0.5rem; marg= +in: 1rem 0px 0.5rem; } + +.InnerRegisterModal-body form { margin-bottom: 0.75rem; } + +.InnerRegisterModal-footer { color: rgb(141, 162, 192); font-size: 0.875rem= +; font-style: normal; font-weight: 400; letter-spacing: 0.3px; line-height:= + 20px; padding: 1.5rem 0px; text-align: center; width: 100%; } + +.InnerRegisterModal-footer-button.Button { color: rgb(255, 255, 255); font-= +style: normal; font-weight: 500; letter-spacing: 0.3px; line-height: 20px; = +padding: 0px 0px 0px 0.25rem; text-decoration: underline; text-transform: n= +one; border: none !important; } + +.InnerRegisterModal--dark { background-color: rgb(18, 31, 61); } + +.InnerRegisterModal--radiance { background-color: rgb(28, 32, 40); } + +.InnerRegisterModal--radiance .InnerRegisterModal-head { background-color: = +rgb(44, 50, 60); } + +.InnerRegisterModal--radiance .InnerRegisterModal-body-register-submit, .In= +nerRegisterModal--radiance .SocialNetworkSSO { background-color: rgb(255, 2= +55, 255) !important; box-shadow: rgb(164, 171, 182) 0px 2px 0px 0px !import= +ant; color: rgb(19, 22, 28) !important; } + +.InnerRegisterModal--radiance .InnerRegisterModal-body-register-submit a, .= +InnerRegisterModal--radiance .SocialNetworkSSO a { background-color: transp= +arent !important; box-shadow: none !important; } + +.InnerRegisterModal--radiance .InnerRegisterModal-body-register-submit:hove= +r, .InnerRegisterModal--radiance .SocialNetworkSSO:hover { background-color= +: rgb(255, 255, 255) !important; color: rgb(19, 22, 28) !important; } + +.InnerRegisterModal--radiance .SocialNetworkSSO--email, .InnerRegisterModal= +--radiance .SocialNetworkSSO--rrss { background-color: transparent !importa= +nt; border: 1px solid rgb(89, 97, 111) !important; box-shadow: rgb(89, 97, = +111) 0px 2px 0px 0px !important; color: rgb(221, 224, 229) !important; } + +.InnerRegisterModal--radiance .SocialNetworkSSO--email:hover, .InnerRegiste= +rModal--radiance .SocialNetworkSSO--rrss:hover { color: rgb(19, 22, 28) !im= +portant; } + +.InnerRegisterModal--radiance .SocialNetworkSSO--email svg, .InnerRegisterM= +odal--radiance .SocialNetworkSSO--rrss svg { display: none; } + +.InnerRegisterModal--radiance .InnerRegisterModal-head-title { color: rgb(2= +55, 255, 255); } + +.InnerRegisterModal--radiance .InnerRegisterModal-head-description { color:= + rgb(199, 204, 212); } + +.InnerRegisterModal--radiance .InnerRegisterModal-body { background-color: = +rgb(28, 32, 40); } + +.InnerRegisterModal--radiance .InnerRegisterModal-body-title { color: rgb(1= +35, 144, 157); } + +.InnerRegisterModal--radiance .InnerRegisterModal-footer { background-color= +: rgb(19, 22, 28); color: rgb(164, 171, 182); } + +.InnerRegisterModal--radiance .InnerRegisterModal-footer-button { color: rg= +b(239, 241, 243) !important; } + +.InnerRegisterModal--radiance .InnerRegisterModal-footer-button:hover { col= +or: rgb(199, 204, 212); } + +.b2b-theme { --theme-chip-bg-color: #2c323c; --theme-chip-bg-color-active: = +#da343c; --theme-chip-bg-color-hover: #464e5b; --theme-chip-color-active: #= +fff; --theme-chip-color: #dde0e5; --theme-chip-color-hover: #eff1f3; --them= +e-chip-radius: .5rem; } + +.b2b-theme .Chip--Secondary { --theme-chip-border-color-active: #da343c; --= +theme-chip-color-hover: #dde0e5; } + +.Chip { --chip-bg-color: var(--theme-chip-bg-color,#2c323c); --chip-bg-colo= +r-active: var(--theme-chip-bg-color-active,#0bf491); --chip-bg-color-hover:= + var(--theme-chip-bg-color-hover,#464e5b); --chip-border-color: var(--theme= +-chip-border-color,var(--chip-bg-color)); --chip-border-color-active: var(-= +-theme-chip-border-color-active,var(--chip-bg-color-active)); --chip-border= +-color-hover: var(--theme-chip-border-color-hover,var(--chip-bg-color-hover= +)); --chip-color-active: var(--theme-chip-color-active,#03091e); --chip-col= +or: var(--theme-chip-color,#dde0e5); --chip-color-hover: var(--theme-chip-c= +olor-hover,#eff1f3); --chip-radius: var(--theme-chip-radius,.7rem); -webkit= +-box-align: center; align-items: center; background-color: var(--chip-bg-co= +lor); border: 1px solid var(--chip-border-color); border-radius: var(--chip= +-radius); color: var(--chip-color); cursor: pointer; display: inline-flex; = +flex-shrink: 0; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem= +; padding: 0.25rem 0.75rem; transition: 0.1s ease-in-out; } + +.Chip:hover { background-color: var(--chip-bg-color-hover); border: 1px sol= +id var(--chip-border-color-hover); color: var(--chip-color-hover); } + +.Chip--Selected, .Chip--Selected:hover, .Chip:active, .Chip:active:hover { = +background-color: var(--chip-bg-color-active); border: 1px solid var(--chip= +-border-color-active); color: var(--chip-color-active); } + +.Chip--Secondary { background-color: transparent !important; } + +.Chip input { display: none; } + +.Alert { -webkit-box-align: start; align-items: flex-start; border-radius: = +0.75rem; box-sizing: border-box; display: flex; padding: 0.75rem 1rem; widt= +h: 100%; } + +.Alert.info { background-color: rgb(232, 244, 253); } + +.Alert.info .Alert-icon, .Alert.info .Alert-message { color: rgb(5, 96, 153= +); } + +.Alert.success { background-color: rgb(214, 237, 208); } + +.Alert.success .Alert-icon, .Alert.success .Alert-message { color: rgb(78, = +109, 34); } + +.Alert.warning { background-color: rgb(255, 244, 217); } + +.Alert.warning .Alert-icon, .Alert.warning .Alert-message { color: rgb(120,= + 80, 0); } + +.Alert.error { background-color: rgb(255, 218, 217); } + +.Alert.error .Alert-icon, .Alert.error .Alert-message { color: rgb(168, 48,= + 44); } + +.Alert-icon { margin-right: 0.75rem; margin-top: 0.25rem; width: 1rem; } + +.Alert-message { color: rgb(12, 22, 51); font-size: 0.875rem; line-height: = +1.6; } + +.Alert-closeBtn { background: transparent; border: none; cursor: pointer; h= +eight: 1.125rem; outline: none; transition: background 0.5s; width: 1.25rem= +; } + +.Alert-closeBtn:focus, .Alert-closeBtn:hover { outline: none; } + +.Alert-closeIcon { color: rgb(141, 162, 192); font-size: 0.875rem; } + +.Tooltip-container { position: relative; } + +.Tooltip-content, .Tooltip-hover { position: absolute; } + +.Tooltip-content { -webkit-box-orient: vertical; -webkit-box-align: center;= + align-items: center; display: flex; flex-direction: column; visibility: hi= +dden; width: max-content; } + +.Tooltip-content-arrow { border-left: 5px solid transparent; border-right: = +5px solid transparent; height: 0px; position: relative; width: 0px; } + +.Tooltip-content-arrow--up { border-bottom: 8px solid rgb(239, 243, 248); } + +.Tooltip-content-arrow--down { border-top: 8px solid rgb(239, 243, 248); } + +.Tooltip-content--is-visible { visibility: visible; } + +.Tooltip-children { width: 100%; } + +.Tooltip-children:active, .Tooltip-children:focus { outline: none; } + +.BasicTooltip { display: none; } + +.BasicTooltip--active { background-color: rgb(239, 243, 248); border-radius= +: 0.5rem; color: rgb(18, 31, 61); display: block; font-size: 0.875rem; lett= +er-spacing: 0.25px; line-height: 1.4; max-width: 260px; padding: 0.5rem; po= +sition: absolute; text-align: center; width: auto; z-index: 1; } + +.BasicTooltip--active::before { content: ""; height: 0px; pointer-events: n= +one; position: absolute; width: 0px; } + +@media only screen and (max-width: 48rem) { + .BasicTooltip--bottom, .BasicTooltip--left, .BasicTooltip--right, .BasicT= +ooltip--top { right: 50%; top: calc(100% + 0.5rem); transform: translateX(5= +0%); } + .BasicTooltip--bottom::before, .BasicTooltip--left::before, .BasicTooltip= +--right::before, .BasicTooltip--top::before { border-bottom: 0.5rem solid r= +gb(239, 243, 248); border-left: 0.5rem solid transparent; border-right: 0.5= +rem solid transparent; bottom: 100%; right: 50%; transform: translateX(50%)= +; } +} + +.BasicTooltip--bottom, .BasicTooltip--top { right: 50%; transform: translat= +eX(50%); } + +@media only screen and (min-width: 48rem) { + .BasicTooltip--bottom::before, .BasicTooltip--top::before { border-left: = +0.5rem solid transparent; border-right: 0.5rem solid transparent; right: 50= +%; transform: translateX(50%); } + .BasicTooltip--left, .BasicTooltip--left::before, .BasicTooltip--right, .= +BasicTooltip--right::before { top: 50%; transform: translateY(-50%); } + .BasicTooltip--left::before, .BasicTooltip--right::before { border-bottom= +: 0.5rem solid transparent; border-top: 0.5rem solid transparent; } + .BasicTooltip--top { bottom: calc(100% + 0.5rem); top: unset; } + .BasicTooltip--top::before { border-bottom: 0px; border-top: 0.5rem solid= + rgb(239, 243, 248); bottom: unset; top: 100%; } + .BasicTooltip--right { left: calc(100% + 1rem); } + .BasicTooltip--right::before { border-left: none; border-right: 0.5rem so= +lid rgb(239, 243, 248); left: -0.5rem; } + .BasicTooltip--bottom { top: calc(100% + 0.5rem); } + .BasicTooltip--bottom::before { border-bottom: 0.5rem solid rgb(239, 243,= + 248); bottom: 100%; } + .BasicTooltip--left { right: calc(100% + 1rem); } + .BasicTooltip--left::before { border-left: 0.5rem solid rgb(239, 243, 248= +); border-right: none; right: -0.5rem; } +} + +.ModalDark { -webkit-box-pack: center; -webkit-box-align: center; align-ite= +ms: center; inset: 0px; display: flex; justify-content: center; position: f= +ixed; z-index: 10; } + +.ModalDark-backdrop { background-color: rgba(3, 9, 30, 0.6); border: none; = +display: block; height: 100vh; left: 0px; padding: 0px; position: fixed; to= +p: 0px; width: 100vw; z-index: 1; } + +.ModalDark-container { animation-direction: normal; animation-duration: 0.4= +s; animation-fill-mode: forwards; animation-name: modal; animation-timing-f= +unction: ease-out; background-color: rgb(36, 56, 91); border-radius: 0.5rem= +; max-width: 600px; position: relative; width: 95%; z-index: 2; } + +.ModalDark-closeBtn { background: transparent; border: none; color: rgb(99,= + 122, 157); cursor: pointer; padding: 0px; position: absolute; right: 1rem;= + top: 0.75rem; width: 0.875rem; z-index: 2; } + +.ModalDark-closeBtn:hover { color: rgb(239, 243, 248); } + +.ModalDark-header { -webkit-box-orient: vertical; -webkit-box-align: start;= + align-items: flex-start; flex-flow: column; padding: 2rem 2rem 0px; } + +.ModalDark-header, .ModalDark-headerIcon { display: flex; } + +.ModalDark-headerIcon { -webkit-box-pack: center; -webkit-box-align: center= +; align-items: center; background-color: rgb(51, 177, 255); border-radius: = +50%; color: rgb(3, 9, 30); font-size: 1.125rem; height: 1.5rem; justify-con= +tent: center; margin-right: 1rem; padding: 0.75rem; width: 1.5rem; } + +.ModalDark-title { color: rgb(239, 243, 248); font-size: 1.125rem; font-wei= +ght: 700; width: 90%; } + +.ModalDark-subtitle { font-size: 0.625rem; font-weight: 700; } + +.ModalDark-content { border-radius: 0.5rem; color: rgb(239, 243, 248); padd= +ing: 1.25rem 2rem; } + +.ModalDark-actions { background-color: rgb(18, 31, 61); border-radius: 0px = +0px 0.5rem 0.5rem; flex-wrap: wrap; padding: 1.5rem 2rem; } + +.ModalDark-actions, .ModalDark-actions .Button { display: flex; } + +.ModalDark-actions .Button { gap: 0.5rem; margin-bottom: 1rem; width: 100%;= + } + +@media only screen and (min-width: 48rem) { + .ModalDark-actions .Button { margin-bottom: 0px; margin-right: 1rem; widt= +h: auto; } +} + +.ModalDark-actions .Button .Loader-circle { height: 1rem; width: 1rem; } + +.ModalDark-error { -webkit-box-flex: 1; color: rgb(255, 96, 91); flex: 1 1 = +100%; font-size: 1.125rem; line-height: 1.6; margin-bottom: 1.5rem; } + +@-webkit-keyframes modal {=20 + 0% { opacity: 0; transform: translateY(10%); } + 100% { filter: none; opacity: 1; transform: translateY(0px); } +} + +@keyframes modal {=20 + 0% { opacity: 0; transform: translateY(10%); } + 100% { filter: none; opacity: 1; transform: translateY(0px); } +} + +.Button { border: 0px; border-radius: 0.5rem; color: rgb(3, 9, 30); cursor:= + pointer; display: inline-block; font-weight: 700; line-height: 1.6; text-d= +ecoration: none; text-transform: uppercase; } + +.Button--small { font-size: 0.75rem; padding: 0.5rem 0.75rem; } + +.Button--medium { font-size: 0.875rem; padding: 0.5rem 1rem; } + +.Button--big { font-size: 1rem; padding: 0.75rem 1.5rem; } + +.Button--primary.Button--platzi { background-color: rgb(152, 202, 63); } + +.Button--primary.Button--platzi:hover { background-color: rgb(193, 223, 139= +); } + +.Button--primary.Button--platzi:active { background-color: rgb(119, 166, 30= +); } + +.Button--primary.Button--platzi:focus { outline: rgb(29, 79, 124) solid 4px= +; } + +.Button--primary.Button--platzi:disabled { background-color: rgb(64, 88, 12= +4); cursor: not-allowed; } + +.Button--primary.Button--sky { background-color: rgb(51, 177, 255); } + +.Button--primary.Button--sky:hover { background-color: rgb(116, 202, 255); = +} + +.Button--primary.Button--sky:active { background-color: rgb(7, 145, 230); } + +.Button--primary.Button--sky:focus { outline: rgb(29, 79, 124) solid 4px; } + +.Button--primary.Button--sky:disabled { background-color: rgb(64, 88, 124);= + cursor: not-allowed; } + +.Button--primary.Button--admin { background-color: rgb(255, 149, 91); } + +.Button--primary.Button--admin:hover { background-color: rgb(255, 176, 132)= +; } + +.Button--primary.Button--admin:active { background-color: rgb(255, 124, 51)= +; } + +.Button--primary.Button--admin:focus { outline: rgb(29, 79, 124) solid 4px;= + } + +.Button--primary.Button--admin:disabled { background-color: rgb(64, 88, 124= +); cursor: not-allowed; } + +.Button--primary.Button--danger { background-color: rgb(255, 96, 91); } + +.Button--primary.Button--danger:hover { background-color: rgb(255, 136, 132= +); } + +.Button--primary.Button--danger:active { background-color: rgb(255, 57, 51)= +; } + +.Button--primary.Button--danger:focus { outline: rgb(29, 79, 124) solid 4px= +; } + +.Button--primary.Button--danger:disabled { background-color: rgb(64, 88, 12= +4); cursor: not-allowed; } + +.Button--secondary.Button { background: transparent; } + +.Button--secondary.Button--platzi { border: 1px solid rgb(152, 202, 63); co= +lor: rgb(152, 202, 63); } + +.Button--secondary.Button--platzi:hover { border: 1px solid rgb(193, 223, 1= +39); color: rgb(193, 223, 139); } + +.Button--secondary.Button--platzi:active { border: 1px solid rgb(119, 166, = +30); color: rgb(119, 166, 30); } + +.Button--secondary.Button--platzi:focus { outline: rgb(29, 79, 124) solid 4= +px; } + +.Button--secondary.Button--platzi:disabled { border: 1px solid rgb(99, 122,= + 157); color: rgb(99, 122, 157); cursor: not-allowed; } + +.Button--secondary.Button--sky { border: 1px solid rgb(51, 177, 255); color= +: rgb(51, 177, 255); } + +.Button--secondary.Button--sky:hover { border: 1px solid rgb(116, 202, 255)= +; color: rgb(116, 202, 255); } + +.Button--secondary.Button--sky:active { border: 1px solid rgb(7, 145, 230);= + color: rgb(7, 145, 230); } + +.Button--secondary.Button--sky:focus { outline: rgb(29, 79, 124) solid 4px;= + } + +.Button--secondary.Button--sky:disabled { border: 1px solid rgb(99, 122, 15= +7); color: rgb(99, 122, 157); cursor: not-allowed; } + +.Button--secondary.Button--admin { border: 1px solid rgb(255, 149, 91); col= +or: rgb(255, 149, 91); } + +.Button--secondary.Button--admin:hover { border: 1px solid rgb(255, 176, 13= +2); color: rgb(255, 176, 132); } + +.Button--secondary.Button--admin:active { border: 1px solid rgb(255, 124, 5= +1); color: rgb(255, 124, 51); } + +.Button--secondary.Button--admin:focus { outline: rgb(29, 79, 124) solid 4p= +x; } + +.Button--secondary.Button--admin:disabled { border: 1px solid rgb(99, 122, = +157); color: rgb(99, 122, 157); cursor: not-allowed; } + +.Button--secondary.Button--danger { border: 1px solid rgb(255, 96, 91); col= +or: rgb(255, 96, 91); } + +.Button--secondary.Button--danger:hover { border: 1px solid rgb(255, 136, 1= +32); color: rgb(255, 136, 132); } + +.Button--secondary.Button--danger:active { border: 1px solid rgb(255, 57, 5= +1); color: rgb(255, 57, 51); } + +.Button--secondary.Button--danger:focus { outline: rgb(29, 79, 124) solid 4= +px; } + +.Button--secondary.Button--danger:disabled { border: 1px solid rgb(99, 122,= + 157); color: rgb(99, 122, 157); cursor: not-allowed; } + +.Button--tertiary.Button { background-color: rgb(36, 56, 91); } + +.Button--tertiary.Button--platzi { color: rgb(152, 202, 63); } + +.Button--tertiary.Button--platzi:hover { color: rgb(193, 223, 139); } + +.Button--tertiary.Button--platzi:active { color: rgb(119, 166, 30); } + +.Button--tertiary.Button--platzi:focus { outline: rgb(29, 79, 124) solid 4p= +x; } + +.Button--tertiary.Button--platzi:disabled { color: rgb(99, 122, 157); curso= +r: not-allowed; } + +.Button--tertiary.Button--sky { color: rgb(51, 177, 255); } + +.Button--tertiary.Button--sky:hover { color: rgb(116, 202, 255); } + +.Button--tertiary.Button--sky:active { color: rgb(7, 145, 230); } + +.Button--tertiary.Button--sky:focus { outline: rgb(29, 79, 124) solid 4px; = +} + +.Button--tertiary.Button--sky:disabled { color: rgb(99, 122, 157); cursor: = +not-allowed; } + +.Button--tertiary.Button--admin { color: rgb(255, 149, 91); } + +.Button--tertiary.Button--admin:hover { color: rgb(255, 176, 132); } + +.Button--tertiary.Button--admin:active { color: rgb(255, 124, 51); } + +.Button--tertiary.Button--admin:focus { outline: rgb(29, 79, 124) solid 4px= +; } + +.Button--tertiary.Button--admin:disabled { color: rgb(99, 122, 157); cursor= +: not-allowed; } + +.Button--tertiary.Button--danger { color: rgb(255, 96, 91); } + +.Button--tertiary.Button--danger:hover { color: rgb(255, 136, 132); } + +.Button--tertiary.Button--danger:active { color: rgb(255, 57, 51); } + +.Button--tertiary.Button--danger:focus { outline: rgb(29, 79, 124) solid 4p= +x; } + +.Button--tertiary.Button--danger:disabled { color: rgb(99, 122, 157); curso= +r: not-allowed; } + +.NPS { -webkit-box-align: center; -webkit-box-orient: vertical; align-items= +: center; background: rgb(64, 88, 124); border-radius: 12px; bottom: 1rem; = +display: flex; flex-direction: column; max-width: 375px; padding: 1rem; pos= +ition: fixed; right: 1rem; } + +.NPS .Button--primary.Button--platzi:disabled { background-color: rgb(152, = +202, 63); } + +.NPS button.close { background: none; border: none; color: rgb(141, 162, 19= +2); padding: 0.5rem; position: absolute; right: 0.5rem; top: 0.5rem; } + +.NPS button.close:hover { cursor: pointer; } + +.NPS h3 { color: rgb(239, 243, 248); font-size: 0.75rem; font-weight: 700; = +line-height: 1.125rem; margin-bottom: 0.625rem; text-transform: uppercase; = +} + +.NPS p { color: rgb(255, 255, 255); font-size: 1.125rem; font-weight: 400; = +line-height: 1.75rem; text-align: center; } + +.NPS .Stars { padding: 1rem; } + +.NPS .Stars .Stars-icon--active path { fill: rgb(253, 221, 92); } + +.NPS .Stars svg { height: 42px; width: 42px; } + +.NPS .Stars svg path { fill: rgb(36, 56, 91); } + +.NPS .Comment { -webkit-box-align: center; -webkit-box-orient: vertical; al= +ign-items: center; display: flex; flex-direction: column; } + +.NPS .Comment p { font-size: 1rem; } + +.NPS .Comment textarea { background: rgb(3, 9, 30); border: 1px solid rgb(9= +9, 122, 157); border-radius: 0.5rem; color: rgb(99, 122, 157); margin: 0.5r= +em 0px 1.25rem; padding: 0.5rem; width: calc(100% - 1rem); } + +.Modal-wrapper { -webkit-box-pack: center; -webkit-box-align: center; align= +-items: center; inset: 0px; display: flex; height: fit-content; justify-con= +tent: center; margin: auto; opacity: 0; position: fixed; transform: transla= +teY(100vh); transition: 0.5s; width: fit-content; z-index: 8; } + +.Modal-wrapper.showModal { filter: none; opacity: 1; transform: translateY(= +0px); } + +.Modal-overlay { animation: 0.3s ease 0s 1 normal forwards running fadeIn; = +background-color: rgba(3, 9, 30, 0.7); inset: 0px; cursor: pointer; height:= + 100%; position: fixed; width: 100%; z-index: 8; } + +.Modal .Modal-wrapper--bottom.showModal { padding: 0px; top: auto; } + +@media only screen and (min-width: 48rem) { + .Modal .Modal-wrapper--bottom.showModal { top: 0px; } +} + +@-webkit-keyframes fadeIn {=20 + 0% { background-color: rgba(3, 9, 30, 0); } + 100% { background-color: rgba(3, 9, 30, 0.7); } +} + +@keyframes fadeIn {=20 + 0% { background-color: rgba(3, 9, 30, 0); } + 100% { background-color: rgba(3, 9, 30, 0.7); } +} + +.Pagination { -webkit-box-align: center; align-items: center; background-co= +lor: rgb(255, 255, 255); border-radius: 5px; display: flex; font-weight: 70= +0; padding: 0.25em; } + +.Pagination-wrapper { display: inline-block; margin-bottom: 0.5em; } + +.Pagination-next, .Pagination-prev { -webkit-box-align: center; align-items= +: center; color: rgb(7, 145, 230); cursor: pointer; display: flex; padding:= + 0.5em 0px; text-decoration: none; text-transform: uppercase; } + +.Pagination-nextText, .Pagination-prevText { display: none; } + +@media only screen and (min-width: 48rem) { + .Pagination-nextText, .Pagination-prevText { display: block; } +} + +.Pagination-next > i, .Pagination-prev > i { display: flex; font-size: 0px;= + } + +.Pagination-next > i::before, .Pagination-prev > i::before { font-size: 1.7= +5rem; } + +.Pagination-prev::after { margin: 0px 0.5em 0px 1em; } + +.Pagination-next::before, .Pagination-prev::after { background-color: rgb(1= +93, 193, 193); content: ""; height: 1.5em; width: 2px; } + +.Pagination-next::before { margin: 0px 1em 0px 0.5em; } + +.Pagination-number, .Pagination-points { color: rgb(92, 107, 133); margin: = +0px 0.25em; padding: 0.5em; text-align: center; text-decoration: none; } + +.Pagination-number { border-radius: 0.25em; cursor: pointer; } + +.Pagination-number.is-current, .Pagination-number:hover { background-color:= + rgb(7, 145, 230); color: rgb(255, 255, 255); } + +.Pagination-number.is-mobile { display: none; } + +@media only screen and (min-width: 48rem) { + .Pagination-number.is-mobile { display: block; } +} + +.Accordion { list-style-type: none; margin: 0px; padding: 0px; } + +.Accordion-item { background-color: rgb(18, 31, 61); border-top: 1px solid = +rgb(64, 88, 124); padding: 0.5rem 1rem; } + +@media only screen and (min-width: 48rem) { + .Accordion-item { padding: 1rem; } +} + +.Accordion-item:hover { background-color: rgb(64, 88, 124); } + +.Accordion-tab { -webkit-box-align: center; -webkit-box-pack: justify; alig= +n-items: center; background: none; border: 0px; color: rgb(239, 243, 248); = +cursor: pointer; display: flex; justify-content: space-between; padding: 0p= +x; width: 100%; } + +.Accordion-tab svg { color: rgb(190, 205, 227); height: 0.875rem; } + +.Accordion-title { font-size: 1rem; font-weight: 700; line-height: 1.5; tex= +t-align: left; width: 95%; } + +@media only screen and (min-width: 48rem) { + .Accordion-title { font-size: 1.125rem; } +} + +.Accordion-content { color: rgb(190, 205, 227); font-size: 0.875rem; line-h= +eight: 1.6; margin: 0.5rem 0px; } + +@media only screen and (min-width: 48rem) { + .Accordion-content { font-size: 1rem; } +} + +.Accordion-content a { color: rgb(51, 177, 255); text-decoration: none; } + +.Accordion-content a:hover { color: rgb(116, 202, 255); } + +.FloatNotification { background-color: rgb(36, 56, 91); border-radius: 0.5r= +em; bottom: 1rem; display: flex; left: 1rem; position: fixed; right: 1rem; = +z-index: 1; } + +@media only screen and (min-width: 48rem) { + .FloatNotification { max-width: 633px; } +} + +.FloatNotification-icon { display: none; margin: 1rem; } + +@media only screen and (min-width: 48rem) { + .FloatNotification-icon { display: initial; } +} + +.FloatNotification-icon-container { -webkit-box-pack: center; -webkit-box-a= +lign: center; align-items: center; border-radius: 50%; display: flex; heigh= +t: 36px; justify-content: center; width: 36px; } + +.FloatNotification-icon svg { height: 1rem; margin-bottom: 1px; } + +.FloatNotification-close { background-color: transparent; border: none; col= +or: rgb(141, 162, 192); cursor: pointer; position: absolute; right: 1rem; t= +op: 1rem; } + +.FloatNotification-close:hover { opacity: 0.8; } + +.FloatNotification-content { color: rgb(255, 255, 255); padding: 1rem; } + +@media only screen and (min-width: 48rem) { + .FloatNotification-content { padding: 1rem 1rem 1rem 0px; } +} + +.FloatNotification-content-title { font-weight: 700; line-height: 1.5rem; } + +.FloatNotification-content-subtitle { line-height: 1.5rem; } + +.FloatNotification-content-actions { display: flex; padding: 1rem 1rem 0px = +0px; } + +.FloatNotification-content-actions button { -webkit-box-flex: 1; flex-grow:= + 1; } + +@media only screen and (min-width: 48rem) { + .FloatNotification-content-actions { display: block; } +} + +.FloatNotification.is-error .FloatNotification-icon-container, .FloatNotifi= +cation.is-error button.is-error { background-color: rgb(255, 96, 91); color= +: rgb(3, 9, 30); } + +.FloatNotification.is-warning .FloatNotification-icon-container, .FloatNoti= +fication.is-warning button.is-warning { background-color: rgb(203, 95, 1); = +color: rgb(3, 9, 30); } + +.FloatNotification--radiance { background-color: rgb(239, 243, 248); max-wi= +dth: 420px; } + +.FloatNotification--radiance .FloatNotification-content { color: rgb(12, 22= +, 51); } + +.FloatNotification--radiance .Button--secondary { -webkit-box-flex: 0; bord= +er-style: solid; border-width: 1px; flex-grow: 0; padding: 0.25rem 0.75rem;= + text-transform: none; } + +.FloatNotification--radiance .Button--secondary:hover { opacity: 0.8; } + +.FloatNotification--radiance.is-error .FloatNotification-content-title, .Fl= +oatNotification--radiance.is-error .FloatNotification-icon { color: rgb(255= +, 57, 51); } + +.FloatNotification--radiance.is-error .FloatNotification-icon { display: bl= +ock; margin-right: 0px; } + +@media only screen and (min-width: 48rem) { + .FloatNotification--radiance.is-error .FloatNotification-icon { margin-ri= +ght: 1rem; } +} + +.FloatNotification--radiance.is-error .FloatNotification-icon-container { b= +ackground-color: transparent; color: rgb(255, 57, 51); height: 25px; width:= + 25px; } + +.FloatNotification--radiance.is-warning .FloatNotification-content-title, .= +FloatNotification--radiance.is-warning .FloatNotification-icon { color: rgb= +(203, 95, 1); } + +.FloatNotification--radiance.is-warning .FloatNotification-icon { display: = +block; margin-right: 0px; } + +@media only screen and (min-width: 48rem) { + .FloatNotification--radiance.is-warning .FloatNotification-icon { margin-= +right: 1rem; } +} + +.FloatNotification--radiance.is-warning .FloatNotification-icon-container {= + background-color: transparent; color: rgb(203, 95, 1); height: 25px; width= +: 25px; } + +.CarouselTabs { margin-bottom: 1rem; } + +.CarouselTabs-head { -webkit-box-pack: justify; display: flex; justify-cont= +ent: space-between; margin-bottom: 1.5rem; width: 100%; } + +.CarouselTabs-title { color: rgb(239, 243, 248); font-size: 1.5rem; font-we= +ight: 400; line-height: 2.25rem; } + +.CarouselTabs-action { -webkit-box-align: center; align-items: center; colo= +r: rgb(51, 177, 255); display: flex; font-size: 1rem; text-decoration: none= +; } + +.CarouselTabs-action span { margin-right: 0.5rem; } + +.CarouselTabs-action:hover { color: rgb(116, 202, 255); } + +.CarouselTabs .isResponsive { display: inline; } + +@media only screen and (min-width: 48rem) { + .CarouselTabs .isResponsive { display: none; } +} + +.CarouselTabs .isWeb { display: none; } + +@media only screen and (min-width: 48rem) { + .CarouselTabs .isWeb { display: inline; } +} + +.CarouselTabs .buttonLink { text-decoration: none; width: 100%; } + +@media only screen and (min-width: 48rem) { + .CarouselTabs .buttonLink { display: none; } +} + +.CarouselTabs .buttonLink button { border-radius: 0.5rem; margin-top: 2rem;= + padding: 0.4rem; width: 100%; background-color: rgb(36, 56, 91) !important= +; color: rgb(51, 177, 255) !important; } + +.CarouselTabs .Carousel-bullets { height: 0px; visibility: hidden; } + +@media only screen and (min-width: 48rem) { + .CarouselTabs .Carousel-bullets { height: auto; visibility: initial; } +} + +.Carousel { position: relative; } + +.Carousel-external { clip-path: inset(1px 1px -200px); overflow-x: clip; } + +.Carousel-internal { display: flex; transition-duration: 1s; transition-tim= +ing-function: ease-in-out; } + +.Carousel-item { flex-shrink: 0; } + +.Carousel-arrows button { -webkit-box-align: center; -webkit-box-pack: cent= +er; align-items: center; background-color: rgb(36, 56, 91); border: none; b= +order-radius: 8px; color: rgb(51, 177, 255); cursor: pointer; display: flex= +; height: 40px; justify-content: center; width: 40px; } + +.Carousel-arrows button svg { font-size: 1.2rem; } + +.Carousel-arrows button:hover { color: rgb(7, 145, 230); } + +.Carousel-arrows button:disabled { color: rgb(99, 122, 157); display: none;= + } + +@media only screen and (min-width: 1320px) { + .Carousel-arrows button:disabled { display: block; } +} + +.Carousel-arrows button:focus { color: rgb(7, 145, 230); outline: none; } + +.Carousel-arrows > div { -webkit-box-align: center; align-items: center; di= +splay: flex; height: calc(100% - 35px); position: absolute; top: 0px; } + +.Carousel-arrows-right { background: linear-gradient(90deg, rgba(18, 31, 61= +, 0), rgb(18, 31, 61)); padding-left: 10px; right: 0px; } + +.Carousel-arrows-left { background: linear-gradient(90deg, rgb(18, 31, 61),= + rgba(18, 31, 61, 0)); left: 0px; padding-right: 10px; } + +@media only screen and (min-width: 1320px) { + .Carousel-arrows__outside .Carousel-arrows-left { left: -60px; } + .Carousel-arrows__outside .Carousel-arrows-right { right: -60px; } +} + +.Carousel-bullets { margin-top: 1rem; text-align: center; width: 100%; } + +.Carousel-bullets button { background: transparent; border: 0px; cursor: po= +inter; margin: 0px 2px; padding: 5px; } + +.Carousel-bullets button:hover span { background-color: rgb(51, 177, 255); = +} + +.Carousel-bullets button:focus { outline: none; } + +.Carousel-bullets button.--active span { background-color: rgb(51, 177, 255= +); } + +.Carousel-bullets button span { background-color: rgb(29, 79, 124); border-= +radius: 50%; display: block; height: 8px; width: 8px; } + +.SemicircleSlider { -webkit-box-orient: vertical; -webkit-box-align: center= +; align-items: center; display: flex; flex-direction: column; height: 100px= +; overflow: hidden; position: relative; width: 205px; } + +.SemicircleSlider-container { background-color: transparent; height: 100px;= + position: absolute; width: 200px; } + +.SemicircleSlider-semicircle { background-color: rgb(36, 56, 91); border-to= +p-left-radius: 100px; border-top-right-radius: 100px; height: 100px; positi= +on: absolute; width: 200px; } + +.SemicircleSlider-content, .SemicircleSlider-semicircle { -webkit-box-pack:= + center; -webkit-box-align: end; align-items: flex-end; display: flex; just= +ify-content: center; } + +.SemicircleSlider-content { background-color: rgb(18, 31, 61); border-top-l= +eft-radius: 90px; border-top-right-radius: 90px; height: 90px; width: 180px= +; z-index: 2; } + +.SemicircleSlider-slider { border-bottom-left-radius: 100px; border-bottom-= +right-radius: 100px; height: 200px; position: absolute; width: 200px; } + +.SemicircleSlider-circle { border-radius: 100%; height: 10px; margin-top: -= +7px; position: absolute; top: 50%; width: 10px; } + +.SemicircleSlider--empty .SemicircleSlider-slider { background: linear-grad= +ient(0deg, rgb(36, 56, 91) 50%, transparent 0px); } + +.SemicircleSlider--empty .SemicircleSlider-circle { background-color: rgb(9= +9, 122, 157); } + +.SemicircleSlider--empty .SemicircleSlider-content { color: rgb(36, 56, 91)= +; } + +.SemicircleSlider--low .SemicircleSlider-slider { background: linear-gradie= +nt(0deg, rgb(255, 57, 51) 50%, transparent 0px); } + +.SemicircleSlider--low .SemicircleSlider-circle { background-color: rgb(255= +, 96, 91); } + +.SemicircleSlider--low .SemicircleSlider-content { color: rgb(255, 57, 51);= + } + +.SemicircleSlider--medium .SemicircleSlider-slider { background: linear-gra= +dient(0deg, rgb(254, 214, 52) 50%, transparent 0px); } + +.SemicircleSlider--medium .SemicircleSlider-circle { background-color: rgb(= +254, 230, 133); } + +.SemicircleSlider--medium .SemicircleSlider-content { color: rgb(254, 214, = +52); } + +.SemicircleSlider--high .SemicircleSlider-slider { background: linear-gradi= +ent(0deg, rgb(119, 166, 30) 50%, transparent 0px); } + +.SemicircleSlider--high .SemicircleSlider-circle { background-color: rgb(15= +2, 202, 63); } + +.SemicircleSlider--high .SemicircleSlider-content { color: rgb(119, 166, 30= +); } + +.ReviewsMeter-content { -webkit-box-align: center; align-items: center; dis= +play: flex; font-size: 1.5rem; font-weight: 700; padding-bottom: 17px; } + +.ReviewsMeter-content p { color: rgb(255, 255, 255); } + +.ReviewsMeter-content svg { height: 32px; margin-right: 8px; } + +.DropDown { position: relative; } + +.DropDown-searchBar { -webkit-box-align: center; align-items: center; backg= +round-color: rgb(255, 255, 255); border: 1px solid rgb(190, 205, 227); bord= +er-radius: 0.5rem; display: flex; padding: 0.5rem 1rem; } + +.DropDown-searchBar input { background-color: rgb(255, 255, 255); border: n= +one; border-radius: 0.5rem; color: rgb(99, 122, 157); width: -webkit-fill-a= +vailable; } + +.DropDown-searchBar input:focus { outline: none; } + +.DropDown-searchBar input::placeholder { color: rgb(99, 122, 157); } + +.DropDown-searchBar svg { color: rgb(99, 122, 157); height: 15px; } + +.DropDown-list { -webkit-box-orient: vertical; background-color: rgb(255, 2= +55, 255); border: 1px solid rgb(190, 205, 227); border-radius: 0.5rem; disp= +lay: flex; flex-direction: column; list-style-type: none; margin-top: 0.3re= +m; max-height: 207px; overflow-y: scroll; padding: 0.25rem 0px; position: a= +bsolute; width: -webkit-fill-available; z-index: 3; } + +.DropDown-list li:last-child button { border-bottom: none; } + +.DropDown-list-button { -webkit-box-align: center; align-items: center; bac= +kground-color: rgb(255, 255, 255); border-top: none; border-right: none; bo= +rder-left: none; border-image: initial; border-bottom: 1px solid rgb(239, 2= +43, 248); color: rgb(3, 9, 30); cursor: pointer; display: flex; margin-bott= +om: 0.75rem; padding: 0.75rem; width: 100%; } + +.DropDown-list-button:focus { outline: none; } + +.DropDown-list-badge { border-radius: 100%; height: 24px; margin-right: 0.7= +5rem; width: 24px; } + +.DropDown-list-content { -webkit-box-orient: vertical; display: flex; flex-= +direction: column; } + +.DropDown-list::-webkit-scrollbar { width: 12px; } + +.DropDown-list::-webkit-scrollbar-track { background: transparent; } + +.DropDown-list::-webkit-scrollbar-thumb { background: rgb(64, 88, 124); bor= +der: 3px solid rgb(255, 255, 255); border-radius: 0.5rem; } + +.DropDown-message { color: rgb(3, 9, 30); margin: 0.5rem 0px; text-align: c= +enter; } + +.DropDown-message--error { color: rgb(255, 57, 51); } + +.DropDown-message--warning { color: rgb(254, 214, 52); } + +.DropDown--darkMode .DropDown-searchBar { background-color: rgb(3, 9, 30); = +border: 1px solid rgb(99, 122, 157); } + +.DropDown--darkMode .DropDown-searchBar input { background-color: rgb(3, 9,= + 30); color: rgb(99, 122, 157); } + +.DropDown--darkMode .DropDown-searchBar input::placeholder { color: rgb(99,= + 122, 157); } + +.DropDown--darkMode .DropDown-searchBar svg { color: rgb(99, 122, 157); } + +.DropDown--darkMode .DropDown-list { background-color: rgb(3, 9, 30); borde= +r: 1px solid rgb(99, 122, 157); color: rgb(255, 255, 255); } + +.DropDown--darkMode .DropDown-list-button { background-color: rgb(3, 9, 30)= +; border-bottom: 1px solid rgb(64, 88, 124); color: rgb(255, 255, 255); } + +.DropDown--darkMode .DropDown-list::-webkit-scrollbar-thumb { background: r= +gb(64, 88, 124); border: 3px solid rgb(3, 9, 30); } + +.DropDown--darkMode .DropDown-message { color: rgb(255, 255, 255); } + +.DropDown--darkMode .DropDown-message--error { color: rgb(255, 136, 132); } + +.DropDown--darkMode .DropDown-message--warning { color: rgb(254, 214, 52); = +} + +.Form-input { -webkit-box-orient: vertical; display: flex; flex-direction: = +column; } + +.Form-input--error .Form-field { border: 1px solid rgb(255, 96, 91); } + +.Form-input--error .Form-field:focus, .Form-input--error .Form-field:focus-= +within { border: 1px solid rgb(255, 96, 91); outline: rgb(255, 96, 91) soli= +d 1px; } + +.Form-input--error .Form-message { color: rgb(255, 96, 91); } + +.Form-input--success .Form-message { color: rgb(152, 202, 63); } + +.Form-input--warning .Form-message { color: rgb(253, 221, 92); } + +.Form-field { background-color: rgb(3, 9, 30); border: 1px solid rgb(99, 12= +2, 157); border-radius: 0.5rem; color: rgb(239, 243, 248); display: block; = +font-size: 1rem; padding: 0.75rem 1rem; } + +.Form-field::placeholder { color: rgb(99, 122, 157); } + +.Form-field:focus, .Form-field:focus-within { border: 1px solid rgb(51, 177= +, 255); outline: rgb(51, 177, 255) solid 1px; } + +.Form-field:disabled { cursor: not-allowed; } + +.Form-field--medium { font-size: 0.875rem; padding: 0.5rem 1rem; } + +.Form-input--radiance .Form-field { background-color: rgba(0, 0, 0, 0.3); b= +order-color: rgb(89, 97, 111); } + +.Form-input--radiance .Form-field::placeholder { color: rgb(164, 171, 182);= + font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: 0.2= +px; line-height: 24px; } + +.Form-input--radiance .Form-field:hover { background-color: rgba(0, 0, 0, 0= +.6); border-color: rgb(164, 171, 182); } + +.Form-input--radiance .Form-field:focus { background-color: rgba(0, 0, 0, 0= +.95); border: none; outline-color: rgb(255, 255, 255); } + +.Form-input--radiance.Form-input--error .Form-field { border-color: rgb(226= +, 106, 99); } + +.Form-input--radiance.Form-input--error .Form-message { color: rgb(226, 106= +, 99); } + +.Form-textarea { -webkit-box-orient: vertical; display: flex; flex-directio= +n: column; } + +.Form-textarea--error .Form-fieldarea { border: 1px solid rgb(255, 96, 91);= + } + +.Form-textarea--error .Form-fieldarea:focus, .Form-textarea--error .Form-fi= +eldarea:focus-within { border: 1px solid rgb(255, 96, 91); outline: rgb(255= +, 96, 91) solid 1px; } + +.Form-textarea--error .Form-message { color: rgb(255, 96, 91); } + +.Form-textarea--success .Form-message { color: rgb(152, 202, 63); } + +.Form-textarea--warning .Form-message { color: rgb(253, 221, 92); } + +.Form-label { cursor: pointer; display: inline-block; margin-bottom: 0.5rem= +; width: max-content; } + +.Form-fieldarea, .Form-label { color: rgb(239, 243, 248); font-size: 1rem; = +} + +.Form-fieldarea { background-color: rgb(3, 9, 30); border: 1px solid rgb(99= +, 122, 157); border-radius: 0.5rem; display: block; height: 70px; padding: = +0.75rem 1rem; resize: none; } + +.Form-fieldarea::placeholder { color: rgb(99, 122, 157); } + +.Form-fieldarea:focus, .Form-fieldarea:focus-within { border: 1px solid rgb= +(51, 177, 255); outline: rgb(51, 177, 255) solid 1px; } + +.Form-fieldarea:disabled { cursor: not-allowed; } + +.Form-fieldarea--medium { font-size: 0.875rem; padding: 0.5rem 1rem; } + +.Form-message { color: rgb(190, 205, 227); font-size: 0.75rem; letter-spaci= +ng: 0.25px; margin-top: 0.5rem; } + +.WizardDots { background-color: rgb(12, 22, 51); display: block; padding: 1= +rem; } + +@media only screen and (min-width: 48rem) { + .WizardDots { padding: 17px 5rem 3rem; } +} + +.WizardDots-content { justify-content: space-evenly; margin: 0px auto; max-= +width: 600px; } + +.WizardDot, .WizardDots-content { -webkit-box-align: center; align-items: c= +enter; display: flex; } + +.WizardDot { -webkit-box-orient: vertical; -webkit-box-pack: start; flex-di= +rection: column; justify-content: flex-start; margin: 0px 9px; position: re= +lative; } + +.WizardDot svg { color: rgb(141, 162, 192); font-size: 1.25rem; width: 1rem= +; } + +.WizardDot-text { color: rgb(141, 162, 192); display: none; font-size: 0.75= +rem; letter-spacing: 0.25px; line-height: 1.5; min-width: 100px; position: = +absolute; text-align: center; top: 2rem; width: max-content; } + +@media only screen and (min-width: 48rem) { + .WizardDot-text { display: block; } +} + +.WizardDot-text.is-complete, .WizardDot.is-current svg { color: rgb(152, 20= +2, 63); } + +.WizardDot.is-current .WizardDot-text { color: rgb(255, 255, 255); } + +.WizardDot.is-active svg { color: rgb(152, 202, 63); } + +.WizardDot.is-active .WizardDot-text:not(.is-complete) { color: rgb(255, 25= +5, 255); } + +.WizardDot-line { background-color: rgb(239, 243, 248); height: 2px; width:= + 100%; } + +.WizardDot-line.is-complete { background-color: rgb(152, 202, 63); } + +.NumericStepper { display: flex; } + +.NumericStepper input { appearance: none; background-color: rgb(3, 9, 30); = +border: 1px solid rgb(99, 122, 157); color: rgb(255, 255, 255); height: 42p= +x; text-align: center; width: 50px; } + +.NumericStepper input:focus, .NumericStepper input:focus-visible { border-c= +olor: rgb(51, 177, 255); outline: none; } + +.NumericStepper button { background-color: rgb(18, 31, 61); border: 1px sol= +id rgb(99, 122, 157); color: rgb(51, 177, 255); outline: 0px; padding: 0.5r= +em 1rem; } + +.NumericStepper button:hover { background-color: rgb(29, 79, 124); border-c= +olor: rgb(51, 177, 255); cursor: pointer; } + +.NumericStepper button svg { fill: rgb(51, 177, 255); width: 10px; } + +.NumericStepper-plus { border-bottom-right-radius: 8px; border-top-right-ra= +dius: 8px; } + +.NumericStepper-minus { border-bottom-left-radius: 8px; border-top-left-rad= +ius: 8px; } + +#Header-v2 { top: 0px; } + +.fixedBody { overflow-y: hidden !important; } + +.Header-v2 { background: linear-gradient(90deg, rgb(28, 54, 67), rgb(39, 59= +, 71) 25%, rgb(30, 83, 114)); box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px 0= +px; color: rgb(255, 255, 255); font-size: 13px; height: 52px; position: rel= +ative; right: 0px; top: 0px; width: 100%; z-index: 31; } + +.Header-v2--is-sticky { position: fixed; } + +.Header-v2-content { gap: 4px; display: grid; } + +.Header-v2-minimal { gap: 10px; display: grid; height: 35px; } + +.Header-v2-minimal .Logo { padding: 8px 0px 8px 14px; } + +.Header-v2-minimal .Nav-header, .Header-v2-minimal .Nav-header-logged { pad= +ding: 8px 12px 8px 0px; } + +.Header-v2-overlay { background-color: rgba(0, 0, 0, 0.6); inset: 0px; heig= +ht: 100%; opacity: 0; position: fixed; transition: opacity 0.5s, visibility= + 0.5s; visibility: hidden; width: 100%; z-index: 30; } + +.is-transparent-header { background: transparent; box-shadow: none; } + +.is-transparent-header .Nav-header-desktopCtas { color: rgb(239, 243, 248) = +!important; font-size: 1rem !important; font-weight: 500 !important; } + +.is-transparent-header .Nav-header-desktopCtas .NewSearch-box { background-= +color: transparent; border-color: rgb(239, 243, 248); color: rgb(239, 243, = +248); } + +.is-transparent-header .Nav-header-desktopCtas .NewSearch-box .NewSearch-in= +put::placeholder { color: rgb(239, 243, 248); } + +.is-transparent-header .Nav-header-desktopCtas .ExploreButton, .is-transpar= +ent-header .Nav-header-desktopCtas .Menu li a, .is-transparent-header .Nav-= +header-desktopCtas div { color: rgb(239, 243, 248) !important; font-size: 1= +rem !important; font-weight: 500 !important; } + +.is-transparent-header .Nav-header-desktopCtas .ButtonLogin-cta { backgroun= +d-color: rgb(255, 255, 255); color: rgb(0, 0, 0); } + +.is-transparent-header .Nav-header-desktopCtas .Actionsv2-enterprise { bord= +er: 1px solid rgb(255, 255, 255); color: rgb(255, 255, 255) !important; } + +.is-dark-header { background: rgb(18, 31, 61); } + +.is-dark-header .ButtonLogin div + a { color: rgb(3, 9, 30); } + +.is-dark-header .Searchv-content form input { background: rgb(3, 9, 30); bo= +rder: 1px solid rgb(3, 9, 30); color: rgb(255, 255, 255); } + +.is-dark-header .Searchv-icon svg { color: rgb(3, 9, 30); } + +.is-dark-header .Searchv-boxResult { background: rgb(3, 9, 30); } + +.is-dark-header .Searchv-boxResult h2, .is-dark-header .Searchv-results-ite= +m a { color: rgb(255, 255, 255); } + +.is-dark-header .box { background: rgb(18, 31, 61) !important; } + +.is-dark-header .triangle, .is-dark-header .triangled { border-bottom: 10px= + solid rgb(18, 31, 61) !important; } + +.is-dark-header .Plans-content h2, .is-dark-header .Plans-content p span { = +color: rgb(255, 255, 255); } + +.is-dark-header .ContinueButton a { color: rgb(3, 9, 30); } + +.is-dark-header .LoggedMenu-content a, .is-dark-header .LoggedMenu-content = +div, .is-dark-header .Usernamev { color: rgb(255, 255, 255); } + +.is-dark-header .LastCourse-content { background-color: transparent; border= +: 1px solid rgba(7, 145, 230, 0.6); box-shadow: unset; } + +.is-dark-header .LastCourse-continue, .is-dark-header .LastCourse-info { co= +lor: rgb(255, 255, 255); } + +.is-experiment-home { --section-border-color: #2d323a; } + +.is-experiment-home .Actionsv2-enterprise { display: none; } + +.is-experiment-home .box { background: rgb(19, 22, 28) !important; } + +.is-experiment-home .triangle, .is-experiment-home .triangled { border-bott= +om: 10px solid rgb(19, 22, 28) !important; } + +.is-experiment-home .Usernamev { color: rgb(255, 255, 255); } + +.is-experiment-home .Usernamev-profile { border-bottom-color: var(--section= +-border-color); } + +.is-experiment-home .Usernamev-profile a { color: rgb(255, 255, 255); } + +.is-experiment-home .Usernamev-title { border-top-color: var(--section-bord= +er-color); } + +.is-experiment-home .LoggedMenu-content a, .is-experiment-home .LoggedMenu-= +content div { color: rgb(255, 255, 255); } + +.is-experiment-home .LoggedMenu-content a svg, .is-experiment-home .LoggedM= +enu-content div svg { fill: rgb(255, 255, 255); color: inherit; } + +.is-experiment-home .LastCourse-allCourses a { color: rgb(255, 255, 255); } + +.is-experiment-home .LastCourse-content { background-color: transparent; bo= +rder: 1px solid var(--section-border-color); box-shadow: unset; } + +.is-experiment-home .LastCourse-continue, .is-experiment-home .LastCourse-i= +nfo { color: rgb(255, 255, 255); } + +.is-experiment-home .Menu-content.open { background: rgb(19, 22, 28); } + +.is-experiment-home .Menu-button { color: inherit; } + +.is-experiment-home .Menu-list { color: rgb(255, 255, 255); } + +.is-experiment-home .Menu-list-explore { border-color: var(--section-border= +-color); } + +@media only screen and (min-width: 48rem) { + .Header-v2-content { gap: 0px; } + .Header-v2-minimal { height: 52px; } + .Header-v2-minimal .Logo { padding: 12px 0px 12px 14px; } + .Header-v2-minimal .Nav-header, .Header-v2-minimal .Nav-header-logged { p= +adding: 16px 12px 16px 0px; } +} + +.Select-wrapper { position: relative; } + +.Select-field { appearance: none; cursor: pointer; } + +.Select-option:first-child { color: rgb(99, 122, 157); } + +.Select-arrow { color: rgb(239, 243, 248); height: 1rem; position: absolute= +; right: 1rem; top: 1rem; width: 1rem; } + +.BasicHeader { background-color: rgb(18, 31, 61); padding: 0.75rem 0px; } + +.BasicHeader-container { -webkit-box-pack: justify; -webkit-box-align: cent= +er; align-items: center; display: flex; justify-content: space-between; } + +.BasicHeader-logo { display: inline-block; } + +.BasicHeader-logo img { height: 2rem; } + +.Collapse-container { width: 100%; } + +.is-collapse { display: none; } + +.PromoBanner { overflow: hidden; position: relative; user-select: none; } + +.PromoBanner--platziconf .PromoBanner-cta { background-color: rgb(18, 31, 6= +1); color: rgb(255, 255, 255); } + +@media only screen and (min-width: 48rem) { + .PromoBanner--basic .PromoBanner-cta { display: block; } +} + +@media only screen and (min-width: 83.125rem) { + .PromoBanner--basic .PromoBanner-cta { display: inline-block; } +} + +.PromoBanner--basic .PromoBanner-details-previous { display: none; } + +@media only screen and (min-width: 83.125rem) { + .PromoBanner--basic .PromoBanner-details-previous { display: block; } +} + +.PromoBanner--day { background-image: url("https://static.platzi.com/media/= +uploads/platzi-day/pattern.png"); background-repeat: no-repeat; } + +.PromoBanner--potencia { background-image: url("https://static.platzi.com/m= +edia/uploads/line_pattern_91fbd19232.png"); background-repeat: no-repeat; } + +.PromoBanner--potencia .PromoBanner-content-logo { margin-right: 0px; width= +: 150px; } + +.PromoBanner--2024 { font-family: "IBM Plex Sans"; } + +.PromoBanner--2024 .PromoBanner-content { background-image: url("https://st= +atic.platzi.com/media/uploads/22a702bf952cba985b71e874cf8fb726_2_dda8d8aff4= +.png"); background-position: 96% 31%; background-repeat: no-repeat; backgro= +und-size: 700px; } + +@media only screen and (min-width: 48rem) { + .PromoBanner--2024 .PromoBanner-content { background-position: -656% 31%;= + } +} + +@media only screen and (min-width: 64rem) { + .PromoBanner--2024 .PromoBanner-content { background-position: -95% 31%; = +} +} + +@media only screen and (min-width: 75rem) { + .PromoBanner--2024 .PromoBanner-content { background-position: -36% 29%; = +} +} + +.PromoBanner--2024 .PromoBanner-content-logo { height: 22px; width: auto; } + +.PromoBanner--2024 .PromoBanner-countdown-item { display: flex; font-size: = +16px; font-style: normal; font-weight: 500; margin-right: 0.75rem; } + +@media only screen and (min-width: 48rem) { + .PromoBanner--2024 .PromoBanner-countdown-item { -webkit-box-orient: vert= +ical; -webkit-box-align: center; align-items: center; flex-direction: colum= +n; font-size: 24px; font-style: normal; font-weight: 500; } + .PromoBanner--2024 .PromoBanner-countdown-item span { font-size: 10px; fo= +nt-style: normal; font-weight: 500; line-height: 12px; text-transform: uppe= +rcase; } +} + +.PromoBanner--2024 .PromoBanner-countdown-item:first-child { color: rgb(5, = +164, 96); } + +.PromoBanner--2024 .PromoBanner-countdown-item:nth-child(2) { color: rgb(87= +, 138, 233); } + +.PromoBanner--2024 .PromoBanner-countdown-item:nth-child(3) { color: rgb(15= +3, 77, 217); } + +.PromoBanner--2024 .PromoBanner-countdown-item:nth-child(3) p { max-width: = +3.5ch; overflow: hidden; } + +.PromoBanner--2024 .PromoBanner-countdown-item:nth-child(4) { color: rgb(24= +3, 95, 96); } + +.PromoBanner--2024 .PromoBanner-countdown-item:nth-child(4) p { max-width: = +3.5ch; overflow: hidden; } + +.PromoBanner .u-wrapper { padding: 0px; } + +@media only screen and (min-width: 48rem) { + .PromoBanner .u-wrapper { padding: 0px 0.5rem; } +} + +.PromoBanner-content { -webkit-box-orient: vertical; -webkit-box-align: cen= +ter; align-items: center; display: flex; flex-direction: column; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-content { -webkit-box-orient: horizontal; flex-direction: ro= +w; } +} + +@media only screen and (min-width: 64rem) { + .PromoBanner-content { display: grid; grid-template-columns: 1fr auto; } +} + +.PromoBanner-content-logo { height: auto; margin-right: 1.25rem; width: 150= +px; } + +.PromoBanner-event-date { -webkit-box-pack: center; display: flex; grid-are= +a: timeMessage; height: 2rem; justify-content: center; width: 100%; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-event-date { border-radius: 0.5rem; margin: 1rem 1rem 1rem 0= +px; padding: 0px 0.5rem; width: auto; } +} + +@media only screen and (min-width: 64rem) { + .PromoBanner-event-date { border-radius: 0px; height: 3.5rem; } +} + +.PromoBanner-event-date time { -webkit-box-pack: center; -webkit-box-align:= + center; align-items: center; display: flex; flex-wrap: nowrap; font-size: = +0.875rem; justify-content: center; letter-spacing: 1.1px; line-height: 1rem= +; text-align: center; text-transform: uppercase; white-space: nowrap; } + +@media only screen and (min-width: 30rem) { + .PromoBanner-event-date time { padding: 0.5rem 1rem; } +} + +.PromoBanner-promoContent { -webkit-box-orient: horizontal; -webkit-box-ali= +gn: center; align-items: center; column-gap: 0.5rem; display: flex; flex-fl= +ow: row; margin-left: auto; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-promoContent { justify-self: flex-end; margin-left: 0px; } +} + +.PromoBanner-details { -webkit-box-align: center; -webkit-box-pack: center;= + align-items: center; box-sizing: border-box; display: grid; font-size: 0.8= +75rem; gap: 0.5rem; grid-template-columns: 1fr 1fr; justify-content: center= +; padding: 0.5rem 1.5rem; width: 100%; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-details { grid-template-columns: 1fr 1fr; margin-right: 1rem= +; padding: 0.5rem 1rem 0.5rem 1.25rem; } +} + +@media only screen and (min-width: 64rem) { + .PromoBanner-details { margin-right: 1.5rem; width: auto; } +} + +@media only screen and (min-width: 75rem) { + .PromoBanner-details { grid-template-columns: 1fr auto auto; margin: 0px;= + padding: 0.5rem 1rem; width: 100%; } +} + +.PromoBanner-details-left { -webkit-box-orient: vertical; -webkit-box-align= +: start; -webkit-box-pack: center; align-items: flex-start; display: flex; = +flex-direction: column; gap: 0.25rem; justify-content: center; width: 100%;= + } + +@media only screen and (min-width: 48rem) { + .PromoBanner-details-left { padding: 0.5rem 0px; } +} + +@media only screen and (min-width: 64rem) { + .PromoBanner-details-left { -webkit-box-orient: horizontal; -webkit-box-p= +ack: justify; -webkit-box-align: center; align-items: center; flex-directio= +n: row; justify-content: space-between; width: auto; } +} + +.PromoBanner-details-previous { display: none; } + +@media only screen and (min-width: 64rem) { + .PromoBanner-details-previous { display: grid; gap: 0.5rem; margin-right:= + 1rem; padding-left: 0.5rem; width: max-content; } +} + +.PromoBanner-details-previous img { width: 150px; } + +.PromoBanner-details-previous-before { -webkit-box-pack: center; -webkit-bo= +x-align: center; align-items: center; display: flex; justify-content: cente= +r; } + +.PromoBanner-details-previous-content { font-weight: 400; text-align: end; = +} + +.PromoBanner-details-previous-content.is-save { font-weight: 700; } + +.PromoBanner-details-previous-price { text-decoration: line-through; } + +.PromoBanner-details-saving { -webkit-box-pack: end; -webkit-box-align: cen= +ter; align-items: center; font-weight: 700; justify-content: flex-end; widt= +h: 100%; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-details-saving { -webkit-box-pack: justify; display: flex; j= +ustify-content: space-between; margin-right: auto; width: fit-content; } +} + +.PromoBanner-details-saving-layout { display: block; font-size: 0.875rem; f= +ont-weight: 500; letter-spacing: 0.15px; margin-right: 0.5rem; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-details-saving-layout { font-size: 0.813rem; } +} + +@media only screen and (min-width: 64rem) { + .PromoBanner-details-saving-layout { font-size: 0.875rem; } +} + +.PromoBanner-details-saving-tagline { -webkit-box-align: center; align-item= +s: center; display: flex; font-size: 12px; } + +.PromoBanner-details-saving-tagline span { opacity: 0.7; } + +.PromoBanner-details-saving-tagline figure { height: 1rem; margin: 0.2rem; = +} + +.PromoBanner-details-saving-tagline figure img { height: 100%; object-fit: = +contain; } + +.PromoBanner-details-text { font-size: 0.625rem; letter-spacing: 0.12em; li= +ne-height: 1.25; text-transform: uppercase; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-details-text { font-size: 0.75rem; } +} + +@media only screen and (min-width: 64rem) { + .PromoBanner-details-text { font-size: 0.875rem; } +} + +.PromoBanner-details-pricing { -webkit-box-align: center; -webkit-box-pack:= + end; align-items: center; display: flex; justify-content: flex-end; } + +@media only screen and (min-width: 75rem) { + .PromoBanner-details-pricing { margin-left: 1rem; } +} + +.PromoBanner-details-pricing figure { -webkit-box-align: center; -webkit-bo= +x-pack: center; align-items: center; display: flex; justify-content: center= +; margin-right: 0.5rem; } + +.PromoBanner-details-pricing img { border-radius: 100%; height: 18px; objec= +t-fit: cover; width: 18px; } + +.PromoBanner-details-price { -webkit-box-align: center; align-items: center= +; display: flex; font-size: 0.938rem; font-weight: 400; } + +@media only screen and (min-width: 64rem) { + .PromoBanner-details-price { font-size: 1.125rem; } +} + +.PromoBanner-details-price strong { font-size: 1.125rem; font-weight: 500; = +} + +.PromoBanner-countdown { -webkit-box-pack: center; -webkit-box-align: cente= +r; align-items: center; display: flex; justify-content: center; margin-left= +: auto; padding: 0.25rem; text-align: center; width: 100%; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-countdown { -webkit-box-orient: vertical; flex-direction: co= +lumn; min-width: 150px; padding: 1rem; width: auto; } +} + +@media only screen and (min-width: 64rem) { + .PromoBanner-countdown { -webkit-box-orient: vertical; -webkit-box-align:= + center; align-items: center; flex-direction: column; } +} + +.PromoBanner-countdown-text { font-size: 0.875rem; letter-spacing: -0.13px;= + line-height: 1.2; margin-right: 0.5rem; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-countdown-text { margin-bottom: 0px; margin-right: 0px; } +} + +@media only screen and (min-width: 64rem) { + .PromoBanner-countdown-text { font-size: 0.875rem; } +} + +.PromoBanner-countdown-element { -webkit-box-align: center; -webkit-box-pac= +k: center; align-items: center; column-gap: 0.25rem; display: flex; font-si= +ze: 1rem; font-weight: 400; justify-content: center; letter-spacing: -0.13p= +x; line-height: 22px; } + +@media only screen and (min-width: 64rem) { + .PromoBanner-countdown-element { font-size: 1.125rem; } +} + +.PromoBanner-countdown-unit { text-transform: lowercase; } + +.PromoBanner-anchor { height: 100%; left: 0px; position: absolute; top: 0px= +; width: 100%; } + +.PromoBanner-msi { display: none; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-msi { display: block; width: 126px; } +} + +.PromoBanner-msi img { width: 100%; } + +.PromoBanner-cta { background-color: rgb(152, 202, 63); border-radius: 0.5r= +em; color: rgb(18, 31, 61); display: none; font-size: 0.875rem; font-weight= +: 500; grid-column: 1 / 3; letter-spacing: 0.04em; padding: 0.5rem; text-al= +ign: center; text-decoration: none; white-space: nowrap; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-cta { display: none; margin: initial; } +} + +@media only screen and (min-width: 75rem) { + .PromoBanner-cta { display: block; grid-column: unset; height: fit-conten= +t; padding: 0.5rem 1rem; } +} + +@media only screen and (min-width: 48rem) { + .PromoBanner-pre .PromoBanner-details { -webkit-box-pack: start; display:= + grid; justify-content: start; width: 100%; grid-template-columns: 125px 1f= +r 1fr !important; } +} + +.PromoBanner-pre .PromoBanner-details-saving-layout { display: block; text-= +align: start; } + +@media only screen and (min-width: 48rem) { + .PromoBanner-pre .PromoBanner-cta { grid-area: auto; display: block !impo= +rtant; } +} + +@media only screen and (min-width: 64rem) { + .PromoBanner-pre .PromoBanner-cta { justify-self: end; max-width: fit-con= +tent; } +} + +.SalaryModal .Modal-wrapper { pointer-events: auto !important; } + +.Form-input-phone--error .Form-input-phone__message { color: rgb(255, 96, 9= +1); } + +.Form-input-phone--success .Form-input-phone__message { color: rgb(152, 202= +, 63); } + +.Form-input-phone--warning .Form-input-phone__message { color: rgb(253, 221= +, 92); } + +.Form-input-phone__label { color: rgb(239, 243, 248); cursor: pointer; disp= +lay: inline-block; font-size: 1rem; margin-bottom: 0.5rem; width: max-conte= +nt; } + +.Form-input-phone__input { border-radius: 0.5rem; display: flex; overflow: = +hidden; position: relative; } + +.Form-input-phone__number { -webkit-box-flex: 1; flex: 1 1 0%; } + +.Form-input-phone__number input { border-bottom-left-radius: 0px; border-to= +p-left-radius: 0px; } + +.Form-input-phone__number .SimpleInput-error { margin-left: -80px; } + +.Form-input-phone__message { color: rgb(190, 205, 227); font-size: 0.75rem;= + letter-spacing: 0.25px; margin-top: 0.5rem; } + +.PastDueNotification-updateBut { margin-right: 1rem; } + +.LoginSocial { padding: 16px 10px 0px; } + +@media only screen and (min-width: 48rem) { + .LoginSocial { padding: 24px 40px 0px; } +} + +@media only screen and (min-width: 64rem) { + .LoginSocial { padding: 24px 32px 0px; } +} + +.LoginSocial a { display: block; margin-bottom: 10px; } + +.LoginSocial-facebook { margin-bottom: 12px; } + +.LoginWithEmail { padding: 0px 10px 24px; } + +@media only screen and (min-width: 48rem) { + .LoginWithEmail { padding: 0px 40px 24px; } +} + +@media only screen and (min-width: 64rem) { + .LoginWithEmail { padding: 0px 32px 24px; } +} + +.LoginWithEmail button { display: block; font-weight: 700; padding: 14px 0p= +x; width: 100%; } + +.LoginWithEmail-lostpassword { margin-top: 16px; } + +.LoginWithEmail-lostpassword a { color: rgb(7, 145, 230); font-size: 14px; = +text-decoration: none; } + +.LoginWithEmail .FormInput-error { text-align: left; } + +.LoginDivider { margin: 1rem auto; overflow: hidden; text-align: center; wi= +dth: 94%; } + +@media only screen and (min-width: 48rem) { + .LoginDivider { width: 79%; } +} + +@media only screen and (min-width: 64rem) { + .LoginDivider { width: 82%; } +} + +.LoginDivider-text { color: rgb(39, 59, 71); font-size: 20px; font-weight: = +600; padding: 12px; position: relative; } + +.LoginDivider-text::before { right: 100%; } + +.LoginDivider-text::after, .LoginDivider-text::before { border-bottom: 1px = +solid rgb(228, 228, 228); content: ""; position: absolute; top: 50%; width:= + 5000px; } + +.LoginDivider-text::after { left: 100%; } + +.AccountFooter { background-color: rgb(243, 248, 251); padding: 24px 10px; = +} + +@media only screen and (min-width: 48rem) { + .AccountFooter { padding: 24px 42px; } +} + +@media only screen and (min-width: 64rem) { + .AccountFooter { padding: 24px 32px; } +} + +.AccountFooter-create { margin-bottom: 16px; } + +.AccountFooter-create span { color: rgb(58, 60, 63); font-size: 14px; font-= +weight: 700; line-height: 1.37; } + +.AccountFooter-btn { background: rgb(255, 255, 255); border: 1px solid rgb(= +7, 145, 230); border-radius: 4px; color: rgb(7, 145, 230); cursor: pointer;= + display: block; font-size: 1rem; font-weight: 700; outline: none; padding:= + 12px 0.8em; text-decoration: none; } + +.Table { border-collapse: collapse; border-spacing: 0px; width: 100%; } + +.TableHead { display: table-header-group; } + +.TableCell { border-top: 1px solid rgb(217, 223, 230); color: rgb(19, 29, 4= +8); font-size: 14px; line-height: 22px; padding: 1em; text-align: center; } + +.TableCellHead { color: rgb(92, 107, 133); font-size: 12px; line-height: 18= +px; padding-bottom: 1em; } + +.TableBody { display: table-row-group; } + +.TableRow, .TableRowHead { color: inherit; display: table-row; outline: 0px= +; vertical-align: middle; } + +.RegisterButton { padding: 0px 10px 24px; } + +@media only screen and (min-width: 48rem) { + .RegisterButton { padding: 0px 40px 24px; } +} + +@media only screen and (min-width: 64rem) { + .RegisterButton { padding: 0px 32px 24px; } +} + +.RegisterButton button { display: block; font-weight: 700; padding: 14px 0p= +x; width: 100%; } + +.RegisterForm { padding: 2em 1.5em; } + +.RegisterForm button { display: block; font-weight: 700; padding: 14px 0px;= + width: 100%; } + +.RegisterForm a { color: rgb(7, 145, 230); text-align: left; text-decoratio= +n: none; } + +.RegisterForm-checkbox { color: rgb(39, 59, 71); display: flex; margin-bott= +om: 24px; } + +.RegisterForm-checkbox span { font-size: 13px; margin-left: 6px; text-align= +: left; } + +.RegisterForm .FormInput-error { text-align: left; } + +.RegisterForm-username { position: relative; text-align: left; } + +.RegisterForm-username label { color: rgb(7, 145, 230); font-size: 24px; fo= +nt-weight: 700; left: 10px; position: absolute; top: 17px; } + +.RegisterForm-username label:focus { top: 18px; } + +.RegisterForm-username .FormInput-field { padding: 22px 12px 18px 40px !imp= +ortant; } + +.RegisterForm-username .FormInput-field.error, .RegisterForm-username .Form= +Input-field.error:focus { padding: 24px 12px 16px 40px; } + +.RegisterForm-username .FormInput-field.filled:not(.error), .RegisterForm-u= +sername .FormInput-field:focus:not(.error), .RegisterForm-username .FormInp= +ut-field:valid:not(.error) { padding: 24px 12px 16px 40px !important; } + +.PaymentSuccessful { background: rgba(152, 202, 63, 0.2); border: 1px solid= + rgb(152, 202, 63); color: rgb(101, 135, 42); margin: 1.5em 1.5em 0px; } + +.PaymentSuccessful h1 { font-size: 18px; font-weight: 500; line-height: 26p= +x; padding: 0.5em 0px; } + +.PaymentSuccessful h1 svg { color: rgb(101, 135, 42); font-size: 18px; marg= +in: 5px; } + +.PaymentSuccessful-notification { color: rgb(28, 54, 67); font-size: 14px; = +padding: 0px 0.5em 1em; } + +.PaymentSuccessful-wrapper { margin: 0px auto; max-width: 536px; padding: 0= +px 0.75rem; text-align: center; } + +.UserNotifications { padding: 0px; } + +.NotificationBase { -webkit-box-pack: start; -webkit-box-align: start; alig= +n-items: flex-start; border-radius: 8px; box-sizing: border-box; display: f= +lex; font-size: 1rem; justify-content: flex-start; margin-top: 24px; paddin= +g: 8px 40px 8px 12px; position: relative; width: 100%; } + +.NotificationBase-close { -webkit-box-pack: center; font-size: 0.875rem; he= +ight: 30px; justify-content: center; padding: 10px; position: absolute; rig= +ht: 6px; top: 9px; width: 30px; } + +.NotificationBase-close, .NotificationBase-cta { -webkit-box-align: center;= + align-items: center; background-color: transparent; border: none; cursor: = +pointer; display: flex; } + +.NotificationBase-cta { border-radius: 8px; color: rgb(3, 9, 30); font-size= +: 0.75rem; font-weight: 700; padding: 7px 12px; text-decoration: none; text= +-transform: uppercase; } + +.NotificationBase-body { -webkit-box-pack: justify; display: flex; flex-wra= +p: wrap; justify-content: space-between; width: 100%; } + +.NotificationBase-icon { margin-right: 12px; margin-top: 9px; min-width: 15= +px; } + +.NotificationBase-text { line-height: 1.5rem; padding: 8px 0px; } + +.NotificationBase-form-input { background-color: rgb(3, 9, 30); border: 1px= + solid rgb(99, 122, 157); border-radius: 8px; box-sizing: border-box; color= +: rgb(255, 255, 255); font-size: 0.875rem; letter-spacing: 0.5px; line-heig= +ht: 1.375rem; margin: 0px 0px 0.5rem; padding: 0.5rem 1rem; width: 100%; } + +@media only screen and (min-width: 48rem) { + .NotificationBase-form-input { margin: 0px 0.5rem 0px 0px; width: 270px; = +} +} + +.NotificationBase-form-input:focus { outline: none; } + +.NotificationBase-form-input::placeholder { color: rgb(99, 122, 157); } + +.NotificationBase-form-input:-webkit-autofill { -webkit-text-fill-color: rg= +b(255, 255, 255); box-shadow: rgb(3, 9, 30) 0px 0px 0px 1000px inset; } + +.NotificationBase-form-input:-webkit-autofill:active, .NotificationBase-for= +m-input:-webkit-autofill:focus, .NotificationBase-form-input:-webkit-autofi= +ll:hover { -webkit-text-fill-color: rgb(255, 255, 255); box-shadow: rgb(3, = +9, 30) 0px 0px 0px 1000px inset; } + +.NotificationBase-form-button { background-color: rgb(7, 145, 230); border:= + none; border-radius: 8px; color: rgb(3, 9, 30); cursor: pointer; font-size= +: 0.875rem; font-weight: 700; letter-spacing: 0.5px; line-height: 1.375rem;= + padding: 0.5rem 1rem; } + +.NotificationBase-form-button:hover { background-color: rgb(51, 177, 255); = +} + +.NotificationBase-info { background-color: rgb(29, 79, 124); border: 1px so= +lid rgb(29, 79, 124); color: rgb(116, 202, 255); } + +.NotificationBase-info:active, .NotificationBase-info:focus, .NotificationB= +ase-info:hover { outline: none; } + +.NotificationBase-info .NotificationBase-close { color: rgb(7, 145, 230); } + +.NotificationBase-info .NotificationBase-close:active, .NotificationBase-in= +fo .NotificationBase-close:focus, .NotificationBase-info .NotificationBase-= +close:hover { color: rgb(116, 202, 255); outline: none; } + +.NotificationBase-info .NotificationBase-cta { background-color: rgb(51, 17= +7, 255); } + +.NotificationBase-info .NotificationBase-cta:hover { background-color: rgb(= +116, 202, 255); } + +.NotificationBase-info .NotificationBase-cta:active { background-color: rgb= +(7, 145, 230); } + +.NotificationBase-info .NotificationBase-icon { color: rgb(7, 145, 230); } + +.NotificationBase-info .NotificationBase-form-button { background-color: rg= +b(7, 145, 230); } + +.NotificationBase-info .NotificationBase-form-button:hover { background-col= +or: rgb(116, 202, 255); } + +.NotificationBase-success { background-color: rgb(66, 92, 61); border: 1px = +solid rgb(66, 92, 61); color: rgb(193, 223, 139); } + +.NotificationBase-success:active, .NotificationBase-success:focus, .Notific= +ationBase-success:hover { outline: none; } + +.NotificationBase-success .NotificationBase-close { color: rgb(119, 166, 30= +); } + +.NotificationBase-success .NotificationBase-close:active, .NotificationBase= +-success .NotificationBase-close:focus, .NotificationBase-success .Notifica= +tionBase-close:hover { color: rgb(193, 223, 139); outline: none; } + +.NotificationBase-success .NotificationBase-cta { background-color: rgb(152= +, 202, 63); } + +.NotificationBase-success .NotificationBase-cta:hover { background-color: r= +gb(193, 223, 139); } + +.NotificationBase-success .NotificationBase-cta:active { background-color: = +rgb(119, 166, 30); } + +.NotificationBase-success .NotificationBase-icon { color: rgb(119, 166, 30)= +; } + +.NotificationBase-success .NotificationBase-form-button { background-color:= + rgb(119, 166, 30); } + +.NotificationBase-success .NotificationBase-form-button:hover { background-= +color: rgb(193, 223, 139); } + +.NotificationBase-warning { background-color: rgb(110, 90, 43); border: 1px= + solid rgb(110, 90, 43); color: rgb(254, 230, 133); } + +.NotificationBase-warning:active, .NotificationBase-warning:focus, .Notific= +ationBase-warning:hover { outline: none; } + +.NotificationBase-warning .NotificationBase-close { color: rgb(254, 214, 52= +); } + +.NotificationBase-warning .NotificationBase-close:active, .NotificationBase= +-warning .NotificationBase-close:focus, .NotificationBase-warning .Notifica= +tionBase-close:hover { color: rgb(254, 230, 133); outline: none; } + +.NotificationBase-warning .NotificationBase-cta { background-color: rgb(253= +, 221, 92); } + +.NotificationBase-warning .NotificationBase-cta:hover { background-color: r= +gb(254, 230, 133); } + +.NotificationBase-warning .NotificationBase-cta:active { background-color: = +rgb(254, 214, 52); } + +.NotificationBase-warning .NotificationBase-icon { color: rgb(254, 214, 52)= +; } + +.NotificationBase-warning .NotificationBase-form-button { background-color:= + rgb(254, 214, 52); } + +.NotificationBase-warning .NotificationBase-form-button:hover { background-= +color: rgb(254, 230, 133); } + +.NotificationBase-error { background-color: rgb(109, 42, 42); border: 1px s= +olid rgb(109, 42, 42); color: rgb(255, 136, 132); } + +.NotificationBase-error:active, .NotificationBase-error:focus, .Notificatio= +nBase-error:hover { outline: none; } + +.NotificationBase-error .NotificationBase-close { color: rgb(255, 57, 51); = +} + +.NotificationBase-error .NotificationBase-close:active, .NotificationBase-e= +rror .NotificationBase-close:focus, .NotificationBase-error .NotificationBa= +se-close:hover { color: rgb(255, 136, 132); outline: none; } + +.NotificationBase-error .NotificationBase-cta { background-color: rgb(255, = +96, 91); } + +.NotificationBase-error .NotificationBase-cta:hover { background-color: rgb= +(255, 136, 132); } + +.NotificationBase-error .NotificationBase-cta:active { background-color: rg= +b(255, 57, 51); } + +.NotificationBase-error .NotificationBase-icon { color: rgb(255, 57, 51); } + +.NotificationBase-error .NotificationBase-form-button { background-color: r= +gb(255, 57, 51); } + +.NotificationBase-error .NotificationBase-form-button:hover { background-co= +lor: rgb(255, 136, 132); } + +.FloatingAlert { -webkit-box-orient: horizontal; animation-duration: 0.5s; = +background: rgb(64, 88, 124); border: 1px solid rgb(141, 162, 192); border-= +radius: 0.5rem; bottom: 1rem; display: flex; flex-flow: row; left: 50%; max= +-width: 320px; padding: 1rem; position: fixed; transform: translateX(-50%);= + width: 85vw; z-index: 999; } + +@media only screen and (min-width: 64rem) { + .FloatingAlert { bottom: inherit; left: inherit; right: 1rem; top: 1rem; = +transform: translate(0px); } +} + +.FloatingAlert--show { animation-name: show; } + +.FloatingAlert-image { height: 40px; width: 40px; } + +.FloatingAlert-cta { -webkit-box-orient: vertical; display: flex; flex-flow= +: column; margin-left: 1rem; row-gap: 0.75rem; } + +.FloatingAlert-title { color: rgb(255, 255, 255); font-weight: 600; } + +.FloatingAlert-description { color: rgb(190, 205, 227); font-size: 0.825rem= +; } + +.FloatingAlert-buttonsContainer { -webkit-box-orient: horizontal; display: = +flex; flex-flow: row; row-gap: 1rem; } + +.FloatingAlert-button { background: rgb(51, 177, 255); border: none; border= +-radius: 0.5rem; color: rgb(3, 9, 30); font-size: 0.75rem; font-weight: 600= +; letter-spacing: 0.25px; line-height: 1.125rem; margin: 0px; padding: 0.5r= +em 1rem; text-align: center; text-decoration: none; text-transform: upperca= +se; } + +.FloatingAlert-button:hover { cursor: pointer; } + +.FloatingAlert-button--secondary { background: rgb(36, 56, 91); color: rgb(= +51, 177, 255); margin-left: 0.5rem; } + +@-webkit-keyframes show {=20 + 0% { opacity: 0; } + 100% { opacity: 0.01; } +} + +@keyframes show {=20 + 0% { opacity: 0; } + 100% { opacity: 0.01; } +} + +.FooterContainer-up { background: rgb(28, 54, 67); padding-top: 1em; } + +@media only screen and (min-width: 48rem) { + .FooterContainer-up { padding-left: 1em; } +} + +@media only screen and (min-width: 75rem) { + .FooterContainer-up { padding-left: 0px; } +} + +.FooterContainer-mid { background: linear-gradient(90deg, rgb(28, 54, 67), = +rgb(39, 59, 71) 50%, rgb(30, 83, 114)); height: auto; } + +@media only screen and (min-width: 48rem) { + .FooterContainer-mid { padding-left: 1em; } +} + +@media only screen and (min-width: 75rem) { + .FooterContainer-mid { height: 100px; padding-left: 0px; } +} + +.FooterContainer-bottom { background: rgb(25, 48, 60); padding: 1em 0px; } + +@media only screen and (min-width: 48rem) { + .FooterContainer-bottom { padding-left: 1em; } +} + +@media only screen and (min-width: 75rem) { + .FooterContainer-bottom { padding-left: 0px; } +} + +.FooterGrid-up { -webkit-box-pack: center; display: flex; flex-wrap: wrap; = +justify-content: center; max-width: 1200px; } + +@media only screen and (min-width: 48rem) { + .FooterGrid-up { display: grid; grid-template-columns: repeat(6, 1fr); gr= +id-template-rows: 1fr 1fr; } +} + +.FooterGrid-up > div { width: 100%; } + +@media only screen and (min-width: 48rem) { + .FooterGrid-up > div { width: auto; } +} + +.FooterGrid-bottom { -webkit-box-orient: vertical; -webkit-box-align: cente= +r; align-items: center; display: flex; flex-direction: column; } + +@media only screen and (min-width: 64rem) { + .FooterGrid-bottom { display: grid; grid-template-columns: auto auto; } +} + +.CategoriesSection { background-color: rgb(25, 48, 60); box-sizing: border-= +box; grid-area: 1 / 3 / 3 / 5; margin: 0.5em -1em; padding: 0.5em 1.5em; } + +@media only screen and (min-width: 48rem) { + .CategoriesSection { background: none; margin: 0px; padding: 0px 1em; } +} + +.CategoriesSection .Category { -webkit-box-pack: justify; -webkit-box-align= +: center; align-items: center; display: flex; font-size: 14px; justify-cont= +ent: space-between; margin: 1em 0px; padding-left: 0.5em; } + +.CategoriesSection .Category a { color: rgb(255, 255, 255); text-decoration= +: none; width: 100%; } + +.CertifiersLayout { -webkit-box-pack: center; place-content: baseline cente= +r; color: rgb(255, 255, 255); display: flex; flex-wrap: wrap; grid-column: = +5 / 7; padding: 1em; } + +@media only screen and (min-width: 48rem) { + .CertifiersLayout { -webkit-box-pack: start; justify-content: start; } +} + +.CertifiersLayout span { font-size: 14px; padding-bottom: 1em; text-align: = +center; width: 100%; } + +@media only screen and (min-width: 48rem) { + .CertifiersLayout span { text-align: left; } +} + +.CertifiersLayout .Certifier { padding-right: 1em; } + +.AwardsLayout { -webkit-box-pack: center; place-content: flex-end center; c= +olor: rgb(255, 255, 255); display: flex; flex-wrap: wrap; grid-column: 5 / = +7; padding: 1em; } + +@media only screen and (min-width: 48rem) { + .AwardsLayout { -webkit-box-pack: start; justify-content: start; padding-= +top: 0px; } +} + +.AwardsLayout span { font-size: 14px; padding-bottom: 1em; text-align: cent= +er; width: 100%; } + +@media only screen and (min-width: 48rem) { + .AwardsLayout span { text-align: left; } +} + +.AwardsLayout .Award { padding-right: 1em; } + +.MenuLayout { -webkit-box-pack: center; -webkit-box-align: center; align-it= +ems: center; display: flex; flex-wrap: wrap; justify-content: center; line-= +height: 1.25rem; margin-bottom: 1rem; width: 100%; } + +@media only screen and (min-width: 48rem) { + .MenuLayout { -webkit-box-pack: center; justify-content: center; } +} + +@media only screen and (min-width: 64rem) { + .MenuLayout { -webkit-box-pack: justify; justify-content: space-between; = +margin-bottom: 0px; } +} + +.MenuLayout .MenuItem { color: rgb(219, 219, 226); font-size: 12px; padding= +-right: 1em; text-decoration: none; } + +@media only screen and (min-width: 64rem) { + .MenuLayout .MenuItem { padding-right: 0.5em; } + .MenuLayout .MenuItem:last-child { padding-right: 3em; } +} + +.LanguageLayout { -webkit-box-pack: center; color: rgb(255, 255, 255); disp= +lay: flex; justify-content: center; margin-bottom: 1em; } + +@media only screen and (min-width: 48rem) { + .LanguageLayout { padding-bottom: 0px; } +} + +@media only screen and (min-width: 64rem) { + .LanguageLayout { -webkit-box-pack: end; justify-content: flex-end; margi= +n: 0px; } +} + +.LanguageLayout .LangButton { margin: 0px 1em; } + +@media only screen and (min-width: 64rem) { + .LanguageLayout .LangButton { margin-left: 0px; margin-right: 1em; } +} + +.LoveLayout { -webkit-box-pack: center; color: rgb(255, 255, 255); display:= + flex; font-size: 13px; justify-content: center; margin: 0px; min-width: 20= +0px; } + +@media only screen and (min-width: 64rem) { + .LoveLayout { grid-column: 1 / 3; padding: 1em 0px; } +} + +.LoveLayout svg { color: rgb(152, 202, 63); font-size: 12px; padding: 0px 4= +px 0px 1px; } + +.Footer--dark .CategoriesSection, .Footer--dark .FooterContainer-bottom, .F= +ooter--dark .FooterContainer-mid, .Footer--dark .FooterContainer-up { backg= +round: rgb(3, 9, 30) !important; } + +.PriceTabs { margin: 0px auto 1.5rem; text-align: center; } + +.PriceTabs-list { -webkit-box-align: center; -webkit-box-pack: center; alig= +n-items: center; border-radius: 0.5rem; display: inline-flex; justify-conte= +nt: center; list-style-type: none; padding: 0.125rem; } + +.PriceTabs-btn { background: none; border: 0px; border-radius: 0.5rem; curs= +or: pointer; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.5px; = +padding: 0.75rem 1rem; text-transform: uppercase; } + +.PriceTabs-icon { margin-right: 0.75rem; } + +.PriceTabs--dark .PriceTabs-list { background-color: rgb(36, 56, 91); } + +.PriceTabs--dark .PriceTabs-btn { color: rgb(141, 162, 192); } + +.PriceTabs--dark .PriceTabs-btn--active { background-color: rgb(51, 177, 25= +5); color: rgb(3, 9, 30); } + +.PriceTabs--light .PriceTabs-list { background-color: rgb(230, 244, 252); } + +.PriceTabs--light .PriceTabs-btn { color: rgb(39, 59, 71); } + +.PriceTabs--light .PriceTabs-btn--active { background-color: rgb(7, 145, 23= +0); color: rgb(255, 255, 255); } + +.PriceFooter { text-align: center; } + +.PriceFooter-text { font-size: 1rem; font-weight: 700; line-height: 1.6; ma= +rgin-bottom: 2rem; } + +@media only screen and (min-width: 64rem) { + .PriceFooter-text { font-size: 1.125rem; } +} + +.PriceFooter-payments { -webkit-box-align: center; -webkit-box-pack: center= +; -webkit-box-orient: vertical; align-items: center; display: flex; flex-di= +rection: column; font-size: 0.875rem; justify-content: center; line-height:= + 1.6; } + +@media only screen and (min-width: 48rem) { + .PriceFooter-payments { -webkit-box-orient: horizontal; flex-flow: wrap; = +} +} + +@media only screen and (min-width: 64rem) { + .PriceFooter-payments { flex-wrap: nowrap; font-size: 1rem; } +} + +.PriceFooter-payments-text { -webkit-box-align: center; -webkit-box-pack: c= +enter; align-items: center; display: inline-flex; flex-wrap: wrap; justify-= +content: center; margin: 0px 0.25rem 0.5rem; } + +@media only screen and (min-width: 64rem) { + .PriceFooter-payments-text { margin: 0px 0.25rem; } +} + +.PriceFooter-payments-text strong { font-weight: 400; } + +.PriceFooter-payments-image { max-height: 1rem; } + +.PriceFooter-payments-image--flag { border-radius: 50%; height: 1rem; margi= +n-left: 0px; margin-right: 0.5rem; object-fit: cover; overflow: hidden; wid= +th: 1rem; } + +.PriceFooter-payments-image.bitcoin, .PriceFooter-payments-image.davivienda= + { max-height: 1.2rem; } + +.PriceFooter-payments-image.baloto { max-height: 1.25rem; } + +.PriceFooter-payments-image.paypal, .PriceFooter-payments-image.pse { max-h= +eight: 1.2rem; } + +.PriceFooter-payments-methods { -webkit-box-align: center; -webkit-box-pack= +: center; align-items: center; gap: 0.75rem; display: flex; flex-wrap: wrap= +; justify-content: center; margin-top: 0.75rem; } + +@media only screen and (min-width: 48rem) { + .PriceFooter-payments-methods { margin-left: 0.75rem; margin-top: 0px; } +} + +.PriceFooter--dark .PriceFooter-text { color: rgb(255, 255, 255); } + +.PriceFooter--dark .PriceFooter-payments { color: rgb(190, 205, 227); } + +.PriceFooter--light .PriceFooter-payments, .PriceFooter--light .PriceFooter= +-text { color: rgb(39, 59, 71); } + +.Community { padding-top: 80px; } + +.Community-title { font-size: 24px; font-weight: 800; line-height: 1.14; ma= +rgin: 0px auto; text-align: center; } + +@media only screen and (min-width: 48rem) { + .Community-title { font-size: 32px; } +} + +.Community-image { grid-area: image; justify-self: center; max-width: 470px= +; padding-bottom: 40px; width: 90%; } + +@media only screen and (min-width: 48rem) { + .Community-image { padding-bottom: 0px; } +} + +.Community-content { padding-bottom: 40px; padding-top: 24px; } + +@media only screen and (min-width: 48rem) { + .Community-content { padding-bottom: 80px; padding-top: 48px; } +} + +.Community-content-section { -webkit-box-pack: center; -webkit-box-align: c= +enter; align-items: center; display: grid; grid-template: "image" 1fr "ul" = +min-content / 1fr; justify-content: center; } + +.Community-content-section:first-child { padding-bottom: 40px; } + +@media only screen and (min-width: 48rem) { + .Community-content-section:first-child { padding-bottom: 80px; } + .Community-content-section { gap: 40px; grid-template: "image ul" 1fr / 1= +fr 1fr; } + .Community-content-section-bottom { grid-template-areas: "ul image"; } +} + +@media only screen and (min-width: 64rem) { + .Community-content-section { gap: 100px; } +} + +.Community-list { grid-area: ul; justify-self: center; } + +.Community-item { list-style-type: none; max-width: 440px; position: relati= +ve; } + +.Community-item:first-child { padding-bottom: 24px; } + +@media only screen and (min-width: 48rem) { + .Community-item:first-child { padding-bottom: 48px; } + .Community-item { font-size: 1.5rem; } +} + +.Community-item::before { color: rgb(152, 202, 63); content: "=E2=80=A2"; f= +ont-size: 3rem; font-weight: 700; left: -28px; position: absolute; top: -0.= +5rem; } + +.Community-item-title { color: rgb(239, 243, 248); font-size: 1.5rem; font-= +weight: 700; line-height: 1.5; } + +.Community-item-subtitle { color: rgb(190, 205, 227); font-size: 1.125rem; = +line-height: 1.56; } + +.Separator { -webkit-box-align: center; -webkit-box-pack: center; align-ite= +ms: center; display: flex; justify-content: center; margin-bottom: 1.5rem; = +} + +@media only screen and (min-width: 48rem) { + .Separator { margin-bottom: 2.5rem; } +} + +.Separator-icon { animation: 1s ease 0s infinite alternate none running lig= +ht; opacity: 0.5; width: 100%; } + +.Separator-top { padding-bottom: 40px; padding-top: 40px; } + +@media only screen and (min-width: 64rem) { + .Separator-top { padding-top: 80px; } +} + +.Separator-bottom { padding-bottom: 32px; } + +.Separator-align-left { -webkit-box-pack: start; justify-content: flex-star= +t; } + +.Separator img { max-height: 24px; } + +@-webkit-keyframes light {=20 + 0% { opacity: 0.3; } + 100% { filter: none; opacity: 1; } +} + +@keyframes light {=20 + 0% { opacity: 0.3; } + 100% { filter: none; opacity: 1; } +} + +.TwitterTestimonies { margin-bottom: 2rem; overflow: hidden; } + +.TwitterTestimonies-title { font-size: 1.5rem; line-height: 1.5; margin-bot= +tom: 0.875rem; text-align: center; } + +@media only screen and (min-width: 48rem) { + .TwitterTestimonies-title { margin-bottom: 1.5rem; } +} + +@media only screen and (min-width: 64rem) { + .TwitterTestimonies-title { font-size: 2rem; margin-bottom: 2rem; } +} + +.TwitterTestimonies .Carousel-arrows { display: none; } + +@media only screen and (min-width: 48rem) { + .TwitterTestimonies .Carousel-arrows { display: block; } +} + +.TwitterTestimonies .Carousel-arrows-left, .TwitterTestimonies .Carousel-ar= +rows-right { background: none; } + +.TwitterTestimonies .Carousel-bullets { display: block; } + +@media only screen and (min-width: 48rem) { + .TwitterTestimonies .Carousel-bullets { display: none; } +} + +.TwitterTestimonies .Carousel-bullets button span { height: 0.75rem; width:= + 0.75rem; } + +.schedule { background-color: rgb(83, 59, 155); color: rgb(255, 255, 255); = +position: relative; } + +.schedule-container h2 { font-size: 1.5rem; font-weight: 700; margin-bottom= +: 1.5rem; padding: 0px 1rem; } + +@media only screen and (min-width: 64rem) { + .schedule-container h2 { font-size: 2.25rem; margin-bottom: 3.5rem; text-= +align: center; } +} + +.Tabs .u-wrapper { max-width: 100vw; } + +.Tabs-tabs { border-bottom: 1px solid rgb(36, 56, 91); box-sizing: border-b= +ox; display: flex; overflow: auto; scrollbar-width: none; width: 100%; } + +.Tabs-tabs::-webkit-scrollbar { display: none; } + +.Tabs-tabs .Tab { border-bottom: 2px solid transparent; color: rgb(99, 122,= + 157); cursor: pointer; font-size: 0.875rem; font-weight: 700; min-width: 1= +00px; padding: 0.5rem; text-align: center; text-transform: uppercase; trans= +ition: 0.2s; } + +@media only screen and (min-width: 48rem) { + .Tabs-tabs .Tab { min-width: 160px; } +} + +.Tabs-tabs .Tab:hover { color: rgb(116, 202, 255); } + +.Tabs-tabs .Tab.is-active { border-bottom: 2px solid rgb(51, 177, 255); col= +or: rgb(51, 177, 255); } + +.Tabs-tabs .Tab.is-active span { color: rgb(99, 122, 157); margin-left: 0.3= +rem; } + +.Tabs-tabs .Tab span { font-weight: 400; margin-left: 0.3rem; } + +.Tabs-content { margin-top: 1rem; } + +.Tabs-wrapper { box-sizing: border-box; padding: 24px 8px; width: 100vw; } + +@media only screen and (min-width: 48rem) { + .Tabs-wrapper { padding: 0px; width: auto; } +} + +.Tabs .Carousel { margin: 0px; width: 100% !important; } + +.Tabs .Carousel-arrows-right, .Tabs .Carousel-external { margin-right: 0px;= + } + +.CountDown { -webkit-box-pack: center; -webkit-box-align: center; align-ite= +ms: center; border-radius: 0.3125rem; box-sizing: border-box; display: flex= +; height: min-content; justify-content: center; justify-self: center; paddi= +ng: 0.5rem 1.5rem; } + +.CountDown-title { margin-right: 0.5rem; text-transform: uppercase; } + +.CountDown-element-wrapper { gap: 0.125rem; display: grid; grid-template-co= +lumns: repeat(4, 1fr); } + +.CountDown-element-wrapper--isDayZero { grid-template-columns: repeat(3, 1f= +r); } + +.CountDown-element-single { -webkit-box-pack: center; -webkit-box-align: ce= +nter; align-items: center; display: flex; justify-content: center; } + +.CountDown-element-single::after { color: rgb(255, 255, 255); content: ":";= + font-weight: 800; margin-left: 0.125rem; } + +.CountDown-element-single:last-child::after { content: ""; } + +.CountDown-element-single p, .CountDown-element-single strong { font-size: = +0.875rem; font-weight: 800; letter-spacing: 0.12rem; line-height: 1.375rem;= + text-transform: uppercase; } + +.Form-flag { -webkit-box-align: center; align-items: center; background-col= +or: rgb(3, 9, 30); border-bottom-left-radius: 0.5rem; border-top: 1px solid= + rgb(64, 88, 124); border-bottom: 1px solid rgb(64, 88, 124); border-left: = +1px solid rgb(64, 88, 124); border-image: initial; border-right: none; bord= +er-top-left-radius: 0.5rem; color: rgb(255, 255, 255); display: flex; width= +: 80px; } + +.Form-flag:active, .Form-flag:focus, .Form-flag:focus-within, .Form-flag:ho= +ver { border-color: rgb(51, 177, 255); cursor: pointer; } + +.Form-flag.error { border-color: rgb(255, 57, 51); } + +.Form-flag img { border-radius: 4px; height: 18px; margin: 0px 0.5rem; widt= +h: 24px; } + +.Form-flag select { background-color: rgb(3, 9, 30); border: 1px solid rgb(= +99, 122, 157); border-bottom-left-radius: 0.5rem; border-top-left-radius: 0= +.5rem; color: rgb(255, 255, 255); display: inline-block; height: 36px; opac= +ity: 0.001; outline: none; position: absolute; width: 80px; } + +.Form-flag select:active, .Form-flag select:focus, .Form-flag select:hover = +{ border-color: rgb(51, 177, 255); cursor: pointer; } + +.Form-flag select:disabled { cursor: not-allowed; } + +.SalaryModalCard { margin: 0px auto; padding-bottom: 2rem; width: 90%; } + +.SalaryModalCard-close { padding: 0.5rem 0.5rem 0px; text-align: right; } + +.SalaryModalCard-close button { background: transparent; border: none; colo= +r: rgb(99, 122, 157); cursor: pointer; font-size: 1.25rem; } + +.SalaryModalCard-close button:hover { color: rgb(239, 243, 248); } + +.SalaryModalCard-close button:focus { outline: none; } + +.SalaryModalCard-body-head { text-align: center; } + +.SalaryModalCard-body-head img { height: 73px; margin-bottom: 1rem; width: = +73px; } + +.SalaryModalCard-body-head h3 { color: rgb(255, 255, 255); font-size: 1.125= +rem; font-weight: 600; line-height: 1.5rem; margin: 0px auto 1.5rem; max-wi= +dth: 300px; } + +.SalaryModalCard-body-content ul { border: 1px solid rgb(99, 122, 157); bor= +der-radius: 12px; margin: 0px 0px 1.5rem; padding: 0px; } + +.SalaryModalCard-body-content ul li { -webkit-box-align: center; align-item= +s: center; border-bottom: 1px solid rgb(99, 122, 157); box-sizing: border-b= +ox; display: flex; list-style-type: none; padding: 1rem; } + +.SalaryModalCard-body-content ul li:first-child svg { color: rgb(253, 221, = +92); } + +.SalaryModalCard-body-content ul li:last-child { border-bottom: none; } + +.SalaryModalCard-body-content ul li svg { margin-right: 1rem; } + +.SalaryModalCard-body-content ul li p { color: rgb(255, 255, 255); font-siz= +e: 0.875rem; font-weight: 600; line-height: 1.125rem; } + +.SalaryModalCard-body-content ul li span { color: rgb(190, 205, 227); font-= +size: 0.75rem; line-height: 1rem; } + +.SalaryModalCard-footer a { box-sizing: border-box; text-align: center; wid= +th: 100%; } + +.SalaryModalCard-footer button { margin-top: 1rem; text-align: center; text= +-transform: none; width: 100%; border: none !important; } + +.SalaryModalCard-doNotShow { -webkit-box-align: center; align-items: center= +; display: flex; margin-bottom: 1.5rem; } + +.SalaryModalCard-doNotShow p { color: rgb(239, 243, 248); font-size: 0.875r= +em; line-height: 1.25rem; } + +.SalaryModalCard .FormCheckbox-label::before { background-color: rgb(3, 9, = +30); border: 1px solid rgb(99, 122, 157); } + +.SalaryModalCard .FormCheckbox-field:checked + .FormCheckbox-label::before = +{ background-color: rgb(3, 9, 30); border: 1px solid rgb(51, 177, 255); col= +or: rgb(51, 177, 255); content: "=E2=9C=93"; font-family: "Roboto,sans-seri= +f"; font-size: 1rem; } + +@media only screen and (min-width: 48rem) { + .SalaryModalCard { width: 420px; } +} + +.Nav-header { -webkit-box-align: center; align-items: center; display: grid= +; grid-template-areas: "logo live search actions login menu"; grid-template= +-columns: auto 1fr auto auto auto auto; padding-right: 12px; position: rela= +tive; } + +.Nav-header-mobileCtas { -webkit-box-pack: justify; justify-content: space-= +between; } + +.Nav-header-mobileCtas, .Nav-header-mobileCtas-actions { display: flex; } + +.Nav-header-mobileCtas-actions { -webkit-box-flex: 1; -webkit-box-pack: end= +; flex: 1 1 100%; gap: 1rem; grid-area: actionsCta; justify-content: end; } + +.Nav-header-mobileCtas-actions--login { color: rgb(255, 255, 255); font-wei= +ght: 600; text-transform: capitalize; background-color: transparent !import= +ant; padding: 0.25rem 0.5rem !important; } + +.Nav-header-mobileCtas-actions--login span { display: none; } + +@media only screen and (min-width: 48rem) { + .Nav-header-mobileCtas-actions--login span { display: inline-block; } +} + +.Nav-header-mobileCtas-actions--login svg { color: rgb(255, 255, 255); } + +@media only screen and (min-width: 48rem) { + .Nav-header-mobileCtas-actions--login svg { display: none; } +} + +.Nav-header-mobileCtas-actions--join { border: 1px solid rgb(255, 255, 255)= +; color: rgb(0, 0, 0); font-weight: 600; padding: 0.25rem 0.5rem; text-tran= +sform: capitalize; background-color: rgb(255, 255, 255) !important; } + +.NewAlgoliaSearch { grid-area: search; } + +.Nav-header-logged { -webkit-box-align: center; align-items: center; displa= +y: grid; grid-template-areas: "logo live search tinkerbell actions menu"; g= +rid-template-columns: auto 1fr auto auto auto auto; padding-right: 12px; } + +@media only screen and (min-width: 48rem) { + .Nav-header { grid-template-areas: "logo live search actions login menu";= + grid-template-columns: auto 1fr 340px auto auto auto; } + .Nav-header-list, .Nav-header-menu { display: block; } + .Nav-header-logged { display: grid; grid-template-areas: "logo live searc= +h tinkerbell actions menu"; grid-template-columns: auto 1fr 340px auto auto= + auto; } + .Nav-header-logged-list, .Nav-header-logged-menu { display: block; } +} + +@media only screen and (max-width: 83.125rem) { + .Nav-header-desktopCtas { display: none !important; } +} + +@media only screen and (min-width: 83.125rem) { + .Nav-header { grid-template-areas: "logo live categories search menu acti= +ons login actionsCta"; grid-template-columns: auto fit-content(150px) auto = +215px 1fr auto auto; } + .Nav-header-list, .Nav-header-menu { display: block; } + .Nav-header-mobileCtas { display: none; } + .Nav-header-logged { grid-template-areas: "logo live categories search me= +nu tinkerbell actions"; grid-template-columns: auto fit-content(150px) auto= + 215px 1fr auto auto; } + .Nav-header-logged-list, .Nav-header-logged-menu { display: block; } +} + +.Nav-header-mobile-search--active { grid-template-areas: "search"; grid-tem= +plate-columns: 1fr; padding-right: 0px; } + +.Nav-header-mobile-search--active > div { display: none; } + +.Nav-header-mobile-search--active .NewSearch { display: block; } + +.SwitchLanguage { background-color: rgb(252, 252, 210); position: relative;= + z-index: 4; } + +.SwitchLanguage-content { -webkit-box-align: center; align-items: center; c= +olor: rgb(34, 51, 84); display: grid; font-size: 16px; font-weight: 700; gr= +id-template-areas: "title close" "button button"; padding: 12px; } + +.SwitchLanguage-title { grid-area: title; } + +.SwitchLanguage-close { grid-area: close; justify-self: end; } + +.SwitchLanguage-close svg { color: rgb(255, 72, 66); cursor: pointer; font-= +size: 22px; font-weight: 700; } + +.SwitchLanguage-button { grid-area: button; justify-self: start; margin-top= +: 10px; } + +@media only screen and (min-width: 48rem) { + .SwitchLanguage-content { display: grid; grid-template-areas: "title butt= +on close"; grid-template-columns: auto 294px auto; } + .SwitchLanguage-title { grid-area: title; justify-self: end; margin-right= +: 32px; } + .SwitchLanguage-close { grid-area: close; justify-self: start; margin-lef= +t: 32px; } + .SwitchLanguage-button { grid-area: button; margin-top: 0px; width: 294px= +; } + .SwitchLanguage-button a { display: block; text-align: center; } +} + +.HeaderNotification { background-color: rgb(230, 242, 209); padding: 0.5rem= + 0px; } + +.HeaderNotification.isRed { background-color: rgb(255, 145, 141); } + +.HeaderNotification.isRed p { color: rgb(168, 48, 44); } + +.HeaderNotification.isRed a { background-color: rgb(255, 72, 66); } + +.HeaderNotification.isRed svg { color: rgb(255, 72, 66); } + +.HeaderNotification-content { -webkit-box-align: center; -webkit-box-pack: = +center; -webkit-box-orient: vertical; align-items: center; display: flex; f= +lex-direction: column; font-family: Roboto, sans-serif; font-size: 14px; ju= +stify-content: center; } + +@media only screen and (min-width: 48rem) { + .HeaderNotification-content { gap: 1rem; display: grid; grid-template-col= +umns: 2fr 1fr; } +} + +@media only screen and (min-width: 64rem) { + .HeaderNotification-content { grid-template-columns: 3fr 1fr; } +} + +@media only screen and (min-width: 75rem) { + .HeaderNotification-content { grid-template-columns: 4fr 1fr; } +} + +.HeaderNotification-content-left { -webkit-box-pack: center; -webkit-box-al= +ign: center; align-items: center; display: flex; justify-content: center; m= +argin-bottom: 0.5rem; } + +@media only screen and (min-width: 48rem) { + .HeaderNotification-content-left { margin-bottom: 0px; } +} + +.HeaderNotification-content-left-image { display: contents; overflow: hidde= +n; } + +.HeaderNotification-content-left-image img { border-radius: 50%; height: 20= +px; width: 20px; } + +.HeaderNotification svg { color: rgb(152, 202, 63); font-size: 16px; height= +: 1em; } + +.HeaderNotification-text { color: rgb(66, 92, 61); line-height: 22px; margi= +n-left: 1rem; width: 100%; } + +.HeaderNotification-anchor { background-color: rgb(152, 202, 63); border-ra= +dius: 0.5rem; color: rgb(255, 255, 255); font-weight: 700; padding: 0.5rem = +1rem; text-align: center; text-decoration: none; text-transform: uppercase;= + } + +a { text-decoration: none; } + +.StickyCustomBanner { padding-bottom: 0.5rem; } + +.StickyCustomBanner .u-wrapper { max-width: 1200px; } + +@media only screen and (min-width: 48rem) { + .StickyCustomBanner { padding-bottom: 0px; } +} + +.StickyCustomBanner-container { -webkit-box-align: stretch; align-items: st= +retch; } + +.StickyCustomBanner-container, .StickyCustomBanner-info { display: flex; } + +.StickyCustomBanner-info { -webkit-box-align: center; -webkit-box-orient: v= +ertical; align-items: center; flex-direction: column; } + +@media only screen and (min-width: 48rem) { + .StickyCustomBanner-info { -webkit-box-orient: horizontal; flex-direction= +: row; margin-right: 0.5rem; width: 60%; } +} + +.StickyCustomBanner-content { -webkit-box-align: center; align-items: cente= +r; display: flex; margin-bottom: 0.5rem; padding-top: 0.5rem; } + +@media only screen and (min-width: 48rem) { + .StickyCustomBanner-content { margin-right: 0.5rem; padding: 0.5rem 0px; = +width: 44%; } +} + +@media only screen and (min-width: 64rem) { + .StickyCustomBanner-content { width: 48%; } +} + +@media only screen and (min-width: 75rem) { + .StickyCustomBanner-content { width: 56%; } +} + +.StickyCustomBanner-content--withoutCta { width: 100%; } + +.StickyCustomBanner-cta { text-align: center; } + +@media only screen and (min-width: 48rem) { + .StickyCustomBanner-cta { text-align: left; width: 56%; } +} + +@media only screen and (min-width: 64rem) { + .StickyCustomBanner-cta { width: 50%; } +} + +@media only screen and (min-width: 75rem) { + .StickyCustomBanner-cta { width: 43%; } +} + +.StickyCustomBanner-avatar { display: none; } + +@media only screen and (min-width: 75rem) { + .StickyCustomBanner-avatar { border-radius: 50%; display: block; height: = +40px; margin-right: 0.5rem; object-fit: cover; width: 40px; } +} + +.StickyCustomBanner-description { font-size: 0.75rem; text-align: center; } + +@media only screen and (min-width: 48rem) { + .StickyCustomBanner-description { text-align: left; } +} + +@media only screen and (min-width: 75rem) { + .StickyCustomBanner-description { font-size: 0.875rem; } +} + +.StickyCustomBanner-btn { background-color: rgb(152, 202, 63); border: 0px;= + border-radius: 8px; color: rgb(3, 9, 30); cursor: pointer; display: inline= +-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; paddin= +g: 0.6rem 1rem; text-align: center; text-decoration: none; text-transform: = +uppercase; transition: background-color 0.37s ease-in-out; } + +@media only screen and (min-width: 64rem) { + .StickyCustomBanner-btn { font-size: 0.875rem; } +} + +.StickyCustomBanner-btn:hover { background-color: rgb(193, 223, 139); } + +.StickyCustomBanner-btn:active { background-color: rgb(119, 166, 30); } + +.StickyCustomBanner-countdown { display: none; } + +@media only screen and (min-width: 48rem) { + .StickyCustomBanner-countdown { -webkit-box-align: center; -webkit-box-pa= +ck: center; -webkit-box-orient: vertical; align-items: center; display: fle= +x; flex-direction: column; justify-content: center; width: 35%; } +} + +@media only screen and (min-width: 75rem) { + .StickyCustomBanner-countdown { -webkit-box-orient: horizontal; flex-dire= +ction: row; } +} + +.StickyCustomBanner-countdownTitle { font-size: 0.875rem; font-weight: 700;= + margin-bottom: 0.5rem; text-align: center; text-transform: uppercase; } + +@media only screen and (min-width: 75rem) { + .StickyCustomBanner-countdownTitle { margin-bottom: 0px; margin-right: 0.= +5rem; } +} + +.StickyCustomBanner-countdownWrapper { -webkit-box-align: center; align-ite= +ms: center; display: flex; } + +.StickyCustomBanner-countdownSingle { font-size: 1.125rem; font-weight: 700= +; margin-right: 1rem; position: relative; } + +@media only screen and (min-width: 64rem) { + .StickyCustomBanner-countdownSingle { font-size: 1.5rem; } +} + +.StickyCustomBanner-countdownSingle::after { content: ":"; font-weight: 700= +; position: absolute; right: -0.7rem; top: -1px; } + +.StickyCustomBanner-countdownSingle:last-child { margin-right: 0px; } + +.StickyCustomBanner-countdownSingle:last-child::after { content: ""; } + +.StickyCustomBanner--referral { background-color: rgb(18, 31, 61); color: r= +gb(239, 243, 248); } + +.StickyCustomBanner--referral .StickyCustomBanner-icon { display: none; } + +@media only screen and (min-width: 48rem) { + .StickyCustomBanner--referral .StickyCustomBanner-icon { -webkit-box-alig= +n: center; align-items: center; display: flex; margin-right: 0.8rem; } +} + +.StickyCustomBanner--referral .StickyCustomBanner-icon img { height: 42px; = +} + +.StickyCustomBanner--referral .StickyCustomBanner-description strong { colo= +r: rgb(152, 202, 63); } + +.StickyCustomBanner--referral .StickyCustomBanner-countdown { background-co= +lor: rgb(147, 98, 178); } + +.StickyCustomBanner--individual_promo { background-color: rgb(0, 72, 255); = +color: rgb(255, 255, 255); } + +.StickyCustomBanner--individual_promo .StickyCustomBanner-container { -webk= +it-box-pack: center; justify-content: center; } + +.StickyCustomBanner--individual_promo .StickyCustomBanner-icon { display: n= +one; } + +.StickyCustomBanner--individual_promo .StickyCustomBanner-content { margin-= +bottom: 0px; width: 100%; } + +.StickyCustomBanner--individual_promo .StickyCustomBanner-avatar { border-r= +adius: 50%; display: block; height: 40px; margin-right: 0.5rem; object-fit:= + cover; width: 40px; } + +.StickyCustomBanner--individual_promo .StickyCustomBanner-cta { display: no= +ne; } + +@media only screen and (min-width: 48rem) { + .StickyCustomBanner--individual_promo .StickyCustomBanner-cta { display: = +block; } +} + +.StickyCustomBanner--individual_promo .StickyCustomBanner-description { lin= +e-height: 1.3; margin: 0.5rem; text-align: left; } + +@media only screen and (min-width: 48rem) { + .StickyCustomBanner--individual_promo .StickyCustomBanner-description { m= +argin-bottom: 0px; } +} + +@media only screen and (min-width: 64rem) { + .StickyCustomBanner--individual_promo .StickyCustomBanner-description { w= +hite-space: nowrap; } +} + +.StickyCustomBanner--individual_promo .StickyCustomBanner-cta { text-align:= + right; } + +.StickyCustomBanner--individual_promo .StickyCustomBanner-countdown { margi= +n-left: 2rem; width: auto; } + +.StickyCustomBanner--individual_promo .StickyCustomBanner-countdownTitle { = +font-size: 0.875rem; font-weight: 400; } + +.StickyCustomBanner--individual_promo .StickyCustomBanner-countdownSingle {= + font-size: 0.875rem; } + +@media only screen and (min-width: 75rem) { + .StickyCustomBanner--individual_promo .StickyCustomBanner-countdown { -we= +bkit-box-orient: vertical; flex-direction: column; } +} + +.FormInput { -webkit-box-orient: vertical; display: flex; flex-direction: c= +olumn; margin-bottom: 0.5rem; position: relative; } + +.FormInput-label { font-weight: 400; opacity: 0; position: absolute; transi= +tion: opacity 0.2s; z-index: -1; } + +.FormInput-error { color: rgb(255, 72, 66); font-size: 12px; line-height: 1= +.33; margin-left: 0.75rem; margin-top: 3px; min-height: 1rem; } + +.FormInput-field { appearance: none; background-color: rgb(255, 255, 255); = +background-image: none; border: 1px solid rgb(168, 177, 192); border-radius= +: 0.25rem; box-shadow: none; box-sizing: border-box; color: rgb(34, 51, 84)= +; font-size: 1rem; outline: 0px; padding: 20px 12px; transition: border-col= +or 0.2s; } + +.FormInput-field.isTextArea { height: 130px; } + +.FormInput-field.isDate { padding: 17px 12px; } + +.FormInput .Select-icon { font-size: 14px; position: absolute; right: 0.75r= +em; top: 1.5rem; } + +.FormInput-field.error, .FormInput-field.error:focus { border-color: rgb(25= +5, 72, 66); color: rgb(39, 59, 71); padding: 26px 12px 14px; } + +.FormInput-field.error:focus ~ .FormInput-label, .FormInput-field.error ~ .= +FormInput-label { color: rgb(255, 72, 66); filter: none; font-size: 12px; l= +eft: 0.75rem; line-height: 1.33; opacity: 1; top: 0.25rem; z-index: 1; } + +.FormInput-field.error:focus ~ .Select-icon, .FormInput-field.error ~ .Sele= +ct-icon { color: rgb(255, 72, 66); } + +.FormInput-field.isDate.error, .FormInput-field.isDate.error:focus { paddin= +g: 24px 12px 10px; } + +.FormInput-field.filled:not(.error), .FormInput-field:focus:not(.error) { b= +order-color: rgb(7, 145, 230); color: rgb(39, 59, 71); padding: 26px 12px 1= +4px; } + +.FormInput-field.filled:not(.error) ~ .FormInput-label, .FormInput-field:fo= +cus:not(.error) ~ .FormInput-label { color: rgb(7, 145, 230); filter: none;= + font-size: 12px; left: 0.75rem; line-height: 1.33; opacity: 1; top: 0.25re= +m; z-index: 1; } + +.FormInput-field.filled:not(.error) ~ .Select-icon, .FormInput-field:focus:= +not(.error) ~ .Select-icon { color: rgb(7, 145, 230); } + +.FormInput-field.filled.isDate:not(.error), .FormInput-field:focus.isDate:n= +ot(.error) { padding: 24px 12px 10px; } + +.ModalContact { border-radius: 0.5rem; max-width: 288px; padding: 3.5rem 0.= +75rem 1.5rem; position: relative; } + +@media only screen and (min-width: 48rem) { + .ModalContact { max-width: 500px; padding: 4.125rem 5.25rem 2rem; } +} + +.ModalContact-content { background-color: rgb(255, 255, 255); border-radius= +: 4px; max-width: 550px; padding: 4rem 2rem 2rem; position: relative; } + +.ModalContact-title { font-size: 20px; font-weight: 700; line-height: 22px;= + text-align: center; } + +@media only screen and (min-width: 48rem) { + .ModalContact-title { line-height: 1; } +} + +.ModalContact-subtitle { color: rgb(255, 255, 255); margin: 0.5rem 0px 1rem= +; text-align: center; } + +@media only screen and (min-width: 48rem) { + .ModalContact-subtitle { margin: 0.5rem 0px 2rem; } +} + +.ModalContact-checkbox { -webkit-box-pack: center; -webkit-box-align: cente= +r; align-items: center; display: flex; justify-content: center; } + +.ModalContact-checkbox input { margin: 0.5rem 0.5rem 1rem; position: relati= +ve; z-index: 2; } + +.ModalContact-close { color: rgb(206, 206, 209); cursor: pointer; font-size= +: 1rem; position: absolute; right: 1rem; top: 1rem; } + +.ModalContact-logo { -webkit-box-pack: center; background: rgb(152, 202, 63= +); border-radius: 50%; color: rgb(255, 255, 255); font-size: 2rem; height: = +100px; justify-content: center; left: 0px; margin-left: auto; margin-right:= + auto; position: absolute; right: 0px; top: -50px; width: 100px; } + +.ModalContact-item, .ModalContact-logo { -webkit-box-align: center; align-i= +tems: center; display: flex; } + +.ModalContact-item { -webkit-box-orient: vertical; flex-direction: column; = +margin: 0px -0.25rem 0.5rem; padding: 1rem 0.25rem; position: relative; } + +.ModalContact-item.is-disabled { background: rgb(243, 248, 251); } + +.ModalContact-item.is-disabled .is-link { color: rgb(169, 170, 173); font-w= +eight: 400; } + +@media only screen and (min-width: 48rem) { + .ModalContact-item { margin: 0px 0px 0.5rem; } +} + +.ModalContact-item .is-link { color: rgb(7, 145, 230); font-size: 14px; fon= +t-weight: 700; text-decoration: none; } + +.ModalContact-link { border: 1px solid rgb(225, 225, 228); border-radius: 0= +.25rem; text-decoration: none; } + +.ModalContact-link:hover { border: 1px solid rgb(7, 145, 230); } + +.ModalContact-name { color: rgb(133, 134, 137); font-size: 14px; margin: 0.= +5rem 0px; } + +@media only screen and (min-width: 48rem) { + .ModalContact-name { margin: 0.5rem 0px 1rem; } +} + +.ModalContact-label img { border-radius: 50%; margin-right: 0.25rem; positi= +on: relative; top: 2px; } + +.SingleUserNotification { padding: 0.5rem 0px; } + +.SingleUserNotification.notification { background-color: rgba(7, 145, 230, = +0.2); color: rgb(5, 96, 153); } + +.SingleUserNotification.notification .SingleUserNotification-close { color:= + rgb(5, 96, 153); } + +.SingleUserNotification.success { background-color: rgba(152, 202, 63, 0.2)= +; color: rgb(101, 135, 42); } + +.SingleUserNotification.success .SingleUserNotification-left .icon-success:= +:before { content: "=EE=80=87"; } + +.SingleUserNotification.success .SingleUserNotification-close { color: rgb(= +101, 135, 42); } + +.SingleUserNotification.alert { background-color: rgba(254, 204, 1, 0.2); c= +olor: rgb(199, 133, 0); } + +.SingleUserNotification.alert .SingleUserNotification-close { color: rgb(19= +9, 133, 0); } + +.SingleUserNotification.error { background-color: rgba(255, 72, 66, 0.2); c= +olor: rgb(168, 48, 44); } + +.SingleUserNotification.error .SingleUserNotification-left .icon-error::bef= +ore { content: "=EE=99=8A"; } + +.SingleUserNotification.error .SingleUserNotification-close { color: rgb(16= +8, 48, 44); } + +.SingleUserNotification-content { -webkit-box-pack: justify; justify-conten= +t: space-between; } + +.SingleUserNotification-content, .SingleUserNotification-left { -webkit-box= +-align: center; align-items: center; display: flex; } + +.SingleUserNotification-text { font-size: 14px; line-height: 1.43; margin-l= +eft: 1rem; } + +.SingleUserNotification-close { text-decoration: none; } + +.Benefit { display: flex; font-size: 0.875rem; } + +.Benefit-icon { line-height: 1.4; margin-right: 0.75rem; margin-top: 2px; } + +.Benefit-text { color: rgb(190, 205, 227); font-size: 0.875rem; font-weight= +: 400; letter-spacing: 0.25px; line-height: 1.4; margin-right: 0.25rem; } + +.Benefit-tooltip { cursor: pointer; display: inline-block; height: 0.875rem= +; position: relative; width: 0.875rem; } + +@media only screen and (min-width: 64rem) { + .Benefit-tooltip { height: 1rem; width: 1rem; } +} + +.Benefit-tooltipIcon { color: rgb(99, 122, 157); margin-top: 3px; } + +.Benefit-tooltip .BasicTooltip--active { font-size: 0.75rem; text-align: le= +ft; width: 180px; } + +@media only screen and (min-width: 64rem) { + .Benefit-tooltip .BasicTooltip--active { font-size: 0.875rem; width: 220p= +x; } +} + +.Benefit--dark { color: rgb(190, 205, 227); } + +.Benefit--dark .Benefit-text { color: rgb(239, 243, 248); } + +.Benefit--dark.Benefit--on .Benefit-icon { color: rgb(152, 202, 63); } + +.Benefit--dark.Benefit--off .Benefit-icon, .Benefit--dark.Benefit--off .Ben= +efit-text { color: rgb(141, 162, 192); } + +.Benefit--dark.Benefit--previous { color: rgb(255, 255, 255); font-size: 1r= +em; font-weight: 600; } + +.Benefit--dark.Benefit--previous .Benefit-icon { color: rgb(255, 255, 255);= + margin-right: 0.5rem; } + +.Benefit--light, .Benefit--light .Benefit-text { color: rgb(18, 31, 61); } + +.Benefit--light.Benefit--on .Benefit-icon { color: rgb(119, 166, 30); } + +.Benefit--light.Benefit--off .Benefit-icon, .Benefit--light.Benefit--off .B= +enefit-text { color: rgb(92, 107, 133); } + +.Benefit--light.Benefit--previous .Benefit-icon { color: rgb(119, 166, 30);= + } + +.Benefit--darker .Benefit-icon { color: rgb(44, 241, 206); } + +.Benefits { -webkit-box-orient: vertical; display: flex; flex-direction: co= +lumn; list-style-type: none; margin: 1.5rem 0px; padding: 0px; row-gap: 0.5= +rem; text-align: left; } + +.Benefits-link { font-size: 0.875rem; } + +.Benefits-linkIcon { margin-right: 0.25rem; } + +.Benefits-linkAction { background: none; border: 0px; cursor: pointer; } + +.Benefits-link--dark { color: rgb(190, 205, 227); } + +.Benefits-link--dark .Benefits-linkAction { color: rgb(116, 202, 255); } + +.Benefits-link--dark .Benefits-linkAction:hover { color: rgb(51, 177, 255);= + } + +.Benefits-link--light { color: rgb(92, 107, 133); } + +.Benefits-link--light .Benefits-linkAction { color: rgb(7, 145, 230); } + +.Benefits-link--light .Benefits-linkAction:hover { color: rgb(51, 177, 255)= +; } + +.Benefits-cta { color: rgb(239, 243, 248); font-size: 0.875rem; margin: 1re= +m 0px; } + +.Benefits-cta a { color: rgb(239, 243, 248); text-decoration: underline; } + +.Benefits-toggle { -webkit-box-align: center; -webkit-box-pack: justify; al= +ign-items: center; background: none; border: 0px; color: rgb(239, 243, 248)= +; display: flex; font-size: 0.875rem; justify-content: space-between; paddi= +ng: 0px; width: 100%; } + +.Benefits-toggleIcon { color: rgb(190, 205, 227); } + +.Award { padding: 0.5em; position: relative; } + +@media only screen and (min-width: 48rem) { + .Award { padding: 0px; } +} + +.Award-link { inset: 0px; color: rgb(255, 255, 255); text-decoration: none;= + } + +.Award img { height: 29px; } + +.Certifier { padding: 0.5rem; } + +.Certifier img { height: 29px; } + +.SloganSection { display: block; grid-column: 1 / 3; grid-row-start: 1; hei= +ght: fit-content; max-width: 368px; padding-top: 1rem; text-align: center; = +} + +@media only screen and (min-width: 48rem) { + .SloganSection { display: block; margin-bottom: 0px; text-align: left; } +} + +.SloganSection p { color: rgb(255, 255, 255); margin: 0px 0.5em 1em; text-a= +lign: center; } + +@media only screen and (min-width: 48rem) { + .SloganSection p { margin: 0px; text-align: left; } +} + +.SloganSection img { margin: 0px 0px 5px; width: 130px; } + +.LangButton { -webkit-box-pack: justify; -webkit-box-align: center; align-i= +tems: center; border: 1px solid rgb(219, 219, 226); border-radius: 3px; col= +or: rgb(221, 221, 220); font-size: 13px; height: 30px; justify-content: spa= +ce-between; padding: 0px 8px; text-decoration: none; text-transform: upperc= +ase; width: 46px; } + +.LangButton, .SubscribeSectionV2 { display: flex; } + +.SubscribeSectionV2 { align-content: center; color: rgb(255, 255, 255); fle= +x-wrap: wrap; } + +@media only screen and (min-width: 48rem) { + .SubscribeSectionV2 { -webkit-box-align: center; align-items: center; fle= +x-wrap: nowrap; } +} + +.SubscribeSectionV2-form { -webkit-box-align: center; align-items: center; = +display: flex; font-size: 14px; margin: 0px 1em; width: 100%; } + +@media only screen and (min-width: 48rem) { + .SubscribeSectionV2-form { margin-top: 20px; } +} + +.SubscribeSectionV2-form .FormInput { width: 100%; } + +.SubscribeSectionV2-form .FormInput input { background: transparent; border= +: 1px solid rgb(10, 142, 205); border-radius: 5px 0px 0px 5px; color: rgb(2= +55, 255, 255); font-size: 14px; padding: 15px 10px; } + +.SubscribeSectionV2-form .FormInput input::placeholder { color: rgb(255, 25= +5, 255); } + +.SubscribeSectionV2-form .FormInput input:focus { border-width: 1px; border= +-style: solid; border-color: rgb(255, 255, 255) rgb(10, 142, 205) rgb(255, = +255, 255) rgb(255, 255, 255); border-image: initial; } + +.SubscribeSectionV2-form .FormInput input.filled:not(.error) { border: 1px = +solid rgb(10, 142, 205); } + +.SubscribeSectionV2-form .FormInput label { color: rgb(10, 142, 205); } + +.SubscribeSectionV2-form .FormInput-field:focus:not(.error), .SubscribeSect= +ionV2-form .FormInput-field:valid:not(.is-select):not(.error), .SubscribeSe= +ctionV2-form .FormInput-field:valid:not(.isUrl):not(.error) { color: rgb(25= +5, 255, 255); padding: 20px 0px 10px 10px; } + +.SubscribeSectionV2-form .FormInput-field:focus ~ .FormInput-label, .Subscr= +ibeSectionV2-form .FormInput-field:valid:not(.is-select) ~ .FormInput-label= +, .SubscribeSectionV2-form .FormInput-field:valid:not(.isUrl) ~ .FormInput-= +label { color: rgb(255, 255, 255); } + +.SubscribeSectionV2-form .FormInput-field.filled:not(.error) { padding: 20p= +x 0px 10px 10px; } + +.SubscribeSectionV2-form .FormInput-field.filled:not(.error) ~ .FormInput-l= +abel { color: rgb(10, 142, 205); } + +@media only screen and (min-width: 48rem) { + .SubscribeSectionV2-form { -webkit-box-flex: 1; flex: 1 1 0%; } +} + +.SubscribeSectionV2-form .btn { background: rgb(10, 142, 205); border-radiu= +s: 0px 3px 3px 0px; height: 50px; margin-bottom: 1em; } + +.SubscribeSectionV2-form .btn:focus { background: rgb(10, 142, 205); } + +@media only screen and (min-width: 48rem) { + .SubscribeSectionV2-form .btn { margin-bottom: 0px; } +} + +.SubscribeSectionV2-form .btn span { font-size: 14px; } + +@media only screen and (min-width: 64rem) { + .SubscribeSectionV2-form .btn span { padding: 0px 4em; } +} + +.SubscribeSectionV2-form .btn--medium { flex-shrink: 0; height: 48px; margi= +n-bottom: 28px; padding: 10px 1rem; } + +.SubscribeSectionV2-form .btn--medium:hover { background-color: rgb(10, 142= +, 205); } + +.SubscribeSectionV2-copy { font-size: 14px; line-height: 25px; padding: 1em= +; text-align: center; width: 100%; } + +@media only screen and (min-width: 48rem) { + .SubscribeSectionV2-copy { padding: 0px 2em 0px 0px; text-align: left; wi= +dth: auto; } +} + +.SubscribeSectionV2-subscribed { -webkit-box-align: center; align-items: ce= +nter; display: flex; margin: 0px auto; min-height: 75px; } + +@media only screen and (min-width: 48rem) { + .SubscribeSectionV2-subscribed { min-height: 95px; } +} + +.SocialLayout { -webkit-box-align: center; place-content: flex-end space-ar= +ound; align-items: center; color: rgb(255, 255, 255); display: flex; flex-w= +rap: wrap; grid-column: 1 / 3; grid-row-start: 2; max-width: 170px; } + +@media only screen and (min-width: 48rem) { + .SocialLayout { padding-bottom: 1rem; } +} + +.SocialLayout .SocialItem span { font-size: 20px; } + +@media only screen and (min-width: 48rem) { + .SocialLayout { -webkit-box-pack: justify; justify-content: space-between= +; } +} + +.SocialLayout span { font-size: 14px; padding: 1em 0px; width: 100%; } + +.ModalBase { background-color: rgb(18, 31, 61); border-radius: 16px 16px 0p= +x 0px; position: relative; } + +@media only screen and (min-width: 48rem) { + .ModalBase { border-radius: 16px; } +} + +.ModalBase-close { color: rgb(141, 162, 192); position: absolute; right: 0.= +5rem; top: 0.5rem; background-color: transparent !important; } + +.ModalHead { background-color: rgb(36, 56, 91); border-radius: 1rem 1rem 0p= +x 0px; } + +.ModalBody, .ModalHead { padding: 2rem 1.5rem; } + +.menuStages { gap: 0.75rem; background-color: rgb(83, 59, 155); display: gr= +id; grid-template-columns: repeat(3, 1fr); margin-bottom: 1.5rem; position:= + sticky; top: 0px; z-index: 2; } + +.menuStages-stage { border: 1px solid rgb(19, 22, 28); cursor: pointer; pad= +ding: 0.5rem; position: relative; text-align: center; width: 100%; } + +.menuStages-stage.disabled { color: rgb(226, 219, 250); } + +.menuStages-stage.disabled, .menuStages-stage.disabled::after, .menuStages-= +stage.disabled::before { background-color: rgb(110, 79, 171) !important; } + +.menuStages-stage.active { color: rgb(18, 31, 61); } + +.menuStages-stage.active, .menuStages-stage.active::after, .menuStages-stag= +e.active::before { background-color: rgb(255, 255, 255) !important; } + +.menuStages-stage::before { border-bottom: 1px solid rgb(19, 22, 28); borde= +r-left: 1px solid rgb(19, 22, 28); bottom: -7px; content: ""; height: 5px; = +left: 0px; position: absolute; transform: rotate(0deg) skew(30deg); width: = +100.5%; } + +.menuStages-stage::after { border-right: 1px solid rgb(19, 22, 28); border-= +top: 1px solid rgb(19, 22, 28); content: ""; height: 94%; position: absolut= +e; right: -6px; top: 3.5px; transform: rotate(30deg) skew(30deg); width: 4.= +5px; } + +.menuStages-title { font-size: 1.1rem; font-weight: 500; grid-column: 1 / 4= +; letter-spacing: 0.2px; line-height: 24px; margin-bottom: 0.5rem; color: r= +gb(255, 255, 255) !important; } + +.menuStages-location { -webkit-box-align: center; align-items: center; bord= +er-bottom: 1px solid rgb(110, 79, 171); display: flex; grid-column: 1 / 4; = +padding-bottom: 0.5rem; } + +.menuStages-location--flag { border: 1px solid rgb(19, 22, 28); border-radi= +us: 50%; height: 1.1rem; margin-left: 0.5rem; object-fit: cover; width: 1.1= +rem; } + +.menuStages__Underline { background-color: rgb(19, 22, 28); grid-column: 1 = +/ 4; height: 1px; margin-top: -0.75rem; } + +.Stage-Indicator { border-top: 1px solid rgb(19, 22, 28); border-right: 1px= + solid rgb(19, 22, 28); border-left: 1px solid rgb(19, 22, 28); border-imag= +e: initial; border-bottom: none; height: 0.375rem; margin-top: 1rem; visibi= +lity: hidden; width: calc(100% + 4.5px); } + +.Stage-Indicator--selected { background-color: rgb(255, 255, 255) !importan= +t; visibility: visible; } + +.listStages { width: 100%; } + +.listStages-stage { margin-bottom: 0.75rem; } + +@media only screen and (min-width: 64rem) { + .listStages-stage { margin-bottom: 3rem; } +} + +.listStages-stage-info { -webkit-box-align: center; align-items: center; di= +splay: flex; gap: 0.5rem; padding: 0px 1rem; } + +@media only screen and (min-width: 64rem) { + .listStages-stage-info { -webkit-box-align: start; align-items: flex-star= +t; padding: 0px; } +} + +.listStages-stage-info-text { padding: 0px; } + +.listStages-stage-info-text h3 { font-size: 1rem; font-weight: 700; } + +@media only screen and (min-width: 64rem) { + .listStages-stage-info-text h3 { font-size: 1.5rem; } +} + +.listStages-stage-info-text p { display: none; } + +@media only screen and (min-width: 64rem) { + .listStages-stage-info-text p { display: block; font-size: 0.87rem; margi= +n-top: 0.5rem; } +} + +.listStages-stage-info-text h3 { color: rgb(255, 255, 255); } + +.listStages-stage-info-logo { width: 2.5rem; } + +.listStages-stage-info-logo img { width: 100%; } + +.listStages-stage-talks { margin-top: 0.75rem; } + +.listStages-stage-talks--grouped { border-bottom: 1px solid rgb(64, 88, 124= +); display: flex; } + +.listStages-stage-talks--grouped-date { padding: 2rem 0.25rem 0.5rem 0.75re= +m; text-align: center; } + +@media only screen and (min-width: 64rem) { + .listStages-stage-talks--grouped-date { padding: 2.5rem 1rem 1rem 2.5rem;= + } +} + +.listStages-stage-talks--grouped-date span { color: rgb(141, 162, 192); fon= +t-size: 0.8rem; text-transform: uppercase; } + +@media only screen and (min-width: 64rem) { + .listStages-stage-talks--grouped-date span { font-size: 0.9rem; } +} + +.listStages-stage-talks--grouped-date h4 { color: rgb(255, 255, 255); font-= +size: 1.5rem; font-weight: 700; } + +@media only screen and (min-width: 64rem) { + .listStages-stage-talks--grouped-date h4 { font-size: 2.25rem; } +} + +.listStages-stage-talks--grouped-info, .listStages-stage-talks--grouped-inf= +o article { -webkit-box-flex: 1; flex: 1 1 0%; } + +.listStages-stage-talks--grouped-info article { border-bottom: none; margin= +: 1rem 0px; } + +@media only screen and (min-width: 64rem) { + .listStages-stage-talks { margin-top: 1rem; } +} + +.InputText-module_InputText__wbUBI { position: relative; width: 100%; } + +.InputText-module_InputText__wbUBI input { background-color: rgba(0, 0, 0, = +0.3); border: 1px solid rgb(64, 70, 80); border-radius: 8px; box-sizing: bo= +rder-box; color: rgb(255, 255, 255); font-size: 16px; height: 56px; padding= +: 6px 12px 6px 16px; width: 100%; } + +.InputText-module_InputText__wbUBI input:hover { border: 1px solid rgb(5, 1= +64, 96); } + +.InputText-module_InputText__wbUBI input:focus { border: 2px solid rgb(10, = +233, 138); outline: none; padding: 24px 12px 4px 16px; } + +.InputText-module_InputText__wbUBI input:not([value=3D""]) { outline: none;= + padding: 24px 12px 4px 16px; } + +.InputText-module_InputText__wbUBI input:focus + label, .InputText-module_I= +nputText__wbUBI input:not([value=3D""]) + label { color: rgb(135, 144, 157)= +; font-size: 0.875rem; left: 8px; letter-spacing: 0.3px; top: 17px; transfo= +rm: translate(10px, -50%); } + +.InputText-module_InputText__wbUBI input:not(:focus):not([value=3D""]):inva= +lid { border: 1px solid rgb(226, 106, 99); } + +.InputText-module_InputText__wbUBI label { align-items: center; bottom: 0px= +; color: rgb(196, 200, 206); display: flex; left: 16px; letter-spacing: 0.2= +px; pointer-events: none; position: absolute; top: 0px; transition: 0.15s e= +ase-out; } + +.InputText-module_InputText__error__KJP-C input { border: 2px solid rgb(226= +, 106, 99); border-radius: 8px; } + +.InputText-module_InputText__error__KJP-C input:hover { border: 1px solid r= +gb(226, 106, 99); } + +.InputText-module_InputText__error__KJP-C input:focus { border: 2px solid r= +gb(226, 106, 99); } + +.InputText-module_InputText__disabled__cyaGf input { border: 2px solid rgb(= +45, 50, 58); border-radius: 8px; color: rgb(85, 92, 104); } + +.InputText-module_InputText__disabled__cyaGf input:hover { border: 1px soli= +d rgb(45, 50, 58); } + +.InputText-module_InputText__disabled__cyaGf input:focus { border: 2px soli= +d rgb(45, 50, 58); } + +.InputText-module_InputText__disabled__cyaGf label { color: rgb(45, 50, 58)= + !important; } + +.InputText-module_InputText__disabled__cyaGf input::placeholder { color: rg= +b(85, 92, 104) !important; } + +.InputText-module_InputText__passwordToggle__M4HY5 { background: transparen= +t; border: none; color: rgb(196, 200, 206); cursor: pointer; font-size: 12p= +x; font-style: normal; font-weight: 500; letter-spacing: 0.3px; line-height= +: 18px; position: absolute; right: 1rem; text-decoration-line: underline; t= +op: 50%; transform: translateY(-50%); } + +.Button-module_Button__0OJEu { align-items: center; background-color: rgb(2= +55, 255, 255); border: none; border-radius: 0.5rem; color: rgb(19, 22, 28);= + cursor: pointer; display: flex; font-size: 1rem; font-style: normal; font-= +weight: 500; justify-content: center; letter-spacing: 0.0063rem; line-heigh= +t: 1.5rem; padding: 0.75rem 1rem; } + +.Button-module_Button__0OJEu:hover { background: rgb(85, 92, 104); } + +.Button-module_Button--secondary__dHr-s { background: rgba(19, 22, 28, 0.8)= +; color: rgb(255, 255, 255); } + +.Button-module_Button--secondary__dHr-s:hover { background: rgb(19, 22, 28)= +; color: rgb(255, 255, 255); } + +.Button-module_Button--neutral__bllzg { background: transparent; border-rad= +ius: 8px; border-style: solid; border-color: rgb(85, 92, 104); border-image= +: initial; border-width: 1px 1px 2px; color: rgb(196, 200, 206); font-size:= + 0.875rem; font-style: normal; font-weight: 500; letter-spacing: 0.3px; lin= +e-height: 1.25rem; } + +.Button-module_Button--neutral__bllzg:hover, .Button-module_Button--transpa= +rent__imA1A { background: transparent; color: rgb(255, 255, 255); } + +.Button-module_Button__0OJEu > div { margin: 0px !important; } + +.Button-module_Button__0OJEu:disabled { background-color: rgb(64, 70, 80); = +cursor: not-allowed; } + +.Button-module_Button__0OJEu.Button-module_full-width__qDri6 { width: 100%;= + } + +.Header-module_Header__wopx3 { display: block; text-align: center; width: 1= +00%; } + +.Header-module_Header__wopx3 svg { height: 0.5rem; transform: scale(6); } + +.Header-module_Header__wopx3 svg g { fill: rgb(10, 233, 138); } + +.Header-module_Header__logo__rFL47 { padding: 2rem 0px; } + +.Header-module_Header__close__upHdN { display: flex; justify-content: flex-= +end; width: 100%; } + +.Header-module_Header__close__upHdN button { padding: 0.75rem 0.5rem; } + +.Header-module_Header__close__upHdN button svg { transform: scale(2.4); } + +.NotificationModal-module_NotificationModal__overlay__6C7H2 { align-items: = +center; background-color: rgba(0, 0, 0, 0.6); border: none; inset: 0px; dis= +play: flex; justify-content: center; padding: 1rem; position: fixed; z-inde= +x: 10; } + +.NotificationModal-module_NotificationModal__content__qEEDn, .NotificationM= +odal-module_NotificationModal__error-content__IyBMa, .NotificationModal-mod= +ule_NotificationModal__success-content__pS-Gk { align-items: center; backgr= +ound-color: rgb(30, 34, 41); border-radius: 1rem; display: flex; flex-direc= +tion: column; max-width: 22rem; width: 100%; } + +.NotificationModal-module_NotificationModal__success-content__pS-Gk { max-w= +idth: 28rem; padding: 1.5rem; } + +.NotificationModal-module_NotificationModal__success-confetti__X9WQA { disp= +lay: flex; justify-content: center; margin: 0px; } + +.NotificationModal-module_NotificationModal__success-confetti__X9WQA img { = +max-width: 20rem; width: 100%; } + +.NotificationModal-module_NotificationModal__icon-container__0k5-9 { align-= +items: center; display: flex; height: 4rem; justify-content: center; margin= +-top: 1.5rem; width: 4rem; } + +.NotificationModal-module_NotificationModal__icon-container--error__aNjVj {= + background-color: rgba(251, 91, 91, 0.2); border-radius: 50%; } + +.NotificationModal-module_NotificationModal__icon-container__0k5-9 span { d= +isplay: flex; } + +.NotificationModal-module_NotificationModal__icon-container__0k5-9 span svg= + { height: 2.5rem; width: 2.5rem; } + +.NotificationModal-module_NotificationModal__icon-container__0k5-9 span cir= +cle, .NotificationModal-module_NotificationModal__icon-container__0k5-9 spa= +n path { fill: rgb(251, 91, 91); font-size: 4rem; } + +.NotificationModal-module_NotificationModal__texts-container__COmBo { paddi= +ng: 1.5rem 1.5rem 2rem; text-align: center; } + +.NotificationModal-module_NotificationModal__texts-container__COmBo h2, .No= +tificationModal-module_NotificationModal__texts-container__COmBo h3 { color= +: rgb(255, 255, 255); font-size: 1.125rem; font-weight: 500; margin: 0px; } + +.NotificationModal-module_NotificationModal__texts-container__COmBo h3 { ma= +rgin-top: 0.25rem; } + +.NotificationModal-module_NotificationModal__texts-container__COmBo p { col= +or: rgb(196, 200, 206); font-size: 0.875rem; font-weight: 400; margin-botto= +m: 0px; margin-top: 0.75rem; } + +.NotificationModal-module_NotificationModal__logo__gqWFQ { display: flex; j= +ustify-content: center; margin: 0px 0px 1rem; } + +.NotificationModal-module_NotificationModal__logo__gqWFQ img { width: 10rem= +; } + +.NotificationModal-module_NotificationModal__neutral-button-container__8vAz= +x { display: flex; justify-content: center; padding: 1rem 0px; width: 100%;= + } + +.NotificationModal-module_NotificationModal__neutral-button-container__8vAz= +x button { background-color: rgb(64, 70, 80); border: none; color: rgb(255,= + 255, 255); width: 100%; } + +.NotificationModal-module_NotificationModal__neutral-button-container__8vAz= +x button:hover { background-color: rgb(45, 50, 58); } + +.NotificationModal-module_NotificationModal__secondary-button-container__Hs= +K69 { border-top: 0.063rem solid rgb(64, 70, 80); display: flex; justify-co= +ntent: center; padding: 1rem 0px; width: 100%; } + +.NotificationModal-module_NotificationModal__secondary-button-container__Hs= +K69 button { background-color: transparent; color: rgb(255, 255, 255); } + +.NotificationModal-module_NotificationModal__primary-button-container__uDsx= +1 { display: flex; justify-content: center; padding: 0px 0px 1rem; width: 1= +00%; } + +.NotificationModal-module_NotificationModal__primary-button-container__uDsx= +1 button { width: 100%; } + +.EmailStep-module_EmailStep__Fg7wW { align-items: center; display: flex; fl= +ex-direction: column; width: 100%; } + +.EmailStep-module_EmailStep__label__code__CPpZX b, .EmailStep-module_EmailS= +tep__label__g79UJ { font-size: 1.125rem; font-style: normal; font-weight: 5= +00; letter-spacing: 0.01rem; line-height: 1.5rem; margin: 0px 0px 1.5rem; t= +ext-align: center; } + +.EmailStep-module_EmailStep__label__code__CPpZX { display: flex; flex-direc= +tion: column; justify-content: center; margin: 0px 0px 1.5rem; } + +.EmailStep-module_EmailStep__label__code__CPpZX b { margin: 0px 0px 0.5rem;= + } + +.EmailStep-module_EmailStep__label__code__CPpZX span { color: rgb(135, 144,= + 157); font-size: 0.875rem; font-weight: 400; text-align: center; } + +.EmailStep-module_EmailStep__buttonWrapper__vC0HX { margin-top: 20px; width= +: 100%; } + +.EmailStep-module_EmailStep__buttonWrapper__vC0HX > button { column-gap: 1r= +em; width: 100%; } + +.EmailStep-module_EmailStep__error__nxYQY { align-items: center; color: rgb= +(251, 91, 91); display: flex; font-size: 0.75rem; font-style: normal; font-= +weight: 400; letter-spacing: 0.25px; line-height: 1rem; margin-top: 0.25rem= +; text-align: left; width: 100%; } + +.EmailStep-module_EmailStep__error__nxYQY svg { flex-shrink: 0; margin-righ= +t: 0.375rem; } + +.EmailStep-module_EmailStep__error__nxYQY circle, .EmailStep-module_EmailSt= +ep__error__nxYQY path { fill: rgb(251, 91, 91); } + +.EmailStep-module_EmailStep__socialButton__TRCPC { align-items: center; bac= +kground: transparent; border: 1px solid rgb(64, 70, 80); border-radius: 0.5= +rem; color: rgb(255, 255, 255); cursor: pointer; display: flex; font-size: = +14px; font-style: normal; font-weight: 500; justify-content: center; line-h= +eight: 20px; padding: 0.5rem 1rem; width: 100%; } + +.EmailStep-module_EmailStep__disclaimer__9VeiU { color: rgb(135, 144, 157);= + font-size: 0.8125rem; font-style: normal; font-weight: 400; line-height: 1= +.25rem; margin-top: 2.5rem; text-align: center; } + +.EmailStep-module_EmailStep__disclaimer__9VeiU > span { color: rgb(255, 255= +, 255); } + +.EmailStep-module_EmailStep__divider__ypOhj { color: rgb(196, 200, 206); di= +splay: block; font-size: 0.875rem; font-style: normal; font-weight: 400; le= +tter-spacing: 0.3px; line-height: 1.25rem; margin: 1.5rem 0px; position: re= +lative; text-align: center; width: 100%; } + +.EmailStep-module_EmailStep__divider__ypOhj::before { background-color: rgb= +(45, 50, 58); bottom: 0px; content: ""; height: 2px; left: 0px; position: a= +bsolute; top: 50%; width: 43%; } + +.EmailStep-module_EmailStep__divider__ypOhj::after { background-color: rgb(= +45, 50, 58); bottom: 0px; content: ""; height: 2px; position: absolute; rig= +ht: 0px; top: 50%; width: 43%; } + +.NameStep-module_NameStep__FQFDy { align-items: center; display: flex; flex= +-direction: column; width: 100%; } + +.NameStep-module_NameStep__header__e13fX { align-items: center; display: gr= +id; grid-template-columns: 1.5rem auto 1.5rem; width: 100%; } + +.NameStep-module_NameStep__backButton__qmYwb button { background: none; pad= +ding: 0px; transform: scale(1.5); } + +.NameStep-module_NameStep__label__dkYfl { font-size: 1.125rem; font-style: = +normal; font-weight: 500; letter-spacing: -0.0081rem; line-height: 1.5rem; = +margin-bottom: 0.5rem; text-align: center; } + +.NameStep-module_NameStep__description__-bToN { color: rgb(196, 200, 206); = +font-size: 0.875rem; font-style: normal; font-weight: 400; letter-spacing: = +0.0187rem; line-height: 1.25rem; margin: 0px 0px 1.5rem; text-align: center= +; } + +.NameStep-module_NameStep__error__okmvp { align-items: center; color: rgb(2= +51, 91, 91); display: flex; font-size: 0.75rem; font-style: normal; font-we= +ight: 400; letter-spacing: 0.25px; line-height: 1rem; margin-top: 0.25rem; = +text-align: left; width: 100%; } + +.NameStep-module_NameStep__error__okmvp svg { margin-right: 0.375rem; } + +.NameStep-module_NameStep__error__okmvp circle, .NameStep-module_NameStep__= +error__okmvp path { fill: rgb(251, 91, 91); } + +.NameStep-module_NameStep__buttonWrapper__XnWUx { margin-top: 20px; width: = +100%; } + +.NameStep-module_NameStep__buttonWrapper__XnWUx > button { align-items: cen= +ter; column-gap: 1rem; width: 100%; } + +.PasswordStep-module_PasswordStep__Q3IUZ { align-items: center; display: fl= +ex; flex-direction: column; width: 100%; } + +.PasswordStep-module_PasswordStep__header__QenrE { align-items: center; dis= +play: grid; grid-template-columns: 1.5rem auto 1.5rem; width: 100%; } + +.PasswordStep-module_PasswordStep__backButton__A1NvN button { background: n= +one; padding: 0px; transform: scale(1.5); } + +.PasswordStep-module_PasswordStep__passwordsContainer__KDs5K { display: fle= +x; flex-direction: column; row-gap: 0.75rem; width: 100%; } + +.PasswordStep-module_PasswordStep__label__OXtof { font-size: 1.125rem; font= +-style: normal; font-weight: 500; letter-spacing: -0.0081rem; line-height: = +1.5rem; margin-bottom: 0px; margin-top: 1.5rem; text-align: center; } + +.PasswordStep-module_PasswordStep__description__8YfBf { color: rgb(196, 200= +, 206); font-size: 0.875rem; font-style: normal; font-weight: 400; letter-s= +pacing: 0.0187rem; line-height: 1.25rem; margin-bottom: 1.25rem; margin-top= +: 0.5rem; text-align: center; } + +.PasswordStep-module_PasswordStep__buttonWrapper__LVV38 { margin-top: 20px;= + width: 100%; } + +.PasswordStep-module_PasswordStep__buttonWrapper__LVV38 > button { align-it= +ems: center; column-gap: 1rem; width: 100%; } + +.PasswordStep-module_PasswordStep__errorsWrapper__lQb7O { display: flex; fl= +ex-direction: column; margin-top: 0.75rem; row-gap: 0.75rem; width: 100%; } + +.PasswordStep-module_PasswordStep__errorMessage__8Nbnw { align-items: cente= +r; column-gap: 0.5rem; display: flex; } + +.PasswordStep-module_PasswordStep__errorMessage__8Nbnw p { color: rgb(251, = +91, 91); font-size: 12px; font-style: normal; font-weight: 400; letter-spac= +ing: 0.25px; line-height: 16px; margin: 0px; } + +.PasswordStep-module_PasswordStep__errorMessage__8Nbnw > svg { flex-shrink:= + 0; } + +.PasswordStep-module_PasswordStep__errorMessage__8Nbnw > svg path { fill: r= +gb(251, 91, 91); } + +.PasswordStep-module_PasswordStep__errorMessage__8Nbnw > svg circle { strok= +e: rgb(251, 91, 91); } + +.PasswordStep-module_PasswordStep__disclaimer__5hbSS { color: rgb(135, 144,= + 157); font-size: 0.8125rem; font-style: normal; font-weight: 400; line-hei= +ght: 1.25rem; margin: 2.5rem 0px 0px; text-align: center; } + +.PasswordStep-module_PasswordStep__disclaimer__5hbSS > a { color: rgb(196, = +200, 206); } + +.CompletedStep-module_CompletedStep__Fn7Rf { display: grid; gap: 1.5rem; gr= +id-template-rows: auto 1fr auto; } + +.CompletedStep-module_CompletedStep__Fn7Rf h1 { display: flex; flex-directi= +on: column; font-size: 1.125rem; font-style: normal; font-weight: 500; lett= +er-spacing: -0.0081rem; line-height: 1.5rem; margin: 0px; text-align: cente= +r; } + +.CompletedStep-module_CompletedStep__Fn7Rf p { color: rgb(196, 200, 206); f= +ont-size: 0.875rem; font-style: normal; font-weight: 400; letter-spacing: 0= +.0187rem; line-height: 1.25rem; margin: 0.75rem 0px 0px; text-align: center= +; } + +.CompletedStep-module_CompletedStep__animationWrapper__ffGpi { display: fle= +x; flex-shrink: 0; justify-content: center; } + +.CompletedStep-module_CompletedStep__doneCircle__uw9K6 { align-items: cente= +r; background-color: rgba(10, 233, 138, 0.2); border-radius: 50%; display: = +flex; height: 72px; justify-content: center; width: 72px; } + +.CompletedStep-module_CompletedStep__buttonWrapper__bYPIx { width: 100%; } + +.CompletedStep-module_CompletedStep__buttonWrapper__bYPIx > button { align-= +items: center; column-gap: 1rem; width: 100%; } + +.CompletedCodeStep-module_CompletedCodeStep__nWH7W > h1 { font-size: 1.125r= +em; font-style: normal; font-weight: 500; letter-spacing: -0.0081rem; line-= +height: 2rem; text-align: center; } + +.CompletedCodeStep-module_CompletedCodeStep__nWH7W > p { color: rgb(196, 20= +0, 206); font-size: 0.875rem; font-style: normal; font-weight: 400; letter-= +spacing: 0.0187rem; line-height: 1.25rem; text-align: center; } + +.CompletedCodeStep-module_CompletedCodeStep__animationWrapper__MDRfu { disp= +lay: flex; flex-shrink: 0; justify-content: center; } + +.CompletedCodeStep-module_CompletedCodeStep__doneCircle__MPwuK { align-item= +s: center; background-color: rgba(10, 233, 138, 0.2); border-radius: 50%; d= +isplay: flex; height: 72px; justify-content: center; width: 72px; } + +.CompletedCodeStep-module_CompletedCodeStep__image__VYahG { display: flex; = +justify-content: center; margin: 0px; } + +.CompletedCodeStep-module_CompletedCodeStep__buttonWrapper__yHns2 { margin-= +top: 3rem; width: 100%; } + +.CompletedCodeStep-module_CompletedCodeStep__buttonWrapper__yHns2 a { backg= +round-color: rgb(255, 255, 255); border: none; border-radius: 0.5rem; color= +: rgb(19, 22, 28); cursor: pointer; display: block; font-size: 1rem; font-s= +tyle: normal; font-weight: 500; letter-spacing: 0.0063rem; line-height: 1.5= +rem; padding: 0.75rem 1rem; text-align: center; text-decoration: none; widt= +h: calc(100% - 32px); } + +.LoginStep-module_LoginStep__header__Qy2DZ { align-items: center; display: = +grid; grid-template-columns: 1.5rem auto 1.5rem; width: 100%; } + +.LoginStep-module_LoginStep__backButton__XA1Jj button { background: none; p= +adding: 0px; transform: scale(1.5); } + +.LoginStep-module_LoginStep__label__FG84F { display: block; font-size: 1.12= +5rem; font-style: normal; font-weight: 500; letter-spacing: -0.0081rem; lin= +e-height: 1.5rem; margin: 0px 0px 0.5rem; text-align: center; } + +.LoginStep-module_LoginStep__form__TfsbA { align-items: center; display: fl= +ex; flex-direction: column; width: 100%; } + +.LoginStep-module_LoginStep__form__TfsbA p { margin: 0px 0px 1rem; } + +.LoginStep-module_LoginStep__form__TfsbA p b, .LoginStep-module_LoginStep__= +form__TfsbA p span { color: rgb(196, 200, 206); display: flex; flex-directi= +on: column; font-size: 0.875rem; font-style: normal; letter-spacing: 0.16px= +; line-height: 1.25rem; text-align: center; } + +.LoginStep-module_LoginStep__form__TfsbA p b { font-weight: 500; } + +.LoginStep-module_LoginStep__buttonWrapper__LM6IT { margin-top: 20px; width= +: 100%; } + +.LoginStep-module_LoginStep__buttonWrapper__LM6IT > button { align-items: c= +enter; column-gap: 1rem; width: 100%; } + +.LoginStep-module_LoginStep__error__AIO-L { align-items: center; color: rgb= +(251, 91, 91); display: flex; font-size: 0.75rem; font-style: normal; font-= +weight: 400; letter-spacing: 0.25px; line-height: 1rem; margin-top: 0.25rem= +; text-align: left; width: 100%; } + +.LoginStep-module_LoginStep__error__AIO-L svg { flex-shrink: 0; margin-righ= +t: 0.375rem; } + +.LoginStep-module_LoginStep__error__AIO-L circle, .LoginStep-module_LoginSt= +ep__error__AIO-L path { fill: rgb(251, 91, 91); } + +.LoginStep-module_LoginStep__sso__iDp22 { display: block; margin-top: 1.5re= +m; } + +.LoginStep-module_LoginStep__sso__iDp22 > a { background-color: rgb(45, 50,= + 58); border: none; border-radius: 0.5rem; cursor: pointer; display: block;= + font-size: 1rem; font-style: normal; font-weight: 500; letter-spacing: 0.0= +063rem; line-height: 1.5rem; margin-bottom: 0.75rem; padding: 0.75rem 1rem;= + position: relative; text-align: center; text-decoration: none; color: rgb(= +255, 255, 255) !important; } + +.LoginStep-module_LoginStep__sso__iDp22 > a svg { left: 1rem; position: abs= +olute; top: 1rem; } + +.LoginStep-module_LoginStep__sso__divider__fyFs- { color: rgb(196, 200, 206= +); display: block; font-size: 0.875rem; font-style: normal; font-weight: 40= +0; letter-spacing: 0.3px; line-height: 1.25rem; margin: 0px 0px 1rem; posit= +ion: relative; text-align: center; width: 100%; } + +.LoginStep-module_LoginStep__sso__divider__fyFs-::before { background-color= +: rgb(45, 50, 58); bottom: 0px; content: ""; height: 2px; left: 0px; positi= +on: absolute; top: 50%; width: 25%; } + +.LoginStep-module_LoginStep__sso__divider__fyFs-::after { background-color:= + rgb(45, 50, 58); bottom: 0px; content: ""; height: 2px; position: absolute= +; right: 0px; top: 50%; width: 25%; } + +.LoginStep-module_LoginStep__disclaimer__F2MXY { margin: 1rem 0px 1.5rem; t= +ext-align: center; } + +.LoginStep-module_LoginStep__disclaimer__F2MXY button { background: none; b= +order: none; color: rgb(196, 200, 206); cursor: pointer; font-size: 0.875re= +m; font-weight: 400; letter-spacing: -0.008rem; line-height: 1.25rem; text-= +decoration: underline; } + +.LoginStep-module_LoginStep__disclaimer__F2MXY button:hover { color: rgb(22= +2, 225, 228); } + +.MethodStep-module_MethodStep__mjfEv { align-items: center; display: flex; = +flex-direction: column; width: 100%; } + +.MethodStep-module_MethodStep__label__bOlGx { font-size: 1.125rem; font-sty= +le: normal; font-weight: 500; letter-spacing: -0.0081rem; line-height: 1.5r= +em; margin: 0px 0px 1.5rem; text-align: center; } + +.MethodStep-module_MethodStep__buttonWrapper__2qUEL { width: 100%; } + +.MethodStep-module_MethodStep__buttonWrapper__2qUEL > button { background-c= +olor: rgb(45, 50, 58); color: rgb(255, 255, 255); position: relative; width= +: 100%; } + +.MethodStep-module_MethodStep__buttonWrapper__2qUEL > button svg { left: 1r= +em; position: absolute; top: 1rem; transform: scale(1.2); } + +.MethodStep-module_MethodStep__buttonWrapper__2qUEL a { background-color: r= +gb(45, 50, 58); border: none; border-radius: 0.5rem; cursor: pointer; displ= +ay: block; font-size: 1rem; font-style: normal; font-weight: 500; letter-sp= +acing: 0.0063rem; line-height: 1.5rem; margin-bottom: 0.75rem; padding: 0.7= +5rem 1rem; position: relative; text-align: center; text-decoration: none; c= +olor: rgb(255, 255, 255) !important; } + +.MethodStep-module_MethodStep__buttonWrapper__2qUEL a svg { left: 1rem; pos= +ition: absolute; top: 1rem; } + +.MethodStep-module_MethodStep__divider__jkkau { color: rgb(196, 200, 206); = +display: block; font-size: 0.875rem; font-style: normal; font-weight: 400; = +letter-spacing: 0.3px; line-height: 1.25rem; margin: 0.75rem 0px; position:= + relative; text-align: center; width: 100%; } + +.MethodStep-module_MethodStep__divider__jkkau::before { background-color: r= +gb(45, 50, 58); bottom: 0px; content: ""; height: 2px; left: 0px; position:= + absolute; top: 50%; width: 32%; } + +.MethodStep-module_MethodStep__divider__jkkau::after { background-color: rg= +b(45, 50, 58); bottom: 0px; content: ""; height: 2px; position: absolute; r= +ight: 0px; top: 50%; width: 32%; } + +.MethodStep-module_MethodStep__disclaimer__tuklV { color: rgb(135, 144, 157= +); font-size: 0.8125rem; font-style: normal; font-weight: 400; line-height:= + 1.25rem; margin-top: 1rem; text-align: center; } + +.MethodStep-module_MethodStep__disclaimer__tuklV > a { color: rgb(196, 200,= + 206); } + +.CreateSSOStep-module_CreateSSOStep__0xn5N { align-items: center; display: = +flex; flex-direction: column; width: 100%; } + +.CreateSSOStep-module_CreateSSOStep__label__X4H3k { font-size: 1.125rem; fo= +nt-style: normal; font-weight: 500; letter-spacing: -0.0081rem; line-height= +: 1.5rem; margin: 0px 0px 1.5rem; text-align: center; } + +.CreateSSOStep-module_CreateSSOStep__buttonWrapper__n3PTN { width: 100%; } + +.CreateSSOStep-module_CreateSSOStep__buttonWrapper__n3PTN button { backgrou= +nd-color: rgb(45, 50, 58); color: rgb(255, 255, 255); margin-bottom: 1.5rem= +; position: relative; } + +.CreateSSOStep-module_CreateSSOStep__buttonWrapper__n3PTN button svg { left= +: 1rem; position: absolute; top: 1rem; transform: scale(1.2); } + +.CreateSSOStep-module_CreateSSOStep__buttonWrapper__n3PTN button:hover { ba= +ckground-color: rgb(45, 50, 58); } + +.CreateSSOStep-module_CreateSSOStep__divider__YE3l4 { color: rgb(196, 200, = +206); display: block; font-size: 0.875rem; font-style: normal; font-weight:= + 400; letter-spacing: 0.3px; line-height: 1.25rem; margin: 0px 0px 1.5rem; = +position: relative; text-align: center; width: 100%; } + +.CreateSSOStep-module_CreateSSOStep__divider__YE3l4::before { background-co= +lor: rgb(45, 50, 58); bottom: 0px; content: ""; height: 2px; left: 0px; pos= +ition: absolute; top: 50%; width: 43%; } + +.CreateSSOStep-module_CreateSSOStep__divider__YE3l4::after { background-col= +or: rgb(45, 50, 58); bottom: 0px; content: ""; height: 2px; position: absol= +ute; right: 0px; top: 50%; width: 43%; } + +.CreateSSOStep-module_CreateSSOStep__disclaimer__KmojD { color: rgb(135, 14= +4, 157); font-size: 0.8125rem; font-style: normal; font-weight: 400; line-h= +eight: 1.25rem; margin: 2.5rem 0px 0px; text-align: center; } + +.CreateSSOStep-module_CreateSSOStep__disclaimer__KmojD > a { color: rgb(196= +, 200, 206); } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__header__l9sku { align-it= +ems: center; display: grid; grid-template-columns: 1.5rem auto 1.5rem; posi= +tion: relative; width: 100%; } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__backButton__W1WRO { posi= +tion: absolute; top: 2.1rem; } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__backButton__W1WRO button= + { background: none; padding: 0px; transform: scale(1.5); } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__icon__FCPqZ { align-item= +s: center; background: rgba(10, 233, 138, 0.2); border-radius: 50%; display= +: flex; height: 4rem; justify-content: center; margin-bottom: 1.5rem; paddi= +ng: 0.25rem; width: 4rem; } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__icon__container__4p-lQ {= + align-items: center; display: flex; justify-content: center; } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__label__ir0R0 { display: = +block; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.008rem; li= +ne-height: 1.25rem; margin: 0px 0px 0.5rem; text-align: center; } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__description__Wjc2M, .Pas= +swordRecoveryStep-module_PasswordRecoveryStep__footer__description__wQHzw {= + color: rgb(196, 200, 206); font-size: 0.875rem; font-weight: 400; letter-s= +pacing: -0.008rem; line-height: 1.25rem; margin: 1.5rem 0px 2rem; } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__buttonWrapper__UnY0V { m= +argin-top: 20px; width: 100%; } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__buttonWrapper__UnY0V > b= +utton { align-items: center; background-color: rgb(64, 70, 80); column-gap:= + 1rem; width: 100%; } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__buttonWrapper__UnY0V > b= +utton:hover { background: rgb(45, 50, 58); } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__footer__HV6Fc { border-t= +op: 1px solid rgb(64, 70, 80); margin-top: 2rem; padding-top: 2rem; } + +.PasswordRecoveryStep-module_PasswordRecoveryStep__footer__description__wQH= +zw { margin: 0px; } + +.Signup-module_Signup__yNZPl { background: transparent; border: none; color= +: rgb(255, 255, 255); display: block; max-width: 22.5rem; padding: 0px; wid= +th: 100%; } + +.Signup-module_Signup__content__nGgLa { background-color: rgb(19, 22, 28); = +background-repeat: no-repeat; background-size: 100%; padding: 1.5rem; } + +.Signup-module_Signup__content__modal__j-3Ft { background-image: url("https= +://static.platzi.com/media/uploads/signup_background_59bf84ac15.png"); bord= +er-radius: 1rem 1rem 0px 0px; bottom: 0px; left: 0px; min-height: 400px; po= +sition: fixed; right: 0px; z-index: 11; } + +@media (min-width: 48rem) { + .Signup-module_Signup__content__modal__j-3Ft { border-radius: 0px; left: = +auto; right: 0px; top: 0px; width: 360px; } +} + +.Signup-module_Signup__backdrop__IQ145 { background-color: rgba(0, 0, 0, 0.= +8); border: none; inset: 0px; cursor: pointer; display: flex; position: fix= +ed; z-index: 10; } + +.CompletedModal-module_CompletedModal__kg5Yp { background: none; border: no= +ne; color: rgb(255, 255, 255); display: block; max-width: 22.5rem; } + +.CompletedModal-module_CompletedModal__content__3LLmQ { background-color: r= +gb(30, 34, 41); border-radius: 1rem 1rem 0px 0px; padding: 2.5rem 1.5rem; } + +@media screen and (max-width: 768px) { + .CompletedModal-module_CompletedModal__content__3LLmQ { padding: 2.5rem 1= +.5rem 4rem; } +} + +.CompletedModal-module_CompletedModal__content__modal__LAQtq { background-i= +mage: url("https://static.platzi.com/media/uploads/signup_background_59bf84= +ac15.png"); background-repeat: no-repeat; background-size: cover; bottom: 0= +px; left: 0px; position: fixed; right: 0px; z-index: 11; } + +@media (min-width: 48rem) { + .CompletedModal-module_CompletedModal__content__modal__LAQtq { border-rad= +ius: 1rem; bottom: inherit; left: 50%; max-width: 22.5rem; top: 15%; transf= +orm: translateX(-50%); } +} + +.CompletedModal-module_CompletedModal__backdrop__ycy1i { background-color: = +rgba(0, 0, 0, 0.6); border: none; inset: 0px; cursor: pointer; display: fle= +x; position: fixed; z-index: 10; } + +.CreateNewPassword-module_CreateNewPassword__LXMp9 { align-items: center; d= +isplay: flex; flex-direction: column; width: 100%; } + +.CreateNewPassword-module_CreateNewPassword__header__gNZvl { display: flex;= + justify-content: center; width: 100%; } + +.CreateNewPassword-module_CreateNewPassword__label__vYE-7 { font-size: 1.12= +5rem; font-weight: 500; letter-spacing: -0.008rem; line-height: 1.25rem; ma= +rgin: 0px 0px 0.5rem; text-align: center; } + +.CreateNewPassword-module_CreateNewPassword__description__FeU7K { color: rg= +b(196, 200, 206); font-size: 0.875rem; font-weight: 400; letter-spacing: -0= +.008rem; line-height: 1.25rem; margin: 0px 0px 2rem; padding: 0px 2rem; tex= +t-align: center; } + +.CreateNewPassword-module_CreateNewPassword__passwordsContainer__P-PRr { di= +splay: flex; flex-direction: column; row-gap: 0.75rem; width: 100%; } + +.CreateNewPassword-module_CreateNewPassword__errorsWrapper__B6kVn { display= +: flex; flex-direction: column; margin-top: 0.75rem; row-gap: 0.75rem; widt= +h: 100%; } + +.CreateNewPassword-module_CreateNewPassword__errorMessage__YzzXF { align-it= +ems: center; column-gap: 0.5rem; display: flex; } + +.CreateNewPassword-module_CreateNewPassword__errorMessage__YzzXF p { color:= + rgb(251, 91, 91); font-size: 0.75rem; font-weight: 400; letter-spacing: -0= +.008rem; line-height: 1rem; margin: 0px; } + +.CreateNewPassword-module_CreateNewPassword__errorMessage__YzzXF > svg { fl= +ex-shrink: 0; } + +.CreateNewPassword-module_CreateNewPassword__errorMessage__YzzXF > svg path= + { fill: rgb(251, 91, 91); } + +.CreateNewPassword-module_CreateNewPassword__errorMessage__YzzXF > svg circ= +le { stroke: rgb(251, 91, 91); } + +.CreateNewPassword-module_CreateNewPassword__buttonWrapper__k2tPb { margin-= +top: 1.5rem; width: 100%; } + +.CreateNewPassword-module_CreateNewPassword__buttonWrapper__k2tPb > button = +{ align-items: center; column-gap: 1rem; width: 100%; } + +.NewPassword-module_NewPassword__N5mek { background: transparent; border: n= +one; color: rgb(255, 255, 255); display: block; max-width: 22.5rem; padding= +: 0px; width: 100%; } + +.NewPassword-module_NewPassword__content__dndB4 { background-color: rgb(19,= + 22, 28); background-repeat: no-repeat; background-size: 100%; padding: 1.5= +rem; } + +.LiveMainHeader { -webkit-box-align: center; align-items: center; display: = +flex; margin-left: 0.5rem; position: relative; } + +.LiveMainHeader-link { inset: 0px; position: absolute; } + +.LiveMainHeader-logo { animation: 2s ease 0s infinite normal none running b= +ackground; background: rgb(255, 72, 66); border-radius: 0.25rem; font-size:= + 14px; font-weight: 700; padding: 3px 0.25rem; } + +@media only screen and (min-width: 1130px) { + .LiveMainHeader-logo { border-radius: 0.25rem 0px 0px 0.25rem; } +} + +.LiveMainHeader-title { background: rgba(255, 255, 255, 0.15); border-radiu= +s: 0px 0.25rem 0.25rem 0px; display: none; font-size: 12px; max-width: 97px= +; overflow: hidden; padding: 0.25rem 0.5rem; text-overflow: ellipsis; white= +-space: nowrap; } + +@media only screen and (min-width: 1130px) { + .LiveMainHeader-title { display: block; } +} + +@-webkit-keyframes background {=20 + 0% { background: rgb(255, 72, 66); } + 50% { background: rgba(255, 72, 66, 0.75); } + 100% { background: rgb(255, 72, 66); } +} + +@keyframes background {=20 + 0% { background: rgb(255, 72, 66); } + 50% { background: rgba(255, 72, 66, 0.75); } + 100% { background: rgb(255, 72, 66); } +} + +.Actionsv2 { grid-area: actions; } + +.Actionsv2-enterprise { background: transparent; border: 1px solid rgb(152,= + 202, 63); border-radius: 8px; color: rgb(152, 202, 63); cursor: pointer; d= +isplay: none; font-size: 0.75rem; font-weight: 700; margin-right: 12px; pad= +ding: 0.5rem; text-decoration: none; text-transform: uppercase; transition:= + 0.3s; } + +.Actionsv2-enterprise:hover { border-color: rgb(193, 223, 139); color: rgb(= +193, 223, 139); } + +@media only screen and (min-width: 48rem) { + .Actionsv2-enterprise { display: block; } +} + +@media only screen and (min-width: 64rem) { + .Actionsv2-enterprise { font-size: 0.875rem; padding: 9px 16px; } +} + +.Actionsv2-menu { cursor: pointer; display: grid; grid-template-areas: "poi= +nts arrow"; grid-template-columns: auto 18px; margin-right: 12px; user-sele= +ct: none; } + +.Actionsv2-menu span { font-size: 14px; grid-area: points; justify-self: en= +d; } + +.Actionsv2-menu svg { place-self: center end; font-size: 12px; grid-area: a= +rrow; transition: 0.15s 0.15s; } + +.Actionsv2-menu .isDesktop { display: none; } + +.Actionsv2-menu .isMobile { display: block; } + +.Actionsv2 .toggle-down { transform: rotate(0deg); } + +.Actionsv2 .toggle-up { transform: rotate(180deg); } + +.Actionsv2-menu-logged { cursor: pointer; display: grid; grid-template-area= +s: "avatar points arrow alert-s"; grid-template-columns: 1fr auto 20px auto= +; margin-right: 1rem; user-select: none; } + +.Actionsv2-menu-logged:active, .Actionsv2-menu-logged:focus { outline: none= +; } + +.Actionsv2-menu-logged span { font-size: 14px; grid-area: points; justify-s= +elf: end; text-align: right; width: 100%; } + +.Actionsv2-menu-logged svg { place-self: center end; font-size: 12px; grid-= +area: arrow; transition: 0.15s 0.15s; } + +.Actionsv2-alert { background-color: rgb(255, 72, 66); border-radius: 50%; = +grid-area: alert-s; height: 12px; justify-self: end; margin-top: 4px; width= +: 12px; } + +.Actionsv2-avatar { border-radius: 50%; grid-area: avatar; height: 20px; ju= +stify-self: end; margin-right: 10px; width: 20px; } + +.Actionsv2-content { animation: 0.75s ease 0s 1 normal none running fadeMen= +u; background: transparent; display: none; left: 0px; list-style: none; mar= +gin: 0px; position: absolute; top: 2.5rem; width: 100%; z-index: 5; } + +.Actionsv2-content .bussines-plan, .Actionsv2-content .users-plan { min-hei= +ght: 200px; } + +.Actionsv2-content .box { background-color: rgb(255, 255, 255); } + +@media only screen and (min-width: 48rem) { + .Actionsv2-content .box { border-radius: 0.25rem; } +} + +.Actionsv2-content .triangle { margin: 0px 95px 0px auto; } + +.Actionsv2-content .triangle, .Actionsv2-content .triangled { border-bottom= +: 10px solid rgb(255, 255, 255); border-left: 12px solid transparent; borde= +r-right: 12px solid transparent; height: 0px; width: 0px; } + +.Actionsv2-content .triangled { margin: 0px 144px 0px auto; } + +.Actionsv2 .isOpenActions { display: block; } + +@media only screen and (min-width: 48rem) { + .Actionsv2 { background: none; position: relative; } + .Actionsv2-menu { margin-right: 14px; } + .Actionsv2-content { background-color: transparent; left: auto; position:= + absolute; right: -1rem; top: 1.5rem; width: 320px; } + .Actionsv2-content .triangle { margin: 0px 26px 0px auto; } + .Actionsv2-content .triangled { margin: 0px 12px 0px auto; } +} + +@media only screen and (min-width: 64rem) { + .Actionsv2-menu .isDesktop { display: block; } + .Actionsv2-menu .isMobile { display: none; } +} + +.Menu { grid-area: menu; } + +.Menu-button { -webkit-box-align: center; -webkit-box-pack: justify; align-= +items: center; display: flex; justify-content: space-between; padding-right= +: 0.75rem !important; } + +.Menu-dropdown { background: transparent; border: none; cursor: pointer; fl= +oat: right; } + +.Menu-dropdown svg { font-size: 0.875rem; font-weight: 700; } + +.Menu-dropdown--green { color: rgb(11, 244, 145); margin-left: 1rem; width:= + 1.5rem; } + +.Menu-dropdown--green svg { height: 14px; width: 15px; } + +.Menu-dropdown--classic { color: rgb(190, 205, 227); width: 2rem; } + +.Menu-dropdown--classic svg { height: 14px; width: 8.75px; } + +.Menu-content { background: url("https://static.platzi.com/ui/assets/image/= +bg-menu556232831efb50bc7218.png") 100% 100% no-repeat, linear-gradient(90de= +g, rgb(28, 54, 67), rgb(39, 59, 71) 25%, rgb(30, 83, 114)); inset: 3.25rem = +0px 0px; display: none; grid-area: contentv; position: fixed; z-index: 1; } + +.Menu-content--is-dark { background: rgb(18, 31, 61); } + +.Menu-content--desktop { left: calc(1rem - 100vw); width: calc(-1rem + 100v= +w); } + +.Menu-list li { border-bottom: 1px solid rgba(219, 219, 226, 0.25); } + +.Menu-list li button { background: transparent; border: none; color: rgb(19= +0, 205, 227); cursor: pointer; font-size: 1rem; font-weight: 500; line-heig= +ht: 1.5rem; padding: 0px; text-align: left; width: 100%; } + +.Menu-list li button:hover { color: rgb(239, 243, 248); } + +.Menu ul { list-style: none; margin: 0px; padding: 2px 12px; } + +.Menu li { padding: 8px 0px; } + +.Menu li:first-of-type { margin-top: 10px; } + +.Menu li a, .Menu li div { color: rgb(239, 243, 248); cursor: pointer; font= +-size: 1rem; font-weight: 500; line-height: 1.5rem; text-decoration: none; = +} + +.Menu .open { display: block; } + +@media only screen and (min-width: 83.125rem) { + .Menu { justify-self: end; } + .Menu-dropdown { display: none; } + .Menu-content { background: none; display: block; height: 100%; left: 0px= +; min-height: auto; overflow-y: hidden; position: relative; top: 0px; width= +: 100%; z-index: 1; } + .Menu-list li { border-bottom: none; display: inline-block; font-size: 14= +px; list-style-type: none; padding: 5px 12px 5px 5px; } + .Menu-list li:first-of-type { margin-top: 0px; } + .Menu-list-explore { display: none !important; } +} + +.ButtonLogin { display: block; grid-area: login; } + +.ButtonLogin-cta { background-color: rgb(152, 202, 63); border: 1px solid r= +gb(152, 202, 63); border-radius: 8px; color: rgb(3, 9, 30); font-size: 12px= +; font-weight: 700; padding: 8px; text-decoration: none; text-transform: up= +percase; transition: 0.3s; } + +.ButtonLogin-cta:hover { background-color: rgb(193, 223, 139); cursor: poin= +ter; } + +@media only screen and (min-width: 48rem) { + .ButtonLogin-cta { margin-right: 0.75rem; } +} + +@media only screen and (min-width: 64rem) { + .ButtonLogin-cta { font-size: 0.875rem; padding: 9px 16px; } +} + +.Tinkerbell { grid-area: tinkerbell; } + +@media only screen and (min-width: 48rem) { + .Tinkerbell { position: relative; } +} + +.Tinkerbell-icon { -webkit-box-align: center; -webkit-box-pack: center; ali= +gn-items: center; color: rgb(255, 255, 255); cursor: pointer; display: flex= +; font-size: 18px; grid-area: tinkerbell; justify-content: center; margin-r= +ight: 1rem; } + +.Tinkerbell-icon:active, .Tinkerbell-icon:focus { outline: none; } + +.Tinkerbell-icon.is-disabled { opacity: 0.5; } + +.AlgoliaSearch-mobile { display: block; } + +.AlgoliaSearch-mobile a { line-height: 0; margin-right: 0.5rem; padding: 0.= +5rem; } + +.AlgoliaSearch-desktop { display: none; } + +@media only screen and (min-width: 48rem) { + .AlgoliaSearch-mobile { display: none; } + .AlgoliaSearch-desktop { display: block; } +} + +.Logo { -webkit-box-align: center; align-items: center; display: grid; grid= +-area: logo; padding-left: 12px; } + +.Logo-full { width: 70px; } + +.Logo-minimal { margin-right: 5px; width: 16px; } + +@media only screen and (min-width: 48rem) { + .Logo-full, .Logo-minimal { margin-right: 10px; width: 80px; } + .Logo-minimal { content: url("https://static.platzi.com/static/images/log= +os/platzi.3cae3cffd5ef.png"); } +} + +.LogoHeader { position: relative; } + +.LogoHeader-container { -webkit-box-align: center; align-items: center; dis= +play: flex; } + +.LogoHeader-name { margin-left: 0.25rem; } + +.LogoHeader-name.is-live { display: none; } + +@media only screen and (min-width: 360px) { + .LogoHeader-name.is-live { display: block; } +} + +@media only screen and (min-width: 64rem) { + .LogoHeader-name.is-live { display: none; } +} + +@media only screen and (min-width: 1180px) { + .LogoHeader-name.is-live { display: block; } +} + +.LogoHeader-link { inset: 0px; color: rgb(255, 255, 255); text-decoration: = +none; } + +.ContactFreeUser { margin-bottom: -1.9em; max-width: 400px; } + +.ContactFreeUser-title { padding-bottom: 1em; text-align: center; } + +.ContactFreeUser-item { -webkit-box-align: center; align-items: center; bor= +der-top: 1px solid rgb(217, 223, 230); color: rgb(28, 54, 67); display: fle= +x; margin: 0px -2em; padding: 0.5em 0.5em 0.5em 1em; text-decoration: none;= + } + +.ContactFreeUser-item-content { -webkit-box-flex: 1; display: inline; flex-= +grow: 1; } + +.ContactFreeUser-icon { color: rgb(168, 177, 192); font-size: 2em; } + +.Arrow { border-width: 4px; border-style: solid; border-color: transparent = +transparent transparent rgb(255, 255, 255); border-image: initial; height: = +0px; width: 0px; } + +.FlagCircle { border-radius: 100%; object-fit: cover; } + +.SocialItem { color: rgb(255, 255, 255); font-size: 18px; text-decoration: = +none; } + +.ExtraBenefits { -webkit-box-orient: vertical; display: flex; flex-directio= +n: column; font-size: 0.875rem; line-height: 1.5; margin-bottom: 1.5rem; pa= +dding: 0px; row-gap: 0.5rem; } + +.ExtraBenefits--dark { color: rgb(190, 205, 227); } + +.ExtraBenefits--dark .ExtraBenefitItem:first-child { background: rgb(29, 79= +, 124); } + +.ExtraBenefits--dark .ExtraBenefitItem-modalBtn { color: rgb(116, 202, 255)= +; } + +.ExtraBenefits--light { color: rgb(92, 107, 133); } + +.ExtraBenefits--light .ExtraBenefitItem:first-child { background: rgb(230, = +244, 252); } + +.ExtraBenefits--light .ExtraBenefitItem-modalBtn { color: rgb(7, 145, 230);= + } + +.Modal .showModal { -webkit-box-align: initial; -webkit-box-orient: vertica= +l; align-items: normal; color: rgb(255, 255, 255); flex-direction: column; = +max-width: 600px; padding: 1rem; text-align: left; } + +.Modal .showModal .exit-cross { -webkit-box-pack: end; background: rgb(36, = +56, 91); border-radius: 0.75rem 0.75rem 0px 0px; display: flex; justify-con= +tent: flex-end; } + +.Modal .showModal .exit-cross .exit-cross-button { background: none; border= +: none; color: rgb(141, 162, 192); cursor: pointer; height: 2rem; padding: = +0.625rem; width: 2rem; } + +.ModalInstallments img { padding: 1rem 0px; width: 100%; } + +.ModalInstallments-content { background: rgb(36, 56, 91); max-height: 80vh;= + overflow: auto; padding: 0px 1rem; } + +@media only screen and (min-width: 48rem) { + .ModalInstallments-content { padding: 0px 2rem; } +} + +.ModalInstallments-header { -webkit-box-align: center; align-items: center;= + display: flex; margin-bottom: 0.75rem; } + +@media only screen and (min-width: 48rem) { + .ModalInstallments-header { margin-bottom: 1.5rem; } +} + +.ModalInstallments-title { color: rgb(239, 243, 248); font-size: 1rem; font= +-weight: 700; line-height: 1.5rem; padding: 0px 1.25rem; } + +@media only screen and (min-width: 48rem) { + .ModalInstallments-title { font-size: 1.125rem; line-height: 1.75rem; } +} + +.ModalInstallments-icon { background: rgb(51, 177, 255); border-radius: 50%= +; box-sizing: initial; color: rgb(3, 9, 30); height: 0.75rem; padding: 0.37= +5rem; width: auto; } + +@media only screen and (min-width: 48rem) { + .ModalInstallments-icon { height: 1.5rem; padding: 0.75rem; width: auto; = +} +} + +.ModalInstallments-steps { padding: 0px 1rem; } + +.ModalInstallments-step { font-size: 0.875rem; font-weight: 400; line-heigh= +t: 1.5rem; padding: 0.25rem 0px; } + +@media only screen and (min-width: 48rem) { + .ModalInstallments-step { font-size: 1rem; padding: 0.5rem 0px; } +} + +.ModalInstallments-step a { color: rgb(51, 177, 255); } + +.ModalInstallments-conditions { padding-bottom: 0.75rem; } + +.ModalInstallments-conditions p { color: rgb(190, 205, 227); font-size: 0.7= +5rem; letter-spacing: 0.25px; line-height: 1.125rem; padding-bottom: 0.5rem= +; } + +@media only screen and (min-width: 48rem) { + .ModalInstallments-conditions p { font-size: 0.875rem; line-height: 1.375= +rem; } +} + +.ModalInstallments-footer { -webkit-box-pack: end; background: rgb(18, 31, = +61); border-radius: 0px 0px 0.75rem 0.75rem; color: rgb(190, 205, 227); dis= +play: flex; justify-content: flex-end; padding: 1.5rem 2rem; } + +.ModalInstallments-footer-btn { font-weight: 700; text-transform: uppercase= +; color: rgb(3, 9, 30) !important; } + +.TimelineInstallments { border: 1px solid rgba(168, 177, 192, 0.4); border-= +radius: 0.5rem; color: rgb(239, 243, 248); display: flex; justify-content: = +space-around; margin: 0.5rem 0px; padding: 1rem 0.75rem; } + +@media only screen and (min-width: 48rem) { + .TimelineInstallments { margin: 1rem 0px; } +} + +.TimelineInstallments--small { margin: 1rem auto; width: 90%; } + +@media only screen and (min-width: 48rem) { + .TimelineInstallments--small { width: 50%; } +} + +.TimelineInstallments--small .TimelineInstallments-container::before { widt= +h: 80%; } + +@media only screen and (min-width: 48rem) { + .TimelineInstallments--small .TimelineInstallments-container::before { wi= +dth: 70%; } +} + +.TimelineInstallments-container { -webkit-box-pack: justify; display: flex;= + justify-content: space-between; padding-top: 2rem; position: relative; wid= +th: 100%; } + +@media only screen and (min-width: 48rem) { + .TimelineInstallments-container { width: calc(100% - 2rem); } +} + +.TimelineInstallments-container::before { background-color: rgb(51, 177, 25= +5); content: ""; height: 1px; left: 50%; position: absolute; top: 1rem; tra= +nsform: translateX(-50%); width: 80%; } + +@media only screen and (min-width: 48rem) { + .TimelineInstallments-container::before { width: 90%; } +} + +.TimelineInstallments-item { position: relative; } + +.TimelineInstallments-item:first-child .TimelineInstallments-dot { backgrou= +nd-color: rgb(51, 177, 255); } + +.TimelineInstallments-dot { background-color: rgb(36, 56, 91); border: 1px = +solid rgb(51, 177, 255); border-radius: 50%; display: inline-block; height:= + 0.75rem; left: 50%; position: absolute; top: -1.4rem; transform: translate= +X(-50%); width: 0.75rem; } + +.TimelineInstallments-price { font-size: 0.875rem; text-align: center; } + +.TimelineInstallments-date { display: block; font-size: 1rem; padding-botto= +m: 0.25rem; } + +.SectionHeading-image { margin: 2rem auto; width: 200px; } + +.SectionHeading-image img { width: 100%; } + +.SectionHeading-text { color: rgb(239, 243, 248); font-size: 1.5rem; font-w= +eight: 900; line-height: 1.5; margin-bottom: 1.2rem; padding-top: 1.5rem; p= +osition: relative; } + +@media only screen and (min-width: 64rem) { + .SectionHeading-text { font-size: 2rem; } +} + +.SectionHeading-text::before { background-color: rgb(51, 177, 255); content= +: ""; height: 2px; position: absolute; top: 0px; width: 77px; } + +.SectionHeading-text--is-left { text-align: left; } + +.SectionHeading-text--is-left::before { left: 0px; } + +.SectionHeading-text--is-center { text-align: center; } + +.SectionHeading-text--is-center::before { left: 50%; transform: translateX(= +-50%); } + +.SectionHeading-text--is-right { text-align: right; } + +.SectionHeading-text--is-right::before { right: 0px; } + +.SectionHeading-text--image { padding-top: 0px; } + +.SectionHeading-text--image::before { background: transparent; height: 0px;= + width: 0px; } + +.SectionHeading-text--noSeparator { padding-top: 0px; } + +.SectionHeading-text--noSeparator::before { display: none; } + +.SectionHeading-subtitle { color: rgb(190, 205, 227); font-size: 1.125rem; = +line-height: 1.4; } + +.SectionHeading-subtitle--is-left { text-align: left; } + +.SectionHeading-subtitle--is-center { text-align: center; } + +.SectionHeading-subtitle--is-right { text-align: right; } + +.UserLogin-content { padding: 14px 12px; } + +.UserLogin-content hr { border: 1px solid rgb(149, 171, 184); margin-bottom= +: 20px; opacity: 0.53; } + +.UserLogin-title { font-size: 22px; margin-bottom: 20px; text-align: center= +; width: 90%; } + +.UserLogin-button { padding: 8px 0px; text-align: center; } + +.UserLogin-button span { color: rgb(3, 9, 30); } + +.UserLogin-button .btn { display: block; width: 100%; } + +@media only screen and (min-width: 48rem) { + .UserLogin { display: none; } +} + +.Bell-clapper { animation: 1s ease-in-out 0s 1 normal none running clapper;= + } + +.Bell-body { animation: 1s ease-in-out 0s 1 normal none running bell; } + +@-webkit-keyframes bell {=20 + 0% { transform: rotate(0deg); } + 20% { transform: rotate(1.5deg); } + 40% { transform: rotate(-1.5deg); } + 60% { transform: rotate(1.5deg); } + 80% { transform: rotate(0.25deg); } + 85% { transform: rotate(0deg); } + 100% { transform: rotate(0deg); } +} + +@keyframes bell {=20 + 0% { transform: rotate(0deg); } + 20% { transform: rotate(1.5deg); } + 40% { transform: rotate(-1.5deg); } + 60% { transform: rotate(1.5deg); } + 80% { transform: rotate(0.25deg); } + 85% { transform: rotate(0deg); } + 100% { transform: rotate(0deg); } +} + +@-webkit-keyframes clapper {=20 + 0% { transform: translateX(0px); } + 25% { transform: translateX(-3px); } + 50% { transform: translateX(4px); } + 75% { transform: translateX(-2px); } + 100% { transform: translateX(0px); } +} + +@keyframes clapper {=20 + 0% { transform: translateX(0px); } + 25% { transform: translateX(-3px); } + 50% { transform: translateX(4px); } + 75% { transform: translateX(-2px); } + 100% { transform: translateX(0px); } +} + +.Explore { align-items: center; display: flex; gap: 0.5rem; position: relat= +ive; } + +.ExtraBenefitItem { -webkit-box-align: center; align-items: center; border-= +radius: 0.5rem; display: flex; list-style: none; padding: 0.5rem; text-alig= +n: left; } + +.ExtraBenefitItem-icon { margin-right: 0.5rem; } + +.ExtraBenefitItem-modalBtn { background: none; border: none; cursor: pointe= +r; padding: 0.25rem 0px 0px; } + +.Talk { border-bottom: 1px dashed rgba(255, 255, 255, 0.12); display: flex;= + gap: 0.75rem; padding: 0.75rem 0px; } + +.Talk--live { background-color: rgb(110, 79, 171); border: 1px solid rgb(19= +, 22, 28); margin-bottom: 1rem; padding: 1rem; position: relative; } + +.Talk--live:hover { background-color: rgb(89, 62, 144); } + +.Talk--live time { color: rgb(255, 255, 255) !important; } + +.Talk--live::before { bottom: -7px; height: 5px; left: 0px; transform: rota= +te(0deg) skew(30deg); width: 100.2%; } + +.Talk--live::after, .Talk--live::before { background-color: rgb(57, 37, 96)= +; content: ""; position: absolute; } + +.Talk--live::after { height: 91%; right: -4px; top: 8px; transform: rotate(= +30deg) skew(30deg); width: 4.5px; } + +.Talk-image { -webkit-box-pack: center; border: 1px solid rgb(0, 0, 0); bor= +der-top-left-radius: 24px; display: flex; height: fit-content; justify-cont= +ent: center; margin-bottom: 0.75rem; object-fit: cover; overflow: hidden; w= +idth: fit-content; } + +@media only screen and (min-width: 48rem) { + .Talk-image { margin-bottom: 0px; } +} + +.Talk-image img { height: 58px; object-fit: cover; width: 58px; } + +@media only screen and (min-width: 48rem) { + .Talk-image img { height: 88px; width: 88px; } +} + +.Talk-image--activity { border: none !important; } + +.Talk-image--featured { -webkit-box-align: end; align-items: flex-end; back= +ground-color: rgb(255, 150, 193); height: fit-content; margin-bottom: 0.75r= +em; width: fit-content; } + +@media only screen and (min-width: 48rem) { + .Talk-image--featured { margin-bottom: 0px; } +} + +.Talk-image--featured img { height: 58px; width: 58px; } + +@media only screen and (min-width: 48rem) { + .Talk-image--featured img { height: 88px; width: 88px; } +} + +.Talk-time--hour { display: block; font-size: 0.9rem; font-weight: 600; let= +ter-spacing: 0.3px; } + +.Talk-time--journey { color: rgb(210, 198, 247); display: block; } + +@media only screen and (min-width: 48rem) { + .Talk-time button { background-color: rgb(255, 255, 255) !important; colo= +r: rgb(51, 177, 255); } +} + +.Talk-time p, .Talk-time p svg > path { color: rgb(18, 31, 61); } + +@media only screen and (min-width: 48rem) { + .Talk-time p { font-size: 0.87rem; } +} + +.Talk-info { -webkit-box-flex: 1; flex: 1 1 0%; position: relative; } + +@media only screen and (min-width: 48rem) { + .Talk-info { -webkit-box-align: center; align-items: center; display: fle= +x; gap: 0.75rem; } +} + +.Talk-info-speakers { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-= +bottom: 0.75rem; } + +@media only screen and (min-width: 48rem) { + .Talk-info-speakers { display: grid; grid-template-columns: repeat(3, 1fr= +); width: 5.3rem; } +} + +.Talk-info-speakers-image { border: 1px solid rgb(0, 0, 0); border-top-left= +-radius: 24px; height: 58px; overflow: hidden; width: 58px; } + +@media only screen and (min-width: 48rem) { + .Talk-info-speakers-image { border-top-left-radius: 12px; height: 26px; w= +idth: 26px; } +} + +.Talk-info-speakers-image img { height: 100%; object-fit: cover; width: 100= +%; } + +.Talk-info-contain { max-width: 95%; } + +@media only screen and (min-width: 48rem) { + .Talk-info-contain { -webkit-box-flex: 1; flex: 1 1 0%; max-width: 78%; } +} + +.Talk-info-contain-title { display: block; font-size: 1.1rem; font-weight: = +600; margin-bottom: 0.5rem; color: rgb(255, 255, 255) !important; } + +.Talk-info-contain-speaker { color: rgb(210, 198, 247); font-size: 1rem; le= +tter-spacing: 0.3px; margin-bottom: 0.5rem; } + +.Talk-info-contain-description { color: rgb(210, 198, 247); font-size: 1rem= +; letter-spacing: 0.3px; margin-top: 1rem; } + +.Talk-info-contain-location { -webkit-box-align: center; align-items: cente= +r; color: rgb(210, 198, 247); display: block; font-size: 0.9rem; gap: 0.25r= +em; letter-spacing: 0.3px; margin-bottom: 0.5rem; margin-top: 0.5rem; } + +.Talk-info-contain-tags { margin-top: 0.5rem; } + +.Talk-info-contain-tags, .Talk-info-contain-tags--live { display: flex; gap= +: 0.25rem; } + +.Talk-info-contain-tags--live { -webkit-box-align: center; align-items: cen= +ter; background-color: rgb(200, 77, 79); border-radius: 12px; color: rgb(25= +5, 255, 255); font-size: 0.7rem; font-weight: 700; height: fit-content; let= +ter-spacing: 1px; min-width: fit-content; padding: 0.25rem 0.5rem; text-tra= +nsform: uppercase; z-index: 1; } + +.Talk-info-contain-tags--live svg > path { fill: rgb(255, 255, 255); animat= +ion: 2s ease 0s infinite normal none running pulse; } + +.Talk-info-contain-tags--type { -webkit-box-align: center; align-items: cen= +ter; background-color: rgb(255, 218, 0); border-radius: 14px; color: rgb(10= +, 12, 15); display: flex; font-size: 0.7rem; font-weight: 700; letter-spaci= +ng: 1px; padding: 0.25rem 0.5rem; text-align: center; text-transform: upper= +case; width: fit-content; } + +.Talk-info-navigate { color: rgb(210, 198, 247); position: absolute; right:= + 0px; top: 0px; } + +.Talk-info-navigate svg { transform: rotate(320deg); } + +.Talk-info-schedule { background: none; border: none; color: rgb(210, 198, = +247); cursor: pointer; position: absolute; right: 0px; top: 0px; } + +@media only screen and (min-width: 48rem) { + .Talk-info-schedule { bottom: auto; } +} + +input[type=3D"search"]::-webkit-search-cancel-button, input[type=3D"search"= +]::-webkit-search-decoration, input[type=3D"search"]::-webkit-search-result= +s-button, input[type=3D"search"]::-webkit-search-results-decoration { appea= +rance: none; } + +.aa-Autocomplete { width: 320px; } + +.aa-Form { -webkit-box-align: center; align-items: center; background-color= +: rgb(3, 9, 30); border: 1px solid rgb(64, 88, 124); border-radius: 8px; di= +splay: flex; padding: 0.25rem 0.75rem; } + +.aa-Form:focus-within { border: 1px solid rgb(51, 177, 255); } + +.aa-SubmitButton { background: transparent; border: none; color: rgb(190, 2= +05, 227); line-height: 0; } + +.aa-SubmitButton svg { width: 1rem; } + +.aa-Input, .aa-InputWrapper { width: 100%; } + +.aa-Input { background: transparent; border: none; color: rgb(239, 243, 248= +); font-size: 0.875rem; letter-spacing: 0.25px; line-height: 1.375rem; } + +.aa-Input::placeholder { color: rgb(99, 122, 157); } + +.aa-Input:focus { outline: none; } + +.aa-InputWrapperPrefix, .aa-InputWrapperSuffix { line-height: 0; } + +.aa-ClearButton { background: transparent; border: none; color: rgb(141, 16= +2, 192); cursor: pointer; font-size: 0.875rem; line-height: 0; padding: 0px= +; } + +.aa-Panel { background-color: rgb(12, 22, 51); border: 1px solid rgb(64, 88= +, 124); border-radius: 8px; box-sizing: border-box; display: none; margin-t= +op: 0.5rem; max-height: 70vh; max-width: 320px; overflow-y: scroll; padding= +: 0.5rem; position: absolute; scrollbar-width: none; z-index: 100; } + +.aa-Panel::-webkit-scrollbar { display: none; } + +@media only screen and (min-width: 48rem) { + .aa-Panel { display: block; } +} + +.aa-List { -webkit-box-orient: vertical; display: flex; flex-direction: col= +umn; gap: 0.5rem; margin: 0px; padding: 0px; } + +.aa-List li { list-style-type: none; } + +.aa-List li a { color: rgb(141, 162, 192); font-size: 1rem; line-height: 1.= +5rem; } + +.aa-List li a mark { background: none; color: rgb(239, 243, 248); } + +.aa-Item { border-radius: 8px; } + +.aa-Item a { display: block; } + +.aa-Item .aa-ItemWrapper { -webkit-box-align: center; align-items: center; = +cursor: pointer; display: block; padding: 0.25rem 0.5rem; } + +.aa-Item[aria-selected=3D"true"] .CoursesCardUi, .aa-Item[aria-selected=3D"= +true"] .LearningPathCard-cont, .aa-Item[aria-selected=3D"true"] .SchoolCard= +UiCont { background: rgb(36, 56, 91); } + +.aa-Item[aria-selected=3D"true"] .aa-ActiveOnly, .aa-Item[aria-selected=3D"= +true"] .aa-ItemActionButton { visibility: visible; } + +.aa-ItemContent { -webkit-box-align: center; align-items: center; color: rg= +b(239, 243, 248); display: flex; font-size: 1rem; line-height: 1.5rem; widt= +h: 100%; } + +.aa-ItemContent mark { background: none; color: rgb(141, 162, 192); } + +.aa-ItemContent li { list-style-type: none; } + +.aa-ItemActions { display: none; } + +.aa-ItemIcon { height: 24px; margin-right: 0.5rem; width: 24px; } + +.PriceCard { position: relative; } + +@media only screen and (min-width: 64rem) { + .PriceCard { width: 33.3333%; } +} + +.PriceCard-specialPrice { display: flex; font-size: 0.75rem; font-weight: 7= +00; justify-content: center; margin-bottom: 0.25rem; text-transform: upperc= +ase; } + +.PriceCard-specialPrice > svg { margin-right: 0.5rem; } + +.PriceCard--b2b .PriceCard-content { grid-template-rows: auto 1fr auto; } + +.PriceCard--b2b .PriceCard-name { display: flex; justify-content: space-bet= +ween; } + +.PriceCard-promo-info { align-items: center; color: rgb(255, 255, 255); col= +umn-gap: 0.25rem; display: flex; flex-flow: row; margin-top: 0.25rem; } + +.PriceCard--promo .PriceCard-price-info { align-items: center; display: fle= +x; flex-direction: column; } + +.PriceCard--promo .PriceCard-description-separator { background-color: rgb(= +255, 255, 255); border-radius: 50%; height: 4px; width: 4px; } + +.PriceCard--promo .PriceCard-content { border-radius: 0.75rem; } + +.PriceCard--promo .PriceCard-tag { border-radius: 0.938rem; font-size: 0.87= +5rem; font-weight: 400; text-transform: none; } + +.PriceCard--promo .PriceCard-pricing { align-items: center; display: flex; = +flex-direction: column; margin: 0.5rem 0.5rem 0px; } + +.PriceCard--promo .PriceCard-price { justify-self: center; margin-top: 0px;= + } + +@media only screen and (min-width: 48rem) { + .PriceCard--promo .PriceCard-price { grid-area: 1 / 1 / span 2 / 2; justi= +fy-self: flex-start; margin-bottom: 0px; } +} + +.PriceCard--promo .PriceCard-priceValue { font-size: 1.5rem; font-weight: 5= +00; white-space: nowrap; } + +.PriceCard--promo .PriceCard-priceValue span { color: rgb(141, 162, 192); d= +isplay: inline-block; font-weight: 400; margin-right: 0.25rem; } + +.PriceCard--promo .PriceCard-description { margin-bottom: 0px; text-align: = +center; } + +@media only screen and (min-width: 48rem) { + .PriceCard--promo .PriceCard-description { text-align: right; } +} + +.PriceCard--promo .PriceCard-cta { color: rgb(3, 9, 30); font-size: 1rem; l= +etter-spacing: 0.2px; text-transform: none; } + +.PriceCard--promo .StudentSelector { margin-top: 1rem; } + +.PriceCard--promo .Benefits { margin: 1.5rem auto; width: 90%; } + +.PriceCard-head { height: auto; } + +@media only screen and (min-width: 64rem) { + .PriceCard-head { margin-bottom: 1.5rem; } +} + +.PriceCard-interest { display: flex; gap: 0.5rem; } + +.PriceCard-interest p { color: rgb(190, 205, 227); font-size: 0.75rem; font= +-style: normal; font-weight: 700; letter-spacing: -0.008rem; line-height: 1= +rem; margin-bottom: 1.75rem; } + +.PriceCard-interest-icon { align-items: center; background-color: rgb(190, = +205, 227); border-radius: 50%; display: flex; height: 1rem; justify-content= +: center; width: 1rem; } + +.PriceCard-interest-icon svg { color: rgb(18, 31, 61); font-size: 0.75rem; = +} + +.PriceCard-content { border-radius: 0.75rem; display: grid; grid-template-r= +ows: auto 1fr auto; height: 100%; padding: 0.75rem; position: relative; z-i= +ndex: 1; } + +@media only screen and (min-width: 64rem) { + .PriceCard-content { grid-template-rows: 235px 1fr 90px; padding: 1rem; } +} + +.PriceCard-hightlightFlag { align-items: center; border-radius: 0.75rem 0.7= +5rem 0px 0px; box-sizing: border-box; display: flex; font-size: 0.875rem; f= +ont-weight: 700; height: auto; justify-content: center; left: 0px; letter-s= +pacing: 1.25px; margin: -2.9rem 0px 0px -1px; padding: 0.5rem 1rem; positio= +n: absolute; text-align: center; text-transform: uppercase; top: 14px; widt= +h: calc(100% + 2px); } + +@media only screen and (min-width: 48rem) { + .PriceCard-hightlightFlag { font-size: 0.75rem; } +} + +@media only screen and (min-width: 64rem) { + .PriceCard-hightlightFlag { font-size: 0.875rem; } +} + +.PriceCard-info { margin-bottom: 1.5rem; } + +.PriceCard-titleCont { padding: 0px; text-align: center; } + +.PriceCard-name { font-size: 1.25rem; font-weight: 400; line-height: 1.6; m= +argin-bottom: 0.5rem; } + +.PriceCard-description { color: rgb(141, 162, 192); font-size: 0.8rem; line= +-height: 20px; } + +.PriceCard-copy { color: rgb(239, 243, 248); font-size: 0.938rem; line-heig= +ht: 22px; margin-bottom: 0.5rem; min-height: 50px; } + +.PriceCard-line { border-color: rgb(64, 88, 124); margin: 1.5rem -1rem; } + +@media only screen and (min-width: 64rem) { + .PriceCard-line { margin: 1.5rem -1.5rem; } +} + +.PriceCard-description { font-size: 0.938rem; line-height: 1.5; margin-bott= +om: 0.5rem; } + +.PriceCard-description.linethrough { display: inline-block; position: relat= +ive; } + +.PriceCard-description.linethrough span { text-decoration: line-through; } + +.PriceCard-description--uppercase { font-size: 1rem; text-transform: upperc= +ase; } + +@media only screen and (min-width: 64rem) { + .PriceCard-description--uppercase { font-size: 1.125rem; } +} + +.PriceCard-description-price { display: inline-block; } + +.PriceCard-pricing { margin-bottom: 1.5rem; } + +.PriceCard-price { align-items: center; color: rgb(239, 243, 248); display:= + flex; flex-wrap: nowrap; font-size: 1.375rem; font-weight: 600; justify-co= +ntent: center; margin-bottom: 0.5rem; margin-top: 2rem; } + +.PriceCard-contact { color: rgb(190, 205, 227); font-size: 2.5rem; margin: = +0.563rem 0px; } + +.PriceCard-flag { border-radius: 50%; height: 1rem; margin-right: 0.5rem; o= +bject-fit: cover; width: 1rem; } + +.PriceCard-tag { border-radius: 0.5rem; display: inline-block; font-size: 0= +.625rem; font-weight: 700; letter-spacing: 1.5px; margin-left: 0.5rem; padd= +ing: 0.25rem 0.5rem; text-transform: uppercase; } + +@media only screen and (min-width: 48rem) { + .PriceCard-tag { font-size: 0.75rem; } +} + +@media only screen and (min-width: 64rem) { + .PriceCard-tag { font-size: 0.875rem; } +} + +.PriceCard-textStrong { font-size: 1rem; } + +.PriceCard-textStrong--b2b { font-size: 0.875rem; } + +.PriceCard-cta { display: block; margin-bottom: 1rem; text-align: center; } + +.PriceCard-promoIcon { margin-left: 0.5rem; } + +.PriceCard-copyB2b { color: rgb(141, 162, 192); font-size: 0.875rem; margin= +-top: 1.5rem; text-align: center; } + +.PriceCard-copyB2b a { color: rgb(190, 205, 227); font-weight: 500; text-de= +coration: underline; } + +.PriceCard-copyB2b a:hover { color: rgb(239, 243, 248); } + +.PriceCard--dark .PriceCard-content { background-color: rgb(18, 31, 61); bo= +rder: 1px solid rgb(36, 56, 91); } + +.PriceCard--dark .PriceCard-hightlightFlag { background-color: rgb(141, 162= +, 192); border-top-left-radius: 24px; border-top-right-radius: 24px; color:= + rgb(3, 9, 30); } + +.PriceCard--dark .PriceCard-name { color: rgb(255, 255, 255); } + +.PriceCard--dark .PriceCard-description { color: rgb(141, 162, 192); font-s= +ize: 0.8rem; text-align: center; } + +.PriceCard--dark .PriceCard-description--saved { color: rgb(255, 255, 255);= + font-weight: 700; text-align: left; } + +.PriceCard--dark .PriceCard-description.linethrough { color: rgb(141, 162, = +192); } + +.PriceCard--dark .PriceCard-description.linethrough::before { border-top: 1= +px solid rgb(141, 162, 192); } + +.PriceCard--dark .PriceCard-priceValue { color: rgb(255, 255, 255); white-s= +pace: nowrap; } + +.PriceCard--dark .PriceCard-tag { border: 1px solid rgb(64, 88, 124); color= +: rgb(190, 205, 227); } + +.PriceCard--dark .PriceCard-textStrong { color: rgb(190, 205, 227); } + +.PriceCard--light.PriceCard--highlight .PriceCard-content { background-colo= +r: rgba(205, 233, 250, 0.2); } + +.PriceCard--light .PriceCard-content { background-color: rgb(255, 255, 255)= +; border: 1px solid rgb(239, 243, 248); } + +.PriceCard--light .PriceCard-hightlightFlag { background-color: rgb(205, 23= +3, 250); color: rgb(29, 79, 124); } + +.PriceCard--light .PriceCard-name { color: rgb(36, 56, 91); } + +.PriceCard--light .PriceCard-description, .PriceCard--light .PriceCard-desc= +ription.linethrough { color: rgb(64, 88, 124); } + +.PriceCard--light .PriceCard-description.linethrough::before { border-top: = +1px solid rgb(64, 88, 124); } + +.PriceCard--light .PriceCard-priceValue { color: rgb(36, 56, 91); white-spa= +ce: nowrap; } + +.PriceCard--light .PriceCard-tag { border: 1px solid rgb(239, 243, 248); co= +lor: rgb(64, 88, 124); } + +.PriceCard--light .PriceCard-textStrong { color: rgb(64, 88, 124); } + +.PriceCard--darker .PriceCard-name { color: rgb(255, 255, 255); } + +.PriceCard--darker .PriceCard-description { color: rgb(141, 162, 192); font= +-size: 0.875rem; text-align: center; } + +.PriceCard--darker .PriceCard-description-separator { background-color: rgb= +(141, 162, 192); } + +.PriceCard--darker .PriceCard-hightlightFlag { background-color: rgb(44, 24= +1, 206); color: rgb(3, 9, 30); } + +.PriceCard--darker .PriceCard-content { background-color: rgb(19, 22, 28); = +border: 1px solid rgb(44, 241, 206) !important; } + +.PriceCard--darker .PriceCard-ctaSection > a { background-color: rgb(255, 2= +55, 255); color: rgb(19, 22, 28); } + +.PriceCard--darker .PriceCard-ctaSection > a:hover { background-color: rgb(= +44, 241, 206); color: rgb(3, 9, 30); } + +.PriceCard--darker .PriceCard-specialPrice { color: rgb(44, 241, 206) !impo= +rtant; } + +.PriceCard--darker .StudentSelector .Radio { color: rgb(255, 255, 255); } + +.PriceCard--darker .StudentSelector .Radio-input { border: 1px solid rgb(25= +5, 255, 255); } + +.PriceCard--darker .StudentSelector .Radio-input--checked::before { backgro= +und-color: rgb(255, 255, 255); } + +.PriceCard--darker .ExtraBenefitItem { color: rgb(255, 255, 255); } + +.PriceCard--darker .ExtraBenefitItem:first-child { background-color: rgb(44= +, 50, 60) !important; } + +.PriceCard--highlight .PriceCard-content { border-color: rgb(141, 162, 192)= +; border-radius: 0px 0px 0.75rem 0.75rem; } + +@media only screen and (min-width: 64rem) { + .experiment-B.b2b .Benefits, .experiment-C.b2b .Benefits { height: 470px;= + } +} + +@media only screen and (min-width: 75rem) { + .experiment-B.b2b .Benefits, .experiment-C.b2b .Benefits { height: 345px;= + } +} + +@media only screen and (min-width: 64rem) { + .experiment-B.expert_plan .PriceCard-pricing, .experiment-B.monthly_plan = +.PriceCard-pricing { height: 180px; } +} + +@media only screen and (min-width: 75rem) { + .experiment-B.expert_plan .PriceCard-pricing, .experiment-B.monthly_plan = +.PriceCard-pricing { height: 145px; } +} + +@media only screen and (min-width: 64rem) { + .experiment-C.expert_plan .PriceCard-pricing, .experiment-C.monthly_plan = +.PriceCard-pricing { height: 180px; } +} + +@media only screen and (min-width: 75rem) { + .experiment-C.expert_plan .PriceCard-pricing, .experiment-C.monthly_plan = +.PriceCard-pricing { height: 145px; } +} + +@media only screen and (min-width: 64rem) { + .experiment-C.expert .PriceCard-pricing { margin-bottom: 4rem; } +} + +@media only screen and (min-width: 75rem) { + .experiment-C.expert .PriceCard-pricing { margin-bottom: 2.5rem; } +} + +.SliderSlots { margin-bottom: 2rem; } + +.SliderSlots, .StudentSelector { border: 1px solid rgb(36, 56, 91); border-= +radius: 100px; padding: 0.5rem 1rem; } + +.StudentSelector { column-gap: 1rem; display: flex; justify-content: center= +; } + +.dropdown-items { padding-left: 2.5rem !important; } + +.dropdown-items-item { color: rgb(190, 205, 227); padding-right: 0.75rem !i= +mportant; } + +.dropdown-items-item li { align-items: center; display: flex; font-size: 0.= +9rem; gap: 0.75rem; justify-content: space-between; } + +.dropdown-items-item li figure { align-items: center; display: flex; max-he= +ight: 1.5rem; } + +.dropdown-items-item li figure img { max-height: 100%; } + +.dropdown-items-item li span { flex: 1 1 0%; } + +.Logoutv { padding: 1em 1.6em 1.6em; } + +.Logoutv a { color: rgb(255, 72, 66); font-size: 14px; font-weight: 600; te= +xt-decoration: none; } + +.LoggedMenu-content { padding: 0px 2em 1em; } + +.LoggedMenu-content ul { list-style: none; margin: 0px; padding: 0px; } + +.LoggedMenu-content ul li { margin-top: 23px; } + +.LoggedMenu-content a, .LoggedMenu-content div { color: rgb(96, 97, 100); c= +ursor: pointer; font-size: 14px; margin-right: 12px; text-decoration: none;= + } + +.LoggedMenu-content a svg, .LoggedMenu-content div svg { fill: rgb(5, 132, = +210); color: rgb(5, 132, 210); height: 0.9rem; margin-right: 1em; width: 0.= +9rem; } + +.LoggedMenu-badge { background-color: rgb(255, 72, 66); border-radius: 100%= +; color: rgb(255, 255, 255); display: inline-block; font-size: 0.66rem; fon= +t-weight: 700; height: 18px; line-height: 1.75; margin-left: 10px; text-ali= +gn: center; vertical-align: baseline; white-space: nowrap; width: 18px; } + +.LastCourse { color: rgb(96, 97, 100); padding: 12px 14px; } + +.LastCourse-anchor { height: 100%; left: 0px; top: 0px; width: 100%; } + +.LastCourse a { text-decoration: none; user-select: none; } + +.LastCourse-content { background-color: rgb(255, 255, 255); border: 1px sol= +id rgba(212, 212, 212, 0.6); border-radius: 6px; box-shadow: rgb(212, 212, = +212) 0px 2px 4px 0px; margin-bottom: 12px; padding: 8px 14px; position: rel= +ative; } + +.LastCourse-box { display: grid; grid-template-columns: 45px auto; margin-t= +op: 6px; } + +.LastCourse-continue { color: rgb(96, 97, 100); font-size: 12px; font-weigh= +t: 700; } + +.LastCourse-continue a { color: rgb(96, 97, 100); text-decoration: none; } + +.LastCourse-info { color: rgb(96, 97, 100); display: grid; font-size: 14px;= + font-weight: 600; grid-template-areas: "title percentage" "percentagebar p= +ercentagebar"; grid-template-columns: 1fr auto; margin-top: 3px; } + +.LastCourse-title { grid-area: title; margin: 0px 4px 8px 0px; } + +.LastCourse-percentage { font-size: 12px; font-weight: 400; grid-area: perc= +entage; } + +.LastCourse-badge img { width: 36px; } + +.LastCourse-percentageBar { background-color: rgb(253, 252, 210); border-ra= +dius: 100px; display: grid; grid-area: percentagebar; grid-template-columns= +: auto 30%; height: 8px; overflow: hidden; } + +.LastCourse-percentageFull { background-color: rgb(254, 204, 1); height: 8p= +x; } + +.LastCourse-progressExam { background-color: rgb(227, 247, 192); height: 8p= +x; justify-self: end; width: 100%; } + +.LastCourse-progressExam-approved { background-color: rgb(133, 198, 56); he= +ight: 8px; justify-self: end; width: 100%; } + +.LastCourse-allCourses { font-size: 13px; font-weight: 600; padding: 0px 12= +px; user-select: none; } + +.LastCourse-allCourses a { color: rgb(5, 132, 210); text-decoration: none; = +} + +.Usernamev { color: rgb(96, 97, 100); } + +.Usernamev-banner { -webkit-box-orient: horizontal; background: rgb(125, 89= +, 217); border-radius: 6px; cursor: pointer; flex-flow: row; margin-bottom:= + 0.5rem; } + +.Usernamev-banner, .Usernamev-banner-image { display: flex; } + +.Usernamev-banner-image { -webkit-box-align: end; align-items: flex-end; he= +ight: 100%; padding: 0px 0.75rem; } + +.Usernamev-banner-image > img { width: 53px; } + +.Usernamev-banner-message { -webkit-box-align: center; align-items: center;= + color: rgb(255, 255, 255); display: flex; font-size: 0.75rem; font-weight:= + 700; line-height: 1.125rem; } + +@media only screen and (min-width: 64rem) { + .Usernamev-banner-message { max-width: 120px; } +} + +.Usernamev-banner-message > p { margin: 0px; padding: 0px; } + +.Usernamev-content { padding: 0px 2em; } + +.Usernamev-title { border-top: 2px solid rgb(36, 56, 91); font-size: 14px; = +font-weight: 700; margin-bottom: 8px; padding-top: 16px; } + +.Usernamev-plan { margin-bottom: 12px; } + +.Usernamev-plan span { font-size: 14px; } + +.Usernamev-plan span:nth-child(2) { color: rgb(152, 202, 63); font-weight: = +600; margin-left: 13px; } + +.Usernamev-profile { border-bottom: 2px solid rgb(36, 56, 91); font-size: 1= +3px; font-weight: 600; padding-bottom: 16px; } + +.Usernamev-profile a { color: rgb(5, 132, 210); text-decoration: none; } + +.LoadingPlatziLogo { animation: 3.5s ease 0s infinite normal none running l= +ogo; margin: 0px auto; position: relative; transform: rotate(45deg); } + +.LoadingPlatziLogo-left { animation-delay: 1s; animation-duration: 3.5s; an= +imation-iteration-count: infinite; animation-name: logo2; height: 65%; top:= + 1px; } + +.LoadingPlatziLogo-left, .LoadingPlatziLogo-right { box-sizing: border-box;= + position: relative; width: 100%; } + +.LoadingPlatziLogo-right { height: 35%; } + +@-webkit-keyframes logo2 {=20 + 0% { width: 100%; } + 20% { width: 80%; } + 50% { width: 80%; } + 70% { width: 100%; } + 100% { width: 100%; } +} + +@keyframes logo2 {=20 + 0% { width: 100%; } + 20% { width: 80%; } + 50% { width: 80%; } + 70% { width: 100%; } + 100% { width: 100%; } +} + +@-webkit-keyframes logo {=20 + 0% { opacity: 0; transform: scale(0.3) rotate(0deg); } + 30% { filter: none; opacity: 1; transform: scale(0.8) rotate(405deg); } + 80% { filter: none; opacity: 1; transform: scale(0.8) rotate(405deg); } + 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } +} + +@keyframes logo {=20 + 0% { opacity: 0; transform: scale(0.3) rotate(0deg); } + 30% { filter: none; opacity: 1; transform: scale(0.8) rotate(405deg); } + 80% { filter: none; opacity: 1; transform: scale(0.8) rotate(405deg); } + 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } +} + +.ExploreButton { -webkit-box-align: center; align-items: center; background= +: transparent; border: none; color: rgb(190, 205, 227); cursor: pointer; fo= +nt-size: 1rem; font-weight: 500; grid-area: categories; line-height: 1.5rem= +; margin-left: 1rem; } + +.ExploreButton svg { margin-left: 0.5rem; } + +.ExploreButton:hover { color: rgb(239, 243, 248); } + +.ExploreButton--explore { display: none; } + +.ExploreButton--item { display: flex; } + +@media only screen and (min-width: 83.125rem) { + .ExploreButton--explore { display: flex; } +} + +.ExploreMenu { background-color: rgba(3, 9, 30, 0.6); inset: 2rem 0px 0px 2= +rem; position: absolute; } + +.ExploreMenu-content { position: fixed; width: fit-content; } + +.ExploreMenu ul { padding: 0px; } + +.ExploreMenu ul li { display: block; list-style-type: none; } + +.ExploreMenu ul li:hover > .ExploreMenu-schools { display: block; } + +.ExploreMenu ul li:hover > a, .ExploreMenu ul li:hover > span { background-= +color: rgb(18, 31, 61); } + +.ExploreMenu ul li:hover > a > .ExploreMenu-hover, .ExploreMenu ul li:hover= + > span > .ExploreMenu-hover { display: block; } + +.ExploreMenu ul li a, .ExploreMenu ul li span { border-radius: 8px; box-siz= +ing: border-box; color: rgb(239, 243, 248); display: block; font-size: 0.87= +5rem; font-weight: 700; line-height: 1.25rem; margin: 0px 1rem; padding: 0.= +75rem 1rem; position: relative; } + +.ExploreMenu ul li a svg, .ExploreMenu ul li span svg { color: rgb(51, 177,= + 255); margin-right: 0.5rem; } + +.ExploreMenu-title { color: rgb(141, 162, 192); font-size: 0.75rem; font-we= +ight: 700; line-height: 1rem; padding: 1.25rem 1rem 1.5rem; text-transform:= + uppercase; } + +.ExploreMenu-title b { color: rgb(99, 122, 157); font-size: 0.75rem; font-w= +eight: 400; line-height: 1rem; } + +.ExploreMenu-categories { border-radius: 12px 0px 0px 12px; position: relat= +ive; } + +.ExploreMenu-categories, .ExploreMenu-schools { background-color: rgb(36, 5= +6, 91); box-sizing: border-box; height: 472px; max-height: 90vh; padding-bo= +ttom: 1rem; width: 323px; } + +.ExploreMenu-schools { background-position: 70px 110px; background-repeat: = +no-repeat; background-size: 570px; border-left: 1px solid rgb(64, 88, 124);= + display: none; left: 100%; position: absolute; top: 0px; } + +.ExploreMenu-schools ul li:hover > .ExploreMenu-routes { display: block; } + +.ExploreMenu-routes { background-color: rgb(18, 31, 61); border-radius: 0px= + 12px 12px 0px; box-sizing: border-box; display: none; height: 472px; left:= + 100%; max-height: 90vh; overflow-y: scroll; padding-bottom: 1rem; position= +: absolute; top: 0px; width: 323px; } + +.ExploreMenu-routes::-webkit-scrollbar { width: 7px; } + +.ExploreMenu-routes::-webkit-scrollbar-track { background: transparent; } + +.ExploreMenu-routes::-webkit-scrollbar-thumb { background-color: rgb(99, 12= +2, 157); border: 2px solid transparent; border-radius: 6px; } + +.ExploreMenu-routes ul li a { -webkit-box-orient: horizontal; -webkit-box-p= +ack: justify; -webkit-box-align: center; align-items: center; box-sizing: b= +order-box; display: flex; flex-direction: row; gap: 0.5rem; justify-content= +: space-between; } + +.ExploreMenu-routes ul li a svg { color: rgb(193, 223, 139); margin-left: 0= +.25rem; } + +.ExploreMenu-routes ul li:hover a { background-color: rgb(36, 56, 91) !impo= +rtant; } + +.ExploreMenu-hover { display: none; position: absolute; right: 0.5rem; top:= + 1rem; color: rgb(141, 162, 192) !important; } + +.ExploreMenu-newRoute { background: rgb(193, 223, 139); border-radius: 4px;= + color: rgb(18, 31, 61); display: inline-flex; font-size: 0.625rem; font-we= +ight: 700; line-height: 0.75rem; padding: 0.25rem 0.5rem; text-transform: u= +ppercase; } + +.NotificationsFooter { -webkit-box-align: center; -webkit-box-pack: justify= +; align-items: center; color: rgb(34, 51, 84); display: flex; font-size: 12= +px; font-weight: 600; justify-content: space-between; line-height: 14px; pa= +dding: 0.5rem 1rem; } + +.NotificationsFooter div { cursor: pointer; } + +.NotificationsFooter a { color: rgb(34, 51, 84); text-decoration: none; } + +.NotificationsFooter a .icon { font-size: 0.5rem; font-weight: 100; margin-= +left: 0.25rem; } + +.LoadingState { margin: 1.5rem 0px; } + +@media only screen and (min-width: 48rem) { + .Notifications:not(.isDropdown) { margin: 0px auto; max-width: 1024px; pa= +dding: 1rem 1.5rem; } +} + +@media only screen and (min-width: 64rem) { + .Notifications:not(.isDropdown) { padding: 1rem 0px; } +} + +.EmptyState { color: rgb(19, 29, 48); font-size: 14px; line-height: 20px; p= +adding: 1.5rem 1rem 1.75rem; text-align: center; } + +.EmptyState-image { margin: 1.5rem 0px; } + +.EmptyState-btns, .EmptyState-btns.is-landing { -webkit-box-orient: vertica= +l; -webkit-box-align: center; align-items: center; display: flex; flex-dire= +ction: column; } + +.EmptyState-btns.is-landing { -webkit-box-pack: center; justify-content: ce= +nter; } + +@media only screen and (min-width: 48rem) { + .EmptyState-btns.is-landing { -webkit-box-orient: horizontal; flex-direct= +ion: row; } + .EmptyState-btns.is-landing .EmptyState-btn { -webkit-box-flex: 1; flex: = +1 1 0%; margin: 0px 0.75rem 0.5rem; } +} + +.EmptyState-container { background-repeat: no-repeat; background-size: 100%= + 100%; height: 175px; margin: 0px auto; position: relative; } + +@media only screen and (min-width: 48rem) { + .EmptyState-container:not(.is-landing) { background-size: cover; } +} + +.EmptyState-astronaut { animation: 4s ease-in-out 0s infinite normal none r= +unning astronaut; left: 0px; position: relative; top: 33px; width: 120px; } + +.EmptyState-pulse div { background: rgb(255, 255, 255); border-radius: 100%= +; height: 6px; opacity: 0; position: relative; transform: scale(0); width: = +6px; } + +.EmptyState-p1 { animation: 3s linear 0s infinite normal none running pulse= +; left: 65px; top: -55px; } + +.EmptyState-p2 { animation: 3s linear 1s infinite normal none running pulse= +; left: 255px; top: -45px; } + +.EmptyState-p3 { animation: 3s linear 2s infinite normal none running pulse= +; left: 115px; top: -5px; } + +.EmptyState p { margin-bottom: 1rem; } + +.EmptyState-btn { border: 1px solid rgb(7, 145, 230); border-radius: 0.25re= +m; color: rgb(7, 145, 230); font-size: 1rem; font-weight: 600; line-height:= + 20px; margin-bottom: 0.5rem; max-width: 320px; padding: 0.5rem; position: = +relative; text-align: center; width: calc(100% - 1rem); } + +@media only screen and (min-width: 64rem) { + .EmptyState-btn:hover { background: rgb(7, 145, 230); color: rgb(255, 255= +, 255); } +} + +.EmptyState-btn a { inset: 0px; position: absolute; } + +@-webkit-keyframes astronaut {=20 + 0% { transform: translateY(0px); } + 50% { transform: translateY(-10px); } + 100% { transform: translateY(0px); } +} + +@keyframes astronaut {=20 + 0% { transform: translateY(0px); } + 50% { transform: translateY(-10px); } + 100% { transform: translateY(0px); } +} + +@-webkit-keyframes pulse {=20 + 0% { opacity: 0; transform: scale(0); } + 5% { filter: none; opacity: 1; } + 20%, 25% { filter: none; opacity: 1; transform: scale(1); } + 33.33%, 100% { opacity: 0; transform: scale(0); } +} + +@keyframes pulse {=20 + 0% { opacity: 0; transform: scale(0); } + 5% { filter: none; opacity: 1; } + 20%, 25% { filter: none; opacity: 1; transform: scale(1); } + 33.33%, 100% { opacity: 0; transform: scale(0); } +} + +.NotificationHeader { border-bottom: 1px solid rgb(217, 223, 230); padding:= + 0.5rem 1rem 12px 0.5rem; position: relative; } + +.NotificationHeader, .NotificationHeader.is-hidden { display: flex; } + +.NotificationHeader.is-hidden { -webkit-box-align: center; align-items: cen= +ter; color: rgb(34, 51, 84); font-size: 14px; line-height: 1.21; min-height= +: 75px; } + +.NotificationHeader.not-read { background: rgba(46, 88, 110, 0.06); } + +@media only screen and (min-width: 64rem) { + .NotificationHeader:hover { background: rgba(46, 88, 110, 0.12); } +} + +.NotificationHeader-tooltip { -webkit-box-align: center; align-items: cente= +r; bottom: -0.5rem; display: flex; position: absolute; right: 1rem; z-index= +: 7; } + +.NotificationHeader-options { background: rgb(255, 255, 255); border-radius= +: 2px; padding: 6px 0px; } + +.NotificationHeader-undo { color: rgb(7, 145, 230); cursor: pointer; } + +.NotificationHeader-option { -webkit-box-align: center; align-items: center= +; color: rgb(34, 51, 84); cursor: pointer; display: flex; font-size: 12px; = +line-height: 1.17; padding: 0.25rem 0.75rem; } + +@media only screen and (min-width: 64rem) { + .NotificationHeader-option:hover { background: rgba(219, 219, 226, 0.5); = +} +} + +.NotificationHeader-icon { font-size: 1rem; margin-right: 0.5rem; } + +.NotificationHeader-hide { font-weight: 700; margin-bottom: 2px; } + +.NotificationHeader-triangle { border-bottom: 0.5rem solid transparent; bor= +der-left: 0.5rem solid rgb(255, 255, 255); border-top: 0.5rem solid transpa= +rent; height: 0px; width: 0px; } + +.NotificationHeader-type { color: rgb(46, 88, 110); flex-shrink: 0; font-si= +ze: 21px; margin-right: 0.5rem; } + +.NotificationHeader-url { inset: 0px; position: absolute; } + +.NotificationHeader-info { -webkit-box-flex: 1; flex: 1 1 0%; position: rel= +ative; } + +.NotificationHeader-avatares { display: flex; } + +.NotificationHeader-avatares figure { border-radius: 50%; height: 24px; mar= +gin-right: 0.25rem; overflow: hidden; width: 24px; } + +.NotificationHeader-avatares figure img { object-fit: cover; } + +.NotificationHeader-title { color: rgb(19, 29, 48); font-size: 14px; line-h= +eight: 17px; margin: 0.25rem 0px 2px; max-width: 250px; } + +.NotificationHeader-subtitle, .NotificationHeader-time { color: rgb(34, 51,= + 84); font-size: 12px; line-height: 14px; } + +.NotificationHeader-time { position: absolute; right: 0px; top: 0px; } + +.NotificationHeader-menu { -webkit-box-pack: end; -webkit-box-align: end; a= +lign-items: flex-end; bottom: 0.5rem; color: rgb(34, 51, 84); cursor: point= +er; display: flex; font-size: 1rem; height: 2rem; justify-content: flex-end= +; position: absolute; right: 0px; width: 2rem; z-index: 2; } + +.TinkerbellLayout { animation: 0.75s ease 0s 1 normal none running fadeMenu= +; } + +@media only screen and (min-width: 48rem) { + .TinkerbellLayout { position: absolute; } +} + +.TinkerbellLayout-triangle { border-bottom: 10px solid rgb(255, 255, 255); = +border-left: 12px solid transparent; border-right: 12px solid transparent; = +height: 0px; width: 0px; } + +.TinkerbellLayout-content { background: rgb(255, 255, 255); left: 0px; posi= +tion: absolute; user-select: none; width: 100vw; } + +@media only screen and (min-width: 48rem) { + .TinkerbellLayout-content { border-radius: 6px; left: unset; max-width: 3= +20px; right: -20px; } +} + +.TinkerbellLayout-top { -webkit-box-align: center; -webkit-box-pack: justif= +y; align-items: center; border-bottom: 1px solid rgb(168, 177, 192); color:= + rgb(19, 29, 48); display: flex; justify-content: space-between; padding: 1= +0px 1rem; } + +.TinkerbellLayout-top a { color: rgb(19, 29, 48); text-decoration: none; } + +.TinkerbellLayout-title { font-size: 14px; line-height: 17px; } + +@-webkit-keyframes fadeMenu {=20 + 0% { opacity: 0; } + 100% { filter: none; opacity: 1; } +} + +@keyframes fadeMenu {=20 + 0% { opacity: 0; } + 100% { filter: none; opacity: 1; } +} + +.ItemsDropdown { background-color: rgb(36, 56, 91); border-radius: 0.75rem;= + color: rgb(239, 243, 248); } + +.ItemsDropdown-list { padding: 1rem !important; } + +.ItemsDropdown-list li.ItemsDropdown-item:hover { background-color: rgb(64,= + 88, 124); border-radius: 0.5rem; } + +.ItemsDropdown-list li.ItemsDropdown-item:hover > a { background-color: rgb= +(64, 88, 124); } + +.ItemsDropdown-list a.ItemsDropdown-link { align-items: center; display: fl= +ex; gap: 0.5rem; margin: 0px; min-width: 12.8rem; padding: 0.5rem 1rem; } + +.ItemsDropdown-list a.ItemsDropdown-link figure { height: 1.4rem; width: 1.= +4rem; } + +.ItemsDropdown-list a.ItemsDropdown-link figure img { max-width: 100%; } + +.Result { -webkit-box-align: center; align-items: center; color: inherit; d= +isplay: flex; padding: 0.5rem; text-decoration: none; } + +.Result__figure { height: 40px; margin-right: 0.75rem; width: 40px; } + +.Result__figure img { height: 100%; object-fit: contain; width: 100%; } + +.Result__content { -webkit-box-flex: 1; flex: 1 1 0%; } + +.Result__title { margin: 0px; } + +.Result__description { color: rgb(135, 144, 157); margin: 0.25rem 0px 0px; = +} + +.SingleCard { -webkit-box-align: center; align-items: center; border-radius= +: 0.75rem; display: flex; margin: 2rem auto 0px; width: 60%; } + +@media only screen and (min-width: 48rem) { + .SingleCard { padding: 1.5rem; } +} + +.SingleCard--lg { width: 70%; } + +.SingleCard-info { padding-right: 1.5rem; width: 50%; } + +.SingleCard-infoContent, .SingleCard-name { display: flex; } + +.SingleCard-name { -webkit-box-align: center; align-items: center; font-siz= +e: 1.25rem; line-height: 1.6; margin-bottom: 1rem; width: 90%; } + +.SingleCard-tag { border-radius: 0.5rem; display: inline-block; font-size: = +0.875rem; font-weight: 700; margin-left: 1rem; padding: 0.25rem 0.5rem; tex= +t-transform: uppercase; } + +.SingleCard-students { font-size: 0.938rem; margin-bottom: 1rem; } + +.SingleCard-benefitsLink { font-size: 0.875rem; } + +.SingleCard-benefitsLinkIcon { margin-right: 0.25rem; } + +.SingleCard-benefitsLinkAction { background: none; border: 0px; cursor: poi= +nter; } + +.SingleCard-pricing { padding-left: 1.5rem; width: 50%; } + +.SingleCard-price { -webkit-box-align: center; align-items: center; display= +: flex; flex-wrap: wrap; margin-bottom: 0.5rem; } + +.SingleCard-priceValue { font-size: 1.25rem; font-weight: 600; line-height:= + 1.4; } + +.SingleCard-priceFrequency { font-size: 1.063rem; font-style: normal; font-= +weight: 400; } + +.SingleCard-flag { border-radius: 50%; height: 1rem; margin-right: 0.5rem; = +object-fit: cover; width: 1rem; } + +.SingleCard-description { font-size: 0.938rem; line-height: 1.5; margin-bot= +tom: 0.75rem; } + +.SingleCard-cta, .SingleCard-description-price { display: inline-block; } + +.SingleCard-cta { font-size: 1rem; font-weight: 700; letter-spacing: 0.06re= +m; margin-top: 0.75rem; text-decoration: none; text-transform: uppercase; } + +.SingleCard--dark { background-color: rgb(18, 31, 61); border: 1px solid rg= +b(64, 88, 124); } + +.SingleCard--dark .SingleCard-info { border-right: 1px solid rgb(64, 88, 12= +4); } + +.SingleCard--dark .SingleCard-name { color: rgb(255, 255, 255); } + +.SingleCard--dark .SingleCard-tag { border: 1px solid rgb(64, 88, 124); col= +or: rgb(190, 205, 227); } + +.SingleCard--dark .SingleCard-students { color: rgb(239, 243, 248); } + +.SingleCard--dark .SingleCard-benefitsLink { color: rgb(190, 205, 227); } + +.SingleCard--dark .SingleCard-benefitsLinkAction { color: rgb(116, 202, 255= +); } + +.SingleCard--dark .SingleCard-benefitsLinkAction:hover { color: rgb(51, 177= +, 255); } + +.SingleCard--dark .SingleCard-priceValue { color: rgb(255, 255, 255); } + +.SingleCard--dark .SingleCard-description, .SingleCard--dark .SingleCard-pr= +iceFrequency { color: rgb(190, 205, 227); } + +.SingleCard--dark .SingleCard-cta { color: rgb(152, 202, 63); } + +.SingleCard--dark .SingleCard-cta:hover { color: rgb(193, 223, 139); } + +.SingleCard--light { background-color: rgb(255, 255, 255); border: 1px soli= +d rgb(217, 223, 230); } + +.SingleCard--light .SingleCard-info { border-right: 1px solid rgb(217, 223,= + 230); } + +.SingleCard--light .SingleCard-name { color: rgb(39, 59, 71); } + +.SingleCard--light .SingleCard-tag { border: 1px solid rgb(217, 223, 230); = +color: rgb(92, 107, 133); } + +.SingleCard--light .SingleCard-benefitsLink, .SingleCard--light .SingleCard= +-students { color: rgb(92, 107, 133); } + +.SingleCard--light .SingleCard-benefitsLinkAction { color: rgb(7, 145, 230)= +; } + +.SingleCard--light .SingleCard-benefitsLinkAction:hover { color: rgb(51, 17= +7, 255); } + +.SingleCard--light .SingleCard-priceValue { color: rgb(39, 59, 71); } + +.SingleCard--light .SingleCard-description, .SingleCard--light .SingleCard-= +priceFrequency { color: rgb(92, 107, 133); } + +.SingleCard--light .SingleCard-cta { color: rgb(119, 166, 30); } + +.SingleCard--light .SingleCard-cta:hover { color: rgb(152, 202, 63); } + +.ExploreMobile-content { display: flex; transition-duration: 0.5s; transiti= +on-timing-function: ease-in-out; } + +.ExploreMobile-categories { -webkit-box-flex: 0; flex-grow: 0; flex-shrink:= + 0; width: 100vw; } + +.ExploreMobile-categories ul { padding: 0px; } + +.ExploreMobile-categories ul li { list-style-type: none; padding: 0px; widt= +h: 100%; } + +.ExploreMobile-categories ul li button { -webkit-box-align: center; -webkit= +-box-pack: justify; align-items: center; background: transparent; border: n= +one; color: rgb(190, 205, 227); cursor: pointer; display: flex; justify-con= +tent: space-between; padding: 0.75rem 1.25rem 0.75rem 2rem; width: 100%; } + +.ExploreMobile-categories ul li button div { font-size: 0.875rem; line-heig= +ht: 20px; } + +.ExploreMobile-categories ul li button svg { margin-right: 0.5rem; } + +.ExploreMobile-categories ul li svg { color: rgb(141, 162, 192); } + +.ExploreMobile-title { -webkit-box-align: center; -webkit-box-pack: justify= +; align-items: center; background: rgb(36, 56, 91); border: none; color: rg= +b(190, 205, 227); cursor: pointer; display: flex; font-size: 0.875rem; just= +ify-content: space-between; line-height: 20px; padding: 0.75rem 1.5rem 0.75= +rem 1.25rem; width: 100%; } + +.ExploreMobile-title div svg { margin-right: 0.5rem; } + +.ExploreMobile-title-itemMultiple { -webkit-box-pack: justify; -webkit-box-= +align: center; align-items: center; display: flex; justify-content: space-b= +etween; width: 92%; } + +.ExploreRoutes { -webkit-box-flex: 0; flex-grow: 0; flex-shrink: 0; height:= + calc(-52px + 100dvh); overflow: hidden auto; width: 100vw; } + +.ExploreRoutes p { color: rgb(99, 122, 157); font-size: 0.75rem; font-weigh= +t: 700; line-height: 1rem; padding: 0.75rem 1rem; text-transform: uppercase= +; } + +.ExploreRoutes ul { padding: 0px; } + +.ExploreRoutes ul li { display: block; padding: 0px; width: 100%; margin-to= +p: 0px !important; } + +.ExploreRoutes ul li a { -webkit-box-align: center; -webkit-box-pack: justi= +fy; align-items: center; display: flex; justify-content: space-between; pad= +ding: 0.75rem 1.25rem 0.75rem 2rem; } + +.ExploreRoutes ul li a div { color: rgb(190, 205, 227); font-size: 0.875rem= +; line-height: 20px; } + +.ExploreRoutes ul li a svg { color: rgb(193, 223, 139); margin-left: 0.25re= +m; } + +.ExploreRoutes-title { -webkit-box-align: center; -webkit-box-pack: justify= +; align-items: center; background: rgb(36, 56, 91); border: none; cursor: p= +ointer; display: flex; justify-content: space-between; padding: 0.75rem 1.2= +5rem; width: 100%; } + +.ExploreRoutes-goToSchool, .ExploreRoutes-title { color: rgb(190, 205, 227)= +; font-size: 0.875rem; line-height: 20px; } + +.ExploreRoutes-goToSchool { display: block; margin-top: 0.75rem; padding: 0= +.5rem 1rem; } + +.ExploreRoutes-newRoute { background: rgb(193, 223, 139); border-radius: 4p= +x; color: rgb(18, 31, 61); display: inline-flex; font-size: 0.625rem; font-= +weight: 700; line-height: 0.75rem; margin-left: 0.5rem; padding: 0.25rem 0.= +5rem; text-transform: uppercase; } + +.ExploreSchools { -webkit-box-flex: 0; flex-grow: 0; flex-shrink: 0; width:= + 100vw; } + +.ExploreSchools ul li { padding: 0px; margin-top: 0px !important; } + +.ExploreSchools ul li button { -webkit-box-align: center; -webkit-box-pack:= + justify; align-items: center; background: transparent; border: none; color= +: rgb(190, 205, 227); cursor: pointer; display: flex; font-size: 0.875rem; = +justify-content: space-between; line-height: 20px; padding: 0.75rem 1.5rem = +0.75rem 1.25rem; width: 100%; } + +.ExploreSchools ul li button svg { color: rgb(141, 162, 192); } + +.ExploreSchools p { color: rgb(99, 122, 157); font-weight: 700; line-height= +: 1rem; padding: 0.75rem 1rem; text-transform: uppercase; } + +.ExploreSchools-title { -webkit-box-align: center; -webkit-box-pack: justif= +y; align-items: center; background: rgb(36, 56, 91); border: none; color: r= +gb(190, 205, 227); cursor: pointer; display: flex; font-size: 0.875rem; jus= +tify-content: space-between; line-height: 20px; padding: 0.75rem 1.5rem 0.7= +5rem 1.25rem; width: 100%; } + +.ExploreSchools-title div svg { margin-right: 0.5rem; } + +.Radio { align-items: center; color: rgb(190, 205, 227); cursor: pointer; d= +isplay: flex; font-size: 0.875rem; letter-spacing: -0.008em; line-height: 1= +.2; overflow: hidden; white-space: nowrap; } + +.Radio-input { appearance: none; background-color: rgb(3, 9, 30); border: 1= +px solid rgb(99, 123, 157); border-radius: 50%; color: rgb(51, 177, 255); c= +ursor: pointer; display: grid; height: 22px; margin-right: 0.5rem; place-co= +ntent: center; width: 22px; } + +.Radio-input::before { background-color: rgb(51, 177, 255); border-radius: = +50%; content: ""; height: 12px; transform: scale(0); transition: transform = +0.12s ease-in-out; width: 12px; } + +.Radio-input:focus { outline: rgb(51, 177, 255) solid 1px; } + +.Radio-input--checked { border: 1px solid rgb(51, 177, 255); } + +.Radio-input--checked::before { transform: scale(1); } + +.SlideRange { align-items: center; column-gap: 1rem; display: grid; grid-te= +mplate-columns: 1fr 1fr; height: 22px; } + +.SlideRange-label { color: rgb(190, 205, 227); font-size: 0.875rem; letter-= +spacing: -0.008em; white-space: nowrap; width: auto; } + +.SlideRange-input { appearance: none; background: linear-gradient(rgb(152, = +202, 63), rgb(152, 202, 63)) 0% 0% / 70% 100% no-repeat rgb(36, 56, 91); bo= +rder-radius: 0.5rem; height: 2px; } + +.SlideRange-input::-webkit-slider-thumb { appearance: none; background: rgb= +(255, 255, 255); border-radius: 50%; cursor: pointer; height: 20px; transit= +ion: background 0.3s ease-in-out; width: 20px; } + +.SlideRange-input::-webkit-slider-runnable-track { appearance: none; backgr= +ound: transparent; border: none; } + +.AllResults a { box-sizing: border-box; color: rgb(141, 162, 192); display:= + block; font-size: 0.75rem; line-height: 1.125rem; margin-bottom: 0.5rem; p= +adding: 0.25rem; } + +.AllResults a svg { margin-right: 0.5rem; } + +.AllResults a:hover { color: rgb(190, 205, 227); } + +.CoursesCardUi { -webkit-box-align: center; -webkit-box-direction: reverse;= + -webkit-box-orient: vertical; align-items: center; background: rgb(18, 31,= + 61); border: 1px solid rgb(36, 56, 91); border-radius: 8px; cursor: pointe= +r; display: flex; flex-direction: column-reverse; padding: 0.75rem; } + +.CoursesCardUi:hover { background: rgb(36, 56, 91); } + +.CoursesCardUi-preview { -webkit-box-align: center; align-items: center; di= +splay: flex; margin-top: 1rem; width: 100%; } + +.CoursesCardUi-preview-image { border-radius: 4px; height: 56px; margin-rig= +ht: 1.25rem; position: relative; width: 100px; } + +.CoursesCardUi-preview-image-thumbnail { position: relative; } + +.CoursesCardUi-preview-image-play { -webkit-box-pack: center; background: r= +gba(3, 9, 30, 0.7); border-radius: 8px; color: rgb(255, 255, 255); display:= + flex; font-size: 0.5625rem; height: 20px; justify-content: center; left: 4= +5%; top: 30%; width: 20px; } + +.CoursesCardUi-preview-image-play, .CoursesCardUi-preview-image-time { -web= +kit-box-align: center; align-items: center; position: absolute; } + +.CoursesCardUi-preview-image-time { background: rgba(18, 31, 61, 0.7); bord= +er-radius: 4px; bottom: 2px; color: rgb(239, 243, 248); display: none; font= +-size: 0.685rem; font-weight: 700; padding: 0.25rem; right: 2px; } + +.CoursesCardUi-preview-image-time p { margin-left: 0.5rem; } + +.CoursesCardUi-preview-image-time svg { font-size: 0.585rem; } + +.CoursesCardUi-preview-image img { border-radius: 4px; height: 56px; object= +-fit: contain; width: 100px; } + +.CoursesCardUi-preview-class { -webkit-line-clamp: 3; -webkit-box-orient: v= +ertical; color: rgb(190, 205, 227); display: -webkit-box; font-size: 1rem; = +line-height: 20px; overflow: hidden; text-overflow: ellipsis; } + +.CoursesCardUi-title { display: flex; } + +.CoursesCardUi-title-cont { width: 100%; } + +.CoursesCardUi-title p { -webkit-line-clamp: 2; -webkit-box-orient: vertica= +l; color: rgb(255, 255, 255); display: -webkit-box; font-size: 1rem; overfl= +ow: hidden; text-overflow: ellipsis; } + +.CoursesCardUi-title img { height: 24px; margin-right: 0.5rem; width: 24px;= + } + +.CoursesCardUi-description { color: rgb(190, 205, 227); display: none; font= +-size: 1rem; line-height: 22px; margin: 0.75rem 0px; } + +.CoursesCardUi-teacher { color: rgb(141, 162, 192); display: none; font-siz= +e: 1rem; } + +.SchoolCardUiCont { -webkit-box-pack: justify; -webkit-box-align: center; a= +lign-items: center; background: rgb(18, 31, 61); border: 1px solid rgb(36, = +56, 91); border-radius: 8px; display: flex; justify-content: space-between;= + padding: 0.5rem; } + +.SchoolCardUiCont:hover { background: rgb(36, 56, 91); } + +.SchoolCardUiCont-title { -webkit-box-align: center; align-items: center; d= +isplay: flex; gap: 8px; } + +.SchoolCardUiCont-title-badge { background: rgb(36, 56, 91); border-radius:= + 6px; color: rgb(190, 205, 227); font-size: 0.875rem; padding: 2px 8px; } + +.SchoolCardUiCont-title img { height: 28px; width: 28px; } + +.SchoolCardUiCont-title p { color: rgb(255, 255, 255); font-size: 1rem; } + +.SchoolCardUiCont button { background: transparent; font-size: 1rem; font-w= +eight: 400; text-transform: none; border: none !important; } + +.LearningPathCard-link { cursor: pointer; } + +.LearningPathCard-container { display: flex; } + +.LearningPathCard-badges { width: 100%; } + +.LearningPathCard-badges, .LearningPathCard-badges-block { -webkit-box-alig= +n: center; align-items: center; display: flex; } + +.LearningPathCard-badges-block { -webkit-box-pack: center; justify-content:= + center; } + +.LearningPathCard-badges-block img { height: 24px; width: 24px; } + +.LearningPathCard-badges p { color: rgb(190, 205, 227); font-size: 0.875rem= +; margin-left: 0.75rem; } + +.LearningPathCard-cont { background: rgb(18, 31, 61); border: 1px solid rgb= +(36, 56, 91); border-radius: 8px; padding: 0.75rem; width: 100%; } + +.LearningPathCard-cont:hover { background: rgb(36, 56, 91); } + +.LearningPathCard-cont-header { -webkit-box-pack: justify; -webkit-box-alig= +n: center; align-items: center; justify-content: space-between; width: 100%= +; } + +.LearningPathCard-cont-header, .LearningPathCard-cont-header-icons { displa= +y: flex; } + +.LearningPathCard-cont-header-icons { -webkit-box-align: start; align-items= +: flex-start; color: rgb(141, 162, 192); } + +.LearningPathCard-cont-header-icons svg { margin: 0px 7px; } + +.LearningPathCard-cont-title { -webkit-box-orient: vertical; display: flex;= + flex-direction: column; margin: 0px 0px 0.75rem; } + +.LearningPathCard-cont-title-head { color: rgb(255, 255, 255); font-size: 1= +.125rem; } + +.LearningPathCard-cont-title-text { color: rgb(141, 162, 192); font-size: 0= +.875rem; margin-top: 0.25rem; } + +.LearningPathCard-cont-title-description { color: rgb(190, 205, 227); displ= +ay: none; font-size: 1rem; line-height: 22px; margin-top: 1rem; } + +.LearningPathCard-cont-content { background: rgb(36, 56, 91); border-radius= +: 12px; margin: 1rem 0px; overflow: hidden; padding: 0.25rem 0px; } + +.LearningPathCard-cont-content-course { -webkit-box-pack: justify; -webkit-= +box-align: center; align-items: center; background: rgb(36, 56, 91); color:= + rgb(255, 255, 255); cursor: pointer; display: flex; font-size: 1rem; justi= +fy-content: space-between; padding: 0.5rem 0.75rem; } + +.LearningPathCard-cont-content-course-hours { color: rgb(190, 205, 227); } + +.LearningPathCard-cont-content-course div { -webkit-box-align: center; alig= +n-items: center; display: flex; } + +.LearningPathCard-cont-content-course div img { height: 24px; width: 24px; = +} + +.LearningPathCard-cont-content-course p { margin-left: 0.75rem; } + +.LearningPathCard-cont-continue { background: transparent; border: 1px soli= +d rgb(51, 177, 255); color: rgb(51, 177, 255); font-size: 0.875rem; padding= +: 6px 12px; } + +.TagsSearch { display: flex; flex-wrap: wrap; gap: 0.5rem; overflow: auto; = +position: relative; scrollbar-width: none; white-space: nowrap; } + +.TagsSearch::-webkit-scrollbar { display: none; } + +.TagsSearch div { box-sizing: border-box; font-size: 0.75rem !important; he= +ight: 1.25rem !important; } + +.TagsSearch__LevelIcon__Advanced :first-child, .TagsSearch__LevelIcon__Adva= +nced :nth-child(2), .TagsSearch__LevelIcon__Advanced :nth-child(3), .TagsSe= +arch__LevelIcon__Basic :first-child, .TagsSearch__LevelIcon__Mid :first-chi= +ld, .TagsSearch__LevelIcon__Mid :nth-child(3) { fill: rgb(255, 255, 255) !i= +mportant; } + +.TagSearch { display: inline-flex; font-family: var(--main-font,IBM Plex Sa= +ns); gap: 0.25rem; } + +.TagSearch, .TagSearch__iconWrapper svg { -webkit-box-align: center; align-= +items: center; } + +.TagSearch__iconWrapper svg { display: flex; transform: scale(1.3); } + +.TagSearch__sm { border-radius: 0.25rem; font-family: "IBM Plex Sans"; font= +-size: 0.75rem; font-weight: 400; letter-spacing: 0.019rem; line-height: 1.= +125rem; padding: 0.125rem 0.25rem; } + +.TagSearch__md { font-size: 0.875rem; letter-spacing: 0.019rem; line-height= +: 1.25rem; } + +.TagSearch__lg, .TagSearch__md { border-radius: 0.375rem; font-family: "IBM= + Plex Sans"; font-weight: 400; padding: 0.125rem 0.5rem; } + +.TagSearch__lg { font-size: 1rem; letter-spacing: 0.013rem; line-height: 1.= +5rem; } + +.TagSearch__neutral { border: 0.063rem solid rgba(255, 255, 255, 0.2); colo= +r: rgb(196, 200, 206); } + +.TagSearch__neutral .TagSearch__suffix { color: rgb(108, 118, 131); } + +.TagSearch__neutral .TagSearch__iconWrapper svg path { fill: rgb(108, 118, = +131); } + +.TagSearch__primary { border: 0.063rem solid rgb(1, 90, 50); color: rgb(10,= + 233, 138); } + +.TagSearch__primary .TagSearch__suffix { color: rgb(2, 112, 64); } + +.TagSearch__primary .TagSearch__iconWrapper svg path { fill: rgb(2, 112, 64= +); } + +.TagSearch__danger, .TagSearch__error, .TagSearch__failure { border: 0.063r= +em solid rgb(143, 40, 61); color: rgb(255, 194, 206); } + +.TagSearch__danger .TagSearch__suffix, .TagSearch__error .TagSearch__suffix= +, .TagSearch__failure .TagSearch__suffix { color: rgb(255, 71, 108); } + +.TagSearch__danger .TagSearch__iconWrapper svg path, .TagSearch__error .Tag= +Search__iconWrapper svg path, .TagSearch__failure .TagSearch__iconWrapper s= +vg path { fill: rgb(255, 71, 108); } + +.RadioButton-module_RadioButton__hGf7I { align-items: center; background-co= +lor: transparent; border: none; color: inherit; cursor: pointer; display: f= +lex; font: inherit; gap: 0.5rem; padding: 0px; } + +.RadioButton-module_RadioButton__item__EUp4w { background-color: rgb(255, 2= +55, 255); border: 0px; border-radius: 50%; height: 20px; width: 20px; } + +.RadioButton-module_RadioButton__item__EUp4w[data-state=3D"unchecked"] { ba= +ckground-color: rgba(0, 0, 0, 0.3); border: 1px solid rgb(64, 70, 80); } + +.RadioButton-module_RadioButton__item__EUp4w[data-state=3D"checked"] ~ .Rad= +ioButton-module_RadioButton__label__tTz8- { color: rgb(255, 255, 255); } + +.RadioButton-module_RadioButton__indicator__QthR6 { align-items: center; di= +splay: flex; height: 100%; justify-content: center; position: relative; wid= +th: 100%; } + +.RadioButton-module_RadioButton__indicator__QthR6::after { background-color= +: rgb(19, 22, 28); border-radius: 50%; content: ""; display: block; height:= + 12px; width: 12px; } + +.RadioButton-module_RadioButton__label__tTz8- { color: rgb(135, 144, 157); = +font-size: 0.875rem; font-weight: 400; letter-spacing: 0.019rem; text-decor= +ation: none; text-transform: none; } + +.ButtonLayout-module_ButtonLayout__eaqR3 { align-items: center; border-radi= +us: 0.5rem; border-style: solid; border-width: 1px 0px; box-sizing: border-= +box; display: flex; gap: 0.5rem; justify-content: center; } + +.ButtonLayout-module_ButtonLayout__eaqR3 svg { height: 100%; width: 100%; } + +.ButtonLayout-module_ButtonLayout--md__llltG .ButtonLayout-module_ButtonLay= +out__Icon__AaDMh, .ButtonLayout-module_ButtonLayout--sm__hFh7H .ButtonLayou= +t-module_ButtonLayout__Icon__AaDMh { height: 1.125rem; width: 1.125rem; } + +.ButtonLayout-module_ButtonLayout--lg__hMo4J .ButtonLayout-module_ButtonLay= +out__Icon__AaDMh { height: 1.25rem; width: 1.25rem; } + +.ButtonLayout-module_ButtonLayout--basic--sm__Y--Zl { padding: 0.5rem 0.75r= +em; } + +.ButtonLayout-module_ButtonLayout--basic--md__AAMZG { padding: 0.75rem; } + +.ButtonLayout-module_ButtonLayout--basic--lg__iC-SF { padding: 0.875rem 1re= +m; } + +.ButtonLayout-module_ButtonLayout--basic--withIconLeft--sm__DggSs { padding= +: 0.5rem 1rem 0.5rem 0.75rem; } + +.ButtonLayout-module_ButtonLayout--basic--withIconLeft--md__BdPyU { padding= +: 0.75rem 1rem 0.75rem 0.75rem; } + +.ButtonLayout-module_ButtonLayout--basic--withIconLeft--lg__47Jv5 { padding= +: 0.875rem 1.25rem 0.875rem 1rem; } + +.ButtonLayout-module_ButtonLayout--basic--withIconRight--sm__LQdKe { paddin= +g: 0.5rem 0.75rem 0.5rem 1rem; } + +.ButtonLayout-module_ButtonLayout--basic--withIconRight--md__4hchp { paddin= +g: 0.75rem 0.75rem 0.75rem 1rem; } + +.ButtonLayout-module_ButtonLayout--basic--withIconRight--lg__ouQYY { paddin= +g: 0.875rem 1rem 0.875rem 1.25rem; } + +.ButtonLayout-module_ButtonLayout--icon--sm__n7Jmp { padding: 0.5625rem; } + +.ButtonLayout-module_ButtonLayout--icon--md__irIk3 { padding: 0.8125rem; } + +.ButtonLayout-module_ButtonLayout--icon--lg__XhuXR { padding: 1rem; } + +.Button-module_Button__uBoYP { border-color: transparent; cursor: pointer; = +font-family: var(--main-font,"IBM Plex Sans"); transition: 0.2s ease-in-out= +; } + +.Button-module_Button--md__BDDyh, .Button-module_Button--sm__kiOL- { font-s= +ize: 0.875rem; font-weight: 500; letter-spacing: 0.16px; line-height: 1.25r= +em; text-decoration: none; text-transform: none; } + +.Button-module_Button--lg__Q-wdL { font-size: 1rem; font-weight: 500; lette= +r-spacing: 0.16px; line-height: 1.5rem; text-decoration: none; text-transfo= +rm: none; } + +.Button-module_Button--primary__JykeJ { --button-bg-color: var(--button-pri= +mary-bg-color,#0ae98a); --button-bg-color-active: var(--button-primary-bg-c= +olor-active,#05a460); --button-bg-color-disabled: var(--button-primary-bg-c= +olor-disabled,hsla(0,0%,100%,0.05)); --button-bg-color-hover: var(--button-= +primary-bg-color-hover,#07c373); --button-border-top-color: var(--button-pr= +imary-border-top-color,hsla(0,0%,100%,0.5)); --button-color: var(--button-p= +rimary-color,#13161c); --button-color-disabled: var(--button-primary-color-= +disabled,#6c7583); --button-outline-color-focus: var(--button-primary-outli= +ne-color-focus,#0ae98a); --button-inset-color: var(--button-primary-inset-c= +olor,#13161c); background-color: var(--button-bg-color); border-bottom-colo= +r: transparent; border-top-color: var(--button-border-top-color); color: va= +r(--button-color); } + +.Button-module_Button--primary__JykeJ:hover { --button-bg-color: var(--butt= +on-bg-color-hover); } + +.Button-module_Button--primary__JykeJ:active { --button-bg-color: var(--but= +ton-bg-color-active); --button-border-top-color: var(--button-bg-color-acti= +ve); } + +.Button-module_Button--primary__JykeJ:focus { --button-bg-color: var(--butt= +on-bg-color-hover); --button-border-top-color: var(--button-inset-color); b= +order-bottom-color: var(--button-inset-color); box-shadow: inset 0 0 0 2px = +var(--button-inset-color),inset 3px 0 0 0 var(--button-inset-color),inset -= +3px 0 0 0 var(--button-inset-color); outline: 1px solid var(--button-outlin= +e-color-focus); } + +.Button-module_Button--primary__JykeJ:disabled { --button-bg-color: var(--b= +utton-bg-color-disabled); --button-border-top-color: transparent; --button-= +color: var(--button-color-disabled); cursor: not-allowed; } + +.Button-module_Button--primary__JykeJ svg { fill: currentcolor; color: var(= +--button-color); } + +.Button-module_Button--primary__JykeJ svg circle, .Button-module_Button--pr= +imary__JykeJ svg path { fill: currentcolor; } + +.Button-module_Button--secondary__GXtjl { --button-bg-color: var(--button-s= +econdary-bg-color,#fff); --button-bg-color-active: var(--button-secondary-b= +g-color-active,#c4c8ce); --button-bg-color-disabled: var(--button-secondary= +-bg-color-disabled,hsla(0,0%,100%,0.05)); --button-bg-color-hover: var(--bu= +tton-secondary-bg-color-hover,#dee1e4); --button-border-top-color: var(--bu= +tton-secondary-border-top-color,#fff); --button-color: var(--button-seconda= +ry-color,#13161c); --button-color-disabled: var(--button-secondary-color-di= +sabled,#6c7583); --button-outline-color-focus: var(--button-secondary-outli= +ne-color-focus,#0ae98a); --button-inset-color: var(--button-secondary-inset= +-color,#13161c); background-color: var(--button-bg-color); border-bottom-co= +lor: transparent; border-top-color: var(--button-border-top-color); color: = +var(--button-color); } + +.Button-module_Button--secondary__GXtjl:hover { --button-bg-color: var(--bu= +tton-bg-color-hover); } + +.Button-module_Button--secondary__GXtjl:active { --button-bg-color: var(--b= +utton-bg-color-active); --button-border-top-color: var(--button-bg-color-ac= +tive); } + +.Button-module_Button--secondary__GXtjl:focus { --button-bg-color: var(--bu= +tton-bg-color-hover); --button-border-top-color: var(--button-inset-color);= + border-bottom-color: var(--button-inset-color); box-shadow: inset 0 0 0 2p= +x var(--button-inset-color),inset 3px 0 0 0 var(--button-inset-color),inset= + -3px 0 0 0 var(--button-inset-color); outline: 1px solid var(--button-outl= +ine-color-focus); } + +.Button-module_Button--secondary__GXtjl:disabled { --button-bg-color: var(-= +-button-bg-color-disabled); --button-border-top-color: transparent; --butto= +n-color: var(--button-color-disabled); cursor: not-allowed; } + +.Button-module_Button--secondary__GXtjl svg { fill: currentcolor; color: va= +r(--button-color); } + +.Button-module_Button--secondary__GXtjl svg circle, .Button-module_Button--= +secondary__GXtjl svg path { fill: currentcolor; } + +.Button-module_Button--secondary-inverse__M2bfM { --button-bg-color: var(--= +button-secondary-inverse-bg-color,#2d323a); --button-bg-color-active: var(-= +-button-secondary-inverse-bg-color-active,#13161c); --button-bg-color-disab= +led: var(--button-secondary-inverse-bg-color-disabled,#1e2229); --button-bg= +-color-hover: var(--button-secondary-inverse-bg-color-hover,#1e2229); --but= +ton-border-top-color: var(--button-secondary-inverse-border-top-color,#2d32= +3a); --button-color: var(--button-secondary-inverse-color,#fff); --button-c= +olor-disabled: var(--button-secondary-inverse-color-disabled,#6c7583); --bu= +tton-outline-color-focus: var(--button-secondary-inverse-outline-color-focu= +s,#1e2229); --button-inset-color: var(--button-secondary-inverse-inset-colo= +r,#13161c); background-color: var(--button-bg-color); border-bottom-color: = +transparent; border-top-color: var(--button-border-top-color); color: var(-= +-button-color); } + +.Button-module_Button--secondary-inverse__M2bfM:hover { --button-bg-color: = +var(--button-bg-color-hover); } + +.Button-module_Button--secondary-inverse__M2bfM:active { --button-bg-color:= + var(--button-bg-color-active); --button-border-top-color: var(--button-bg-= +color-active); } + +.Button-module_Button--secondary-inverse__M2bfM:focus { --button-bg-color: = +var(--button-bg-color-hover); --button-border-top-color: var(--button-inset= +-color); border-bottom-color: var(--button-inset-color); box-shadow: inset = +0 0 0 2px var(--button-inset-color),inset 3px 0 0 0 var(--button-inset-colo= +r),inset -3px 0 0 0 var(--button-inset-color); outline: 1px solid var(--but= +ton-outline-color-focus); } + +.Button-module_Button--secondary-inverse__M2bfM:disabled { --button-bg-colo= +r: var(--button-bg-color-disabled); --button-border-top-color: transparent;= + --button-color: var(--button-color-disabled); cursor: not-allowed; } + +.Button-module_Button--secondary-inverse__M2bfM svg { fill: currentcolor; c= +olor: var(--button-color); } + +.Button-module_Button--secondary-inverse__M2bfM svg circle, .Button-module_= +Button--secondary-inverse__M2bfM svg path { fill: currentcolor; } + +.Button-module_Button--tertiary__-Fwk4 { --button-bg-color: var(--button-te= +rtiary-bg-color,#404650); --button-bg-color-active: var(--button-tertiary-b= +g-color-active,#2d323a); --button-bg-color-disabled: var(--button-tertiary-= +bg-color-disabled,hsla(0,0%,100%,0.05)); --button-bg-color-hover: var(--but= +ton-tertiary-bg-color-hover,#383e48); --button-border-top-color: var(--butt= +on-tertiary-border-top-color,hsla(0,0%,100%,0.1)); --button-color: var(--bu= +tton-tertiary-color,#fff); --button-color-disabled: var(--button-tertiary-c= +olor-disabled,#6c7583); --button-outline-color-focus: var(--button-tertiary= +-outline-color-focus,#0ae98a); --button-inset-color: var(--button-tertiary-= +inset-color,#13161c); background-color: var(--button-bg-color); border-bott= +om-color: transparent; border-top-color: var(--button-border-top-color); co= +lor: var(--button-color); } + +.Button-module_Button--tertiary__-Fwk4:hover { --button-bg-color: var(--but= +ton-bg-color-hover); } + +.Button-module_Button--tertiary__-Fwk4:active { --button-bg-color: var(--bu= +tton-bg-color-active); --button-border-top-color: var(--button-bg-color-act= +ive); } + +.Button-module_Button--tertiary__-Fwk4:focus { --button-bg-color: var(--but= +ton-bg-color-hover); --button-border-top-color: var(--button-inset-color); = +border-bottom-color: var(--button-inset-color); box-shadow: inset 0 0 0 2px= + var(--button-inset-color),inset 3px 0 0 0 var(--button-inset-color),inset = +-3px 0 0 0 var(--button-inset-color); outline: 1px solid var(--button-outli= +ne-color-focus); } + +.Button-module_Button--tertiary__-Fwk4:disabled { --button-bg-color: var(--= +button-bg-color-disabled); --button-border-top-color: transparent; --button= +-color: var(--button-color-disabled); cursor: not-allowed; } + +.Button-module_Button--tertiary__-Fwk4 svg { fill: currentcolor; color: var= +(--button-color); } + +.Button-module_Button--tertiary__-Fwk4 svg circle, .Button-module_Button--t= +ertiary__-Fwk4 svg path { fill: currentcolor; } + +.Button-module_Button--subtle__ZnkfB { --button-bg-color: var(--button-subt= +le-bg-color,hsla(0,0%,100%,0.05)); --button-bg-color-active: var(--button-s= +ubtle-bg-color-active,hsla(0,0%,100%,0.1)); --button-bg-color-disabled: var= +(--button-subtle-bg-color-disabled,hsla(0,0%,100%,0.1)); --button-bg-color-= +hover: var(--button-subtle-bg-color-hover,hsla(0,0%,100%,0.12)); --button-b= +order-top-color: var(--button-subtle-border-top-color,transparent); --butto= +n-color: var(--button-subtle-color,#fff); --button-color-disabled: var(--bu= +tton-subtle-color-disabled,#6c7583); --button-outline-color-focus: var(--bu= +tton-subtle-outline-color-focus,#0ae98a); --button-inset-color: var(--butto= +n-subtle-inset-color,#13161c); background-color: var(--button-bg-color); bo= +rder-bottom-color: transparent; border-top-color: var(--button-border-top-c= +olor); color: var(--button-color); } + +.Button-module_Button--subtle__ZnkfB:hover { --button-bg-color: var(--butto= +n-bg-color-hover); } + +.Button-module_Button--subtle__ZnkfB:active { --button-bg-color: var(--butt= +on-bg-color-active); --button-border-top-color: var(--button-bg-color-activ= +e); } + +.Button-module_Button--subtle__ZnkfB:focus { --button-bg-color: var(--butto= +n-bg-color-hover); --button-border-top-color: var(--button-inset-color); bo= +rder-bottom-color: var(--button-inset-color); box-shadow: inset 0 0 0 2px v= +ar(--button-inset-color),inset 3px 0 0 0 var(--button-inset-color),inset -3= +px 0 0 0 var(--button-inset-color); outline: 1px solid var(--button-outline= +-color-focus); } + +.Button-module_Button--subtle__ZnkfB:disabled { --button-bg-color: var(--bu= +tton-bg-color-disabled); --button-border-top-color: transparent; --button-c= +olor: var(--button-color-disabled); cursor: not-allowed; } + +.Button-module_Button--subtle__ZnkfB svg { fill: currentcolor; color: var(-= +-button-color); } + +.Button-module_Button--subtle__ZnkfB svg circle, .Button-module_Button--sub= +tle__ZnkfB svg path { fill: currentcolor; } + +.Button-module_Button--outline__EzobK { --button-bg-color: var(--button-out= +line-bg-color,transparent); --button-bg-color-active: var(--button-outline-= +bg-color-active,transparent); --button-bg-color-disabled: var(--button-outl= +ine-bg-color-disabled,transparent); --button-bg-color-hover: var(--button-o= +utline-bg-color-hover,transparent); --button-border-top-color: var(--button= +-outline-border-top-color,transparent); --button-color: var(--button-outlin= +e-color,#fff); --button-color-disabled: var(--button-outline-color-disabled= +,#6c7583); --button-outline-color-focus: var(--button-outline-outline-color= +-focus,none); --button-inset-color: var(--button-outline-inset-color,transp= +arent); --button-border-width: var(--button-outline-border-width,1px); --bu= +tton-border-style: var(--button-outline-border-style,solid); --button-borde= +r-color: var(--button-outline-border-color,hsla(0,0%,100%,0.5)); --button-b= +order-color-hover: var(--button-outline-border-color-hover,#404650); --butt= +on-border-color-focus: var(--button-outline-border-color-focus,#0ae98a); --= +button-border-color-active: var(--button-outline-border-color-active,#2d323= +a); --button-border-color-disabled: var(--button-outline-border-color-disab= +led,#2d323a); background-color: var(--button-bg-color); border: var(--butto= +n-border-width) var(--button-border-style) var(--button-border-color); colo= +r: var(--button-color); } + +.Button-module_Button--outline__EzobK:hover { --button-bg-color: var(--butt= +on-bg-color-hover); } + +.Button-module_Button--outline__EzobK:active { --button-bg-color: var(--but= +ton-bg-color-active); --button-border-top-color: var(--button-bg-color-acti= +ve); } + +.Button-module_Button--outline__EzobK:focus { --button-bg-color: var(--butt= +on-bg-color-hover); --button-border-top-color: var(--button-inset-color); b= +order-bottom-color: var(--button-inset-color); box-shadow: inset 0 0 0 2px = +var(--button-inset-color),inset 3px 0 0 0 var(--button-inset-color),inset -= +3px 0 0 0 var(--button-inset-color); outline: 1px solid var(--button-outlin= +e-color-focus); } + +.Button-module_Button--outline__EzobK:disabled { --button-bg-color: var(--b= +utton-bg-color-disabled); --button-border-top-color: transparent; --button-= +color: var(--button-color-disabled); cursor: not-allowed; } + +.Button-module_Button--outline__EzobK svg { fill: currentcolor; color: var(= +--button-color); } + +.Button-module_Button--outline__EzobK svg circle, .Button-module_Button--ou= +tline__EzobK svg path { fill: currentcolor; } + +.Button-module_Button--outline__EzobK:hover { border-color: var(--button-bo= +rder-color-hover); } + +.Button-module_Button--outline__EzobK:active { border-color: var(--button-b= +order-color-active); } + +.Button-module_Button--outline__EzobK:focus { border-color: var(--button-bo= +rder-color-focus); } + +.Button-module_Button--outline__EzobK:disabled { border-color: var(--button= +-border-color-disabled); } + +.Button-module_Button--outline-inverse__ZH4-5 { --button-bg-color: var(--bu= +tton-outline-inverse-bg-color,transparent); --button-bg-color-active: var(-= +-button-outline-inverse-bg-color-active,transparent); --button-bg-color-dis= +abled: var(--button-outline-inverse-bg-color-disabled,transparent); --butto= +n-bg-color-hover: var(--button-outline-inverse-bg-color-hover,transparent);= + --button-border-top-color: var(--button-outline-inverse-border-top-color,t= +ransparent); --button-color: var(--button-outline-inverse-color,#13161c); -= +-button-color-disabled: var(--button-outline-inverse-color-disabled,#6c7583= +); --button-outline-color-focus: var(--button-outline-inverse-outline-color= +-focus,none); --button-inset-color: var(--button-outline-inverse-inset-colo= +r,transparent); --button-border-width: var(--button-outline-inverse-border-= +width,1px); --button-border-style: var(--button-outline-inverse-border-styl= +e,solid); --button-border-color: var(--button-outline-inverse-border-color,= +#2d323a); --button-border-color-hover: var(--button-outline-inverse-border-= +color-hover,rgba(0,0,0,0.5)); --button-border-color-focus: var(--button-out= +line-inverse-border-color-focus,#03864e); --button-border-color-active: var= +(--button-outline-inverse-border-color-active,rgba(0,0,0,0.5)); --button-bo= +rder-color-disabled: var(--button-outline-inverse-border-color-disabled,rgb= +a(0,0,0,0.5)); background-color: var(--button-bg-color); border: var(--butt= +on-border-width) var(--button-border-style) var(--button-border-color); col= +or: var(--button-color); } + +.Button-module_Button--outline-inverse__ZH4-5:hover { --button-bg-color: va= +r(--button-bg-color-hover); } + +.Button-module_Button--outline-inverse__ZH4-5:active { --button-bg-color: v= +ar(--button-bg-color-active); --button-border-top-color: var(--button-bg-co= +lor-active); } + +.Button-module_Button--outline-inverse__ZH4-5:focus { --button-bg-color: va= +r(--button-bg-color-hover); --button-border-top-color: var(--button-inset-c= +olor); border-bottom-color: var(--button-inset-color); box-shadow: inset 0 = +0 0 2px var(--button-inset-color),inset 3px 0 0 0 var(--button-inset-color)= +,inset -3px 0 0 0 var(--button-inset-color); outline: 1px solid var(--butto= +n-outline-color-focus); } + +.Button-module_Button--outline-inverse__ZH4-5:disabled { --button-bg-color:= + var(--button-bg-color-disabled); --button-border-top-color: transparent; -= +-button-color: var(--button-color-disabled); cursor: not-allowed; } + +.Button-module_Button--outline-inverse__ZH4-5 svg { fill: currentcolor; col= +or: var(--button-color); } + +.Button-module_Button--outline-inverse__ZH4-5 svg circle, .Button-module_Bu= +tton--outline-inverse__ZH4-5 svg path { fill: currentcolor; } + +.Button-module_Button--outline-inverse__ZH4-5:hover { border-color: var(--b= +utton-border-color-hover); } + +.Button-module_Button--outline-inverse__ZH4-5:active { border-color: var(--= +button-border-color-active); } + +.Button-module_Button--outline-inverse__ZH4-5:focus { border-color: var(--b= +utton-border-color-focus); } + +.Button-module_Button--outline-inverse__ZH4-5:disabled { border-color: var(= +--button-border-color-disabled); } + +.Button-module_Button--ghost__F8JSX { --button-bg-color: var(--button-ghost= +-bg-color,transparent); --button-bg-color-active: var(--button-ghost-bg-col= +or-active,transparent); --button-bg-color-disabled: var(--button-ghost-bg-c= +olor-disabled,transparent); --button-bg-color-hover: var(--button-ghost-bg-= +color-hover,transparent); --button-border-top-color: var(--button-ghost-bor= +der-top-color,transparent); --button-color: var(--button-ghost-color,#fff);= + --button-color-disabled: var(--button-ghost-color-disabled,#6c7583); --but= +ton-outline-color-focus: var(--button-ghost-outline-color-focus,none); --bu= +tton-inset-color: var(--button-ghost-inset-color,transparent); background-c= +olor: var(--button-bg-color); border-bottom-color: transparent; border-top-= +color: var(--button-border-top-color); color: var(--button-color); } + +.Button-module_Button--ghost__F8JSX:hover { --button-bg-color: var(--button= +-bg-color-hover); } + +.Button-module_Button--ghost__F8JSX:active { --button-bg-color: var(--butto= +n-bg-color-active); --button-border-top-color: var(--button-bg-color-active= +); } + +.Button-module_Button--ghost__F8JSX:focus { --button-bg-color: var(--button= +-bg-color-hover); --button-border-top-color: var(--button-inset-color); bor= +der-bottom-color: var(--button-inset-color); box-shadow: inset 0 0 0 2px va= +r(--button-inset-color),inset 3px 0 0 0 var(--button-inset-color),inset -3p= +x 0 0 0 var(--button-inset-color); outline: 1px solid var(--button-outline-= +color-focus); } + +.Button-module_Button--ghost__F8JSX:disabled { --button-bg-color: var(--but= +ton-bg-color-disabled); --button-border-top-color: transparent; --button-co= +lor: var(--button-color-disabled); cursor: not-allowed; } + +.Button-module_Button--ghost__F8JSX svg { fill: currentcolor; color: var(--= +button-color); } + +.Button-module_Button--ghost__F8JSX svg circle, .Button-module_Button--ghos= +t__F8JSX svg path { fill: currentcolor; } + +.Button-module_Button--destroy__B8gsD { --button-bg-color: var(--button-des= +troy-bg-color,#cc2949); --button-bg-color-active: var(--button-destroy-bg-c= +olor-active,#8f283d); --button-bg-color-disabled: var(--button-destroy-bg-c= +olor-disabled,hsla(0,0%,100%,0.05)); --button-bg-color-hover: var(--button-= +destroy-bg-color-hover,#b22440); --button-border-top-color: var(--button-de= +stroy-border-top-color,hsla(0,0%,100%,0.2)); --button-color: var(--button-d= +estroy-color,#fff); --button-color-disabled: var(--button-destroy-color-dis= +abled,#6c7583); --button-outline-color-focus: var(--button-destroy-outline-= +color-focus,#0ae98a); --button-inset-color: var(--button-destroy-inset-colo= +r,#13161c); background-color: var(--button-bg-color); border-bottom-color: = +transparent; border-top-color: var(--button-border-top-color); color: var(-= +-button-color); } + +.Button-module_Button--destroy__B8gsD:hover { --button-bg-color: var(--butt= +on-bg-color-hover); } + +.Button-module_Button--destroy__B8gsD:active { --button-bg-color: var(--but= +ton-bg-color-active); --button-border-top-color: var(--button-bg-color-acti= +ve); } + +.Button-module_Button--destroy__B8gsD:focus { --button-bg-color: var(--butt= +on-bg-color-hover); --button-border-top-color: var(--button-inset-color); b= +order-bottom-color: var(--button-inset-color); box-shadow: inset 0 0 0 2px = +var(--button-inset-color),inset 3px 0 0 0 var(--button-inset-color),inset -= +3px 0 0 0 var(--button-inset-color); outline: 1px solid var(--button-outlin= +e-color-focus); } + +.Button-module_Button--destroy__B8gsD:disabled { --button-bg-color: var(--b= +utton-bg-color-disabled); --button-border-top-color: transparent; --button-= +color: var(--button-color-disabled); cursor: not-allowed; } + +.Button-module_Button--destroy__B8gsD svg { fill: currentcolor; color: var(= +--button-color); } + +.Button-module_Button--destroy__B8gsD svg circle, .Button-module_Button--de= +stroy__B8gsD svg path { fill: currentcolor; } + +.Checkbox-module_Checkbox__cKy9C { --border-color: var(--checkbox-border-co= +lor,hsla(0,0%,100%,0.1)); --bg-color: var(--checkbox-bg-color,rgba(0,0,0,0.= +95)); --icon-color: var(--checkbox-icon-color,#13161c); --size: var(--check= +box-size,1.5rem); align-items: center; background-color: var(--bg-color); b= +order-radius: 0.25rem; border: .125rem solid var(--border-color); cursor: p= +ointer; display: flex; flex-direction: column; height: var(--size); padding= +: 0px; width: var(--size); } + +.Checkbox-module_Checkbox__cKy9C:hover { --border-color: var(--checkbox-bg-= +color-hover,#c4c8ce); } + +.Checkbox-module_Checkbox__Indicator__pA2Xh { --icon-color: #13161c; } + +.Checkbox-module_Checkbox__cKy9C svg { color: var(--icon-color); height: 10= +0%; max-height: 100%; max-width: 100%; width: 100%; } + +.Checkbox-module_Checkbox__cKy9C svg path { fill: var(--icon-color); } + +.Checkbox-module_Checkbox__cKy9C [data-state*=3D"checked"], .Checkbox-modul= +e_Checkbox__cKy9C [data-state=3D"indeterminate"] { height: 100%; width: 100= +%; } + +.Checkbox-module_Checkbox--checked__jT0hH { --bg-color: var(--checkbox-bg-c= +olor-checked,#fff); --border-color: var(--checkbox-border-color-checked,#ff= +f); } + +.Checkbox-module_Checkbox--checked__jT0hH:hover { --bg-color: var(--checkbo= +x-bg-color-checked-hover,#dee1e4); --border-color: var(--checkbox-border-co= +lor-checked-hover,#fff); } + +.CheckItem-module_CheckItem__5yWXn { align-items: center; cursor: pointer; = +display: flex; font-family: var(--main-font,"IBM Plex Sans"); gap: 1rem; } + +.CheckItem-module_CheckItem__Check__yyj1Q { --checkbox-size: var(--checkite= +m-check,1.25rem); flex-shrink: 0; } + +.InputText-module_InputText__OIANf { font-family: var(--main-font,"IBM Plex= + Sans"); overflow: hidden; position: relative; width: 100%; } + +.InputText-module_InputText__OIANf input, .InputText-module_InputText__OIAN= +f select { background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgb(64, = +70, 80); border-radius: 0.5rem; box-sizing: border-box; color: rgb(255, 255= +, 255); font-size: 1rem; height: 3.5rem; padding: 0.375rem 0.75rem 0.375rem= + 1rem; width: 100%; } + +.InputText-module_InputText__OIANf input:hover, .InputText-module_InputText= +__OIANf select:hover { border: 1px solid rgb(5, 164, 96); } + +.InputText-module_InputText__OIANf input:focus, .InputText-module_InputText= +__OIANf select:focus { border: 2px solid rgb(10, 233, 138); outline: none; = +padding: 1.5rem 0.75rem 0.25rem 1rem; } + +.InputText-module_InputText__OIANf input:not([value=3D""]), .InputText-modu= +le_InputText__OIANf select:not([value=3D""]) { outline: none; padding: 1.5r= +em 0.75rem 0.25rem 1rem; } + +.InputText-module_InputText__OIANf label { align-items: center; inset: 0px = +0px 0px 1rem; color: rgb(196, 200, 206); display: flex; letter-spacing: 0.2= +px; overflow: hidden; pointer-events: none; position: absolute; transition:= + 0.15s ease-out; white-space: nowrap; } + +.InputText-module_InputText__OIANf input:focus + label, .InputText-module_I= +nputText__OIANf input:not([value=3D""]) + label { color: rgb(135, 144, 157)= +; font-size: 0.875rem; left: 0.5rem; letter-spacing: 0.3px; top: 17px; tran= +sform: translate(10px, -50%); } + +.InputText-module_InputText__OIANf input:invalid:not([value=3D""]):not(:foc= +us) { border: 1px solid rgb(226, 106, 99); } + +.InputText-module_InputText__password__0Enlu input:not([value=3D""]) { padd= +ing-right: 4rem !important; } + +.InputText-module_InputText__disabled__UQMFq input, .InputText-module_Input= +Text__disabled__UQMFq select { border: 2px solid rgb(45, 50, 58); border-ra= +dius: 0.5rem; color: rgb(85, 92, 104); } + +.InputText-module_InputText__disabled__UQMFq input:hover, .InputText-module= +_InputText__disabled__UQMFq select:hover { border: 1px solid rgb(45, 50, 58= +); } + +.InputText-module_InputText__disabled__UQMFq input:focus, .InputText-module= +_InputText__disabled__UQMFq select:focus { border: 2px solid rgb(45, 50, 58= +); } + +.InputText-module_InputText__disabled__UQMFq label { color: rgb(45, 50, 58)= + !important; } + +.InputText-module_InputText__error__ozElh input, .InputText-module_InputTex= +t__error__ozElh select { border: 2px solid rgb(226, 106, 99); border-radius= +: 0.5rem; } + +.InputText-module_InputText__error__ozElh input:hover, .InputText-module_In= +putText__error__ozElh select:hover { border: 1px solid rgb(226, 106, 99); } + +.InputText-module_InputText__error__ozElh input:focus, .InputText-module_In= +putText__error__ozElh select:focus { border: 2px solid rgb(226, 106, 99); } + +.InputText-module_InputText__passwordToggle__yiets { background: transparen= +t; border: none; color: rgb(196, 200, 206); cursor: pointer; font-size: 0.7= +5rem; font-weight: 500; letter-spacing: 0.3px; line-height: 1.125rem; posit= +ion: absolute; right: 1rem; text-decoration-line: underline; top: 50%; tran= +sform: translateY(-50%); } + +.SimpleSelect-module_SimpleSelect__3Mnjq { font-family: var(--main-font,"IB= +M Plex Sans"); overflow: hidden; position: relative; width: 100%; } + +.SimpleSelect-module_SimpleSelect__3Mnjq input, .SimpleSelect-module_Simple= +Select__3Mnjq select { background-color: rgba(0, 0, 0, 0.3); border: 1px so= +lid rgb(64, 70, 80); border-radius: 0.5rem; box-sizing: border-box; color: = +rgb(255, 255, 255); font-size: 1rem; height: 3.5rem; padding: 0.375rem 0.75= +rem 0.375rem 1rem; width: 100%; } + +.SimpleSelect-module_SimpleSelect__3Mnjq input:hover, .SimpleSelect-module_= +SimpleSelect__3Mnjq select:hover { border: 1px solid rgb(5, 164, 96); } + +.SimpleSelect-module_SimpleSelect__3Mnjq input:focus, .SimpleSelect-module_= +SimpleSelect__3Mnjq select:focus { border: 2px solid rgb(10, 233, 138); out= +line: none; padding: 1.5rem 0.75rem 0.25rem 1rem; } + +.SimpleSelect-module_SimpleSelect__3Mnjq input:not([value=3D""]), .SimpleSe= +lect-module_SimpleSelect__3Mnjq select:not([value=3D""]) { outline: none; p= +adding: 1.5rem 0.75rem 0.25rem 1rem; } + +.SimpleSelect-module_SimpleSelect__3Mnjq label { align-items: center; inset= +: 0px 0px 0px 1rem; color: rgb(196, 200, 206); display: flex; letter-spacin= +g: 0.2px; pointer-events: none; position: absolute; transition: 0.15s ease-= +out; white-space: nowrap; } + +.SimpleSelect-module_SimpleSelect__3Mnjq select { appearance: none; padding= +-right: 36px !important; } + +.SimpleSelect-module_SimpleSelect__3Mnjq label { overflow: hidden; right: 3= +6px; } + +.SimpleSelect-module_SimpleSelect_icon__-zBjt { position: absolute; right: = +0.75rem; top: 20px; } + +.SimpleSelect-module_SimpleSelect_icon__-zBjt svg { transform: rotate(180de= +g); } + +.SimpleSelect-module_SimpleSelect_icon__-zBjt path { fill: rgb(196, 200, 20= +6); } + +.SimpleSelect-module_SimpleSelect__notEmpty__7lZOH label { color: rgb(135, = +144, 157); font-size: 0.875rem; left: 0.5rem; letter-spacing: 0.3px; right:= + 47px; top: 17px; transform: translate(10px, -50%); } + +.SimpleSelect-module_SimpleSelect__disabled__-eyEW input, .SimpleSelect-mod= +ule_SimpleSelect__disabled__-eyEW select { border: 2px solid rgb(45, 50, 58= +); border-radius: 0.5rem; color: rgb(85, 92, 104); } + +.SimpleSelect-module_SimpleSelect__disabled__-eyEW input:hover, .SimpleSele= +ct-module_SimpleSelect__disabled__-eyEW select:hover { border: 1px solid rg= +b(45, 50, 58); } + +.SimpleSelect-module_SimpleSelect__disabled__-eyEW input:focus, .SimpleSele= +ct-module_SimpleSelect__disabled__-eyEW select:focus { border: 2px solid rg= +b(45, 50, 58); } + +.SimpleSelect-module_SimpleSelect__disabled__-eyEW label { color: rgb(45, 5= +0, 58) !important; } + +.SimpleSelect-module_SimpleSelect__error__VwBRg input, .SimpleSelect-module= +_SimpleSelect__error__VwBRg select { border: 2px solid rgb(226, 106, 99); b= +order-radius: 0.5rem; } + +.SimpleSelect-module_SimpleSelect__error__VwBRg input:hover, .SimpleSelect-= +module_SimpleSelect__error__VwBRg select:hover { border: 1px solid rgb(226,= + 106, 99); } + +.SimpleSelect-module_SimpleSelect__error__VwBRg input:focus, .SimpleSelect-= +module_SimpleSelect__error__VwBRg select:focus { border: 2px solid rgb(226,= + 106, 99); } + +.Spinner-module_Spinner__LoMV6 { --size: var(--spinner-size,0.875rem); --bo= +rder-size: var(--spinner-border-size,2px); --border-color: var(--spinner-bo= +rder-color,hsla(0,0%,100%,0.2)); --border-top-color: var(--spinner-border-t= +op-color,#fff); animation: 1s linear 0s infinite normal none running Spinne= +r-module_spin__B-Bs1; border-right-color: ; border-right-style: ; border-ri= +ght-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-wi= +dth: ; border-left-color: ; border-left-style: ; border-left-width: ; borde= +r-image-source: ; border-image-slice: ; border-image-width: ; border-image-= +outset: ; border-image-repeat: ; border-radius: 50%; border-top: var(--bord= +er-size) solid var(--border-top-color); height: var(--size); width: var(--s= +ize); will-change: transform; } + +@keyframes Spinner-module_spin__B-Bs1 {=20 + 0% { transform: rotate(0deg); } + 100% { transform: rotate(1turn); } +} + +.LoadingSpinner-module_LoadingSpinner__vCRtJ { align-items: center; display= +: flex; height: 100%; justify-content: center; opacity: 0; transition: opac= +ity 0.5s ease-in-out; visibility: hidden; will-change: opacity; } + +.LoadingSpinner-module_LoadingSpinner--loading__qmFMV { opacity: 1; visibil= +ity: visible; } + +.Modal-module_Modal-overlay__bGLa8 { background-color: rgba(0, 0, 0, 0.6); = +height: 100%; left: 0px; position: fixed; top: 0px; width: 100%; z-index: 1= +01; } + +.Modal-module_Modal-wrapper__9tiPW { background-color: rgb(30, 34, 41); bor= +der-radius: 0.75rem; display: flex; flex-direction: column; font-family: va= +r(--main-font,"IBM Plex Sans"); gap: 1.5rem; max-height: 100%; max-width: 4= +20px; overflow-y: auto; padding: 20px 0px; position: fixed; width: 100%; z-= +index: 2; } + +@media (min-width: 480px) { + .Modal-module_Modal-wrapper__9tiPW { gap: 1rem; padding: 1.5rem 0px; widt= +h: 320px; } +} + +.Modal-module_Modal-wrapper--center__xVtCC { left: 50%; top: 50%; transform= +: translate(-50%, -50%); width: 90%; } + +.Modal-module_Modal-wrapper--center__xVtCC[data-state=3D"open"] { animation= +: 0.1s ease-out 0s 1 normal none running Modal-module_fadeIn__rtu80; } + +.Modal-module_Modal-wrapper--center__xVtCC[data-state=3D"closed"] { animati= +on: 0.1s ease-in 0s 1 normal none running Modal-module_fadeOut__kE1kk; } + +@media (min-width: 480px) { + .Modal-module_Modal-wrapper--center__xVtCC { width: 100%; } +} + +.Modal-module_Modal-wrapper--bottom__gnqxH { border-bottom-left-radius: 0px= +; border-bottom-right-radius: 0px; bottom: 0px; min-width: 100%; } + +.Modal-module_Modal-wrapper--bottom__gnqxH[data-state=3D"open"] { animation= +: 0.2s ease-out 0s 1 normal none running Modal-module_slideInBottom__GuMIQ;= + } + +.Modal-module_Modal-wrapper--bottom__gnqxH[data-state=3D"closed"] { animati= +on: 0.2s ease-in 0s 1 normal none running Modal-module_slideOutBottom__Tty-= +J; } + +@keyframes Modal-module_slideInBottom__GuMIQ {=20 + 0% { transform: translateY(100%); } + 100% { transform: translateY(0px); } +} + +@keyframes Modal-module_slideOutBottom__Tty-J {=20 + 0% { transform: translateY(0px); } + 100% { transform: translateY(50%); } +} + +@keyframes Modal-module_fadeIn__rtu80 {=20 + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes Modal-module_fadeOut__kE1kk {=20 + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +.ModalBody-module_ModalBody__IYRTZ { color: rgb(196, 200, 206); font-size: = +1rem; font-weight: 500; letter-spacing: 0.013rem; line-height: 1.5rem; padd= +ing: 0px 20px; text-decoration: none; text-transform: none; } + +@media (min-width: 48rem) { + .ModalBody-module_ModalBody__IYRTZ { padding: 0px 1.5rem; } +} + +.ModalBody-module_ModalBody__IYRTZ > span { color: rgb(255, 255, 255); font= +-size: 1rem; font-weight: 400; letter-spacing: 0.013rem; line-height: 1.5re= +m; text-decoration: none; text-transform: none; } + +.ModalFooter-module_ModalFooter__Bh0ij { align-items: center; display: flex= +; flex-direction: column; gap: 1rem; justify-content: flex-start; padding: = +0px 1.5rem; } + +@media (min-width: 480px) { + .ModalFooter-module_ModalFooter__Bh0ij { flex-direction: row; } +} + +.ModalHeader-module_ModalHeader__Qmrb- { align-items: center; color: rgba(2= +55, 255, 255, 0.95); display: flex; justify-content: space-between; margin:= + 0px auto; padding: 0px 20px; text-align: center; } + +@media (min-width: 48rem) { + .ModalHeader-module_ModalHeader__Qmrb- { padding: 0px 1.5rem; } +} + +.ModalHeader-module_ModalHeader__Qmrb- > h2 { font-size: 1rem; font-weight:= + 500; letter-spacing: -0.008rem; line-height: 1.375rem; margin: 0px auto; t= +ext-decoration: none; text-transform: none; } + +.ModalHeader-module_ModalHeader__close__f1mWq { color-scheme: unset; forced= +-color-adjust: unset; mask: unset; math-depth: unset; position: unset; posi= +tion-anchor: unset; text-size-adjust: unset; appearance: unset; color: unse= +t; font: unset; font-palette: unset; font-synthesis: unset; position-area: = +unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: u= +nset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-or= +ientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: u= +nset; accent-color: unset; place-content: unset; place-items: unset; align-= +self: flex-start; alignment-baseline: unset; anchor-name: unset; anchor-sco= +pe: unset; animation-composition: unset; animation: unset; app-region: unse= +t; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset;= + background: unset; background-blend-mode: unset; baseline-shift: unset; ba= +seline-source: unset; block-size: unset; border-block: unset; border: unset= +; border-radius: unset; border-collapse: unset; border-end-end-radius: unse= +t; border-end-start-radius: unset; border-inline: unset; border-start-end-r= +adius: unset; border-start-start-radius: unset; inset: unset; box-decoratio= +n-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; b= +reak-before: unset; break-inside: unset; buffered-rendering: unset; caption= +-side: unset; caret-animation: unset; caret-color: unset; clear: unset; cli= +p: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; c= +olor-interpolation-filters: unset; color-rendering: unset; columns: unset; = +column-fill: unset; gap: unset; column-rule: unset; column-span: unset; con= +tain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: u= +nset; contain-intrinsic-inline-size: unset; container: unset; content: unse= +t; content-visibility: unset; corner-shape: unset; corner-block-end-shape: = +unset; corner-block-start-shape: unset; counter-increment: unset; counter-r= +eset: unset; counter-set: unset; cursor: pointer; cx: unset; cy: unset; d: = +unset; display: unset; dominant-baseline: unset; dynamic-range-limit: unset= +; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset= +; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: un= +set; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unse= +t; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset;= + hyphens: unset; image-orientation: unset; image-rendering: unset; initial-= +letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset;= + interpolate-size: unset; isolation: unset; justify-self: unset; letter-spa= +cing: unset; lighting-color: unset; line-break: unset; list-style: unset; m= +argin-block: unset; margin: unset; margin-inline: unset; marker: unset; mas= +k-type: unset; math-shift: unset; math-style: unset; max-block-size: unset;= + max-height: unset; max-inline-size: unset; max-width: unset; min-block-siz= +e: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-= +blend-mode: unset; object-fit: unset; object-position: unset; object-view-b= +ox: unset; offset: unset; opacity: unset; order: unset; orphans: unset; out= +line: unset; outline-offset: unset; overflow-anchor: unset; overflow-block:= + unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap:= + unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; = +overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-bloc= +k: unset; padding: unset; padding-inline: unset; page: unset; page-orientat= +ion: unset; paint-order: unset; perspective: unset; perspective-origin: uns= +et; pointer-events: unset; position-try: unset; position-visibility: unset;= + print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; r= +eading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-= +position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset= +; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: = +unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padd= +ing-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scro= +ll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scr= +oll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; sc= +rollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset= +; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: = +unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset;= + stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; = +stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; st= +roke-width: unset; tab-size: unset; table-layout: unset; text-align: unset;= + text-align-last: unset; text-anchor: unset; text-autospace: unset; text-bo= +x: unset; text-combine-upright: unset; text-decoration: unset; text-decorat= +ion-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; t= +ext-indent: unset; text-overflow: unset; text-shadow: unset; text-transform= +: unset; text-underline-offset: unset; text-underline-position: unset; text= +-wrap: unset; timeline-scope: unset; touch-action: unset; transform: unset;= + transform-box: unset; transform-origin: unset; transform-style: unset; tra= +nsition: unset; translate: unset; user-select: unset; vector-effect: unset;= + vertical-align: unset; view-timeline: unset; view-transition-class: unset;= + view-transition-group: unset; view-transition-name: unset; visibility: uns= +et; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration= +-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webk= +it-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: u= +nset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-c= +lamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -w= +ebkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-tex= +t-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-f= +ill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset;= + -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; widt= +h: unset; will-change: unset; word-break: unset; word-spacing: unset; x: un= +set; y: unset; z-index: unset; } + +.ModalHeader-module_ModalHeader__close__f1mWq svg { height: 24px; vertical-= +align: middle; width: 24px; } + +.Tooltip-module_Tooltip__3RyoA { display: inline-block; font-family: var(--= +main-font,"IBM Plex Sans"); justify-content: center; position: relative; te= +xt-align: center; } + +.Tooltip-module_Tooltip__content__QIvMN { backdrop-filter: blur(50px); back= +ground-color: rgb(255, 255, 255); border-radius: 0.375rem; color: rgb(19, 2= +2, 28); display: flex; font-size: 0.875rem; font-weight: 400; letter-spacin= +g: 0.019rem; line-height: 1.25rem; padding: 0.375rem 0.5rem; position: abso= +lute; text-decoration: none; text-transform: none; width: max-content; z-in= +dex: 10; } + +.Tooltip-module_Tooltip__content--top__8-SJl { bottom: 120%; left: 50%; mar= +gin-bottom: 0.25rem; transform: translateX(-50%); } + +.Tooltip-module_Tooltip__content--top__8-SJl::before { border-width: 6px; b= +order-style: solid; border-color: rgb(255, 255, 255) transparent transparen= +t; border-image: initial; content: ""; left: 50%; position: absolute; top: = +100%; transform: translateX(-50%); } + +.Tooltip-module_Tooltip__content--bottom__zAoFC { left: 50%; margin-top: 0.= +25rem; top: 120%; transform: translateX(-50%); } + +.Tooltip-module_Tooltip__content--bottom__zAoFC::before { border-width: 6px= +; border-style: solid; border-color: transparent transparent rgb(255, 255, = +255); border-image: initial; bottom: 100%; content: ""; left: 50%; position= +: absolute; transform: translateX(-50%); } + +.Tooltip-module_Tooltip__content--left__fIOwv { margin-right: 0.25rem; righ= +t: 120%; top: 50%; transform: translateY(-50%); } + +.Tooltip-module_Tooltip__content--left__fIOwv::before { border-width: 6px; = +border-style: solid; border-color: transparent transparent transparent rgb(= +255, 255, 255); border-image: initial; content: ""; left: 100%; position: a= +bsolute; top: 50%; transform: translateY(-50%); } + +.Tooltip-module_Tooltip__content--right__WNwto { left: 120%; margin-left: 0= +.25rem; top: 50%; transform: translateY(-50%); } + +.Tooltip-module_Tooltip__content--right__WNwto::before { border-width: 6px;= + border-style: solid; border-color: transparent rgb(255, 255, 255) transpar= +ent transparent; border-image: initial; content: ""; position: absolute; ri= +ght: 100%; top: 50%; transform: translateY(-50%); } + +.Tooltip-module_Tooltip__content--inverse__daS21 { background-color: rgba(0= +, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.2); color: rgb(255, 2= +55, 255); } + +.Tooltip-module_Tooltip__content--inverse__daS21.Tooltip-module_Tooltip__co= +ntent--top__8-SJl::before { border-color: rgba(255, 255, 255, 0.2) transpar= +ent transparent; } + +.Tooltip-module_Tooltip__content--inverse__daS21.Tooltip-module_Tooltip__co= +ntent--bottom__zAoFC::before { border-color: transparent transparent rgba(2= +55, 255, 255, 0.2); } + +.Tooltip-module_Tooltip__content--inverse__daS21.Tooltip-module_Tooltip__co= +ntent--left__fIOwv::before { border-color: transparent transparent transpar= +ent rgba(255, 255, 255, 0.2); } + +.Tooltip-module_Tooltip__content--inverse__daS21.Tooltip-module_Tooltip__co= +ntent--right__WNwto::before { border-color: transparent rgba(255, 255, 255,= + 0.2) transparent transparent; } + +.EvaluationHeader-module_hidden__HC5io { display: none !important; } + +@media (max-width: 47.9375rem) { + .EvaluationHeader-module_mobileHidden__BlqK2 { display: none !important; = +} +} + +@media (min-width: 48rem) { + .EvaluationHeader-module_desktopHidden__iscVh { display: none !important;= + } +} + +.EvaluationHeader-module_u-wrapper__thI3S { box-sizing: border-box; height:= + 100%; margin-left: auto; margin-right: auto; max-width: 48rem; position: r= +elative; } + +@media (min-width: 1280px) { + .EvaluationHeader-module_u-wrapper__thI3S { max-width: 1120px; } +} + +.EvaluationHeader-module_Toolbar__pRrxs { box-sizing: border-box; color: rg= +b(255, 255, 255); font-family: var(--main-font,"IBM Plex Sans"); height: 3.= +5rem; padding: 0.75rem 1rem; position: relative; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_Toolbar__pRrxs { height: 4rem; padding: 1rem 2re= +m; } +} + +.EvaluationHeader-module_Toolbar_Container__PIDoG { align-items: center; di= +splay: flex; gap: 1rem; height: 100%; justify-content: space-between; } + +.EvaluationHeader-module_Toolbar_Container__PIDoG #logoPlatzi { height: 24p= +x; width: 90px; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_Toolbar_Container__PIDoG #logoPlatzi { height: 3= +2px; width: 90px; } +} + +.EvaluationHeader-module_Toolbar_Container__PIDoG #logoPlatziBusiness { hei= +ght: 24px; width: 155px; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_Toolbar_Container__PIDoG #logoPlatziBusiness { h= +eight: 32px; width: 205px; } +} + +.EvaluationHeader-module_Toolbar_CloseIcon__HqWPv { align-items: center; ba= +ckground: rgba(255, 255, 255, 0.1); border: none; border-radius: 0.375rem; = +cursor: pointer; display: flex; height: 2.25rem; justify-content: center; m= +in-width: 2.25rem; padding: 0.125rem; width: 2.25rem; } + +.EvaluationHeader-module_Toolbar_CloseIcon__HqWPv svg { height: 1.125rem; w= +idth: 1.125rem; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_Toolbar_CloseIcon__HqWPv { height: 2.75rem; min-= +width: 2.75rem; width: 2.75rem; } +} + +.EvaluationHeader-module_Toolbar_TitlesContainer__qBloP { align-items: cent= +er; display: flex; gap: 0.375rem; } + +.EvaluationHeader-module_Toolbar_TitlesContainer__qBloP img { height: 1.25r= +em; width: 1.25rem; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_Toolbar_TitlesContainer__qBloP img { height: 1.5= +rem; width: 1.5rem; } +} + +.EvaluationHeader-module_Toolbar_TitlesContainer__qBloP p { font-size: 0.87= +5rem; font-weight: 400; letter-spacing: 0.16px; line-height: 1.125rem; marg= +in: 0px; padding: 0px; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_Toolbar_TitlesContainer__qBloP p { font-size: 1r= +em; line-height: 1.375; } +} + +.EvaluationHeader-module_Toolbar_ActionsContainer__XI3oV { align-items: cen= +ter; display: flex; gap: 0.5rem; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_Toolbar_ActionsContainer__XI3oV { gap: 1rem; } +} + +.EvaluationHeader-module_Toolbar_Progress__KxqNA { align-items: center; col= +or: rgb(255, 255, 255); display: flex; font-size: 0.875rem; font-weight: 40= +0; gap: 0.25rem; letter-spacing: 0.8px; line-height: 1.125rem; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_Toolbar_Progress__KxqNA { font-size: 1rem; line-= +height: 1.375rem; } +} + +.EvaluationHeader-module_Toolbar_ProgressQuestion__ogxAs { color: rgb(196, = +200, 206); display: none; font-size: inherit; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_Toolbar_ProgressQuestion__ogxAs { display: inlin= +e; } +} + +.EvaluationHeader-module_Toolbar_ProgressDivider__QuC2O { color: rgb(255, 2= +55, 255); font-size: 0px; padding: 0.25rem 0px 0px 0.125rem; } + +.EvaluationHeader-module_Toolbar_ProgressDivider__QuC2O::before { color: rg= +b(196, 200, 206); content: "/"; font-size: 0.875rem; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_Toolbar_ProgressDivider__QuC2O { font-size: inhe= +rit; padding: 0px; } + .EvaluationHeader-module_Toolbar_ProgressDivider__QuC2O::before { content= +: ""; } +} + +.EvaluationHeader-module_timer__Hroad { align-items: center; color: rgb(135= +, 144, 157); display: flex; font-size: 0.875rem; font-style: normal; font-w= +eight: 500; gap: 0.25rem; justify-content: center; letter-spacing: 0.8px; l= +ine-height: 0; text-transform: uppercase; } + +.EvaluationHeader-module_timer__Hroad.EvaluationHeader-module_timeover__QqE= +UQ { color: rgb(254, 177, 84); } + +@keyframes EvaluationHeader-module_loading-animation__2yNH2 {=20 + 0%, 100% { left: 0px; width: 15%; } + 25%, 75% { left: 25%; width: 50%; } + 50% { left: 85%; width: 15%; } +} + +.EvaluationHeader-module_LoadingBar__aap8a { bottom: -0.75rem; height: 3px;= + left: 0px; position: absolute; right: 0px; width: 100%; } + +@media (min-width: 48rem) { + .EvaluationHeader-module_LoadingBar__aap8a { bottom: -1rem; } +} + +.EvaluationHeader-module_LoadingBar__aap8a::after { background: linear-grad= +ient(90deg, rgb(10, 233, 138), rgb(41, 148, 255)); border-radius: 2px; cont= +ent: ""; height: 3px; position: absolute; top: 0px; width: var(--loading-ba= +r-width,100%); } + +.EvaluationHeader-module_LoadingBar__loading__u5I0V::after { animation: 3s = +linear 0s infinite normal none running EvaluationHeader-module_loading-anim= +ation__2yNH2; } + +.EvaluationHeader-module_LoadingBar__withProgress__ykUe9 { background-color= +: rgb(45, 50, 58); } + +.ErrorBox-module_ErrorBox__W1dIi { margin: 0px auto; max-width: 622px; padd= +ing: 5rem 1rem 0px; text-align: center; } + +.ErrorBox-module_ErrorBox__Icon__1Dfhi { --icon-color: var(--errorbox-icon-= +color,#87909d); height: 45px; margin-bottom: 1rem; width: 45px; } + +.ErrorBox-module_ErrorBox__Icon__1Dfhi circle, .ErrorBox-module_ErrorBox__I= +con__1Dfhi path { fill: var(--icon-color); } + +.ErrorBox-module_ErrorBox__Title__iUwMm { font-size: 1.125rem; font-weight:= + 500; letter-spacing: -0.008rem; line-height: 1.5rem; margin-bottom: 0.25re= +m; text-decoration: none; text-transform: none; } + +.ErrorBox-module_ErrorBox__Description__ML-xK { color: rgb(196, 200, 206); = +font-size: 1rem; font-weight: 400; letter-spacing: 0.013rem; line-height: 1= +.5rem; margin-bottom: 1rem; text-decoration: none; text-transform: none; } + +.ErrorBox-module_ErrorBox__RetryButton__SlZIG { margin: 0px auto; } + +.CheckGroupContainer-module_CheckGroupContainer__kElab { display: flex; fle= +x-direction: column; gap: 0.5rem; } + +.AnswerCheck-module_AnswerCheck__zYXdf { background: rgb(30, 34, 41); borde= +r: 1px solid rgb(64, 70, 80); border-radius: 0.5rem; color: rgb(255, 255, 2= +55); cursor: pointer; font-size: 1rem; font-weight: 400; letter-spacing: 0.= +16px; line-height: 1.5rem; padding: 1rem; text-decoration: none; text-trans= +form: none; } + +.AnswerCheck-module_AnswerCheck__zYXdf:hover { background: rgb(64, 70, 80);= + border: 1px solid rgb(196, 200, 206); } + +.AnswerOption-module_AnswerOption__zqsJ7 { --indicator-size: var(--answer-o= +ption-indicator-size,2rem); --text-padding: 0.5rem 0.75rem; --indicator-pad= +ding: 0 0.5rem; align-items: stretch; background: rgb(19, 22, 28); border: = +1px solid rgb(64, 70, 80); border-radius: 0.5rem; color: rgb(255, 255, 255)= +; cursor: pointer; display: flex; font-family: var(--main-font,"IBM Plex Sa= +ns"); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; line-h= +eight: 1.25rem; overflow: hidden; text-decoration: none; text-transform: no= +ne; } + +@media (min-width: 75rem) { + .AnswerOption-module_AnswerOption__zqsJ7 { --text-padding: 0.75rem 1rem; = +--indicator-padding: 0 0.75rem; font-size: 1rem; font-weight: 400; letter-s= +pacing: 0.16px; line-height: 1.5rem; text-decoration: none; text-transform:= + none; } +} + +.AnswerOption-module_AnswerOption__zqsJ7:hover { border-color: rgb(196, 200= +, 206); } + +.AnswerOption-module_AnswerOption__zqsJ7:has([data-state=3D"checked"]) { ba= +ckground-color: rgb(64, 70, 80); border-color: rgb(196, 200, 206); } + +.AnswerOption-module_AnswerOption__Item__LJQSR { background-color: rgb(30, = +34, 41); border: none; color: rgb(196, 200, 206); display: inline-block; ma= +x-width: var(--indicator-size); min-width: var(--indicator-size); padding: = +var(--indicator-padding); } + +.AnswerOption-module_AnswerOption__Item__LJQSR:has([data-state=3D"checked"]= +) { background-color: rgba(255, 255, 255, 0.12); } + +.AnswerOption-module_AnswerOption__Text__Pb3Wt { height: 100%; padding: var= +(--text-padding); } + +.AnswerOptionGroup-module_AnswerOptionGroup__nmeuE { display: flex; flex-di= +rection: column; gap: 1rem; } + +.AnswerOptionGroup-module_AnswerOptionGroup__nmeuE:has([data-state=3D"check= +ed"]) [data-id=3D"answer-option"]:not(:has([data-state=3D"checked"])) { opa= +city: 0.4; } + +.ButtonWithLoading-module_ButtonWithLoading__BfokE { position: relative; } + +.ButtonWithLoading-module_ButtonWithLoading__Spinner__bANCc { background-co= +lor: var(--spinner-bg,transparent); border-radius: 0.5rem; height: 100%; po= +sition: absolute; width: 100%; z-index: 1; } + +.ButtonWithLoading-module_ButtonWithLoading__Button--loading__hScmt { --but= +ton-color: transparent !important; } + +.ButtonWithLoading-module_ButtonWithLoading--primary__JfhhC { --spinner-bg:= + #0ae98a; --spinner-border-color: #07c373; --spinner-border-top-color: #131= +61c; } + +.ButtonWithLoading-module_ButtonWithLoading--secondary__PNggu { --spinner-b= +g: #fff; --spinner-border-color: rgba(0,0,0,0.2); --spinner-border-top-colo= +r: #13161c; } + +.ButtonWithLoading-module_ButtonWithLoading--secondary-inverse__UB3pp { --s= +pinner-bg: #2d323a; --spinner-border-color: hsla(0,0%,100%,0.1); --spinner-= +border-top-color: #fff; } + +.ButtonWithLoading-module_ButtonWithLoading--subtle__qScVp { --spinner-bg: = +hsla(0,0%,100%,0.05); --spinner-border-color: hsla(0,0%,100%,0.1); --spinne= +r-border-top-color: #fff; } + +.ButtonWithLoading-module_ButtonWithLoading--ghost__sAigY, .ButtonWithLoadi= +ng-module_ButtonWithLoading--outline__vzLlR { --spinner-bg: transparent; --= +spinner-border-color: hsla(0,0%,100%,0.2); --spinner-border-top-color: #fff= +; } + +.ButtonWithLoading-module_ButtonWithLoading--outline-inverse__wek0u { --spi= +nner-bg: transparent; --spinner-border-color: rgba(0,0,0,0.2); --spinner-bo= +rder-top-color: #13161c; } + +.ButtonWithLoading-module_ButtonWithLoading--destroy__9TK4h { --spinner-bg:= + transparent; --spinner-border-color: hsla(0,0%,100%,0.2); --spinner-border= +-top-color: #fff; } + +.ButtonWithLoading-module_ButtonWithLoading--md__P69Gi, .ButtonWithLoading-= +module_ButtonWithLoading--sm__iUQhN { --spinner-size: 0.75rem; } + +.ButtonWithLoading-module_ButtonWithLoading--lg__-h8oX { --spinner-size: 0.= +875rem; } + +html { line-height: 1.15; text-size-adjust: 100%; } + +body { margin: 0px; } + +h1 { font-size: 3rem; margin: 0.67em 0px; } + +hr { box-sizing: content-box; height: 0px; overflow: visible; } + +pre { font-family: monospace, monospace; font-size: 1em; } + +a { background-color: transparent; } + +abbr[title] { border-bottom: none; text-decoration: underline dotted; } + +b, strong { font-weight: bolder; } + +code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } + +small { font-size: 80%; } + +sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-ali= +gn: baseline; } + +sub { bottom: -0.25em; } + +sup { top: -0.5em; } + +img { border-style: none; } + +button, input, optgroup, select, textarea { font-family: inherit; font-size= +: 100%; line-height: 1.15; margin: 0px; } + +button, input { overflow: visible; } + +button, select { text-transform: none; } + +[type=3D"button"], [type=3D"reset"], [type=3D"submit"], button { appearance= +: button; } + +fieldset { padding: 0.35em 0.75em 0.625em; } + +legend { box-sizing: border-box; color: inherit; display: table; max-width:= + 100%; padding: 0px; white-space: normal; } + +progress { vertical-align: baseline; } + +textarea { overflow: auto; } + +[type=3D"checkbox"], [type=3D"radio"] { box-sizing: border-box; padding: 0p= +x; } + +[type=3D"number"]::-webkit-inner-spin-button, [type=3D"number"]::-webkit-ou= +ter-spin-button { height: auto; } + +[type=3D"search"] { appearance: textfield; outline-offset: -2px; } + +[type=3D"search"]::-webkit-search-decoration { appearance: none; } + +::-webkit-file-upload-button { appearance: button; font: inherit; } + +details { display: block; } + +summary { display: list-item; } + +[hidden], template { display: none; } + +.btn, .btn-fcbk, .btn-Green, .btn-green, .btn-Red, .btn-red, .btn-Sky, .btn= +-sky, .btn-twt { background-color: rgb(211, 211, 211); border: none; border= +-radius: 3px; box-sizing: border-box; color: rgb(255, 255, 255); cursor: po= +inter; display: inline-block; font-size: 13px; padding: 8px 0.8em 6px; text= +-decoration: none; user-select: none; transition: 0.2s; vertical-align: mid= +dle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; appear= +ance: none; outline: 0px; } + +.btn-fcbk::before, .btn-Green::before, .btn-green::before, .btn-Red::before= +, .btn-red::before, .btn-Sky::before, .btn-sky::before, .btn-twt::before, .= +btn::before { margin-right: 10px; vertical-align: middle; } + +.btn-fcbk::before, .btn-fcbk:empty, .btn-Green::before, .btn-green::before,= + .btn-Green:empty, .btn-green:empty, .btn-Red::before, .btn-red::before, .b= +tn-Red:empty, .btn-red:empty, .btn-Sky::before, .btn-sky::before, .btn-Sky:= +empty, .btn-sky:empty, .btn-twt::before, .btn-twt:empty, .btn::before, .btn= +:empty { margin-right: 0px; } + +.btn-fcbk:focus, .btn-fcbk:hover, .btn-Green:focus, .btn-green:focus, .btn-= +Green:hover, .btn-green:hover, .btn-Red:focus, .btn-red:focus, .btn-Red:hov= +er, .btn-red:hover, .btn-Sky:focus, .btn-sky:focus, .btn-Sky:hover, .btn-sk= +y:hover, .btn-twt:focus, .btn-twt:hover, .btn:focus, .btn:hover { backgroun= +d-color: rgb(0, 0, 0); } + +.btn-fcbk:active, .btn-Green:active, .btn-green:active, .btn-Red:active, .b= +tn-red:active, .btn-Sky:active, .btn-sky:active, .btn-twt:active, .btn:acti= +ve { transform: scale(0.9); } + +.btn-fcbk strike, .btn-Green strike, .btn-green strike, .btn-Red strike, .b= +tn-red strike, .btn-Sky strike, .btn-sky strike, .btn-twt strike, .btn stri= +ke { font-weight: 400; font-size: 0.8em; position: relative; bottom: 0.1em;= + } + +.btn-fcbk.btn--full-width, .btn-Green.btn--full-width, .btn-green.btn--full= +-width, .btn-Red.btn--full-width, .btn-red.btn--full-width, .btn-Sky.btn--f= +ull-width, .btn-sky.btn--full-width, .btn-twt.btn--full-width, .btn.btn--fu= +ll-width { width: 100%; } + +.btn-fcbk.is-normal, .btn-Green.is-normal, .btn-green.is-normal, .btn-Red.i= +s-normal, .btn-red.is-normal, .btn-Sky.is-normal, .btn-sky.is-normal, .btn-= +twt.is-normal, .btn.is-normal { font-weight: 400; } + +.btn-fcbk.is-light, .btn-Green.is-light, .btn-green.is-light, .btn-Red.is-l= +ight, .btn-red.is-light, .btn-Sky.is-light, .btn-sky.is-light, .btn-twt.is-= +light, .btn.is-light { font-weight: 300; } + +.btn-Green, .btn-green { background: linear-gradient(90deg, rgb(149, 202, 6= +2) 0px, rgb(149, 202, 62) 50%, rgb(133, 198, 56)); box-shadow: rgb(88, 144,= + 45) 0px 1px 1px 0px; } + +.btn-Green:focus, .btn-green:focus, .btn-Green:hover, .btn-green:hover { bo= +x-shadow: rgba(88, 144, 45, 0.49) 0px 2px 13px 0px; color: rgb(255, 255, 25= +5); } + +.btn-Sky, .btn-sky { background: linear-gradient(90deg, rgb(6, 132, 211) 0p= +x, rgb(6, 132, 211) 50%, rgb(7, 144, 228)); box-shadow: rgb(4, 116, 186) 0p= +x 1px 1px 0px; } + +.btn-Sky:focus, .btn-sky:focus, .btn-Sky:hover, .btn-sky:hover { box-shadow= +: rgba(4, 116, 186, 0.5) 0px 2px 13px 0px; } + +.btn-Red, .btn-red { background: linear-gradient(90deg, rgb(228, 63, 57) 0p= +x, rgb(228, 63, 57) 50%, rgb(225, 42, 36)); box-shadow: rgb(225, 42, 36) 0p= +x 1px 1px 0px; } + +.btn-Red:focus, .btn-red:focus, .btn-Red:hover, .btn-red:hover { box-shadow= +: rgba(225, 42, 36, 0.5) 0px 2px 13px 0px; } + +.btn-fcbk { background: linear-gradient(90deg, rgb(59, 89, 153) 0px, rgb(59= +, 89, 153) 50%, rgb(78, 105, 163)); box-shadow: rgb(53, 80, 137) 0px 1px 1p= +x 0px; } + +.btn-fcbk:focus, .btn-fcbk:hover { box-shadow: rgba(53, 80, 137, 0.5) 0px 2= +px 13px 0px; } + +.btn-twt { background: linear-gradient(90deg, rgb(96, 169, 222) 0px, rgb(96= +, 169, 222) 50%, rgb(111, 177, 225)); box-shadow: rgb(86, 152, 199) 0px 1px= + 1px 0px; } + +.btn-twt:focus, .btn-twt:hover { box-shadow: rgba(86, 152, 199, 0.5) 0px 2p= +x 13px 0px; } + +.btn--md, .btn--medium { font-size: 1rem; padding: 9px 0.8em 10px; } + +.btn--big { font-size: 18px; padding: 11px 0.8em 12px; } + +@media only screen and (max-width: 48rem) { + .btn--big.btn--responsive, .btn--medium.btn--responsive { font-size: 0.85= +em; } +} + +.icon--left, .icon--line { margin-right: 0.5em; } + +.form-control { display: block; outline: 0px; width: 100%; height: 36px; pa= +dding: 0.5em; font-size: 1em; box-sizing: border-box; color: rgb(0, 0, 0); = +border: 1px solid rgb(168, 177, 192); border-radius: 5px; background-color:= + rgb(243, 248, 251); margin-bottom: 1em; transition: border-color 0.2s; } + +.form-control:focus { border-color: rgb(7, 145, 230); } + +.form-control.is-white { background: rgb(255, 255, 255); } + +@media only screen and (min-width: 48rem) { + .form-control { margin-bottom: 0px; } +} + +.form-control.error { border: 1px solid rgb(255, 72, 66); } + +.radio { margin-right: 16px; } + +.radio.is-sky-blue input[type=3D"radio"]:checked + .radio-label::after { ba= +ckground-color: rgb(7, 145, 230); } + +.radio.is-sky-blue input[type=3D"radio"]:checked + .radio-label::before { b= +order: 1px solid rgb(7, 145, 230); } + +.radio > label { display: inline-block; vertical-align: middle; cursor: poi= +nter; user-select: none; } + +.radio input[type=3D"radio"] { display: none; } + +.radio input[type=3D"radio"]:checked + .radio-label { transition: 0.3s; col= +or: rgb(255, 255, 255); font-size: 14px; line-height: 17px; text-align: cen= +ter; position: relative; } + +.radio input[type=3D"radio"]:checked + .radio-label::after { content: ""; p= +osition: absolute; inset: 6px; background-color: rgb(152, 202, 63); border-= +radius: 50%; width: 12px; height: 12px; } + +.radio-text { margin-right: 20px; font-size: 0.9em; } + +.radio-label { color: rgb(255, 255, 255); cursor: pointer; display: inline-= +block; font-size: 14.2px; position: relative; user-select: none; margin-rig= +ht: 5px; } + +.radio-label::before { content: ""; border-radius: 50%; display: inline-blo= +ck; margin-right: 0.5rem; background-color: transparent; border: 1px solid = +rgb(190, 205, 227); width: 24px; height: 24px; line-height: 20px; vertical-= +align: middle; box-sizing: border-box; } + +* { margin: 0px; } + +a { color: rgb(7, 145, 230); } + +body { text-rendering: optimizelegibility; -webkit-font-smoothing: antialia= +sed; font-family: Roboto, sans-serif; } + +.fb_reset, img[src*=3D"https://www.googleadservices.com"] { display: none; = +} + +.noScroll { height: 100%; width: 100%; position: fixed; overflow: hidden !i= +mportant; } + +.showOverlay { transition: opacity 0.5s !important; opacity: 1 !important; = +filter: none !important; visibility: visible !important; } + +.layout-wrapper { max-width: 1200px; padding: 0px 0.5em; position: relative= +; margin: 0px auto !important; } + +.layout-wrapper, pre { box-sizing: border-box; } + +pre { margin: 1rem 0px; background: rgb(36, 38, 32); color: rgb(255, 255, 2= +55); font-weight: 200; padding: 10px; font-size: 14px; white-space: pre; bo= +rder-radius: 0.5rem; overflow-x: scroll; } + +pre code { display: block; padding: 0.7em; max-width: 100%; box-sizing: bor= +der-box; } + +pre code, pre code[class=3D"language-css"], pre code[class=3D"language-html= +"], pre code[class=3D"language-javascript"], pre code[class=3D"language-js"= +], pre code[class=3D"language-less"], pre code[class=3D"language-ruby"], pr= +e code[class=3D"language-saas"], pre code[class=3D"language-styl"] { tab-si= +ze: 2; } + +pre code[class=3D"language-java"], pre code[class=3D"language-php"], pre co= +de[class=3D"language-python"] { tab-size: 4; } + +pre code[class=3D"language-go"] { tab-size: 8; } + +.u-row-wrapper { max-width: 1024px; margin: 0px auto !important; } + +.u-wrapper { box-sizing: border-box; max-width: 1200px; padding: 0px 0.5rem= +; position: relative; margin: 0px auto !important; } +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: text/css +Content-Transfer-Encoding: quoted-printable +Content-Location: https://static.platzi.com/mf-classes/assets/vendors.2150be5dc038e1965127.css + +@charset "utf-8"; + +.video-js .vjs-big-play-button .vjs-icon-placeholder::before, .video-js .vj= +s-modal-dialog, .vjs-button > .vjs-icon-placeholder::before, .vjs-modal-dia= +log .vjs-modal-dialog-content { position: absolute; top: 0px; left: 0px; wi= +dth: 100%; height: 100%; } + +.video-js .vjs-big-play-button .vjs-icon-placeholder::before, .vjs-button >= + .vjs-icon-placeholder::before { text-align: center; } + +@font-face { font-family: VideoJS; src: url("data:application/font-woff;cha= +rset=3Dutf-8;base64,d09GRgABAAAAABDkAAsAAAAAG6gAAQAAAAAAAAAAAAAAAAAAAAAAAAA= +AAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3hY21hcAAAAYQAAADaAA= +ADPv749/pnbHlmAAACYAAAC3AAABHQZg6OcWhlYWQAAA3QAAAAKwAAADYZw251aGhlYQAADfwAA= +AAdAAAAJA+RCLFobXR4AAAOHAAAABMAAACM744AAGxvY2EAAA4wAAAASAAAAEhF6kqubWF4cAAA= +DngAAAAfAAAAIAE0AIFuYW1lAAAOmAAAASUAAAIK1cf1oHBvc3QAAA/AAAABJAAAAdPExYuNeJx= +jYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BU= +gAeJxjYGS7wTiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGJHcRdyA4RZ= +gQRADK3CxEAAHic7dFZbsMgAEXRS0ycyZnnOeG7y+qC8pU1dHusIOXxuoxaOlwZYWQB0Aea4quI= +EN4E9LzKbKjzDeM6H/mua6Lmc/p8yhg0lvdYx15ZG8uOLQOGjMp3EzqmzJizYMmKNRu27Nhz4Mi= +JMxeu3Ljz4Ekqm7T8P52G8PP3lnTOVk++Z6iN6QZzNN1F7ptuN7eGOjDUoaGODHVsuvU8MdTO9H= +d5aqgzQ50b6sJQl4a6MtS1oW4MdWuoO0PdG+rBUI+GejLUs6FeDPVqqDdDvRvqw1CfhpqM9At0i= +FLaAAB4nJ1YDXBTVRZ+5/22TUlJ8we0pHlJm7RJf5O8F2j6EymlSPkpxaL8U2xpa3DKj0CBhc2I= +W4eWKSokIoLsuMqssM64f+jA4HSdWXXXscBq67IOs3FXZ1ZYWVyRFdo899yXtIBQZ90k7717zz3= +v3HPPOfd854YCCj9cL9dL0RQFOqCbGJnrHb5EayiKIWN8iA/hWBblo6hUWm8TtCDwE80WMJus/i= +rwyxOdxeB0MDb14VNJHnXYoLLSl6FfCUYO9nYPTA8Epg9090LprfbBbZ2hY0UlJUXHQp3/vtWkS= +6EBv8+rPMq5u9692f/dNxJNiqwC1xPE9TCUgCsSdQWgE3XQD25lkG4CN2xmTcOXWBOyser6RN6K= +nGbKSbmQ3+d0OI1m2W8QzLLkI2sykrWAgJJEtA8vGGW/2Q+CmT3n8zS9wZwu2DCvtuZKZN3xkrL= +h36yCZuUomQSqGpY8t/25VfHVhw8z4ebGBtfLb0ya9PCaDc+8dGTvk2dsh6z7WzvowlXKUSWo9M= +J15a3KrEP2loOr2Ojhw6iW6hf2BDdEccQvZGpaAy7YovSwq8kr7HGllxpd71rkS6G0Sf11sl9Ov= +MK1+jwPPODxjUwkOim9CU3ix1wNjXDfmJSEn618Bs6lpWwUpU+8PCqLMY650zjq8VhCIP17NEKT= +x3eaLL+s5Pi6yJWaWjTHLR1jYzPSV9VF/6Ojdb/1kO3Mk3uhHC0x6gc1BjlKQ+nQFxTYdaJkZ7y= +SVxLBbhR1dsboNXp1tCYKW2LRaEzpYcIx2BKNxaL0ZaUnSqfFoiNhHKR/GkX6PWUSAaJelQaqZL= +1EpoHNsajSEyPSoJ9IjhIxTdjHLmwZvhRDOiFTY/YeQnvrVZmiTQtGncECXtFTBZLOVwwMRgoXH= +AkXzMzPn1nAJJ8jYSbMDaqN2waGLzNhih/bZynUBMpIWSg7VYi7DRx2m8ALkIdRCJwI6ArJx2EI= +8kaDWeTQKeAFk9fjl/1AvwktjQ1P7NjyMGQyfd4vjipX6M/i52D7Cq80kqlcxEcGXRr/FEcgs0u= +5uGgB4VWuMFfpdn2Re6Hi3PqzmxWKsz6+ae2Pn9hXXw/fqM859UiGC0oKYYILJBqJrsn1Z1E5qO= +s9rQCiUQRREjm8yJcbHF5cUJufX1vAHlefw0XgUoboS3ETfQlTxBC4SOtuE8VPRJTBSCQSjZCpk= +7Gqzu+masaZ2y7Zjehho4F3g82BNDkAHpORG4+OCS+f6JTPmtRn/PH1kch6d04sp7AQb25aQ/pq= +UyXeQ8vrebG8OYQdXOQ+585u0sdW9rqalzRURiJ+9F4MweRFrKUjl1GUYhH1A27WOHw5cTFSFPM= +o9EeUIGnQTZHIaJ7AHLaOKsOODaNF9jkBjYG2QEsQ2xjMUAx2bBEbeTBWMHwskBjngq56S/yfgk= +BnWBa4K9sqKtq2t1UI8S9He5XuBRbawAdatrQEAi30Aks2+LM8WeCbalVZkWNylvJ+dqJnzVb+O= +HlSoKW8nPCP7Rd+CcZ2DdWAGqJ2CBFOphgywFFCFBNtfAbGtNPBCwxvygHeYMZMY9ZboBqwq/pV= +rsbgN5tkv152ODlbMfiqwGMBgxa4Exz3QhovRIUp6acqZmQzRq0ypDXS2TPLT02YIkQETnOE445= +oOGxOmXAqUJNNG7XgupMjPq2ua9asrj5yY/yuKteO1Kx0YNJTufrirLe1mZnat7OL6rnUdCWenp= +W6I8mAnbsY8KWs1PuSovCW9A/Z25PQ24a7cNOqgmTkLmBMgh4THgc4b9k2IVv1/g/F5nGljwPLf= +OgHAzJzh45V/4+WenTzmMtR5Z7us2Tys909UHqrPY7KbckoxRvRHhmVc3cJGE97uml0R1S0jdUL= +Vl7EvZtDFVBF35N9cEdjpgmAiOlFZ+Dtoh93+D3zzHr8RRNZQhnCNMNbcegOvpEwZoL+06cJQ07= +h+th3fZ/7PVbVC6ngTAV/KoLFuO6+2KFcU651gEb5ugPSIb1D+Xp8V4+k3sEIGnw5mYe4If4k1l= +FYr6SCzmM2EQ8iWtmwjnBI9kTwe1TlfAmXh7H02by9fW2gsjKwtv0aaURKil4OdV7rDL1MXIFNr= +hdxohcZXYTnq47WisrKitaObbf5+yvkLi5J6lCNZZ+B6GC38VNBZBDidSS/+mSvh6s+srgC8pyK= +MvDtt+de3c9fU76ZPfuM8ud4Kv0fyP/LqfepMT/3oZxSqpZaTa1DaQYLY8TFsHYbWYsPoRhRWfL= +5eSSQbhUGgGC3YLbVMk6PitTFNGpAsNrC6D1VNBKgBHMejaiuRWEWGgsSDBTJjqWIl8kJLlsaLJ= +2tXDr6xGfT85bM2Q06a46x2HTgvdnV8z5YDy/27J4zt6x2VtkzjoYpkq36kaBr4eQSg7tyiVweW= +ubXZugtadl58ydapfbORfKsDTuZ0OBgx4cfdjCf5tbWNITnL120fdOi1RV1C3uKGzNdwYLcMvZ3= +BxoPyTOCD1XvXTp7U10gWCVmTV9b3r2z0SkGWovb2hp9I89O8a2smlyaO8muMU+dRmtzp60IzAo= +FpjLr1n388boLyf0dRvxhsHZ0qbWqDkwqvvpkj4l0fY6EIXRi5sQSrAvsVYwXRy4qJ2EVtD1AN7= +a0HWth9ymvL1xc3WTUKK/TAHA/bXDVtVWfOMfuGxGZv4Ln/jVr9jc3j1yMv0tndmyt9Vq88Y9gH= +1wtLX3KWjot5++jWHgAoZZkQ14wGQ20Fli71UmKJAy4xKMSTGbVdybW7FDDAut9XpD5AzWrYO7z= +Q8qffqF8+Ynd/clrHcdyxGy3a/3+mfNnzC/cBsveTjnTvXf1o6vzOlZw7WtqtdmPK/Errz/6NNt= +D72zmNOZfbmYdTGHfoofqI79Oc+R2n1lrnL6pOm0Up7kwxhTW12Amm7WYkXR2qYrF2AmgmbAsxZ= +jwy1xpg/m1Je2vrp8v/nz2xpmlBg4E9hrMU341wVpTOh/OfmGvAnra8q6uctr60ZQHV3Q+WMQJy= +kMj8ZsWn2QBOmmHMB+m5pDIpTFonYigiaKAhGEiAHF7EliVnQkjoLVIMPtJpBKHYd3A8GYH9jJz= +rWwmHx5Qjp7vDAX0suGRym1vtm/9W1/HyR8vczfMs6Sk8DSv855/5dlX9oQq52hT8syyp2rx5Id= +17IAyAM3wIjQPMOHzytEB64q6D5zT91yNbnx3V/nqnd017S9Y0605k3izoXLpsxde2n38yoOV9s= +1LcjwzNjbdX6asnBVaBj/6/DwKwPkpcqbDG7BnsXoSqWnUAmottYF6jMSdVyYZh3zVXCjwTiwwH= +H6sGuRiEHQGzuRX6whZkp123oy1BWE2mEfJ/tvIRtM4ZM5bDXiMsPMaAKOTyc5uL57rqyyc5y5J= +E5pm1i2S2iUX0CcaQ6lC6Zog7JqSqZmYlosl2K6pwNA84zRnQW6SaALYZQGW5lhCtU/W34N6o+b= +KfZ8cf3/Cl/+iTX3wBzpOY4mRkeNf3rptycGSshQWgGbYt5jFc2e0+DglIrwl6DVWQ7BuwaJ3Xk= +1J4VL5urnLl/Wf+gHU/hZoZdKNym6lG+I34FaNeZKcSpJIo2IeCVvpdsDGfKvzJnAwmeD37Ow65= +ZWwSowpgwX5T69s/rB55dP5BcpgDKFV8p7q2sn/1uc93bVzT/w6UrCqDTWvfCq/oCD/qZXNoUj8= +BL5Kp6GU017frfNXkAtiiyf/SOCEeLqnd8R/Ql9GlCRfctS6k5chvIBuQ1zCCjoCHL2DHNHIXxM= +J3kQeO8lbsUXONeSfA5EjcG6/E+KdhN4bP04vBhdi883+BFBzQbxFbvZzQeY9LNBZc0FNfn5Nwf= +Dn6rCTnTw6R8o+gfpf5hCom33cRuiTlss3KHmZjD+BPN+5gXuA2ziS/Q73mLxUkpbKN/eqwz5uK= +0X9F3h2d1V4nGNgZGBgAOJd776+iue3+crAzc4AAje5Bfcg0xz9YHEOBiYQBQA8FQlFAHicY2Bk= +YGBnAAGOPgaG//85+hkYGVCBMgBGGwNYAAAAeJxjYGBgYB8EmKOPgQEAQ04BfgAAAAAAAA4AaAB= ++AMwA4AECAUIBbAGYAcICGAJYArQC4AMwA7AD3gQwBJYE3AUkBWYFigYgBmYGtAbqB1gIEghYCG= +4IhAi2COh4nGNgZGBgUGYoZWBnAAEmIOYCQgaG/2A+AwAYCQG2AHicXZBNaoNAGIZfE5PQCKFQ2= +lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAej= +dm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8= +WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmV= +FlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Y= +u6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxt= +kMl2wjAMRfOAhABlKm2h80C3+ajgCKKDY6cegP59TYBzukAL+z1Zsq8ctaJTTKPrsUQLbXQQI0E= +XKXroY4AbDDHCGBNMcYsZ7nCPB8yxwCOe8IwXvOIN7/jAJ76wxHfUqWX+OzgumWAjJMV17i0Ndl= +r6irLKO+qftdT7i6y4uFSUvCknay+lFYZIZaQcmfH/xIFdYn98bqhra1aKTM/6lWMnyaYirx1rF= +UQZFBkb2zJUtoXeJCeg0WnLtHeSFc3OtrnozNwqi0TkSpBMDB1nSde5oJXW23hTS2/T0LilglXX= +7dmFVxLnq5U0vYATHFk3zX3BOisoQHNDFDeZnqKDy9hRNawN7Vh727hFzcJ5c8TILrKZfH7tIPx= +AFP0BpLeJPA=3D=3D") format("woff"); font-weight: 400; font-style: normal; } + +.video-js .vjs-big-play-button .vjs-icon-placeholder::before, .video-js .vj= +s-play-control .vjs-icon-placeholder, .vjs-icon-play { font-family: VideoJS= +; font-weight: 400; font-style: normal; } + +.video-js .vjs-big-play-button .vjs-icon-placeholder::before, .video-js .vj= +s-play-control .vjs-icon-placeholder::before, .vjs-icon-play::before { cont= +ent: "=EF=84=81"; } + +.vjs-icon-play-circle { font-family: VideoJS; font-weight: 400; font-style:= + normal; } + +.vjs-icon-play-circle::before { content: "=EF=84=82"; } + +.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder, .vjs-icon-pa= +use { font-family: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder::before, .vjs= +-icon-pause::before { content: "=EF=84=83"; } + +.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder, .vjs-icon-volu= +me-mute { font-family: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder::before, .vjs-i= +con-volume-mute::before { content: "=EF=84=84"; } + +.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder, .vjs-icon-volu= +me-low { font-family: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder::before, .vjs-i= +con-volume-low::before { content: "=EF=84=85"; } + +.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder, .vjs-icon-volu= +me-mid { font-family: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder::before, .vjs-i= +con-volume-mid::before { content: "=EF=84=86"; } + +.video-js .vjs-mute-control .vjs-icon-placeholder, .vjs-icon-volume-high { = +font-family: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-mute-control .vjs-icon-placeholder::before, .vjs-icon-volume= +-high::before { content: "=EF=84=87"; } + +.video-js .vjs-fullscreen-control .vjs-icon-placeholder, .vjs-icon-fullscre= +en-enter { font-family: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-fullscreen-control .vjs-icon-placeholder::before, .vjs-icon-= +fullscreen-enter::before { content: "=EF=84=88"; } + +.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder, .vj= +s-icon-fullscreen-exit { font-family: VideoJS; font-weight: 400; font-style= +: normal; } + +.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder::bef= +ore, .vjs-icon-fullscreen-exit::before { content: "=EF=84=89"; } + +.vjs-icon-square { font-family: VideoJS; font-weight: 400; font-style: norm= +al; } + +.vjs-icon-square::before { content: "=EF=84=8A"; } + +.vjs-icon-spinner { font-family: VideoJS; font-weight: 400; font-style: nor= +mal; } + +.vjs-icon-spinner::before { content: "=EF=84=8B"; } + +.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,= + .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder= +, .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholde= +r, .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placehold= +er, .video-js .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-s= +ubtitles-button .vjs-icon-placeholder, .vjs-icon-subtitles { font-family: V= +ideoJS; font-weight: 400; font-style: normal; } + +.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:= +:before, .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-pla= +ceholder::before, .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs= +-icon-placeholder::before, .video-js.video-js:lang(en-NZ) .vjs-subs-caps-bu= +tton .vjs-icon-placeholder::before, .video-js .vjs-subs-caps-button .vjs-ic= +on-placeholder::before, .video-js .vjs-subtitles-button .vjs-icon-placehold= +er::before, .vjs-icon-subtitles::before { content: "=EF=84=8C"; } + +.video-js .vjs-captions-button .vjs-icon-placeholder, .video-js:lang(en) .v= +js-subs-caps-button .vjs-icon-placeholder, .video-js:lang(fr-CA) .vjs-subs-= +caps-button .vjs-icon-placeholder, .vjs-icon-captions { font-family: VideoJ= +S; font-weight: 400; font-style: normal; } + +.video-js .vjs-captions-button .vjs-icon-placeholder::before, .video-js:lan= +g(en) .vjs-subs-caps-button .vjs-icon-placeholder::before, .video-js:lang(f= +r-CA) .vjs-subs-caps-button .vjs-icon-placeholder::before, .vjs-icon-captio= +ns::before { content: "=EF=84=8D"; } + +.video-js .vjs-chapters-button .vjs-icon-placeholder, .vjs-icon-chapters { = +font-family: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-chapters-button .vjs-icon-placeholder::before, .vjs-icon-cha= +pters::before { content: "=EF=84=8E"; } + +.vjs-icon-share { font-family: VideoJS; font-weight: 400; font-style: norma= +l; } + +.vjs-icon-share::before { content: "=EF=84=8F"; } + +.vjs-icon-cog { font-family: VideoJS; font-weight: 400; font-style: normal;= + } + +.vjs-icon-cog::before { content: "=EF=84=90"; } + +.video-js .vjs-play-progress, .video-js .vjs-volume-level, .vjs-icon-circle= +, .vjs-seek-to-live-control .vjs-icon-placeholder { font-family: VideoJS; f= +ont-weight: 400; font-style: normal; } + +.video-js .vjs-play-progress::before, .video-js .vjs-volume-level::before, = +.vjs-icon-circle::before, .vjs-seek-to-live-control .vjs-icon-placeholder::= +before { content: "=EF=84=91"; } + +.vjs-icon-circle-outline { font-family: VideoJS; font-weight: 400; font-sty= +le: normal; } + +.vjs-icon-circle-outline::before { content: "=EF=84=92"; } + +.vjs-icon-circle-inner-circle { font-family: VideoJS; font-weight: 400; fon= +t-style: normal; } + +.vjs-icon-circle-inner-circle::before { content: "=EF=84=93"; } + +.vjs-icon-hd { font-family: VideoJS; font-weight: 400; font-style: normal; = +} + +.vjs-icon-hd::before { content: "=EF=84=94"; } + +.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder, .vjs-icon-ca= +ncel { font-family: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder::before, .vjs= +-icon-cancel::before { content: "=EF=84=95"; } + +.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder, .vjs-icon-repl= +ay { font-family: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder::before, .vjs-i= +con-replay::before { content: "=EF=84=96"; } + +.vjs-icon-facebook { font-family: VideoJS; font-weight: 400; font-style: no= +rmal; } + +.vjs-icon-facebook::before { content: "=EF=84=97"; } + +.vjs-icon-gplus { font-family: VideoJS; font-weight: 400; font-style: norma= +l; } + +.vjs-icon-gplus::before { content: "=EF=84=98"; } + +.vjs-icon-linkedin { font-family: VideoJS; font-weight: 400; font-style: no= +rmal; } + +.vjs-icon-linkedin::before { content: "=EF=84=99"; } + +.vjs-icon-twitter { font-family: VideoJS; font-weight: 400; font-style: nor= +mal; } + +.vjs-icon-twitter::before { content: "=EF=84=9A"; } + +.vjs-icon-tumblr { font-family: VideoJS; font-weight: 400; font-style: norm= +al; } + +.vjs-icon-tumblr::before { content: "=EF=84=9B"; } + +.vjs-icon-pinterest { font-family: VideoJS; font-weight: 400; font-style: n= +ormal; } + +.vjs-icon-pinterest::before { content: "=EF=84=9C"; } + +.video-js .vjs-descriptions-button .vjs-icon-placeholder, .vjs-icon-audio-d= +escription { font-family: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-descriptions-button .vjs-icon-placeholder::before, .vjs-icon= +-audio-description::before { content: "=EF=84=9D"; } + +.video-js .vjs-audio-button .vjs-icon-placeholder, .vjs-icon-audio { font-f= +amily: VideoJS; font-weight: 400; font-style: normal; } + +.video-js .vjs-audio-button .vjs-icon-placeholder::before, .vjs-icon-audio:= +:before { content: "=EF=84=9E"; } + +.vjs-icon-next-item { font-family: VideoJS; font-weight: 400; font-style: n= +ormal; } + +.vjs-icon-next-item::before { content: "=EF=84=9F"; } + +.vjs-icon-previous-item { font-family: VideoJS; font-weight: 400; font-styl= +e: normal; } + +.vjs-icon-previous-item::before { content: "=EF=84=A0"; } + +.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder, .vjs-icon-= +picture-in-picture-enter { font-family: VideoJS; font-weight: 400; font-sty= +le: normal; } + +.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder::before, .v= +js-icon-picture-in-picture-enter::before { content: "=EF=84=A1"; } + +.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-= +placeholder, .vjs-icon-picture-in-picture-exit { font-family: VideoJS; font= +-weight: 400; font-style: normal; } + +.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-= +placeholder::before, .vjs-icon-picture-in-picture-exit::before { content: "= +=EF=84=A2"; } + +.video-js { display: block; vertical-align: top; box-sizing: border-box; co= +lor: rgb(255, 255, 255); background-color: rgb(0, 0, 0); position: relative= +; padding: 0px; font-size: 10px; line-height: 1; font-weight: 400; font-sty= +le: normal; font-family: Arial, Helvetica, sans-serif; word-break: normal; = +} + +.video-js:-webkit-full-screen { width: 100% !important; height: 100% !impor= +tant; } + +.video-js[tabindex=3D"-1"] { outline: none; } + +.video-js *, .video-js ::after, .video-js ::before { box-sizing: inherit; } + +.video-js ul { font-family: inherit; font-size: inherit; line-height: inher= +it; list-style-position: outside; margin: 0px; } + +.video-js.vjs-1-1, .video-js.vjs-4-3, .video-js.vjs-9-16, .video-js.vjs-16-= +9, .video-js.vjs-fluid { width: 100%; max-width: 100%; height: 0px; } + +.video-js.vjs-16-9 { padding-top: 56.25%; } + +.video-js.vjs-4-3 { padding-top: 75%; } + +.video-js.vjs-9-16 { padding-top: 177.778%; } + +.video-js.vjs-1-1 { padding-top: 100%; } + +.video-js.vjs-fill, .video-js .vjs-tech { width: 100%; height: 100%; } + +.video-js .vjs-tech { position: absolute; top: 0px; left: 0px; } + +body.vjs-full-window { padding: 0px; margin: 0px; height: 100%; } + +.vjs-full-window .video-js.vjs-fullscreen { position: fixed; overflow: hidd= +en; z-index: 1000; inset: 0px; } + +.video-js.vjs-fullscreen:not(.vjs-ios-native-fs) { width: 100% !important; = +height: 100% !important; padding-top: 0px !important; } + +.video-js.vjs-fullscreen.vjs-user-inactive { cursor: none; } + +.vjs-hidden { display: none !important; } + +.vjs-disabled { opacity: 0.5; cursor: default; } + +.video-js .vjs-offscreen { height: 1px; left: -9999px; position: absolute; = +top: 0px; width: 1px; } + +.vjs-lock-showing { display: block !important; opacity: 1 !important; visib= +ility: visible !important; } + +.vjs-no-js { padding: 20px; color: rgb(255, 255, 255); background-color: rg= +b(0, 0, 0); font-size: 18px; font-family: Arial, Helvetica, sans-serif; tex= +t-align: center; width: 300px; height: 150px; margin: 0px auto; } + +.vjs-no-js a, .vjs-no-js a:visited { color: rgb(102, 168, 204); } + +.video-js .vjs-big-play-button { font-size: 3em; line-height: 1.5em; height= +: 1.63332em; width: 3em; display: block; position: absolute; top: 10px; lef= +t: 10px; padding: 0px; cursor: pointer; opacity: 1; border: 0.06666em solid= + rgb(255, 255, 255); background-color: rgba(43, 51, 63, 0.7); border-radius= +: 0.3em; transition: 0.4s; } + +.vjs-big-play-centered .vjs-big-play-button { top: 50%; left: 50%; margin-t= +op: -0.81666em; margin-left: -1.5em; } + +.video-js .vjs-big-play-button:focus, .video-js:hover .vjs-big-play-button = +{ border-color: rgb(255, 255, 255); background-color: rgba(115, 133, 159, 0= +.5); transition: all; } + +.vjs-controls-disabled .vjs-big-play-button, .vjs-error .vjs-big-play-butto= +n, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-b= +ig-play-button { display: none; } + +.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play= +-button { display: block; } + +.video-js button { background: none; border: none; color: inherit; display:= + inline-block; font-size: inherit; line-height: inherit; text-transform: no= +ne; text-decoration: none; transition: none; appearance: none; } + +.vjs-control .vjs-button { width: 100%; height: 100%; } + +.video-js .vjs-control.vjs-close-button { cursor: pointer; height: 3em; pos= +ition: absolute; right: 0px; top: 0.5em; z-index: 2; } + +.video-js .vjs-modal-dialog { background: linear-gradient(rgba(0, 0, 0, 0.8= +), rgba(255, 255, 255, 0)); overflow: auto; } + +.video-js .vjs-modal-dialog > * { box-sizing: border-box; } + +.vjs-modal-dialog .vjs-modal-dialog-content { font-size: 1.2em; line-height= +: 1.5; padding: 20px 24px; z-index: 1; } + +.vjs-menu-button { cursor: pointer; } + +.vjs-menu-button.vjs-disabled { cursor: default; } + +.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu { display: = +none; } + +.vjs-menu .vjs-menu-content { display: block; padding: 0px; margin: 0px; fo= +nt-family: Arial, Helvetica, sans-serif; overflow: auto; } + +.vjs-menu .vjs-menu-content > * { box-sizing: border-box; } + +.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu { display: none= +; } + +.vjs-menu li { list-style: none; margin: 0px; padding: 0.2em 0px; line-heig= +ht: 1.4em; font-size: 1.2em; text-align: center; text-transform: lowercase;= + } + +.js-focus-visible .vjs-menu li.vjs-menu-item:hover, .vjs-menu li.vjs-menu-i= +tem:focus, .vjs-menu li.vjs-menu-item:hover { background-color: rgba(115, 1= +33, 159, 0.5); } + +.js-focus-visible .vjs-menu li.vjs-selected:hover, .vjs-menu li.vjs-selecte= +d, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover { backg= +round-color: rgb(255, 255, 255); color: rgb(43, 51, 63); } + +.js-focus-visible .vjs-menu :not(.vjs-selected):focus:not(.focus-visible), = +.video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible) { backgro= +und: none; } + +.vjs-menu li.vjs-menu-title { text-align: center; text-transform: uppercase= +; font-size: 1em; line-height: 2em; padding: 0px; margin: 0px 0px 0.3em; fo= +nt-weight: 700; cursor: default; } + +.vjs-menu-button-popup .vjs-menu { display: none; position: absolute; botto= +m: 0px; width: 10em; left: -3em; height: 0px; margin-bottom: 1.5em; border-= +top-color: rgba(43, 51, 63, 0.7); } + +.vjs-menu-button-popup .vjs-menu .vjs-menu-content { background-color: rgba= +(43, 51, 63, 0.7); position: absolute; width: 100%; bottom: 1.5em; max-heig= +ht: 15em; } + +.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content, .vjs-l= +ayout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content { max-heig= +ht: 5em; } + +.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content { max-= +height: 10em; } + +.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content { max= +-height: 14em; } + +.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content, .vjs-l= +ayout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content, .vjs-layout= +-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content { max-height: 2= +5em; } + +.vjs-menu-button-popup .vjs-menu.vjs-lock-showing, .vjs-workinghover .vjs-m= +enu-button-popup.vjs-hover .vjs-menu { display: block; } + +.video-js .vjs-menu-button-inline { transition: 0.4s; overflow: hidden; } + +.video-js .vjs-menu-button-inline::before { width: 2.22222em; } + +.video-js .vjs-menu-button-inline.vjs-slider-active, .video-js .vjs-menu-bu= +tton-inline:focus, .video-js .vjs-menu-button-inline:hover, .video-js.vjs-n= +o-flex .vjs-menu-button-inline { width: 12em; } + +.vjs-menu-button-inline .vjs-menu { opacity: 0; height: 100%; width: auto; = +position: absolute; left: 4em; top: 0px; padding: 0px; margin: 0px; transit= +ion: 0.4s; } + +.vjs-menu-button-inline.vjs-slider-active .vjs-menu, .vjs-menu-button-inlin= +e:focus .vjs-menu, .vjs-menu-button-inline:hover .vjs-menu { display: block= +; opacity: 1; } + +.vjs-no-flex .vjs-menu-button-inline .vjs-menu { display: block; opacity: 1= +; position: relative; width: auto; } + +.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu, .vjs-no-f= +lex .vjs-menu-button-inline:focus .vjs-menu, .vjs-no-flex .vjs-menu-button-= +inline:hover .vjs-menu { width: auto; } + +.vjs-menu-button-inline .vjs-menu-content { width: auto; height: 100%; marg= +in: 0px; overflow: hidden; } + +.video-js .vjs-control-bar { display: none; width: 100%; position: absolute= +; bottom: 0px; left: 0px; right: 0px; height: 3em; background-color: rgba(4= +3, 51, 63, 0.7); } + +.vjs-has-started .vjs-control-bar { display: flex; visibility: visible; opa= +city: 1; transition: visibility 0.1s, opacity 0.1s; } + +.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { visibilit= +y: visible; opacity: 0; pointer-events: none; transition: visibility 1s, op= +acity 1s; } + +.vjs-controls-disabled .vjs-control-bar, .vjs-error .vjs-control-bar, .vjs-= +using-native-controls .vjs-control-bar { display: none !important; } + +.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {= + opacity: 1; visibility: visible; } + +.vjs-has-started.vjs-no-flex .vjs-control-bar { display: table; } + +.video-js .vjs-control { position: relative; text-align: center; margin: 0p= +x; padding: 0px; height: 100%; width: 4em; flex: 0 0 auto; } + +.vjs-button > .vjs-icon-placeholder::before { font-size: 1.8em; line-height= +: 1.67; } + +.vjs-button > .vjs-icon-placeholder { display: block; } + +.video-js .vjs-control:focus, .video-js .vjs-control:focus::before, .video-= +js .vjs-control:hover::before { text-shadow: rgb(255, 255, 255) 0px 0px 1em= +; } + +.video-js .vjs-control-text { border: 0px; clip: rect(0px, 0px, 0px, 0px); = +height: 1px; overflow: hidden; padding: 0px; position: absolute; width: 1px= +; } + +.vjs-no-flex .vjs-control { display: table-cell; vertical-align: middle; } + +.video-js .vjs-custom-control-spacer { display: none; } + +.video-js .vjs-progress-control { cursor: pointer; flex: 1 1 auto; display:= + flex; align-items: center; min-width: 4em; touch-action: none; } + +.video-js .vjs-progress-control.disabled { cursor: default; } + +.vjs-live .vjs-progress-control { display: none; } + +.vjs-liveui .vjs-progress-control { display: flex; align-items: center; } + +.vjs-no-flex .vjs-progress-control { width: auto; } + +.video-js .vjs-progress-holder { flex: 1 1 auto; transition: 0.2s; height: = +0.3em; } + +.video-js .vjs-progress-control .vjs-progress-holder { margin: 0px 10px; } + +.video-js .vjs-progress-control:hover .vjs-progress-holder { font-size: 1.6= +6667em; } + +.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled { font-= +size: 1em; } + +.video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-= +holder .vjs-load-progress div, .video-js .vjs-progress-holder .vjs-play-pro= +gress { position: absolute; display: block; height: 100%; margin: 0px; padd= +ing: 0px; width: 0px; } + +.video-js .vjs-play-progress { background-color: rgb(255, 255, 255); } + +.video-js .vjs-play-progress::before { font-size: 0.9em; position: absolute= +; right: -0.5em; top: -0.333333em; z-index: 1; } + +.video-js .vjs-load-progress { background: rgba(115, 133, 159, 0.5); } + +.video-js .vjs-load-progress div { background: rgba(115, 133, 159, 0.75); } + +.video-js .vjs-time-tooltip { background-color: rgba(255, 255, 255, 0.8); b= +order-radius: 0.3em; color: rgb(0, 0, 0); float: right; font-family: Arial,= + Helvetica, sans-serif; font-size: 1em; padding: 6px 8px 8px; pointer-event= +s: none; position: absolute; top: -3.4em; visibility: hidden; z-index: 1; } + +.video-js .vjs-progress-holder:focus .vjs-time-tooltip { display: none; } + +.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-= +tooltip, .video-js .vjs-progress-control:hover .vjs-time-tooltip { display:= + block; font-size: 0.6em; visibility: visible; } + +.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip { font-siz= +e: 1em; } + +.video-js .vjs-progress-control .vjs-mouse-display { display: none; positio= +n: absolute; width: 1px; height: 100%; background-color: rgb(0, 0, 0); z-in= +dex: 1; } + +.vjs-no-flex .vjs-progress-control .vjs-mouse-display { z-index: 0; } + +.video-js .vjs-progress-control:hover .vjs-mouse-display { display: block; = +} + +.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display { visi= +bility: hidden; opacity: 0; transition: visibility 1s, opacity 1s; } + +.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-di= +splay { display: none; } + +.vjs-mouse-display .vjs-time-tooltip { color: rgb(255, 255, 255); backgroun= +d-color: rgba(0, 0, 0, 0.8); } + +.video-js .vjs-slider { position: relative; cursor: pointer; padding: 0px; = +margin: 0px 0.45em; user-select: none; background-color: rgba(115, 133, 159= +, 0.5); } + +.video-js .vjs-slider.disabled { cursor: default; } + +.video-js .vjs-slider:focus { text-shadow: rgb(255, 255, 255) 0px 0px 1em; = +box-shadow: rgb(255, 255, 255) 0px 0px 1em; } + +.video-js .vjs-mute-control { cursor: pointer; flex: 0 0 auto; } + +.video-js .vjs-volume-control { cursor: pointer; margin-right: 1em; display= +: flex; } + +.video-js .vjs-volume-control.vjs-volume-horizontal { width: 5em; } + +.video-js .vjs-volume-panel .vjs-volume-control { visibility: visible; opac= +ity: 0; width: 1px; height: 1px; margin-left: -1px; } + +.video-js .vjs-volume-panel { transition: width 1s; } + +.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-contr= +ol, .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .v= +js-volume-panel .vjs-volume-control.vjs-slider-active, .video-js .vjs-volum= +e-panel .vjs-volume-control:active, .video-js .vjs-volume-panel:active .vjs= +-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control { vi= +sibility: visible; opacity: 1; position: relative; transition: visibility 0= +.1s, opacity 0.1s, height 0.1s, width 0.1s, left, top; } + +.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-contr= +ol.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-volume= +-control.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-con= +trol.vjs-slider-active.vjs-volume-horizontal, .video-js .vjs-volume-panel .= +vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-pane= +l:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-p= +anel:focus .vjs-volume-control.vjs-volume-horizontal { width: 5em; height: = +3em; margin-right: 0px; } + +.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-contr= +ol.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-volume-c= +ontrol.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control= +.vjs-slider-active.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-vo= +lume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel:active= + .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus= + .vjs-volume-control.vjs-volume-vertical { left: -3.5em; transition: left; = +} + +.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-j= +s .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-j= +s .vjs-volume-panel.vjs-volume-panel-horizontal:active { width: 10em; trans= +ition: width 0.1s; } + +.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-onl= +y { width: 4em; } + +.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical { heigh= +t: 8em; width: 3em; left: -3000em; transition: visibility 1s, opacity 1s, h= +eight 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s; } + +.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { tra= +nsition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top= + 1s 1s; } + +.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-hori= +zontal { width: 5em; height: 3em; visibility: visible; opacity: 1; position= +: relative; transition: none; } + +.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical, .video-js.vj= +s-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical { posit= +ion: absolute; bottom: 3em; left: 0.5em; } + +.video-js .vjs-volume-panel { display: flex; } + +.video-js .vjs-volume-bar { margin: 1.35em 0.45em; } + +.vjs-volume-bar.vjs-slider-horizontal { width: 5em; height: 0.3em; } + +.vjs-volume-bar.vjs-slider-vertical { width: 0.3em; height: 5em; margin: 1.= +35em auto; } + +.video-js .vjs-volume-level { position: absolute; bottom: 0px; left: 0px; b= +ackground-color: rgb(255, 255, 255); } + +.video-js .vjs-volume-level::before { position: absolute; font-size: 0.9em;= + z-index: 1; } + +.vjs-slider-vertical .vjs-volume-level { width: 0.3em; } + +.vjs-slider-vertical .vjs-volume-level::before { top: -0.5em; left: -0.3em;= + z-index: 1; } + +.vjs-slider-horizontal .vjs-volume-level { height: 0.3em; } + +.vjs-slider-horizontal .vjs-volume-level::before { top: -0.3em; right: -0.5= +em; } + +.video-js .vjs-volume-panel.vjs-volume-panel-vertical { width: 4em; } + +.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level { height: 100%; } + +.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { width: 100%; } + +.video-js .vjs-volume-vertical { width: 3em; height: 8em; bottom: 8em; back= +ground-color: rgba(43, 51, 63, 0.7); } + +.video-js .vjs-volume-horizontal .vjs-menu { left: -2em; } + +.video-js .vjs-volume-tooltip { background-color: rgba(255, 255, 255, 0.8);= + border-radius: 0.3em; color: rgb(0, 0, 0); float: right; font-family: Aria= +l, Helvetica, sans-serif; font-size: 1em; padding: 6px 8px 8px; pointer-eve= +nts: none; position: absolute; top: -3.4em; visibility: hidden; z-index: 1;= + } + +.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-= +tooltip, .video-js .vjs-volume-control:hover .vjs-volume-tooltip { display:= + block; font-size: 1em; visibility: visible; } + +.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume= +-tooltip, .video-js .vjs-volume-vertical:hover .vjs-volume-tooltip { left: = +1em; top: -12px; } + +.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip { font-siz= +e: 1em; } + +.video-js .vjs-volume-control .vjs-mouse-display { display: none; position:= + absolute; width: 100%; height: 1px; background-color: rgb(0, 0, 0); z-inde= +x: 1; } + +.video-js .vjs-volume-horizontal .vjs-mouse-display { width: 1px; height: 1= +00%; } + +.vjs-no-flex .vjs-volume-control .vjs-mouse-display { z-index: 0; } + +.video-js .vjs-volume-control:hover .vjs-mouse-display { display: block; } + +.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display { visibi= +lity: hidden; opacity: 0; transition: visibility 1s, opacity 1s; } + +.video-js.vjs-user-inactive.vjs-no-flex .vjs-volume-control .vjs-mouse-disp= +lay { display: none; } + +.vjs-mouse-display .vjs-volume-tooltip { color: rgb(255, 255, 255); backgro= +und-color: rgba(0, 0, 0, 0.8); } + +.vjs-poster { display: inline-block; vertical-align: middle; background-rep= +eat: no-repeat; background-position: 50% 50%; background-size: contain; bac= +kground-color: rgb(0, 0, 0); cursor: pointer; margin: 0px; padding: 0px; po= +sition: absolute; inset: 0px; height: 100%; } + +.vjs-has-started .vjs-poster { display: none; } + +.vjs-audio.vjs-has-started .vjs-poster { display: block; } + +.vjs-using-native-controls .vjs-poster { display: none; } + +.video-js .vjs-live-control { display: flex; align-items: flex-start; flex:= + 1 1 auto; font-size: 1em; line-height: 3em; } + +.vjs-no-flex .vjs-live-control { display: table-cell; width: auto; text-ali= +gn: left; } + +.video-js.vjs-liveui .vjs-live-control, .video-js:not(.vjs-live) .vjs-live-= +control { display: none; } + +.video-js .vjs-seek-to-live-control { align-items: center; cursor: pointer;= + flex: 0 0 auto; display: inline-flex; height: 100%; padding-left: 0.5em; p= +adding-right: 0.5em; font-size: 1em; line-height: 3em; width: auto; min-wid= +th: 4em; } + +.vjs-no-flex .vjs-seek-to-live-control { display: table-cell; width: auto; = +text-align: left; } + +.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control, .video-js:no= +t(.vjs-live) .vjs-seek-to-live-control { display: none; } + +.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge { cursor: auto; } + +.vjs-seek-to-live-control .vjs-icon-placeholder { margin-right: 0.5em; colo= +r: rgb(136, 136, 136); } + +.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholde= +r { color: red; } + +.video-js .vjs-time-control { flex: 0 0 auto; font-size: 1em; line-height: = +3em; min-width: 2em; width: auto; padding-left: 1em; padding-right: 1em; } + +.video-js .vjs-current-time, .video-js .vjs-duration, .vjs-live .vjs-time-c= +ontrol, .vjs-no-flex .vjs-current-time, .vjs-no-flex .vjs-duration { displa= +y: none; } + +.vjs-time-divider { display: none; line-height: 3em; } + +.vjs-live .vjs-time-divider { display: none; } + +.video-js .vjs-play-control { cursor: pointer; } + +.video-js .vjs-play-control .vjs-icon-placeholder { flex: 0 0 auto; } + +.vjs-text-track-display { position: absolute; inset: 0px 0px 3em; pointer-e= +vents: none; } + +.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display { bottom: 1= +em; } + +.video-js .vjs-text-track { font-size: 1.4em; text-align: center; margin-bo= +ttom: 0.1em; } + +.vjs-subtitles { color: rgb(255, 255, 255); } + +.vjs-captions { color: rgb(255, 204, 102); } + +.vjs-tt-cue { display: block; } + +video::-webkit-media-text-track-display { transform: translateY(-3em); } + +.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-dis= +play { transform: translateY(-1.5em); } + +.video-js .vjs-fullscreen-control, .video-js .vjs-picture-in-picture-contro= +l { cursor: pointer; flex: 0 0 auto; } + +.vjs-playback-rate .vjs-playback-rate-value, .vjs-playback-rate > .vjs-menu= +-button { position: absolute; top: 0px; left: 0px; width: 100%; height: 100= +%; } + +.vjs-playback-rate .vjs-playback-rate-value { pointer-events: none; font-si= +ze: 1.5em; line-height: 2; text-align: center; } + +.vjs-playback-rate .vjs-menu { width: 4em; left: 0px; } + +.vjs-error .vjs-error-display .vjs-modal-dialog-content { font-size: 1.4em;= + text-align: center; } + +.vjs-error .vjs-error-display::before { color: rgb(255, 255, 255); content:= + "X"; font-family: Arial, Helvetica, sans-serif; font-size: 4em; left: 0px;= + line-height: 1; margin-top: -0.5em; position: absolute; text-shadow: rgb(0= +, 0, 0) 0.05em 0.05em 0.1em; text-align: center; top: 50%; vertical-align: = +middle; width: 100%; } + +.vjs-loading-spinner { display: none; position: absolute; top: 50%; left: 5= +0%; margin: -25px 0px 0px -25px; opacity: 0.85; text-align: left; border: 6= +px solid rgba(43, 51, 63, 0.7); box-sizing: border-box; background-clip: pa= +dding-box; width: 50px; height: 50px; border-radius: 25px; visibility: hidd= +en; } + +.vjs-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner { disp= +lay: block; animation: 0s linear 0.3s 1 normal forwards running vjs-spinner= +-show; } + +.vjs-loading-spinner::after, .vjs-loading-spinner::before { content: ""; po= +sition: absolute; margin: -6px; box-sizing: inherit; width: inherit; height= +: inherit; border-radius: inherit; opacity: 1; border-style: inherit; borde= +r-width: inherit; border-image: inherit; border-color: rgb(255, 255, 255) t= +ransparent transparent; } + +.vjs-seeking .vjs-loading-spinner::after, .vjs-seeking .vjs-loading-spinner= +::before, .vjs-waiting .vjs-loading-spinner::after, .vjs-waiting .vjs-loadi= +ng-spinner::before { animation: 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) 0s infi= +nite normal none running vjs-spinner-spin, 1.1s linear 0s infinite normal n= +one running vjs-spinner-fade; } + +.vjs-seeking .vjs-loading-spinner::before, .vjs-waiting .vjs-loading-spinne= +r::before { border-top-color: rgb(255, 255, 255); } + +.vjs-seeking .vjs-loading-spinner::after, .vjs-waiting .vjs-loading-spinner= +::after { border-top-color: rgb(255, 255, 255); animation-delay: 0.44s; } + +@keyframes vjs-spinner-show {=20 + 100% { visibility: visible; } +} + +@-webkit-keyframes vjs-spinner-show {=20 + 100% { visibility: visible; } +} + +@keyframes vjs-spinner-spin {=20 + 100% { transform: rotate(1turn); } +} + +@-webkit-keyframes vjs-spinner-spin {=20 + 100% { transform: rotate(1turn); } +} + +@keyframes vjs-spinner-fade {=20 + 0% { border-top-color: rgb(115, 133, 159); } + 20% { border-top-color: rgb(115, 133, 159); } + 35% { border-top-color: rgb(255, 255, 255); } + 60% { border-top-color: rgb(115, 133, 159); } + 100% { border-top-color: rgb(115, 133, 159); } +} + +@-webkit-keyframes vjs-spinner-fade {=20 + 0% { border-top-color: rgb(115, 133, 159); } + 20% { border-top-color: rgb(115, 133, 159); } + 35% { border-top-color: rgb(255, 255, 255); } + 60% { border-top-color: rgb(115, 133, 159); } + 100% { border-top-color: rgb(115, 133, 159); } +} + +.vjs-chapters-button .vjs-menu ul { width: 24em; } + +.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-me= +nu-item-text .vjs-icon-placeholder { vertical-align: middle; display: inlin= +e-block; margin-bottom: -0.1em; } + +.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-me= +nu-item-text .vjs-icon-placeholder::before { font-family: VideoJS; content:= + "=EF=84=8D"; font-size: 1.5em; line-height: inherit; } + +.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-= +item-text .vjs-icon-placeholder { vertical-align: middle; display: inline-b= +lock; margin-bottom: -0.1em; } + +.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-= +item-text .vjs-icon-placeholder::before { font-family: VideoJS; content: " = +=EF=84=9D"; font-size: 1.5em; line-height: inherit; } + +.video-js.vjs-layout-small .vjs-audio-button, .video-js.vjs-layout-small .v= +js-captions-button, .video-js.vjs-layout-small .vjs-chapters-button, .video= +-js.vjs-layout-small .vjs-current-time, .video-js.vjs-layout-small .vjs-des= +criptions-button, .video-js.vjs-layout-small .vjs-duration, .video-js.vjs-l= +ayout-small .vjs-playback-rate, .video-js.vjs-layout-small .vjs-remaining-t= +ime, .video-js.vjs-layout-small .vjs-subtitles-button, .video-js.vjs-layout= +-small .vjs-time-divider, .video-js.vjs-layout-small .vjs-volume-control, .= +video-js.vjs-layout-tiny .vjs-audio-button, .video-js.vjs-layout-tiny .vjs-= +captions-button, .video-js.vjs-layout-tiny .vjs-chapters-button, .video-js.= +vjs-layout-tiny .vjs-current-time, .video-js.vjs-layout-tiny .vjs-descripti= +ons-button, .video-js.vjs-layout-tiny .vjs-duration, .video-js.vjs-layout-t= +iny .vjs-playback-rate, .video-js.vjs-layout-tiny .vjs-remaining-time, .vid= +eo-js.vjs-layout-tiny .vjs-subtitles-button, .video-js.vjs-layout-tiny .vjs= +-time-divider, .video-js.vjs-layout-tiny .vjs-volume-control, .video-js.vjs= +-layout-x-small .vjs-audio-button, .video-js.vjs-layout-x-small .vjs-captio= +ns-button, .video-js.vjs-layout-x-small .vjs-chapters-button, .video-js.vjs= +-layout-x-small .vjs-current-time, .video-js.vjs-layout-x-small .vjs-descri= +ptions-button, .video-js.vjs-layout-x-small .vjs-duration, .video-js.vjs-la= +yout-x-small .vjs-playback-rate, .video-js.vjs-layout-x-small .vjs-remainin= +g-time, .video-js.vjs-layout-x-small .vjs-subtitles-button, .video-js.vjs-l= +ayout-x-small .vjs-time-divider, .video-js.vjs-layout-x-small .vjs-volume-c= +ontrol { display: none !important; } + +.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vj= +s-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-pa= +nel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-vol= +ume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs= +-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-= +volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny = +.vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x= +-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .vi= +deo-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:act= +ive, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizo= +ntal:hover { width: auto; } + +.video-js.vjs-layout-tiny .vjs-subs-caps-button, .video-js.vjs-layout-x-sma= +ll:not(.vjs-live) .vjs-subs-caps-button, .video-js.vjs-layout-x-small:not(.= +vjs-liveui) .vjs-subs-caps-button { display: none; } + +.video-js.vjs-layout-tiny .vjs-custom-control-spacer, .video-js.vjs-layout-= +x-small.vjs-liveui .vjs-custom-control-spacer { flex: 1 1 auto; display: bl= +ock; } + +.video-js.vjs-layout-tiny.vjs-no-flex .vjs-custom-control-spacer, .video-js= +.vjs-layout-x-small.vjs-liveui.vjs-no-flex .vjs-custom-control-spacer { wid= +th: auto; } + +.video-js.vjs-layout-tiny .vjs-progress-control, .video-js.vjs-layout-x-sma= +ll.vjs-liveui .vjs-progress-control { display: none; } + +.vjs-modal-dialog.vjs-text-track-settings { background-color: rgba(43, 51, = +63, 0.75); color: rgb(255, 255, 255); height: 70%; } + +.vjs-text-track-settings .vjs-modal-dialog-content { display: table; } + +.vjs-text-track-settings .vjs-track-settings-colors, .vjs-text-track-settin= +gs .vjs-track-settings-controls, .vjs-text-track-settings .vjs-track-settin= +gs-font { display: table-cell; } + +.vjs-text-track-settings .vjs-track-settings-controls { text-align: right; = +vertical-align: bottom; } + +@supports (display:grid) { + .vjs-text-track-settings .vjs-modal-dialog-content { display: grid; grid-= +template-columns: 1fr 1fr; grid-template-rows: 1fr; padding: 20px 24px 0px;= + } + .vjs-track-settings-controls .vjs-default-button { margin-bottom: 20px; } + .vjs-text-track-settings .vjs-track-settings-controls { grid-column: 1 / = +-1; } + .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content, .vj= +s-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content, .vjs-layo= +ut-x-small .vjs-text-track-settings .vjs-modal-dialog-content { grid-templa= +te-columns: 1fr; } +} + +.vjs-track-setting > select { margin-right: 1em; margin-bottom: 0.5em; } + +.vjs-text-track-settings fieldset { margin: 5px; padding: 3px; border: none= +; } + +.vjs-text-track-settings fieldset span { display: inline-block; } + +.vjs-text-track-settings fieldset span > select { max-width: 7.3em; } + +.vjs-text-track-settings legend { color: rgb(255, 255, 255); margin: 0px 0p= +x 5px; } + +.vjs-text-track-settings .vjs-label { position: absolute; clip: rect(1px, 1= +px, 1px, 1px); display: block; margin: 0px 0px 5px; padding: 0px; border: 0= +px; height: 1px; width: 1px; overflow: hidden; } + +.vjs-track-settings-controls button:active, .vjs-track-settings-controls bu= +tton:focus { outline-style: solid; outline-width: medium; background-image:= + linear-gradient(0deg, rgb(255, 255, 255) 88%, rgb(115, 133, 159)); } + +.vjs-track-settings-controls button:hover { color: rgba(43, 51, 63, 0.75); = +} + +.vjs-track-settings-controls button { background-color: rgb(255, 255, 255);= + background-image: linear-gradient(-180deg, rgb(255, 255, 255) 88%, rgb(115= +, 133, 159)); color: rgb(43, 51, 63); cursor: pointer; border-radius: 2px; = +} + +.vjs-track-settings-controls .vjs-default-button { margin-right: 1em; } + +@media print { + .video-js > :not(.vjs-tech):not(.vjs-poster) { visibility: hidden; } +} + +.vjs-resize-manager { position: absolute; top: 0px; left: 0px; width: 100%;= + height: 100%; border: none; z-index: -1000; } + +.js-focus-visible .video-js :focus:not(.focus-visible), .video-js :focus:no= +t(:focus-visible) { outline: none; } +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: text/css +Content-Transfer-Encoding: quoted-printable +Content-Location: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-svg-core@1.2.28/styles.css + +@charset "utf-8"; + +svg:not(:root).svg-inline--fa { overflow: visible; } + +.svg-inline--fa { display: inline-block; font-size: inherit; height: 1em; o= +verflow: visible; vertical-align: -0.125em; } + +.svg-inline--fa.fa-lg { vertical-align: -0.225em; } + +.svg-inline--fa.fa-w-1 { width: 0.0625em; } + +.svg-inline--fa.fa-w-2 { width: 0.125em; } + +.svg-inline--fa.fa-w-3 { width: 0.1875em; } + +.svg-inline--fa.fa-w-4 { width: 0.25em; } + +.svg-inline--fa.fa-w-5 { width: 0.3125em; } + +.svg-inline--fa.fa-w-6 { width: 0.375em; } + +.svg-inline--fa.fa-w-7 { width: 0.4375em; } + +.svg-inline--fa.fa-w-8 { width: 0.5em; } + +.svg-inline--fa.fa-w-9 { width: 0.5625em; } + +.svg-inline--fa.fa-w-10 { width: 0.625em; } + +.svg-inline--fa.fa-w-11 { width: 0.6875em; } + +.svg-inline--fa.fa-w-12 { width: 0.75em; } + +.svg-inline--fa.fa-w-13 { width: 0.8125em; } + +.svg-inline--fa.fa-w-14 { width: 0.875em; } + +.svg-inline--fa.fa-w-15 { width: 0.9375em; } + +.svg-inline--fa.fa-w-16 { width: 1em; } + +.svg-inline--fa.fa-w-17 { width: 1.0625em; } + +.svg-inline--fa.fa-w-18 { width: 1.125em; } + +.svg-inline--fa.fa-w-19 { width: 1.1875em; } + +.svg-inline--fa.fa-w-20 { width: 1.25em; } + +.svg-inline--fa.fa-pull-left { margin-right: 0.3em; width: auto; } + +.svg-inline--fa.fa-pull-right { margin-left: 0.3em; width: auto; } + +.svg-inline--fa.fa-border { height: 1.5em; } + +.svg-inline--fa.fa-li { width: 2em; } + +.svg-inline--fa.fa-fw { width: 1.25em; } + +.fa-layers svg.svg-inline--fa { inset: 0px; margin: auto; position: absolut= +e; } + +.fa-layers { display: inline-block; height: 1em; position: relative; text-a= +lign: center; vertical-align: -0.125em; width: 1em; } + +.fa-layers svg.svg-inline--fa { transform-origin: center center; } + +.fa-layers-text, .fa-layers-counter { display: inline-block; position: abso= +lute; text-align: center; } + +.fa-layers-text { left: 50%; top: 50%; transform: translate(-50%, -50%); tr= +ansform-origin: center center; } + +.fa-layers-counter { background-color: rgb(255, 37, 58); border-radius: 1em= +; box-sizing: border-box; color: rgb(255, 255, 255); height: 1.5em; line-he= +ight: 1; max-width: 5em; min-width: 1.5em; overflow: hidden; padding: 0.25e= +m; right: 0px; text-overflow: ellipsis; top: 0px; transform: scale(0.25); t= +ransform-origin: right top; } + +.fa-layers-bottom-right { bottom: 0px; right: 0px; top: auto; transform: sc= +ale(0.25); transform-origin: right bottom; } + +.fa-layers-bottom-left { inset: auto auto 0px 0px; transform: scale(0.25); = +transform-origin: left bottom; } + +.fa-layers-top-right { right: 0px; top: 0px; transform: scale(0.25); transf= +orm-origin: right top; } + +.fa-layers-top-left { left: 0px; right: auto; top: 0px; transform: scale(0.= +25); transform-origin: left top; } + +.fa-lg { font-size: 1.33333em; line-height: 0.75em; vertical-align: -0.0667= +em; } + +.fa-xs { font-size: 0.75em; } + +.fa-sm { font-size: 0.875em; } + +.fa-1x { font-size: 1em; } + +.fa-2x { font-size: 2em; } + +.fa-3x { font-size: 3em; } + +.fa-4x { font-size: 4em; } + +.fa-5x { font-size: 5em; } + +.fa-6x { font-size: 6em; } + +.fa-7x { font-size: 7em; } + +.fa-8x { font-size: 8em; } + +.fa-9x { font-size: 9em; } + +.fa-10x { font-size: 10em; } + +.fa-fw { text-align: center; width: 1.25em; } + +.fa-ul { list-style-type: none; margin-left: 2.5em; padding-left: 0px; } + +.fa-ul > li { position: relative; } + +.fa-li { left: -2em; position: absolute; text-align: center; width: 2em; li= +ne-height: inherit; } + +.fa-border { border: 0.08em solid rgb(238, 238, 238); border-radius: 0.1em;= + padding: 0.2em 0.25em 0.15em; } + +.fa-pull-left { float: left; } + +.fa-pull-right { float: right; } + +.fa.fa-pull-left, .fas.fa-pull-left, .far.fa-pull-left, .fal.fa-pull-left, = +.fab.fa-pull-left { margin-right: 0.3em; } + +.fa.fa-pull-right, .fas.fa-pull-right, .far.fa-pull-right, .fal.fa-pull-rig= +ht, .fab.fa-pull-right { margin-left: 0.3em; } + +.fa-spin { animation: 2s linear 0s infinite normal none running fa-spin; } + +.fa-pulse { animation: 1s steps(8) 0s infinite normal none running fa-spin;= + } + +@-webkit-keyframes fa-spin {=20 + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes fa-spin {=20 + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.fa-rotate-90 { transform: rotate(90deg); } + +.fa-rotate-180 { transform: rotate(180deg); } + +.fa-rotate-270 { transform: rotate(270deg); } + +.fa-flip-horizontal { transform: scale(-1, 1); } + +.fa-flip-vertical { transform: scale(1, -1); } + +.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical { transform: scale(-1, = +-1); } + +:root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-= +flip-horizontal, :root .fa-flip-vertical, :root .fa-flip-both { filter: non= +e; } + +.fa-stack { display: inline-block; height: 2em; position: relative; width: = +2.5em; } + +.fa-stack-1x, .fa-stack-2x { inset: 0px; margin: auto; position: absolute; = +} + +.svg-inline--fa.fa-stack-1x { height: 1em; width: 1.25em; } + +.svg-inline--fa.fa-stack-2x { height: 2em; width: 2.5em; } + +.fa-inverse { color: rgb(255, 255, 255); } + +.sr-only { border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin= +: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; } + +.sr-only-focusable:active, .sr-only-focusable:focus { clip: auto; height: a= +uto; margin: 0px; overflow: visible; position: static; width: auto; } + +.svg-inline--fa .fa-primary { fill: var(--fa-primary-color, currentColor); = +opacity: var(--fa-primary-opacity, 1); } + +.svg-inline--fa .fa-secondary { fill: var(--fa-secondary-color, currentColo= +r); opacity: var(--fa-secondary-opacity, 0.4); } + +.svg-inline--fa.fa-swap-opacity .fa-primary { opacity: var(--fa-secondary-o= +pacity, 0.4); } + +.svg-inline--fa.fa-swap-opacity .fa-secondary { opacity: var(--fa-primary-o= +pacity, 1); } + +.svg-inline--fa mask .fa-primary, .svg-inline--fa mask .fa-secondary { fill= +: black; } + +.fad.fa-inverse { color: rgb(255, 255, 255); } +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: text/html +Content-ID: +Content-Transfer-Encoding: quoted-printable + + +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU---- +Content-Type: text/html +Content-ID: +Content-Transfer-Encoding: quoted-printable +Content-Location: https://www.googletagmanager.com/static/service_worker/5a20/sw_iframe.html?origin=https%3A%2F%2Fplatzi.com + + + + + + =20 + + +------MultipartBoundary--cZ4lArDZVGvYOC6h2lAvlFkgmkASzxcrQGn17viYbU------ diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/01-Resumen.html b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/01-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..916a6c3d3de51d1dd188c09483747547701f1cf1 --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/01-Resumen.html @@ -0,0 +1,133 @@ + + + + + + + Sintaxis de Funciones y Subrutinas en Visual Basic + + + +
    +
    +

    Resumen

    La programación en Excel mediante Visual Basic for Applications (VBA) abre un mundo de posibilidades para automatizar tareas y crear soluciones personalizadas. Dominar la sintaxis correcta de funciones y subrutinas es fundamental para escribir código eficiente y mantenible que potencie nuestras hojas de cálculo.

    +

    ¿Cuál es la diferencia entre funciones y subrutinas en VBA?

    +

    Las funciones y subrutinas son dos elementos fundamentales en VBA que sirven propósitos distintos:

    +
      +
    • Las funciones están diseñadas para realizar cálculos y devolver un resultado específico
      • +
    • Las subrutinas ejecutan acciones en el documento sin necesidad de retornar valores
      • +
    +

    ¿Cómo se define la accesibilidad de una función o subrutina?

    +

    La accesibilidad determina desde dónde se puede utilizar nuestro código:

    +
      +
    • Public: permite que la función sea accesible desde cualquier módulo del documento
      • +
    • Private: restringe el uso de la función al módulo donde fue creada
      • +
    • Si no se especifica, por defecto será pública
      • +
    +

    ¿Cuáles son los elementos esenciales de la sintaxis?

    +

    Para escribir correctamente una función o subrutina, debemos incluir:

    +
      +
    • Declaración de accesibilidad (Public/Private)
      • +
    • Tipo de procedimiento (Function/Sub)
      • +
    • Nombre descriptivo que refleje su propósito
      • +
    • Parámetros necesarios entre paréntesis
      • +
    • Tipo de dato que devolverá (solo para funciones)
      • +
    • Cierre con End Function o End Sub
      • +
    +

    ¿Qué buenas prácticas debemos seguir al programar en VBA?

    +

    La claridad y organización del código son esenciales para su mantenimiento:

    +

    ¿Cómo nombrar nuestras funciones y subrutinas?

    +
      +
    • Usar nombres descriptivos que reflejen la acción o resultado
      • +
    • Evitar nombres genéricos o poco claros
      • +
    • Mantener consistencia en el estilo de nombrado
      • +
    +

    ¿Cómo estructurar el código visualmente?

    +
      +
    • Utilizar la tecla Tab para crear sangrías lógicas
      • +
    • Separar bloques de código relacionados
      • +
    • Mantener un formato consistente en todo el proyecto
      • +
    +

    La programación en VBA requiere atención al detalle y una estructura clara. Dominar estos conceptos fundamentales nos permitirá crear soluciones más robustas y mantenibles en Excel, facilitando la automatización de tareas y la creación de herramientas personalizadas para nuestras necesidades específicas.

    +
    +
    + + \ No newline at end of file diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/01-Sintaxis de Funciones y Subrutinas en Visual Basic.mp4 b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/01-Sintaxis de Funciones y Subrutinas en Visual Basic.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..a275fdabbc9582dc4d223572405ee4f75abbccfc --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/01-Sintaxis de Funciones y Subrutinas en Visual Basic.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:491e2b987116c5e04e9655c504c87b035468c1c2f0baa8d01b84b3cdf905cdaa +size 103513348 diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/01-Sintaxis de Funciones y Subrutinas en Visual Basic.vtt b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/01-Sintaxis de Funciones y Subrutinas en Visual Basic.vtt new file mode 100644 index 0000000000000000000000000000000000000000..50fdea05ae16913499873d047989bf293dbad59e --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/01-Sintaxis de Funciones y Subrutinas en Visual Basic.vtt @@ -0,0 +1,557 @@ +WEBVTT + +00:00.000 --> 00:01.480 +¿Sí? + +00:01.480 --> 00:05.520 +Platzi, educación profesional efectiva. + +00:05.520 --> 00:07.840 +Hola, te doy la bienvenida a esta clase. + +00:07.840 --> 00:10.600 +Hoy vamos a platicar sobre la sintaxis de +funciones y + +00:10.600 --> 00:11.920 +subrutinas. + +00:11.920 --> 00:14.480 +Si recuerdas, en la clase anterior +nosotros aprendimos + +00:14.480 --> 00:17.720 +cómo podemos grabar una macro y dejar el +registro de las + +00:17.720 --> 00:20.780 +actividades que realizamos en nuestro +documento de Excel para + +00:20.780 --> 00:24.480 +después repetirlo las veces que sean +necesarias. + +00:24.480 --> 00:26.600 +Cuando nosotros estamos grabando una macro, + +00:26.600 --> 00:30.040 +lo que hacemos es pedirle a Excel que +automáticamente + +00:30.040 --> 00:33.360 +genere el código o las instrucciones para +que estas + +00:33.360 --> 00:35.440 +actividades se puedan +repetir. + +00:35.440 --> 00:39.240 +Pero nosotros también podemos ir al +entorno de Visual Basic y + +00:39.240 --> 00:42.080 +escribir directamente las funciones o +subrutinas que + +00:42.080 --> 00:43.600 +necesitamos. + +00:43.600 --> 00:47.020 +Para poder hacer eso y que la herramienta +no se entienda las + +00:47.020 --> 00:48.840 +actividades que le estamos pidiendo, + +00:48.840 --> 00:51.720 +es importante que cuidemos la sintaxis o +la manera de + +00:51.720 --> 00:57.640 +escribir que estamos +utilizando. + +00:57.640 --> 01:01.360 +Cuando nosotros comenzamos en nuestro +entorno de Visual + +01:01.360 --> 01:04.880 +Basic, lo primero que tenemos que hacer es +definir la función + +01:04.880 --> 01:07.440 +o subrutina con la que estaremos trabajando. + +01:07.440 --> 01:12.720 +Y para esto consideraremos los parámetros +que vemos ahora. + +01:12.720 --> 01:15.960 +El primer parámetro es definir si nosotros +estaremos + +01:15.960 --> 01:19.480 +trabajando con una función o subrutina que +sea pública o que + +01:19.480 --> 01:21.280 +sea +privada. + +01:21.280 --> 01:25.320 +Si nosotros no ponemos esta condición, + +01:25.320 --> 01:28.520 +automáticamente y por default quedará como +una función o + +01:28.520 --> 01:30.480 +subrutina +pública. + +01:30.480 --> 01:32.520 +Cuando nosotros definimos que sea privada, + +01:32.520 --> 01:35.480 +nos estamos refiriendo a que solamente se +va a utilizar + +01:35.480 --> 01:38.480 +dentro del módulo en el que estemos +trabajando. + +01:38.480 --> 01:41.920 +Y si lo hacemos público, entonces lo +podremos utilizar + +01:41.920 --> 01:44.480 +en cualquier módulo del documento sobre el +que estamos + +01:44.480 --> 01:45.000 +trabajando. + +01:45.000 --> 01:48.680 +Lo siguiente es definir si nosotros +estaremos utilizando + +01:48.680 --> 01:51.160 +una función o una +subrutina. + +01:51.160 --> 01:54.560 +Como ya lo vimos anteriormente, las +funciones nos arrojan un + +01:54.560 --> 01:58.480 +resultado y las subrutinas simplemente +realizan acciones + +01:58.480 --> 02:01.680 +dentro de nuestro documento sin que tengan +que arrojarnos un + +02:01.680 --> 02:04.040 +resultado como +tal. + +02:04.040 --> 02:06.160 +Entonces, dependiendo de nuestra necesidad, + +02:06.160 --> 02:09.360 +nosotros podemos escribir function o sub. + +02:09.360 --> 02:12.240 +Lo siguiente es que nosotros definamos un +nombre. + +02:12.240 --> 02:15.040 +Una muy buena práctica es que el nombre +que nosotros le demos a + +02:15.040 --> 02:18.720 +nuestra función haga referencia al +resultado que nos arroja o + +02:18.720 --> 02:22.080 +el nombre que le estemos dando a nuestra +subrutina sea con + +02:22.080 --> 02:25.120 +referencia a el proceso que realiza dentro +de nuestro + +02:25.120 --> 02:26.200 +documento. + +02:26.200 --> 02:29.120 +De esta manera, cuando alguien más esté +utilizando nuestro + +02:29.120 --> 02:31.520 +archivo o se meta a editar nuestro código, + +02:31.520 --> 02:35.720 +entenderá y tendrá claro lo que realiza +esta función o + +02:35.720 --> 02:44.720 +subrutina sin necesidad de leer el resto +del código. + +02:44.720 --> 02:47.160 +Después vamos a tener los parámetros. + +02:47.160 --> 02:49.520 +Los parámetros son las variables que +nosotros + +02:49.520 --> 02:52.960 +necesitamos alimentar a nuestro algoritmo +para que pueda + +02:52.960 --> 02:57.760 +recibir la información necesaria para +realizar la actividad que + +02:57.760 --> 02:59.720 +le estamos +pidiendo. + +02:59.720 --> 03:03.520 +Cada uno de estos parámetros va a llevar +algún tipo de dato en + +03:03.520 --> 03:04.320 +específico. + +03:04.320 --> 03:07.240 +Y es también este el momento en el que +nosotros lo vamos a + +03:07.240 --> 03:07.760 +definir. + +03:11.840 --> 03:15.600 +Y, por último, vamos a elegir el tipo de +dato con el que + +03:15.600 --> 03:18.800 +nosotros necesitamos que se nos arroje +nuestro resultado en + +03:18.800 --> 03:20.400 +caso de ser una +función. + +03:20.400 --> 03:24.040 +Esto lo vamos a hacer escribiendo as y el +tipo de + +03:24.040 --> 03:25.000 +dato que +corresponde. + +03:25.000 --> 03:27.760 +As boolean, as long, as +string. + +03:27.760 --> 03:30.160 +Y los tipos de datos que ya revisamos en +unas clases + +03:30.160 --> 03:32.280 +anteriores. + +03:32.280 --> 03:35.240 +Cuando nosotros escribimos esta sintaxis, + +03:35.240 --> 03:39.160 +automáticamente nuestro espacio de Visual +Basic nos pondrá hasta + +03:39.160 --> 03:42.560 +el final end, sub o end +function, + +03:42.560 --> 03:44.160 +lo que significa que ahí +termina. + +03:44.160 --> 03:47.080 +Y nos estará delimitando el espacio en el +que nosotros + +03:47.080 --> 03:50.400 +podemos dar las instrucciones de las +actividades que necesitamos + +03:50.400 --> 03:51.680 +que se +realicen. + +03:51.680 --> 03:54.620 +Vamos a nuestro entorno de Visual Basic +para ver cómo lo + +03:54.620 --> 03:55.720 +podemos +hacer. + +03:55.720 --> 03:58.400 +Para eso vamos a abrir un documento en +blanco y lo vamos + +03:58.400 --> 04:02.360 +a guardar como libro de Excel habilitado +para macros. + +04:02.360 --> 04:05.000 +Una vez teniendo eso, nos vamos a ir a la +ficha de + +04:05.000 --> 04:09.040 +programador y al entorno de Visual Basic. + +04:12.040 --> 04:16.040 +Nosotros necesitamos un módulo para poder +comenzar a escribir. + +04:16.040 --> 04:18.480 +Si nos aparece automáticamente, lo podemos +tomar. + +04:18.480 --> 04:22.240 +Y si no, podemos irnos al menú de insertar +e insertar un + +04:22.240 --> 04:23.000 +módulo +nuevo. + +04:23.000 --> 04:26.120 +Ahora lo que tenemos que hacer es comenzar +a utilizar nuestra + +04:26.120 --> 04:27.440 +sintaxis. + +04:27.440 --> 04:31.600 +Lo primero que vamos a hacer es definir si +nuestra función o + +04:31.600 --> 04:34.360 +subrutina será pública o +privada. + +04:34.360 --> 04:37.760 +Entonces, en este caso, yo le pongo que es +pública. + +04:37.760 --> 04:41.800 +Y lo que yo quiero hacer ahora es escribir +una función. + +04:41.800 --> 04:45.600 +Entonces, public function y luego yo le +tengo que dar un + +04:45.600 --> 04:48.560 +nombre a esta función que voy a utilizar. + +04:48.560 --> 04:51.000 +Como estamos explorando +apenas, + +04:51.000 --> 04:54.040 +nuestro entorno voy a escribir que nuestra +función se llama + +04:54.040 --> 04:55.640 +prueba. + +04:55.640 --> 04:59.840 +Después voy a abrir el paréntesis para +elegir las + +04:59.840 --> 05:04.800 +variables que necesito dar como usuario a +mi función para que + +05:04.800 --> 05:07.800 +me pueda arrojar un +resultado. + +05:07.800 --> 05:11.200 +Si vemos, ahora ya se puso en rojo la +pantalla porque quiere + +05:11.200 --> 05:14.400 +decir que esto no está bien redactado o +que está incompleto. + +05:14.400 --> 05:17.000 +Esto puede suceder mientras nosotros +estamos escribiendo + +05:17.000 --> 05:19.400 +nuestro código, pero la idea es que una +vez que esté listo, + +05:19.400 --> 05:21.600 +no nos aparezca en +rojo. + +05:21.600 --> 05:29.000 +Y, por ejemplo, podemos poner x as para +definir el tipo de + +05:29.000 --> 05:32.040 +dato con el que será +ingresado. + +05:32.040 --> 05:34.400 +En este caso, necesitamos que sea un +número entero, + +05:34.400 --> 05:36.840 +entonces vamos a escribir +integer. + +05:36.840 --> 05:39.800 +Si nos vamos dando cuenta, mientras vamos +escribiendo + +05:39.800 --> 05:42.800 +visual basic, nos va a ir dando las +diferentes opciones que + +05:42.800 --> 05:44.200 +podemos +incluir. + +05:44.200 --> 05:47.400 +En este caso, vemos que aparece con una +imagen diferente, + +05:47.400 --> 05:51.200 +cuando el texto integer, quiere decir que +se está refiriendo a + +05:51.200 --> 05:52.800 +un tipo de +datos. + +05:52.800 --> 05:56.200 +Cuando nosotros lo elegimos, +automáticamente se pone en + +05:56.200 --> 05:58.200 +mayúsculas. + +05:58.200 --> 06:02.200 +Y queremos que el resultado que nos arroje +también esté en un + +06:02.200 --> 06:04.000 +formato de +integer. + +06:04.000 --> 06:07.800 +Entonces vamos a volver a escribir +nuevamente as integer. + +06:07.800 --> 06:09.800 +Listo. + +06:09.800 --> 06:14.200 +Al dar enter, podemos ver cómo nos aparece +ahora en function. + +06:14.200 --> 06:17.400 +Lo que quiere decir que todas las +actividades que nosotros + +06:17.400 --> 06:19.600 +queremos que realice esta +función, + +06:19.600 --> 06:23.400 +deben de quedar exactamente entre estas +dos líneas. + +06:23.400 --> 06:27.000 +Nosotros podemos irnos moviendo hacia +abajo o hacia arriba, + +06:27.000 --> 06:29.400 +como lo vayamos +necesitando. + +06:29.400 --> 06:33.400 +Otra buena práctica es que nosotros +intentemos usar la + +06:33.400 --> 06:37.400 +tecla de tab para ir marcando donde +empieza una nueva + +06:37.400 --> 06:39.000 +actividad de +otra. + +06:39.000 --> 06:42.600 +Si nosotros aquí ya escribimos el nombre +de nuestra función, + +06:42.600 --> 06:46.600 +vamos a dar clic en la tecla tab para que +el resto de lo que + +06:46.600 --> 06:50.200 +vayamos escribiendo vaya teniendo este +espaciado y de + +06:50.200 --> 06:53.800 +esa manera nosotros podamos entender la +lógica y cómo van + +06:53.800 --> 06:57.000 +siendo las capas dentro de nuestra función. + +06:57.000 --> 07:00.800 +Ahora te invito a que tú repitas esto que +hemos aprendido hoy. + +07:00.800 --> 07:04.000 +Entra a tu entorno de Visual Basic y +comienza a redactar con + +07:04.000 --> 07:07.800 +la sintaxis correcta para poder formar una +función o una + +07:07.800 --> 07:08.800 +subrutina. + +07:08.800 --> 07:11.200 +También te dejo el link de nuestro sitio web, + +07:11.200 --> 07:14.000 +Visual Basic, donde puedes encontrar más +información sobre + +07:14.000 --> 07:15.000 +la +subrutina. + +07:15.000 --> 07:17.800 +También te dejo un quiz para que nos +demuestres lo mucho que + +07:17.800 --> 07:18.800 +has +aprendido. + diff --git "a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/02-Creaci\303\263n de Funciones en Visual Basic para Excel.mp4" "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/02-Creaci\303\263n de Funciones en Visual Basic para Excel.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..38e255d2bd7027199a6aed80965a20b354f57f13 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/02-Creaci\303\263n de Funciones en Visual Basic para Excel.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:608cea1931e78858daadc169523dfdf370960810fa4b60a4f0b4c8e91e4f3cd6 +size 44835957 diff --git "a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/02-Creaci\303\263n de Funciones en Visual Basic para Excel.vtt" "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/02-Creaci\303\263n de Funciones en Visual Basic para Excel.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..2805abae862186ecb9abfc571462e58d9ece6bd2 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/02-Creaci\303\263n de Funciones en Visual Basic para Excel.vtt" @@ -0,0 +1,441 @@ +WEBVTT + +00:00.000 --> 00:05.800 +Platzi, educación profesional efectiva. + +00:05.800 --> 00:08.160 +Hola, qué gusto tenerte aquí de nuevo. + +00:08.160 --> 00:11.400 +Hoy vamos a aprender cómo podemos crear +una función en el + +00:11.400 --> 00:13.200 +entorno de Visual +Basic. + +00:13.200 --> 00:16.080 +Si recuerdas, en la clase anterior +aprendimos sobre la + +00:16.080 --> 00:20.560 +sintaxis de cómo podemos empezar a crear +una función o una + +00:20.560 --> 00:23.560 +subrutina dándole un nombre, definiendo +los parámetros que + +00:23.560 --> 00:27.280 +vamos a utilizar y el tipo de variable de +cada una. + +00:27.280 --> 00:31.480 +Entonces, vamos a nuestro documento de +Visual Basic para + +00:31.480 --> 00:34.160 +ver cómo podemos empezar con estas funciones. + +00:34.160 --> 00:37.880 +En este caso, vemos que tenemos en el +entorno de Visual Basic, + +00:37.880 --> 00:41.360 +si nosotros recordamos, en la clase +anterior aprendimos a + +00:41.360 --> 00:44.760 +definir la sintaxis de una función o +subrutina. + +00:44.760 --> 00:48.840 +Entonces, en nuestro módulo 1 que vemos ahora, + +00:48.840 --> 00:52.440 +podemos ver cómo ya tenemos definida una +función pública + +00:52.440 --> 00:55.840 +que lleve el nombre de prueba y que nos va +a pedir como + +00:55.840 --> 00:59.880 +atributos un número entero y que +igualmente nos devolverá un + +00:59.880 --> 01:02.080 +número +entero. + +01:02.080 --> 01:05.120 +Para nosotros poder comenzar a escribir +una función, + +01:05.120 --> 01:07.920 +primero necesitamos preguntarnos cuál es +el problema que + +01:07.920 --> 01:12.680 +queremos resolver y cómo lo resolveríamos. + +01:12.680 --> 01:18.280 +Por ejemplo, supongamos que nosotros vamos +a ingresar a + +01:18.280 --> 01:20.400 +nuestra función el +año. + +01:20.400 --> 01:23.600 +Entonces, podríamos empezar con el año 2022. + +01:23.600 --> 01:26.640 +Pero yo quisiera hacer un cálculo de cuál +va a ser ese + +01:26.640 --> 01:28.520 +año pasado cierto +tiempo. + +01:28.520 --> 01:32.680 +Entonces, lo que quiero hacer es agregarle +un número fijo. + +01:32.680 --> 01:36.080 +Y lo que puedo hacer aquí es literalmente +escribir esta + +01:36.080 --> 01:39.200 +operación para que me lo +devuelva. + +01:39.200 --> 01:46.520 +Entonces, vamos a utilizar nuestra tecla +Tab para darle el + +01:46.520 --> 01:51.440 +espacio correspondiente y vamos a utilizar +nuestra variable + +01:51.440 --> 01:52.320 +x. + +01:52.320 --> 01:55.280 +Entonces, lo que nosotros necesitamos +hacer es que a esta + +01:55.280 --> 01:58.560 +variable x le agreguemos cierto número de +años. + +01:58.560 --> 02:00.680 +Por ejemplo, +38. + +02:00.680 --> 02:01.840 +Listo. + +02:01.840 --> 02:05.360 +Si bien nosotros nos movemos de renglón y +vemos cómo nos quita + +02:05.360 --> 02:09.120 +el signo de la operación, esto quiere +decir que algo nos está + +02:09.120 --> 02:11.360 +faltando o que algo no está completo. + +02:11.360 --> 02:13.800 +En el entorno de Visual Basic, muchas +veces nos vamos a dar + +02:13.800 --> 02:16.880 +cuenta que nos aparecen las letras de otro +color o que nos + +02:16.880 --> 02:20.360 +marque errores o que simplemente hace las +correcciones. + +02:20.360 --> 02:23.400 +Y eso nos puede a nosotros ayudar a ir +mejorando en nuestras + +02:23.400 --> 02:25.440 +prácticas de cómo debemos +avanzar. + +02:29.320 --> 02:33.160 +Entonces, lo que nos está faltando aquí es +definir en qué + +02:33.160 --> 02:36.640 +variable va a ir contenida esta información. + +02:36.640 --> 02:41.120 +Nosotros pusimos una función que llamamos +prueba. + +02:41.120 --> 02:43.440 +Sobre este mismo nombre de la función, + +02:43.440 --> 02:47.120 +podemos guardar el valor que necesitamos +que nos devuelva. + +02:47.120 --> 02:50.440 +Entonces, vamos a escribir prueba y vamos +a poner el signo + +02:50.440 --> 02:52.240 +de +igual. + +02:52.240 --> 02:54.600 +Cuando nosotros estamos escribiendo en el +entorno de + +02:54.600 --> 02:59.440 +Visual Basic, el signo de igual no quiere +decir que un lado sea + +02:59.440 --> 03:02.680 +equivalente al otro lado, sino que lo que +estamos diciendo es + +03:02.680 --> 03:06.320 +que todo aquello que esté del lado derecho +será guardado en + +03:06.320 --> 03:10.240 +lo que está en el lado izquierdo, en este +caso. + +03:10.240 --> 03:14.040 +Si ven, a nosotros nos está haciendo falta +algo en nuestra + +03:14.040 --> 03:16.960 +función porque Visual Basic nos lo está +poniendo rojo de + +03:16.960 --> 03:18.440 +manera +automática. + +03:18.440 --> 03:22.680 +Entonces, agregamos el signo de más y +ahora sí lo tenemos + +03:22.680 --> 03:24.000 +listo. + +03:24.000 --> 03:28.440 +Entonces, lo que estamos haciendo aquí es +decirle, + +03:28.440 --> 03:30.880 +cuando yo llame a la función prueba, + +03:30.880 --> 03:34.280 +necesito que me pidas un número que sea +entero. + +03:34.280 --> 03:38.240 +A este número, tú, por favor, agrégale 38 +y me lo vas a + +03:38.240 --> 03:38.920 +devolver. + +03:38.920 --> 03:43.240 +Porque cuando nosotros estamos utilizando +como variable el + +03:43.240 --> 03:46.400 +nombre de nuestra función, ese es el +resultado que nosotros + +03:46.400 --> 03:48.160 +tendremos de +vuelta. + +03:48.160 --> 03:51.280 +Para poder revisar si esto lo hicimos de +manera correcta, + +03:51.280 --> 03:54.960 +nosotros podemos ver nuestra ventana de +inmediato. + +03:54.960 --> 03:59.800 +Para hacer eso, nos vamos a ir a la ficha +Ver y vamos a + +03:59.800 --> 04:04.360 +seleccionar Ventana +Inmediato. + +04:04.360 --> 04:08.960 +Aquí nosotros podemos poner un signo de +interrogación, + +04:08.960 --> 04:13.680 +un question mark y luego el nombre de +nuestra función. + +04:13.680 --> 04:18.280 +Abrimos paréntesis y vemos que nos pide una x, + +04:18.280 --> 04:21.120 +que es nuestra variable que seleccionamos +arriba y nos pide + +04:21.120 --> 04:23.480 +de manera correcta el tipo de +dato. + +04:23.480 --> 04:26.480 +En este caso, yo voy a poner un +12. + +04:26.480 --> 04:29.400 +Voy a cerrar y doy clic en +Enter. + +04:29.400 --> 04:32.200 +Y en este caso, nos está arrojando de +resultado el + +04:32.200 --> 04:33.600 +número +50. + +04:33.600 --> 04:37.920 +Y nosotros sabemos que 12 más 38, +efectivamente, es 50. + +04:37.920 --> 04:39.920 +Quiere decir que está haciendo esta +función de manera + +04:39.920 --> 04:41.640 +correcta. + +04:41.640 --> 04:44.760 +Nosotros podríamos probar nuevamente en la +ventana de + +04:44.760 --> 04:48.240 +inmediato con otro número, como el 2. + +04:48.240 --> 04:51.440 +Y vemos que efectivamente nos arroja un 40. + +04:51.440 --> 04:57.920 +Ahora, si nosotros ingresamos algún dato +que no cumpla con el + +04:57.920 --> 05:00.360 +valor establecido para el parámetro, +en este caso, + +05:00.360 --> 05:03.360 +un número entero, vamos a ver qué sucede. + +05:03.360 --> 05:07.800 +Si yo pongo 1.5 y lo corro, de igual +manera me hará esta + +05:07.800 --> 05:10.640 +operación, pero lo que está haciendo es +que no está + +05:10.640 --> 05:15.040 +considerando el 1.5, sino que está +haciendo un redondeo para + +05:15.040 --> 05:19.000 +poder almacenar este número en formato de +número entero y no + +05:19.000 --> 05:22.000 +como +decimal. + +05:22.000 --> 05:26.080 +Una vez que ya lo tengamos aquí, lo +podemos guardar y nos + +05:26.080 --> 05:30.440 +podemos ir a nuestro documento de Excel. + +05:30.440 --> 05:34.320 +En nuestro documento de Excel, nosotros +podemos escribir igual + +05:34.320 --> 05:36.520 +y poner la función +prueba. + +05:36.520 --> 05:38.880 +Vamos a ver que ya nos va a aparecer ahí +de manera + +05:38.880 --> 05:40.000 +automática. + +05:40.000 --> 05:44.800 +Ponemos el 12 como parámetro y nos arroja +el 50. + +05:44.800 --> 05:48.480 +Entonces, nosotros podemos ser tan +creativos como necesitemos o + +05:48.480 --> 05:52.360 +hacer los cálculos que vayamos requiriendo +en nuestro día a + +05:52.360 --> 05:56.400 +día e incluirlos como funciones en nuestro +documento de Excel. + +05:56.400 --> 05:59.440 +Esto nos puede ahorrar mucho tiempo cuando +necesitamos + +05:59.440 --> 06:01.800 +cosas muy específicas y funciones que no +estén + +06:01.800 --> 06:05.880 +predefinidas de manera anterior en el +entorno de Excel. + +06:05.880 --> 06:08.960 +Ahora te invito a que vayas al entorno de +Visual Basic y tú + +06:08.960 --> 06:12.240 +crees una función en la cual tú calcules +el resultado de + +06:12.240 --> 06:14.840 +multiplicar un número por sí +mismo. + +06:14.840 --> 06:17.640 +Déjanos en los comentarios una captura de +pantalla para ver + +06:17.640 --> 06:18.960 +cómo quedó tu +función. + +06:18.960 --> 06:41.520 +Nos vemos en la siguiente +clase. + diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/02-Resumen.html b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/02-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..82359bb92520892e244d1439752ce98465ff96bb --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/02-Resumen.html @@ -0,0 +1,122 @@ + + + + + + + Creación de Funciones en Visual Basic para Excel + + + +
    +
    +

    Resumen

    Aprender a crear funciones en Visual Basic te dará autonomía y eficiencia en tus proyectos, permitiéndote resolver problemas específicos mediante la personalización del entorno. Las funciones te pueden ahorrar tiempo y esfuerzo, facilitando tu trabajo con tareas repetitivas o cálculos complejos. En este artículo, descubrirás cómo crear una función en Visual Basic y cómo implementarla en Excel para maximizar tus resultados.

    +

    ¿Cómo crear una función en Visual Basic?

    +

    Crear una función en Visual Basic es un proceso metódico que empieza por la definición de un problema que necesitas resolver. Por ejemplo, calcular un año después de agregar un número fijo al año actual.

    +

    ¿Cuáles son los pasos para definir una función básica?

    +
      +
    1. Definir la función y sus parámetros: Declara una función pública en tu módulo que contemple un número entero como atributo de entrada y que devuelva un número entero.
      2. +
    2. Definir la operación: Realiza la operación deseada, como sumar un valor fijo al atributo de entrada.
      3. +
    3. Asegurar la corrección técnica: Comprueba que la función está correctamente configurada. Visual Basic proporciona señales visuales para posibles errores, como el subrayado en rojo.
      4. +
    4. Guardar el resultado: El resultado de la operación debe ser asignado al nombre de la función para retornar el valor esperado.
      5. +
    +

    ¿Cómo se puede probar la función?

    +

    Para verificar la funcionalidad correcta de tu función dentro de Visual Basic, usa la ventana "Inmediato" (disponible en el menú "Ver"). Allí:

    +
      +
    • Utiliza un signo de interrogación seguido del nombre de tu función.
      • +
    • Introduce un valor numérico que se ajusta al tipo de dato esperado.
      • +
    • Presiona Enter para ver el resultado calculado.
      • +
    +

    Este método es inmediato para verificar la función con diferentes parámetros, asegurando su correcto funcionamiento.

    +

    ¿Cómo usar la función en Excel?

    +

    Una vez definida en Visual Basic, la función personalizada puede ser integrada en Excel. Esto te permite ampliar el potencial de tus hojas de cálculo al utilizar operaciones específicas no disponibles en las funciones estándar de Excel.

    +
      +
    • Implementar la función: Escribe igual ( = ) y el nombre de tu función en una celda de Excel, selecciona o ingresa el parámetro adecuado.
      • +
    • Verificación del resultado: Excel devolverá el cálculo basado en la lógica definida en Visual Basic, tal como lo verías en el entorno de desarrollo.
      • +
    +

    ¿Qué hacer en caso de ingresar datos incorrectos?

    +

    Visual Basic maneja los errores redondeando valores erróneos al tipo esperado. Por ejemplo, si ingresas un decimal cuando se espera un entero, este se redondeará automáticamente. Esto garantiza que las funciones permanezcan robustas ante entradas inesperadas.

    +

    ¿Cuál es el siguiente paso en el aprendizaje de Visual Basic?

    +

    Te animamos a aplicar lo aprendido creando una función propia, como calcular el cuadrado de un número. Este ejercicio te ayudará a familiarizarte más con la sintaxis y lógica del lenguaje. ¡Comparte tus resultados para seguir mejorando y compartir tus avances! Con práctica continua, te volverás cada vez más competente y eficiente en el uso de Visual Basic.

    +
    +
    + + \ No newline at end of file diff --git "a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/03-Creaci\303\263n de Subrutinas en Visual Basic para Excel.mp4" "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/03-Creaci\303\263n de Subrutinas en Visual Basic para Excel.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..d4c2f474d468d04538b3c5eef9dae713222924d6 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/03-Creaci\303\263n de Subrutinas en Visual Basic para Excel.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a14547f72b96827d4d8269bd7133e5795c8878148375d8131cd5b9e220d9f9dd +size 67990588 diff --git "a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/03-Creaci\303\263n de Subrutinas en Visual Basic para Excel.vtt" "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/03-Creaci\303\263n de Subrutinas en Visual Basic para Excel.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..1be308dee86f6a02ebacadbf3903b4656e25b5e2 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/03-Creaci\303\263n de Subrutinas en Visual Basic para Excel.vtt" @@ -0,0 +1,697 @@ +WEBVTT + +00:00.000 --> 00:05.600 +Platzi, educación profesional efectiva. + +00:05.600 --> 00:08.080 +Hola, te doy la bienvenida a esta clase. + +00:08.080 --> 00:11.760 +Hoy vamos a hablar de cómo podemos crear +una subrutina. + +00:11.760 --> 00:14.840 +En la clase anterior aprendimos cómo +nosotros podemos crear una + +00:14.840 --> 00:17.560 +función en el entorno de Visual Basic. + +00:17.560 --> 00:20.520 +Esta función nos arroja un resultado. + +00:20.520 --> 00:23.520 +Cuando nosotros creamos una subrutina, + +00:23.520 --> 00:26.400 +le estamos diciendo a Excel que haga un +procedimiento en el + +00:26.400 --> 00:29.280 +cual nosotros no vamos a recibir un resultado, + +00:29.280 --> 00:32.640 +sino que lo vamos a ver reflejado +directamente en nuestra hoja de + +00:32.640 --> 00:33.600 +Excel. + +00:33.600 --> 00:36.720 +Vamos a nuestro documento para ver cómo +podemos hacerlo. + +00:36.720 --> 00:40.080 +Para aprender a cómo podemos nosotros +hacer una subrutina, + +00:40.080 --> 00:42.880 +vamos a utilizar el archivo de Excel con +el que trabajamos la + +00:42.880 --> 00:47.560 +clase anterior y donde creamos nuestra +función llamada prueba. + +00:47.560 --> 00:50.400 +Es importante que usemos este archivo de +Excel o cualquier + +00:50.400 --> 00:53.080 +otro archivo que ya esté guardado como +archivo de Excel + +00:53.080 --> 00:56.280 +habilitado para macros y que no se vaya a +perder todo lo que + +00:56.280 --> 00:59.680 +vayamos trabajando durante esta clase. + +00:59.680 --> 01:02.880 +Nosotros estamos trabajando sobre el módulo 1. + +01:02.880 --> 01:06.040 +En este módulo podemos incluir tantas +funciones y subrutinas + +01:06.040 --> 01:09.280 +como querramos, pero si de repente es más +sencillo para + +01:09.280 --> 01:12.440 +nosotros y nuestra organización agregar un +nuevo módulo, + +01:12.440 --> 01:14.720 +igual podemos +hacerlo. + +01:14.720 --> 01:17.520 +Una buena práctica es que nosotros +utilicemos los + +01:17.520 --> 01:20.280 +comentarios que podemos agregar dentro del +entorno de Visual + +01:20.280 --> 01:21.160 +Basic. + +01:21.160 --> 01:24.680 +Estos comentarios serán líneas de texto +que no afectarán al + +01:24.680 --> 01:28.480 +código y que cuando Excel esté leyendo las +instrucciones que le + +01:28.480 --> 01:30.520 +pedimos, se lo +brincará. + +01:30.520 --> 01:33.520 +Y nos puede servir para nosotros ir +teniendo una guía de qué + +01:33.520 --> 01:36.840 +significa cada cosa o qué va a ser cada +parte de nuestra + +01:36.840 --> 01:40.600 +función, dónde empezamos una subrutina que +sea distinta, + +01:40.600 --> 01:41.600 +etcétera. + +01:41.600 --> 01:43.480 +Para poder agregar un +comentario, + +01:43.480 --> 01:48.520 +simplemente tenemos que poner una comilla +y empezar a + +01:48.520 --> 01:54.960 +escribir. + +01:54.960 --> 01:57.840 +Y vamos a poner, vamos a hacer una subrutina. + +01:57.840 --> 02:00.960 +Cuando nosotros damos Enter, nos vamos a +dar cuenta que el + +02:00.960 --> 02:02.960 +texto va a cambiar a color +verde. + +02:02.960 --> 02:07.120 +Eso nos asegura que no se va a leer esta +instrucción como + +02:07.120 --> 02:09.880 +algo que Excel tiene que hacer, sino que +es simplemente un + +02:09.880 --> 02:12.440 +comentario para el +usuario. + +02:12.440 --> 02:15.480 +Estos comentarios nosotros los podemos +agregar entre cada una + +02:15.480 --> 02:19.560 +de las funciones y subrutinas o +directamente dentro del código + +02:19.560 --> 02:22.400 +de la función y subrutina, porque no nos +van a afectar las + +02:22.400 --> 02:25.600 +instrucciones que nosotros esté montando. + +02:25.600 --> 02:29.080 +Ahora, lo que tenemos que hacer primero +para empezar a redactar + +02:29.080 --> 02:33.640 +nuestra subrutina, es decir, si va a ser +pública o privada. + +02:33.640 --> 02:37.240 +En este caso, la pondremos pública y +pondremos public. + +02:37.240 --> 02:39.400 +Y como estamos hablando de una subrutina, + +02:39.400 --> 02:41.520 +vamos a poner public +sub. + +02:41.520 --> 02:44.800 +Y le vamos a llamar prueba +2. + +02:44.800 --> 02:47.960 +En este caso, nosotros vamos a dejar la +parte de los + +02:47.960 --> 02:51.680 +argumentos vacía, porque es una subrutina +y no se requieren. + +02:51.680 --> 02:56.360 +Así como tampoco vamos a incluir el tipo +de dato en el que se + +02:56.360 --> 02:58.520 +regresarían los resultados, porque no hay +resultados que + +02:58.520 --> 02:59.840 +regresen. + +02:59.840 --> 03:03.360 +Si nos damos cuenta, el entorno Visual +Basic automáticamente + +03:03.360 --> 03:07.080 +ya nos puso una línea para dividir dónde +acaba nuestra + +03:07.080 --> 03:10.280 +función y dónde estamos empezando una +subrutina. + +03:10.280 --> 03:12.720 +Cuando nosotros damos clic en Enter, + +03:12.720 --> 03:15.720 +vemos que nos aparece en la parte inferior, +en sub. + +03:15.720 --> 03:19.360 +Indicándonos en qué renglones nosotros +podemos empezar a + +03:19.360 --> 03:22.560 +escribir las instrucciones que se llevarán +a cabo con esta + +03:22.560 --> 03:24.760 +subrutina. + +03:24.760 --> 03:29.200 +Ahora, como las subrutinas son +instrucciones de cosas que + +03:29.200 --> 03:32.080 +nosotros necesitamos que se apliquen +directamente en + +03:32.080 --> 03:35.600 +nuestra hoja de Excel, es muy útil +aprender a cómo hacer + +03:35.600 --> 03:38.280 +referencia a una celda +específica, + +03:38.280 --> 03:39.960 +a un rango o a una +hoja. + +03:39.960 --> 03:43.000 +Y vamos a ver cómo podemos +hacerlo. + +03:43.000 --> 03:46.000 +En este caso, vamos a empezar por las celdas. + +03:46.000 --> 03:48.400 +Para hacer referencia a una celda en +específico, + +03:48.400 --> 03:53.240 +nosotros necesitamos escribir cells y +abrimos paréntesis. + +03:53.240 --> 03:56.320 +Vemos que ahora los argumentos que nos +piden son row, + +03:56.320 --> 03:59.560 +que son las líneas, y column, las columnas +en las que + +03:59.560 --> 04:03.280 +nosotros vamos a querer que nuestra +información quede + +04:03.280 --> 04:04.640 +guardada. + +04:04.640 --> 04:06.440 +Si bien, en nuestro documento de Excel, + +04:06.440 --> 04:10.160 +nosotros vemos que cada uno de las celdas +tiene un nombre + +04:10.160 --> 04:13.760 +dependiendo de la columna, que incluye una +letra, + +04:13.760 --> 04:21.600 +y la línea, que está numerado del 1 hasta +el 1,048,576. + +04:21.600 --> 04:24.320 +Entonces, también podemos ir viendo en el +nombre de cada uno + +04:24.320 --> 04:30.200 +estos rangos, como toma el valor de A1, B2, +B3, etcétera. + +04:30.200 --> 04:32.320 +Sin embargo, en nuestro entorno Visual Basic, + +04:32.320 --> 04:36.520 +nosotros nombraremos a estas celdas +utilizando solamente + +04:36.520 --> 04:37.840 +formato +numérico. + +04:37.840 --> 04:40.760 +Siempre primero irá la línea y después la +columna. + +04:40.760 --> 04:44.560 +Entonces, la columna A es la 1, la B es la 2, +la C es la 3, + +04:44.560 --> 04:46.400 +y así +sucesivamente. + +04:46.400 --> 04:51.080 +Si nosotros queremos agregar texto en la +celda A1, + +04:51.080 --> 04:54.040 +entonces tenemos que ingresar +1,1, + +04:54.040 --> 04:56.160 +primera fila, primera +columna. + +04:56.160 --> 04:59.400 +Y después vamos a poner el signo de igual. + +04:59.400 --> 05:01.560 +Recordemos que en el entorno Visual Basic, + +05:01.560 --> 05:04.640 +todo lo que nosotros pongamos en el lado +derecho del signo de + +05:04.640 --> 05:08.360 +igual será información que se vaciará en +el lado izquierdo, + +05:08.360 --> 05:11.640 +ya sea una celda o una +variable. + +05:11.640 --> 05:14.040 +Y aquí nosotros podemos escribir un texto. + +05:14.040 --> 05:16.920 +Y como ese texto va entre +comillas, + +05:16.920 --> 05:20.320 +vamos a poner Hola, +mundo. + +05:20.320 --> 05:21.720 +Listo. + +05:21.720 --> 05:24.960 +Nosotros podemos correr esta función +directamente desde el + +05:24.960 --> 05:28.200 +entorno de Visual Basic o desde nuestro libro. + +05:28.200 --> 05:30.240 +Para correrlo desde el entorno de Visual +Basic, + +05:30.240 --> 05:31.960 +nos podemos ir a la parte +superior, + +05:31.960 --> 05:34.160 +en donde hay un triángulo verde o un play, + +05:34.160 --> 05:35.920 +que es el botón de +correr. + +05:35.920 --> 05:40.360 +También podemos utilizar el atajo de F5. + +05:40.360 --> 05:43.720 +Cuando nosotros lo corremos y vamos a +nuestro documento, + +05:43.720 --> 05:46.560 +vemos que ahora nos aparece el texto que +nosotros habíamos + +05:46.560 --> 05:49.840 +ingresado en la celda que nosotros +necesitábamos que + +05:49.840 --> 05:51.120 +estuviera este +texto. + +05:54.440 --> 05:56.600 +El entorno de Visual Basic, por default, + +05:56.600 --> 05:59.920 +va a seleccionar la hoja que tenemos +activa para vaciar este + +05:59.920 --> 06:02.760 +texto si es que nosotros no especificamos +en qué hoja del + +06:02.760 --> 06:06.600 +documento queremos que esté trabajando. + +06:06.600 --> 06:10.360 +Otra forma muy útil de vaciar el texto es +utilizar los rangos. + +06:10.360 --> 06:13.400 +Porque de repente nosotros necesitamos +poner una misma + +06:13.400 --> 06:18.200 +fórmula o un mismo texto en un gran número +de celdas y sería + +06:18.200 --> 06:21.680 +un poco inconveniente tener que escribir +el código para cada + +06:21.680 --> 06:23.440 +una de estas +celdas. + +06:23.440 --> 06:27.040 +Para poder hacerlo, nosotros vamos a +escribir range. + +06:27.040 --> 06:29.320 +Vamos a abrir paréntesis y vemos que lo +primero que nos + +06:29.320 --> 06:33.640 +pregunta es en qué celda, cuál es la celda +inicial y cuál es la + +06:33.640 --> 06:34.880 +celda +final. + +06:34.880 --> 06:38.960 +Nosotros aquí podemos incluir nuevamente +la instrucción de + +06:38.960 --> 06:42.040 +cells, en donde podemos dar el rango en +donde queremos que se + +06:42.040 --> 06:48.240 +vacíe nuestra información, que puede ser +desde la B2 hasta la + +06:48.240 --> 06:48.740 +C3. + +06:51.760 --> 06:57.240 +Y ponemos un igual y vamos a escribir +Platzi es lo mejor. + +06:57.240 --> 06:58.320 +Listo. + +06:58.320 --> 07:04.600 +Damos clic en F5 y vamos a nuestro +documento y vemos que + +07:04.600 --> 07:08.240 +efectivamente el texto que nosotros +pusimos en nuestra + +07:08.240 --> 07:10.680 +subrutina, ahora lo vemos reflejado en +nuestra hoja de + +07:10.680 --> 07:11.180 +Excel. + +07:13.800 --> 07:16.880 +Otra manera con la que nosotros podemos +trabajar con rangos es + +07:16.880 --> 07:21.920 +utilizar directamente el nombre de la +columna con la letra y el + +07:21.920 --> 07:26.160 +número de la fila con el número que le +corresponde. + +07:26.160 --> 07:31.280 +Y para esto vamos a abrir unas comillas +después de el + +07:31.280 --> 07:38.960 +paréntesis de range y vamos a poner desde +la A3 hasta la A5. + +07:38.960 --> 07:43.040 +Nuevamente cerramos las comillas y el +paréntesis. + +07:43.040 --> 07:46.280 +Y ahora sí, el texto que queremos agregar. + +07:46.280 --> 07:54.240 +Y vamos a poner Excel es una maravilla. + +07:54.240 --> 07:55.280 +Muy +bien. + +07:55.280 --> 07:59.200 +Nuevamente lo corremos con F5 y si +nosotros nos vamos a nuestro + +07:59.200 --> 08:02.840 +documento, vemos que efectivamente nos +pone el texto + +08:02.840 --> 08:06.400 +que nosotros habíamos +ingresado. + +08:06.400 --> 08:08.560 +En estos casos hemos trabajado con puro texto, + +08:08.560 --> 08:11.360 +pero de igual manera podemos poner números +o podemos poner + +08:11.360 --> 08:12.280 +cálculos. + +08:12.280 --> 08:15.400 +Por ejemplo, si nosotros quisiéramos hacer +un cálculo, + +08:15.400 --> 08:18.580 +podemos ponerlo directamente acá en lugar +de poner Excel es una + +08:18.580 --> 08:19.360 +maravilla. + +08:19.360 --> 08:22.840 +Podríamos poner 2 por +3. + +08:22.840 --> 08:26.000 +Corremos nuevamente y vemos que nos arroja +el resultado + +08:26.000 --> 08:28.080 +correcto con el número +6. + +08:31.160 --> 08:35.320 +Cuando nosotros necesitamos trabajar en +una hoja que no es + +08:35.320 --> 08:39.480 +la que tenemos activa, podemos hacer la +aclaración en nuestra + +08:39.480 --> 08:44.120 +subrutina para que la instrucción sea +efectuada en la + +08:44.120 --> 08:46.640 +hoja que nosotros +decidamos. + +08:46.640 --> 08:51.960 +Para hacer esto voy a bajar un poco lo que +teníamos y voy a + +08:51.960 --> 08:54.080 +incluir las mismas +instrucciones, + +08:54.080 --> 08:56.400 +pero en una hoja +distinta. + +08:56.400 --> 09:00.240 +Es importante que nosotros tengamos claro +el nombre de la + +09:00.240 --> 09:04.320 +hoja en el que nosotros lo vamos a querer +variar la información, + +09:04.320 --> 09:06.960 +porque si lo escribimos mal, entonces nos +va a aparecer un + +09:06.960 --> 09:12.160 +error en nuestro código porque no va a +encontrar la referencia. + +09:12.160 --> 09:15.400 +Para hacer eso tenemos que escribir Sheets, + +09:15.400 --> 09:21.880 +abrimos paréntesis y vamos a abrir comillas, +hoja 2, + +09:21.880 --> 09:25.600 +cerramos punto +select. + +09:25.600 --> 09:30.360 +Y nos fijamos que estemos en la hoja 1 +para ver si realmente + +09:30.360 --> 09:34.600 +obtenemos el mismo resultado en la hoja 1 +que en la hoja 2. + +09:34.600 --> 09:40.360 +Damos clic en F5 para correr nuestra +subrutina y excelente, + +09:40.360 --> 09:43.840 +ahora vemos que tenemos exactamente lo +mismo en texto en + +09:43.840 --> 09:45.720 +la hoja 1 que en la hoja +2. + +09:45.720 --> 09:48.320 +Ahora es momento de que lo pongas en práctica. + +09:48.320 --> 09:52.560 +Te invito a que abras tu entorno de Visual +Basic y que redactes + +09:52.560 --> 09:54.120 +una +subrutina. + +09:54.120 --> 09:57.440 +Escribe un mensaje interesante utilizando +distintas fórmulas + +09:57.440 --> 10:00.440 +del documento y déjanos en los comentarios +una imagen de cómo + +10:00.440 --> 10:01.040 +se +ve. + +10:01.040 --> 10:16.040 +Nos vemos en la siguiente +clase. + diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/03-Resumen.html b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/03-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..601bd7ff36e454d0ec566c512293a1db8f0f0e01 --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/03-Resumen.html @@ -0,0 +1,149 @@ + + + + + + + Creación de Subrutinas en Visual Basic para Excel + + + +
    +
    +

    Resumen

    ¿Cómo se crea una subrutina en Visual Basic para Excel?

    +

    El manejo de subrutinas en Visual Basic para Excel es una habilidad que diferencia a un usuario casual de uno avanzado. Las subrutinas permiten automatizar tareas repetitivas y mejorar la eficiencia en la gestión de datos. En esta guía, aprenderás a crear tu primera subrutina y a entender las bases que te permitirán expandir tus habilidades en programación dentro del ecosistema de Excel.

    +

    ¿Qué es una subrutina y cómo se diferencia de una función?

    +

    Una subrutina es un bloque de código que ejecuta una serie de instrucciones en Excel sin devolver un resultado directo, a diferencia de las funciones que sí lo hacen. En su lugar, el impacto de una subrutina se ve reflejado en las acciones que realiza, tales como manipular celdas, hojas o rangos dentro del libro de Excel.

    +
      +
    • Ventajas de las Subrutinas: +
        +
      • No consumen recursos devolviendo un resultado innecesario.
        • +
      • Son ideales para tareas automáticas y procedimientos de manejo de datos dentro del documento.
        • +
      +
      • +
    +

    ¿Cómo iniciar un archivo para trabajar con subrutinas?

    +

    Para empezar a trabajar con subrutinas, necesitas abrir un archivo de Excel habilitado para macros. Esto es crucial para asegurarse de que todo el trabajo quede guardado y pueda ser ejecutado sin problemas futuros. En el entorno de Visual Basic, las subrutinas se encuentran dentro de módulos, donde puedes organizarlas según tus necesidades.

    +
      +
    • Consejos para la organización de módulos: +
        +
      • Uso de Comentarios: Incluir comentarios en tu código es una buena práctica que te ayudará a documentar lo que hace cada segmento de tu programación, facilitando la comprensión futura del código.
        • +
      • Modularización: Crear varios módulos si la carga de subrutinas y funciones lo justifica, así mejorarás el orden y legibilidad del código.
        • +
      +
      • +
    +

    ¿Cómo redactar una subrutina básica?

    +

    Para comenzar a escribir una subrutina, lo primero es definir si será pública o privada. Las subrutinas públicas pueden ser llamadas desde diferentes lugares del proyecto, mientras que las privadas están limitadas al módulo donde se encuentran.

    +
    Public Sub prueba2()
+    ' Subrutina básica sin argumentos.
+End Sub
+
    +

    ¿Cómo trabajar con celdas y rangos en subrutinas?

    +

    Una de las tareas fundamentales de las subrutinas es la manipulación de celdas y rangos. Esto implica hacer referencia a celdas específicas, manipular rangos de datos o realizar cálculos dentro del libro.

    +
      +
    • +

      Referenciar una Celda:

      +
      Cells(1, 1).Value = "Hola, mundo"
+
      +
      • +
    • +

      Manipular un Rango:

      +
      Range("B2:C3").Value = "Platzi es lo mejor"
+
      +
      • +
    +

    Es importante recordar que los nombres de celdas en Visual Basic usan un formato numérico, donde las filas y columnas tienen números asociados.

    +

    ¿Cómo especificar la hoja en la que se ejecutará la subrutina?

    +

    En muchas ocasiones, necesitarás que las acciones de la subrutina se ejecuten en hojas específicas, especialmente cuando trabajas con documentos de Excel que contienen múltiples hojas.

    +
      +
    • Seleccionar una hoja específica: +
      Sheets("Hoja2").Select
+
      +
      • +
    +

    Este ejemplo asegura que la subrutina se ejecute en la hoja "Hoja2", incluso si estás visualizando otra hoja al momento de ejecutar el código.

    +

    ¿Cómo ejecutar y probar una subrutina?

    +

    Finalmente, una parte esencial del desarrollo de subrutinas es la validación y ejecución del código. Puedes correr tu subrutina desde el entorno de Visual Basic utilizando el botón de "Correr" o mediante la tecla F5.

    +

    Al finalizar estos pasos, deberías tener una comprensión básica y la habilidad para crear subrutinas efectivas en Visual Basic para Excel. Te invito a que pruebes lo aprendido, experimentando y perfeccionando estas técnicas. Expande tus conocimientos y comparte tus resultados para seguir aprendiendo. ¡El mundo de la programación en Excel te espera!

    +
    +
    + + \ No newline at end of file diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/04-Resumen.html b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/04-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..f172122ec3a6ee4155fc13320c469617af8413ca --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/04-Resumen.html @@ -0,0 +1,128 @@ + + + + + + + Uso de MessageBox en Visual Basic para Mostrar Resultados + + + +
    +
    +

    Resumen

    Las ventanas emergentes son una herramienta fundamental para mejorar la interacción con el usuario en Visual Basic, permitiendo mostrar información relevante de manera clara y efectiva durante la ejecución de funciones y subrutinas.

    +

    ¿Cómo implementar message box en Visual Basic?

    +

    La implementación de message box en Visual Basic requiere una estructura específica que permite mostrar mensajes personalizados al usuario. El proceso comienza con la creación de una función básica:

    +
      +
    1. Definir una función pública
      2. +
    2. Establecer los argumentos necesarios
      3. +
    3. Implementar la lógica de la función
      4. +
    4. Agregar el message box
      5. +
    +

    ¿Cuál es la sintaxis correcta para crear un message box?

    +

    Para implementar un message box efectivo, es necesario seguir estos pasos:

    +
      +
    • Declarar una variable utilizando "dim"
      • +
    • Asignar el message box a la variable declarada
      • +
    • Utilizar la estructura: MsgBox(prompt, buttons, title)
      • +
    +

    El prompt es el mensaje principal, buttons define el tipo de botones a mostrar, y title establece el encabezado de la ventana emergente.

    +

    ¿Cómo personalizar el contenido del message box?

    +

    La personalización del message box permite crear mensajes más informativos y profesionales:

    +
      +
    • Combinar texto y variables utilizando el operador ampersand (&)
      • +
    • Seleccionar diferentes tipos de botones según la necesidad
      • +
    • Agregar títulos descriptivos para contextualizar el mensaje
      • +
    • Incluir información dinámica basada en los resultados de la función
      • +
    +

    ¿Cuáles son las aplicaciones prácticas del message box?

    +

    El message box es una herramienta versátil que puede utilizarse en diversos escenarios:

    +
      +
    • Mostrar resultados de operaciones matemáticas
      • +
    • Presentar mensajes de error
      • +
    • Proporcionar información de estado
      • +
    • Solicitar confirmación del usuario
      • +
    +

    Las ventanas emergentes son especialmente útiles cuando necesitamos comunicar información importante al usuario de manera inmediata y clara, mejorando significativamente la experiencia de uso de nuestras aplicaciones en Visual Basic.

    +
    +
    + + \ No newline at end of file diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/04-Uso de MessageBox en Visual Basic para Mostrar Resultados.mp4 b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/04-Uso de MessageBox en Visual Basic para Mostrar Resultados.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..f90254bad73a01a2c8002925ea5c3208bbdaa20f --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/04-Uso de MessageBox en Visual Basic para Mostrar Resultados.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f182fc667e15d41a010fb2325416ea7a4bbf5f1c13a8a983e9157cab901083e0 +size 45556763 diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/04-Uso de MessageBox en Visual Basic para Mostrar Resultados.vtt b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/04-Uso de MessageBox en Visual Basic para Mostrar Resultados.vtt new file mode 100644 index 0000000000000000000000000000000000000000..6fccd168f9b8109c74918e1a645ef5343373db6a --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/04-Uso de MessageBox en Visual Basic para Mostrar Resultados.vtt @@ -0,0 +1,456 @@ +WEBVTT + +00:00.000 --> 00:01.480 +¿Sí? + +00:01.480 --> 00:05.640 +Platzi, educación profesional efectiva. + +00:05.640 --> 00:08.760 +Hola, qué gusto tenerte de nuevo en esta +clase. + +00:08.760 --> 00:11.120 +En las clases anteriores aprendimos cómo +nosotros + +00:11.120 --> 00:14.280 +podíamos crear una función y una subrutina +desde cero en + +00:14.280 --> 00:16.280 +nuestro entorno de Visual +Basic. + +00:16.280 --> 00:18.920 +Y ahora vamos a aprender cómo nosotros +podemos incluir un + +00:18.920 --> 00:20.180 +message +box. + +00:20.180 --> 00:23.840 +Es decir, cómo nosotros podemos hacer que +cuando esté corriendo + +00:23.840 --> 00:26.000 +nuestra función o nuestra subrutina, + +00:26.000 --> 00:29.080 +nos aparezca una ventana emergente con +algún mensaje + +00:29.080 --> 00:30.120 +específico. + +00:30.120 --> 00:33.400 +Entonces, vamos a Visual Basic para ver +cómo podemos hacerlo. + +00:33.400 --> 00:36.480 +En este caso, vamos a seguir utilizando el +módulo con el + +00:36.480 --> 00:39.120 +que hemos trabajado en las clases anteriores. + +00:39.120 --> 00:42.120 +Como ya lo dijimos, no hay ningún problema +en que + +00:42.120 --> 00:45.800 +nosotros vayamos creando nuevas funciones +y nuevas subrutinas + +00:45.800 --> 00:46.800 +en este mismo +módulo. + +00:46.800 --> 00:49.840 +Pero si a ti te acomoda más ir agregando +un módulo nuevo por + +00:49.840 --> 00:53.640 +cada ejercicio, también puedes hacerlo. + +00:53.640 --> 00:57.120 +Para poder hacer este ejemplo, vamos a +crear una función que + +00:57.120 --> 00:59.960 +nos haga una división entre dos números. + +00:59.960 --> 01:02.880 +Entonces, primero vamos a escribir que la +queremos + +01:02.880 --> 01:04.280 +pública. + +01:04.280 --> 01:08.520 +Luego vamos a poner que es una función y +la voy a llamar div, + +01:08.520 --> 01:10.600 +de +división. + +01:10.600 --> 01:16.960 +En nuestros argumentos, primero voy a +escoger el numerador y lo + +01:16.960 --> 01:19.760 +voy a poner como un número +entero. + +01:19.760 --> 01:27.640 +Y después el denominador como entero también. + +01:27.640 --> 01:30.240 +Y como el número que puede resultar de una +división puede + +01:30.240 --> 01:35.240 +tener decimales, vamos a escoger que sea +como un double, + +01:35.240 --> 01:39.560 +para que tenga más precisión en el número +de decimales. + +01:39.560 --> 01:40.800 +Listo. + +01:40.800 --> 01:44.040 +Una vez que nosotros definimos esto, ahora sí, + +01:44.040 --> 01:46.840 +vamos a escribir lo que nosotros queremos +que haga nuestra + +01:46.840 --> 01:47.600 +función. + +01:47.600 --> 01:53.440 +Y en este caso, queremos que la división +sea el numerador sobre + +01:53.440 --> 01:56.840 +el +denominador. + +01:56.840 --> 01:58.480 +Buenísima. + +01:58.480 --> 02:01.160 +Ahora vamos a probar nuestra función en la +ventana de + +02:01.160 --> 02:02.280 +inmediato. + +02:02.280 --> 02:06.000 +Entonces, ponemos un signo de interrogación, + +02:06.000 --> 02:09.440 +escribimos div y luego nos pide el +numerador y luego el + +02:09.440 --> 02:10.160 +denominador. + +02:10.160 --> 02:14.080 +Entonces, vamos a poner 6 y +3. + +02:14.080 --> 02:14.480 +Listo. + +02:14.480 --> 02:15.080 +Perfecto. + +02:15.080 --> 02:17.320 +Lo hace súper +bien. + +02:17.320 --> 02:19.920 +Si nosotros quisiéramos que aparte de +arrojarnos el + +02:19.920 --> 02:23.200 +resultado, nos sacara una ventana en donde +nos informará + +02:23.200 --> 02:25.280 +cuál es el resultado de esta división, + +02:25.280 --> 02:27.080 +lo vamos a hacer utilizando MessageBox. + +02:27.080 --> 02:33.480 +Para poder hacer eso, vamos a escribir MSG, + +02:33.480 --> 02:38.600 +que es, digamos, la abreviación de Message +y luego Box. + +02:38.600 --> 02:40.880 +Y después vamos a abrir un paréntesis. + +02:40.880 --> 02:43.200 +Cuando nosotros escribimos bien esta +instrucción, + +02:43.200 --> 02:46.080 +al abrir el paréntesis, vamos a ver que +nos aparece la + +02:46.080 --> 02:49.880 +información de los argumentos que nosotros +podemos incluir. + +02:49.880 --> 02:52.720 +Lo primero que nos pide es el prompt o el +mensaje que va a + +02:52.720 --> 02:55.920 +incluir esta +caja. + +02:55.920 --> 03:00.840 +Entonces, nosotros podemos poner +directamente div y podemos + +03:00.840 --> 03:06.000 +dejar el resto de los argumentos en blanco +o sin poner nada, + +03:06.000 --> 03:08.880 +porque como están entre +corchete, + +03:08.880 --> 03:10.600 +no es necesario que los +incluyamos. + +03:10.600 --> 03:14.480 +Excel o Visual Basic nos puede dar por +default la información + +03:14.480 --> 03:16.200 +en este +caso. + +03:16.200 --> 03:17.080 +Y +listo. + +03:17.080 --> 03:23.560 +Entonces, vemos que el mensaje de +MessageBox pasa a mayúsculas. + +03:23.560 --> 03:26.920 +Y vamos nuevamente a nuestra ventana de +inmediato. + +03:26.920 --> 03:30.520 +Vemos ahora que nos manda a nuestro libro +de Excel y que + +03:30.520 --> 03:34.200 +efectivamente nos aparece el resultado de +esta división, + +03:34.200 --> 03:38.720 +lo que quiere decir que hicimos bien +nuestro ejercicio. + +03:38.720 --> 03:41.920 +Ahora, nosotros podemos incluir más cosas +para que nuestra + +03:41.920 --> 03:43.920 +ventana se vea mucho +mejor. + +03:43.920 --> 03:46.880 +Lo primero que podemos hacer es incluir +algo más de texto que + +03:46.880 --> 03:50.600 +dé un poco de contexto sobre el número que +nos está arrojando. + +03:50.600 --> 03:55.360 +Para incluir texto, nosotros podemos +utilizar dos comillas. + +03:55.360 --> 04:03.520 +El resultado de la división es espacio. + +04:03.520 --> 04:07.320 +Y para nosotros unir dos cosas como un +texto y una variable, + +04:07.320 --> 04:10.760 +que en este caso es div, vamos a utilizar +el ampersand, + +04:10.760 --> 04:15.800 +que este es el simbolito de amp que vemos +comúnmente. + +04:15.800 --> 04:20.240 +Nosotros también podemos elegir los +botones que vamos a ver. + +04:20.240 --> 04:23.800 +Excel por default nos va a arrojar el +botón de OK. + +04:23.800 --> 04:25.960 +Pero si nosotros queremos elegir algún otro, + +04:25.960 --> 04:29.440 +lo podemos hacer directamente acá o +escribirlo. + +04:29.440 --> 04:31.360 +Por ejemplo, que sea +exclamación, + +04:31.360 --> 04:34.480 +que se vea como información, etcétera. + +04:34.480 --> 04:36.560 +Lo podemos también dejar en +blanco. + +04:36.560 --> 04:38.960 +Si nosotros queremos pasar al siguiente +atributo, + +04:38.960 --> 04:41.920 +que es el título, simplemente ponemos una +nueva coma. + +04:41.920 --> 04:46.200 +Y en este caso vamos a poner división. + +04:46.200 --> 04:47.000 +Listo, +cerramos. + +04:49.920 --> 04:52.520 +Si nos damos cuenta, nos marca un error. + +04:52.520 --> 04:55.720 +Y esto sucede cuando nosotros incluimos +más atributos, + +04:55.720 --> 04:58.760 +no podemos escribir directamente el +message box, + +04:58.760 --> 05:01.960 +sino que necesitamos utilizar alguna +variable para hacer esta + +05:01.960 --> 05:05.240 +referencia y entonces que nos los permita +utilizar dentro de + +05:05.240 --> 05:06.560 +una +función. + +05:06.560 --> 05:10.400 +Para poder hacer esto, vamos a tener que +definir primero una + +05:10.400 --> 05:11.560 +variable. + +05:11.560 --> 05:14.320 +Vamos a poner dim +a. + +05:14.320 --> 05:16.800 +Listo, no necesitamos hacer nada más. + +05:16.800 --> 05:20.280 +Y antes de nuestro message box, vamos a +escribir la a y vamos + +05:20.280 --> 05:22.240 +a poner el signo de +igual. + +05:22.240 --> 05:24.800 +De esta manera, cuando nosotros llamemos a +la función + +05:24.800 --> 05:29.240 +división, ahora sí nos arrojará la ventana +con el mensaje de la + +05:29.240 --> 05:31.960 +manera que nosotros +queremos. + +05:31.960 --> 05:35.240 +Vamos a cambiar los argumentos de nuestra +división. + +05:35.240 --> 05:39.200 +Corremos y ahora sí vemos que nos aparece +nuestra ventana con + +05:39.200 --> 05:42.640 +el título que nosotros pusimos de división +y el texto en el + +05:42.640 --> 05:46.200 +cual nos dice el resultado de la división +es 4. + +05:46.200 --> 05:49.920 +Esto se va a mantener constante menos el +resultado de la + +05:49.920 --> 05:52.920 +división que está referenciado dependiendo +de los argumentos + +05:52.920 --> 05:56.080 +que nosotros vayamos +dando. + +05:56.080 --> 06:00.320 +De esta manera, nosotros podemos ir viendo +los resultados de + +06:00.320 --> 06:03.720 +manera constante o si de repente tenemos +un error, etcétera. + +06:03.720 --> 06:06.560 +Es muy útil esta función de message box. + +06:06.560 --> 06:10.240 +Y ahora te invito a que tú contestes el +quiz que te dejo y + +06:10.240 --> 06:12.440 +que nos dejes en los comentarios para qué +crees que vas a + +06:12.440 --> 06:13.680 +utilizar message +box. + +06:13.680 --> 06:35.680 +Nos vemos en la siguiente +clase. + diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/05-Input Box en Visual Basic Solicitar Datos al Usuario.mp4 b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/05-Input Box en Visual Basic Solicitar Datos al Usuario.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..02fe83dd1421b26c933f7460ae60f1570f1272a3 --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/05-Input Box en Visual Basic Solicitar Datos al Usuario.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fb1279e09cbfd6f797d7f09209a6289922ba66ab73351a174217fbd95ff65f05 +size 58355158 diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/05-Input Box en Visual Basic Solicitar Datos al Usuario.vtt b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/05-Input Box en Visual Basic Solicitar Datos al Usuario.vtt new file mode 100644 index 0000000000000000000000000000000000000000..00cc5bd606c11b2e9fc41b1dc9897d4786581443 --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/05-Input Box en Visual Basic Solicitar Datos al Usuario.vtt @@ -0,0 +1,353 @@ +WEBVTT + +00:00.000 --> 00:05.000 +Platzi, educación profesional efectiva. + +00:05.000 --> 00:08.000 +Hola, te doy la bienvenida a esta clase. + +00:08.000 --> 00:11.000 +En la clase anterior nosotros hablamos +sobre Message Box, + +00:11.000 --> 00:16.000 +que es cómo nosotros podemos incluir en +nuestra función o en nuestra subrutina + +00:16.000 --> 00:21.000 +un mensaje que nos aparezca cuando se vaya +completando las actividades que nosotros pedimos + +00:21.000 --> 00:24.000 +y que incluya el contenido que nosotros +especifiquemos. + +00:24.000 --> 00:29.000 +En este caso, lo que vamos a hacer es +aprender cómo nosotros podemos agregar + +00:29.000 --> 00:35.000 +una ventana emergente en la que le vamos a +pedir al usuario que ingrese algún dato específico. + +00:35.000 --> 00:39.000 +Entonces, vamos al entorno de Visual Basic +para ver cómo podemos hacerlo. + +00:39.000 --> 00:45.000 +En este caso, vamos a seguir utilizando el +mismo módulo con el que hemos trabajado en las clases anteriores. + +00:48.000 --> 00:54.000 +Para poder aprender cómo nosotros vamos a +incluir un Input Box, + +00:54.000 --> 00:58.000 +podemos utilizar la función con la que +trabajamos en la clase anterior, + +00:58.000 --> 01:04.000 +donde nosotros pedíamos una división y le +pedíamos automáticamente al usuario + +01:04.000 --> 01:09.000 +que nos diera el numerador y el +denominador que quisiera dividir para podérselo arrojar. + +01:09.000 --> 01:17.000 +Ahora, nosotros podríamos dejar como +argumento el denominador y borrar el numerador. + +01:19.000 --> 01:25.000 +Pero nosotros de igual manera necesitamos +estos dos argumentos para poder hacer nuestra división. + +01:25.000 --> 01:32.000 +Entonces, lo que podemos hacer es incluir +un Input Box en el que nosotros le pidamos al usuario que lo especifique. + +01:34.000 --> 01:38.000 +Vamos a ponerlo abajo de la definición de +nuestra variable. + +01:39.000 --> 01:43.000 +Para hacer eso, nosotros necesitamos +definir una nueva variable + +01:43.000 --> 01:48.000 +en la que vamos a alojar o guardar el +valor que nos va a regresar el usuario. + +01:48.000 --> 01:55.000 +Y es por eso que nosotros ahora vamos a +poner dim y la variable va a ser numerador. + +01:56.000 --> 01:59.000 +Y lo podemos poner como un +entero. + +02:00.000 --> 02:04.000 +Ahora vamos a escribir Input +Box. + +02:06.000 --> 02:09.000 +Y vamos a abrir +paréntesis. + +02:09.000 --> 02:12.000 +Vamos a ver que lo primero que nos dice es +el texto que va a contener, + +02:12.000 --> 02:21.000 +después nos pide el argumento de título y +así sucesivamente con todos los ajustes que nosotros podemos hacer dentro de esta caja emergente. + +02:21.000 --> 02:25.000 +Recordemos que esos argumentos que están +entre corchetes son opcionales + +02:25.000 --> 02:31.000 +y si nosotros no aclaramos qué queremos poner, +Visual Basic automáticamente pondrá algo default. + +02:32.000 --> 02:39.000 +Entonces, nosotros vamos a poner aquí que +escribe el numerador. + +02:39.000 --> 02:41.000 +Y vamos a +cerrar. + +02:42.000 --> 02:44.000 +Cuando nosotros nos vamos al renglón de abajo, + +02:44.000 --> 02:49.000 +vemos que aunque nos permite, y no nos +marca ningún error, + +02:49.000 --> 02:52.000 +nos permite escribir como tal este Input Box, + +02:52.000 --> 02:55.000 +no estamos alojando el resultado en ningún +lado. + +02:55.000 --> 02:59.000 +Entonces, en este caso, aunque nosotros le +hagamos muchas preguntas al usuario y no la responda, + +02:59.000 --> 03:04.000 +no vamos a tener manera de saber cuál es +el resultado dentro de nuestra función. + +03:04.000 --> 03:13.000 +Entonces, por eso vamos a agregar antes +del mensaje de Input Box, numerador y el signo de igual. + +03:13.000 --> 03:14.000 +Listo. + +03:14.000 --> 03:20.000 +Ahora sí vamos a poder saber cuál es el +input o cuál es la información que nos provee el usuario + +03:20.000 --> 03:23.000 +y que nos va a servir para hacer nuestra +división. + +03:24.000 --> 03:28.000 +Entonces, vamos a ir a la ventana de +inmediato para probar esta función. + +03:28.000 --> 03:34.000 +Vamos a escribir div y vamos a poner 3. + +03:35.000 --> 03:37.000 +Cerramos y +corremos. + +03:37.000 --> 03:42.000 +Y ahora nos manda directamente a nuestra +hoja de Excel y nos aparece esta ventana. + +03:42.000 --> 03:44.000 +Vemos que el título dice Microsoft Excel. + +03:44.000 --> 03:47.000 +Es algo genérico, default, porque nosotros +no lo aclaramos. + +03:47.000 --> 03:51.000 +Y nos aparece el texto Escribe el numerador. + +03:51.000 --> 03:55.000 +En este caso, nosotros lo podemos poner y +vamos a poner un 12. + +03:55.000 --> 03:57.000 +Y damos clic en +OK. + +03:57.000 --> 04:02.000 +Y después nos aparece nuestra ventana que +nosotros programamos en la clase anterior + +04:02.000 --> 04:06.000 +con el mensaje diciéndonos cuál es el +resultado de esta división. + +04:09.000 --> 04:16.000 +Cuando nosotros necesitamos poner una +subrutina de la cual requiramos alguna información de nuestro usuario, + +04:16.000 --> 04:22.000 +es sumamente útil este Input Box porque +nosotros en las subrutinas no tenemos argumentos. + +04:22.000 --> 04:25.000 +A diferencia de las +funciones. + +04:25.000 --> 04:30.000 +Entonces, vamos a probar creando esta +misma división, pero a través de una subrutina. + +04:31.000 --> 04:39.000 +Para hacer eso, vamos a escribir public, +sub y le voy a llamar div s por subrutina. + +04:41.000 --> 04:45.000 +Abrimos y cerramos el paréntesis y damos +clic en Enter. + +04:46.000 --> 04:49.000 +Lo primero que hay que hacer es definir +nuestras variables. + +04:49.000 --> 05:00.000 +Entonces, div num de numerador y div den +de denominador. + +05:00.000 --> 05:06.000 +Nosotros, a nuestras variables, las +podemos definir el tipo de dato que vamos a tomar o no. + +05:06.000 --> 05:10.000 +Y si nosotros no definimos nada, lo tomará +como dato variant, + +05:10.000 --> 05:14.000 +que quiere decir que cualquier valor que +nosotros podamos incluir ahí será correcto. + +05:15.000 --> 05:18.000 +Pero en este caso lo podemos dejar como +entero. + +05:18.000 --> 05:22.000 +As integer, as +integer. + +05:23.000 --> 05:24.000 +Listo. + +05:24.000 --> 05:34.000 +Una vez que nosotros hemos puesto eso, +vamos a poner nuestra variable de num + +05:34.000 --> 05:45.000 +y vamos a escribir message input box para +pedirle al usuario que nos devuelva cuál es el numerador que quiere utilizar. + +05:45.000 --> 05:51.000 +Entonces vamos a poner numerador y en el +título vamos a dejar división. + +05:52.000 --> 05:54.000 +Listo. + +05:54.000 --> 06:01.000 +Después vamos a definir nuestro +denominador de la misma manera y vamos a pedir un input box. + +06:01.000 --> 06:08.000 +Vamos a abrir, denominador, cerramos y el +título nuevamente será división. + +06:10.000 --> 06:12.000 +Muy +bien. + +06:12.000 --> 06:15.000 +Ahora necesitamos ver qué vamos a hacer +con la información. + +06:15.000 --> 06:18.000 +En este caso nosotros ya definimos +nuestras variables, + +06:18.000 --> 06:23.000 +ya les pedimos al usuario que nos diga +cuál es el numerador y cuál es el denominador, + +06:23.000 --> 06:26.000 +entonces el siguiente paso es realizar la +operación. + +06:27.000 --> 06:32.000 +Para eso nosotros lo podemos hacer +directamente desde el message box que queremos mostrar. + +06:33.000 --> 06:41.000 +Entonces vamos a escribir message box y +vamos a abrir y vamos a poner nuestro número. + +06:41.000 --> 06:49.000 +Vamos a abrir y vamos a poner num sobre +den para que nos haga esta división que necesitamos + +06:51.000 --> 06:55.000 +y de título vamos a poner división nuevamente. + +06:56.000 --> 07:04.000 +Vamos a cerrar y vemos que otra vez como +incluimos algún argumento adicional a la operación, + +07:04.000 --> 07:06.000 +nos pide que lo alojemos en alguna variable. + +07:06.000 --> 07:16.000 +Entonces podemos incluir una variable +genérica que sea a en este caso y vamos a poner a igual y el message box. + +07:17.000 --> 07:23.000 +Vamos a correr nuestra subrutina y nos va +a pedir el numerador, vamos a poner 80 + +07:23.000 --> 07:30.000 +y el denominador vamos a poner un 8 y nos +regresa que el resultado de nuestra división es 10. + +07:30.000 --> 07:35.000 +Entonces nosotros ya aprendimos cómo +podemos nosotros pedirle información al usuario + +07:35.000 --> 07:37.000 +y cómo se la podemos +devolver. + +07:37.000 --> 07:40.000 +Ahora es tu momento de ponerlo en práctica. + +07:40.000 --> 07:44.000 +Escribe una subrutina en la que tú +requieras información del usuario + +07:44.000 --> 07:48.000 +y en la cual tú con una ventana de message +box le regreses algún resultado. + +07:48.000 --> 08:06.000 +Déjanos una captura de pantalla de tu +código en los comentarios y nos vemos en la siguiente clase. + diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/05-Resumen.html b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/05-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..036cd7f1083c6dfd5c8318ad61b58415646f2b7c --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/05-Resumen.html @@ -0,0 +1,143 @@ + + + + + + + Input Box en Visual Basic: Solicitar Datos al Usuario + + + +
    +
    +

    Resumen

    ¿Cómo crear una ventana emergente en Visual Basic para recibir datos de usuario?

    +

    Cuando trabajamos con Visual Basic, una de las funcionalidades más prácticas e interactivas que podemos implementar es el uso de ventanas emergentes que requieran información del usuario. Esto no sólo mejora la interacción, sino que también permite un manejo más eficiente de datos al personalizar las operaciones según las entradas del usuario. A continuación, desglosamos cómo hacerlo efectivamente en Visual Basic.

    +

    ¿Qué es un Input Box y cómo se utiliza?

    +

    Un Input Box es una ventana emergente que permite solicitar al usuario que ingrese un valor o dato específico.

    +

    Para implementarlo:

    +
      +
    • Se recomienda definir una variable para almacenar el valor que el usuario proporcionará.
      • +
    • Esta variable debe declararse utilizando Dim seguido del nombre de la variable y su tipo de dato, como por ejemplo, Dim numerador As Integer.
      • +
    • Se emplea la función InputBox, que abre la caja de texto emergente.
      • +
    +

    Ejemplo de sintaxis básica:

    +
    Dim numerador As Integer
+numerador = InputBox("Escribe el numerador", "División")
+
    +

    ¿Cómo alojamos el resultado de un Input Box?

    +

    Es crucial almacenar el dato ingresado por el usuario en una variable adecuada.

    +
      +
    • Antes de la llamada a InputBox, declaramos nuestra variable.
      • +
    • Usamos un signo de igualdad (=) antes de la función InputBox para asignar el valor ingresado por el usuario.
      • +
    +

    Por ejemplo:

    +
    numerador = InputBox("Escribe el numerador", "División")
+
    +

    ¿Por qué usar Input Boxes en subrutinas?

    +

    Cuando desarrollamos subrutinas, estas no admiten argumentos como las funciones. Por tanto, el Input Box juega un papel clave pidiendo directamente al usuario los datos necesarios:

    +
      +
    • Declarar las variables necesarias para la operación.
      • +
    • Solicitar los datos a través del InputBox.
      • +
    • Realizar operaciones y mostrar resultados utilizando estas entradas.
      • +
    +

    Ejemplo de una subrutina para divisiones:

    +
    Public Sub DivS()
+    Dim num As Integer
+    Dim den As Integer
+    
+    num = InputBox("Ingrese el numerador", "División")
+    den = InputBox("Ingrese el denominador", "División")
+    
+    MessageBox.Show "El resultado de la división es " & (num / den), "División"
+    
+End Sub
+
    +

    Promoviendo la interacción: Beneficios de las ventanas emergentes

    +

    El uso de ventanas emergentes, como el Input Box, no solo personaliza la experiencia del usuario, sino que también asegura que las operaciones se basen en datos relevantes y específicos introducidos por el mismo. Esta técnica es particularmente beneficiosa en:

    +
      +
    • Automatización de tareas: Cuando se requiere repetir una acción con distintos datos, reduciendo así el margen de error.
      • +
    • Acercamiento educativo: En contextos académicos, donde se necesita la entrada del usuario para operaciones matemáticas, científicas o administrativas.
      • +
    +

    La implementación de estas prácticas fomenta un desarrollo más robusto y adaptable, permitiendo aprovechar al máximo el potencial de programación dentro del entorno de Visual Basic. Ahora te invito a practicar lo aprendido. Crea tu propia subrutina usando Input Boxes y comparte tus resultados con nosotros. ¡Continúa explorando y nunca dejes de aprender!

    +
    +
    + + \ No newline at end of file diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/06-Resumen.html b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/06-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..b312d3605cfc108e96c81ba4335ab2dfab159f81 --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/06-Resumen.html @@ -0,0 +1,125 @@ + + + + + + + Uso de Select Case en Visual Basic para Condicionales + + + +
    +
    +

    Resumen

    ¿Qué es Select Case y cómo se utiliza?

    +

    En el mundo de la programación, ser capaz de manejar diferentes casos o escenarios es esencial. Aquí es donde el uso de Select Case se convierte en una herramienta poderosa en tus funciones y subrutinas dentro de Visual Basic. Este bloque de control permite especificar múltiples condiciones para una variable, otorgándote el control de qué instrucciones ejecutar con base en el valor de dicha variable. Al realizar un análisis exhaustivo de todos los posibles casos que pueda tomar una variable dentro de tu función, puedes asegurar un flujo lógico y sin errores en tu código.

    +

    ¿Cómo se estructura una función con Select Case?

    +

    Para comenzar a implementar Select Case, es necesario definir una función que reciba argumentos y devuelva un resultado. Un ejemplo común es el uso de una función llamada sc, que debe recibir tres números enteros, sumarlos y determinar si la suma es negativa, cero o positiva. Este es el proceso detallado para configurarla:

    +
      +
    1. Definición de la función: Escribe Public Function sc con tres parámetros: a, b y c.
      2. +
    2. Variable de suma: Define a través de Dim suma as Integer una variable que almacenará la suma de a, b y c.
      3. +
    3. Uso de Select Case: Implementa Select Case suma para evaluar el valor de la suma y escribe los diferentes cases: +
        +
      • Case Is < 0: Significa que la suma es negativa.
        • +
      • Case Is = 0: Indica que la suma resulta en cero.
        • +
      • Case Else: Captura los casos en que la suma es positiva, siendo exhaustivos en todos los posibles resultados.
        • +
      +
      4. +
    +

    ¿Cuáles son las mejores prácticas para utilizar Select Case?

    +

    Utilizar Select Case adecuadamente implica seguir algunas prácticas recomendadas que asegurarán que tu código sea claro y eficiente:

    +
      +
    • Exhaustividad en casos: Asegúrate de considerar todos los posibles valores y situaciones en los cases. Utiliza Case Else para cubrir cualquier valor que no haya sido contemplado previamente.
      • +
    • Comentarios claros: Incluye comentarios en el código que expliquen cada sección de los cases, lo que resulta útil para el mantenimiento y comprensión del código a largo plazo.
      • +
    • Validación de datos: Antes de ingresar los datos en la función, es importante validarlos para evitar resultados inesperados.
      • +
    +

    ¿Cómo puedo probar la función Select Case?

    +

    Una vez que has creado tu función, la prueba es clave para asegurarse de que todos los casos se ejecutan correctamente. Esto se puede hacer utilizando la ventana inmediata de Visual Basic:

    +
      +
    • Prueba para valores negativos: Probar con sc(-8, 5, 0) debería devolver "negativo".
      • +
    • Prueba para suma igual a cero: Con sc(2, -1, -1) debe regresar "cero".
      • +
    • Prueba para valores positivos: Al usar sc(3, 4, 5), la función debería dar como resultado "positivo".
      • +
    +

    Esta metodología no solo verifica que la función opere como se desea, sino que también te ayuda a detectar posibles errores o casos no cubiertos.

    +

    Anímate a implementar Select Case en tus propios proyectos y verás cómo aumenta la claridad y organización de tu código. Escoge ejemplos diferentes, como clasificar números por paridad o comparar con tu edad, y comparte tus experiencias y retos alcanzados al utilizar esta poderosa instrucción en el mundo de la programación. ¡La práctica es la clave para el dominio!

    +
    +
    + + \ No newline at end of file diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/06-Uso de Select Case en Visual Basic para Condicionales.mp4 b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/06-Uso de Select Case en Visual Basic para Condicionales.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..e54440fabcd9aebae4f0b3781ffac01b44194a46 --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/06-Uso de Select Case en Visual Basic para Condicionales.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:be8fd6ec43b0a802d067867cee225709006aa7703cfce7ef8da245f8972214a9 +size 66076493 diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/06-Uso de Select Case en Visual Basic para Condicionales.vtt b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/06-Uso de Select Case en Visual Basic para Condicionales.vtt new file mode 100644 index 0000000000000000000000000000000000000000..feb6a673b5469dba026672967bd190cef5b1b560 --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/06-Uso de Select Case en Visual Basic para Condicionales.vtt @@ -0,0 +1,537 @@ +WEBVTT + +00:00.000 --> 00:05.000 +Platzi, educación profesional efectiva. + +00:05.000 --> 00:07.000 +Hola, qué gusto tenerte en esta clase. + +00:07.000 --> 00:10.000 +Hoy vamos a platicar sobre Select Case. + +00:10.000 --> 00:14.000 +Nosotros podemos utilizar Select Case en +nuestras funciones + +00:14.000 --> 00:19.000 +y en nuestras subrutinas cuando nosotros +queremos dar un caso, + +00:19.000 --> 00:23.000 +es decir, en qué caso específico entra +alguna de nuestras variables. + +00:23.000 --> 00:27.000 +Es decir, nosotros podemos ser exhaustivos +y decir, bueno, + +00:27.000 --> 00:32.000 +nuestra variable puede ser menor a cero o +puede ser mayor o igual a cero. + +00:32.000 --> 00:35.000 +Y en este caso, nosotros utilizamos esta +instrucción + +00:35.000 --> 00:38.000 +para definir en qué caso entraría nuestra +variable. + +00:38.000 --> 00:41.000 +Una vez que nosotros definamos cada uno de +los casos, + +00:41.000 --> 00:44.000 +podemos dar instrucciones específicas. + +00:44.000 --> 00:48.000 +Es decir, si nuestra variable tiene un +valor menor a cero, + +00:48.000 --> 00:50.000 +entonces haz estas +instrucciones, + +00:50.000 --> 00:54.000 +pero si el valor es mayor o igual a cero, +entonces haz estas otras. + +00:54.000 --> 00:57.000 +Vamos a nuestro entorno de Visual Basic +para ver + +00:57.000 --> 01:01.000 +cómo podemos escribirlo en nuestro código +y cómo lo podemos utilizar. + +01:01.000 --> 01:05.000 +Ahora, para nosotros aprender a usar +Select Case, + +01:05.000 --> 01:07.000 +vamos a crear una +función. + +01:07.000 --> 01:11.000 +Lo que vamos a hacer con este ejercicio es +pedir en nuestra función + +01:11.000 --> 01:14.000 +tres argumentos que van a ser tres números +enteros + +01:14.000 --> 01:16.000 +que nosotros vamos a +sumar. + +01:16.000 --> 01:18.000 +Y dependiendo del valor de la +suma, + +01:18.000 --> 01:21.000 +nosotros vamos a ver si esos números son +negativos, + +01:21.000 --> 01:25.000 +si tenemos un cero o si esos números son +positivos. + +01:25.000 --> 01:29.000 +Es importante que cuando nosotros +utilizamos Select Case, + +01:29.000 --> 01:31.000 +seamos exhaustivos con todos los casos. + +01:31.000 --> 01:35.000 +De otra manera, podríamos no incluir todos +los casos + +01:35.000 --> 01:40.000 +que sean necesarios y poder tener algún +error en nuestra función. + +01:40.000 --> 01:45.000 +Para eso, vamos a comenzar escribiendo +public function. + +01:45.000 --> 01:50.000 +Y en este caso, yo le voy a llamar a +nuestra función sc + +01:50.000 --> 01:53.000 +por Select Case, que es lo que estamos +aprendiendo. + +01:53.000 --> 01:58.000 +Y vamos a pedir tres números enteros, + +01:58.000 --> 02:05.000 +entonces les voy a llamar a, b y +c. + +02:08.000 --> 02:10.000 +Como nosotros vamos a utilizar Select Case, + +02:10.000 --> 02:13.000 +el resultado que necesitamos que nos +arroje va a ser + +02:13.000 --> 02:17.000 +un tipo de dato string, porque estamos +hablando de un texto. + +02:17.000 --> 02:20.000 +Nosotros podemos, si después necesitamos +cambiar + +02:20.000 --> 02:22.000 +este tipo de dato que nos +arroje, + +02:22.000 --> 02:25.000 +podemos hacerlo sin ningún problema. + +02:25.000 --> 02:29.000 +Entonces vamos a poner a string, listo. + +02:29.000 --> 02:34.000 +Y ahora sí, podemos comenzar a trabajar +con nuestra función. + +02:34.000 --> 02:38.000 +Lo primero que necesitamos es definir una +variable + +02:38.000 --> 02:41.000 +en donde nosotros vamos a poner el valor +de la suma. + +02:41.000 --> 02:45.000 +Entonces vamos a escribir dim y vamos a +poner + +02:45.000 --> 02:48.000 +que esta variable se llamará +suma. + +02:48.000 --> 02:51.000 +Y el tipo de dato que utilizaremos para +esta suma + +02:51.000 --> 02:54.000 +igualmente será un entero, ya que estamos +sumando números enteros. + +02:54.000 --> 02:57.000 +Si nosotros estuviéramos sumando números +con decimales, + +02:57.000 --> 03:00.000 +sería importante que la variable que va a +contener esta suma + +03:00.000 --> 03:04.000 +también estuviera en un formato de single +o de double, + +03:04.000 --> 03:08.000 +o simplemente tendríamos que asumir que va +a cortar + +03:08.000 --> 03:10.000 +los valores decimales y pues nada más nos +quedaremos + +03:10.000 --> 03:14.000 +con la parte entera, que probablemente no +sea exactamente + +03:14.000 --> 03:17.000 +el resultado que nosotros necesitaríamos. + +03:19.000 --> 03:21.000 +Después de definir nuestra variable, + +03:21.000 --> 03:24.000 +vamos a decir que esta variable suma va a +contener + +03:24.000 --> 03:31.000 +el valor de a más el valor de b más el +valor de c. + +03:31.000 --> 03:33.000 +Listo. + +03:33.000 --> 03:36.000 +Y ahora ya tenemos nuestra suma y lo que +podemos hacer + +03:36.000 --> 03:39.000 +es pasar a definir cada uno de los casos. + +03:39.000 --> 03:42.000 +Dijimos que el primer caso iba a ser que +los números + +03:42.000 --> 03:44.000 +fueran negativos, el valor de la suma, + +03:44.000 --> 03:46.000 +el segundo que el valor fuera +cero, + +03:46.000 --> 03:49.000 +y el tercer caso que fuera positivo. + +03:49.000 --> 03:53.000 +Entonces, para hacer eso, comenzamos +escribiendo + +03:53.000 --> 03:58.000 +select case y le tenemos que indicar a +Visual Basic + +03:58.000 --> 04:01.000 +que el caso lo tiene que ver, dependiendo +del valor + +04:01.000 --> 04:03.000 +de nuestra variable +suma. + +04:03.000 --> 04:05.000 +Select case +suma. + +04:05.000 --> 04:07.000 +Listo. + +04:08.000 --> 04:10.000 +Y después vamos a comenzar +escribiendo + +04:10.000 --> 04:12.000 +cada uno de los +casos. + +04:12.000 --> 04:19.000 +Entonces, si el caso es que nosotros +tengamos + +04:19.000 --> 04:23.000 +un valor menor que cero, quiere decir que +esto es negativo, + +04:23.000 --> 04:27.000 +entonces vamos a ver que nosotros +necesitamos + +04:27.000 --> 04:31.000 +definir una actividad que se haga cuando +suceda este caso. + +04:31.000 --> 04:35.000 +Entonces vamos a poner que sc nos +devuelva + +04:35.000 --> 04:38.000 +el valor de +negativo. + +04:38.000 --> 04:41.000 +Recuerden que todos los textos que +nosotros escribimos + +04:41.000 --> 04:43.000 +los tenemos que poner entre +comillas + +04:43.000 --> 04:46.000 +para que Visual Basic no los tome como una +instrucción. + +04:46.000 --> 04:48.000 +Listo. + +04:49.000 --> 04:51.000 +Después, el segundo caso que vamos a +tener + +04:51.000 --> 04:54.000 +es que nuestra suma sea igual a cero. + +04:54.000 --> 04:58.000 +Entonces vamos a escribir case is igual a +cero. + +04:58.000 --> 05:01.000 +Y en este caso, la actividad o lo que +necesitamos + +05:01.000 --> 05:08.000 +que nos devuelva es que sc sea igual a cero. + +05:08.000 --> 05:11.000 +Para nuestro tercer caso, que es que los +números + +05:11.000 --> 05:14.000 +sean mayores a cero, nosotros podemos +hacerlo + +05:14.000 --> 05:15.000 +de dos +maneras. + +05:15.000 --> 05:17.000 +La primera manera es que nosotros +escribamos + +05:17.000 --> 05:20.000 +directamente case is mayor a +cero + +05:20.000 --> 05:24.000 +y que en la línea de abajo pongamos sc es +igual a positivo. + +05:24.000 --> 05:26.000 +Porque nosotros estamos +asegurándonos + +05:26.000 --> 05:28.000 +que estamos siendo exhaustivos y +cubriendo + +05:28.000 --> 05:30.000 +todas las posibilidades que +hay. + +05:30.000 --> 05:33.000 +Pero si de pronto nosotros nos queda un +poquito de duda + +05:33.000 --> 05:36.000 +si estamos cubriendo todo, podemos +utilizar case else + +05:36.000 --> 05:39.000 +que con lo que vamos a hacer ahí es que va +a cubrir + +05:39.000 --> 05:41.000 +el resto de los casos con los que +nosotros + +05:41.000 --> 05:44.000 +no hayamos puesto una instrucción específica. + +05:44.000 --> 05:47.000 +Entonces vamos a +escribirlo. + +05:48.000 --> 05:57.000 +Case else y vamos a poner sc es igual a +positivo. + +05:57.000 --> 05:59.000 +Listo. + +05:59.000 --> 06:01.000 +Lo último que nos queda en este +caso + +06:01.000 --> 06:05.000 +es cerrar nuestra instrucción de select case. + +06:05.000 --> 06:08.000 +Así como nosotros abrimos una +función + +06:08.000 --> 06:10.000 +y la cerramos con un end +function, + +06:10.000 --> 06:12.000 +cuando nosotros pongamos una +instrucción + +06:12.000 --> 06:15.000 +como select case, es importante que +cuando + +06:15.000 --> 06:17.000 +terminemos de dar las instrucciones que +corresponden + +06:17.000 --> 06:19.000 +a seleccionar cada uno de los casos, + +06:19.000 --> 06:23.000 +lo cerremos con un end +select. + +06:27.000 --> 06:28.000 +Listo. + +06:28.000 --> 06:31.000 +Y ahora sí, nosotros ya tenemos nuestra +función + +06:31.000 --> 06:35.000 +en donde nosotros vamos a incluir tres +argumentos + +06:35.000 --> 06:38.000 +y donde nos devolverá si es un número +positivo, + +06:38.000 --> 06:39.000 +negativo o +cero. + +06:39.000 --> 06:42.000 +Entonces vamos a probarla en nuestra +ventana de inmediato. + +06:42.000 --> 06:46.000 +En este caso nosotros pusimos el signo de +interrogación, + +06:46.000 --> 06:50.000 +nuestra función sc y los tres números del +argumento. + +06:50.000 --> 06:52.000 +Cuando nosotros damos +enter, + +06:52.000 --> 06:54.000 +vemos que nos dice que es +negativo, + +06:54.000 --> 06:56.000 +porque efectivamente menos ocho más +cinco + +06:56.000 --> 06:59.000 +nos da menos tres y más cero se queda en +menos tres. + +06:59.000 --> 07:02.000 +Si nosotros la probamos +nuevamente, + +07:02.000 --> 07:08.000 +poniendo un dos coma menos uno menos uno, + +07:08.000 --> 07:10.000 +vamos a ver que nos devuelve el +caso + +07:10.000 --> 07:12.000 +en donde esto es +cero. + +07:12.000 --> 07:17.000 +Y si nosotros ponemos tres más cuatro más +cinco, + +07:17.000 --> 07:20.000 +vamos a ver como ahora nos dice que esto +es positivo. + +07:21.000 --> 07:24.000 +Ahora es momento de que tú lo pongas en +práctica. + +07:24.000 --> 07:26.000 +Te reto a que escojas algún +ejemplo + +07:26.000 --> 07:29.000 +en el cual tú tengas que poner distintos +casos, + +07:29.000 --> 07:33.000 +como pudiera ser elegir entre un número si +es par + +07:33.000 --> 07:36.000 +o si es impar o si es mayor a tu edad o +menor a tu edad. + +07:37.000 --> 07:39.000 +Cuéntanos en los comentarios qué caso +elegiste + +07:39.000 --> 07:42.000 +y si pudiste hacer este código de manera +rápida. + +07:42.000 --> 07:54.000 +Nos vemos en la siguiente +clase. + diff --git "a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/07-Condicionales IFTHEN en Visual Basic Funciones y Ejercicios Pr\303\241cticos.mp4" "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/07-Condicionales IFTHEN en Visual Basic Funciones y Ejercicios Pr\303\241cticos.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..9f459085aed0ea080a799891e126a3f0dac071f0 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/07-Condicionales IFTHEN en Visual Basic Funciones y Ejercicios Pr\303\241cticos.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5b65224cec1d7c82d47b4fc03d6b49b0d2218dc43e7cdb87e41759919e786d92 +size 67348024 diff --git "a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/07-Condicionales IFTHEN en Visual Basic Funciones y Ejercicios Pr\303\241cticos.vtt" "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/07-Condicionales IFTHEN en Visual Basic Funciones y Ejercicios Pr\303\241cticos.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..da78efb53e91e7cf1cea4f1761d3051cbc6d7182 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/07-Condicionales IFTHEN en Visual Basic Funciones y Ejercicios Pr\303\241cticos.vtt" @@ -0,0 +1,775 @@ +WEBVTT + +00:00.000 --> 00:05.000 +Platzi, educación profesional efectiva. + +00:05.000 --> 00:07.000 +Hola, te doy la bienvenida a esta clase. + +00:07.000 --> 00:09.000 +Hoy vamos a hablar sobre la +instrucción + +00:09.000 --> 00:10.000 +IF-THEN. + +00:10.000 --> 00:13.000 +Esta instrucción nos va a ayudar a +poner + +00:13.000 --> 00:15.000 +condicionales y, dependiendo de si +la + +00:15.000 --> 00:17.000 +condición se cumple en el +caso, + +00:17.000 --> 00:19.000 +que realice una +acción. + +00:19.000 --> 00:20.000 +De ahí su +nombre, + +00:20.000 --> 00:22.000 +IF, si esta condición se +cumple, + +00:22.000 --> 00:25.000 +THEN, entonces realiza esta +acción. + +00:25.000 --> 00:27.000 +Vamos a nuestro entorno de Visual +Basic + +00:27.000 --> 00:29.000 +para ver cómo podemos +hacerlo. + +00:29.000 --> 00:32.000 +En este caso, nosotros seguimos +trabajando + +00:32.000 --> 00:35.000 +con nuestro módulo 1 en nuestro +archivo + +00:35.000 --> 00:36.000 +guardado como libro de +Excel + +00:36.000 --> 00:39.000 +habilitado para +macros. + +00:39.000 --> 00:42.000 +Para nosotros poder hacer un ciclo IF-THEN, + +00:42.000 --> 00:46.000 +vamos a comenzar escribiendo una función. + +00:46.000 --> 00:47.000 +Para este +ejercicio, + +00:47.000 --> 00:50.000 +lo que vamos a hacer es utilizar un dado. + +00:50.000 --> 00:53.000 +Vamos a nosotros a crear un dado +imaginario + +00:53.000 --> 00:55.000 +en nuestra función y vamos a +decidir + +00:55.000 --> 00:58.000 +si el resultado de ese dado es un número +par + +00:58.000 --> 01:01.000 +o es un número +impar. + +01:01.000 --> 01:03.000 +Entonces, lo primero que vamos a +hacer + +01:03.000 --> 01:06.000 +es escribir nuestra +función. + +01:06.000 --> 01:11.000 +Y yo le voy a llamar +dado. + +01:11.000 --> 01:14.000 +En este caso, nosotros no +necesitamos + +01:14.000 --> 01:16.000 +darle ningún argumento porque, pues, + +01:16.000 --> 01:18.000 +un dado es algo aleatorio que no va a +requerir + +01:18.000 --> 01:20.000 +de nada de nosotros más que +llamemos + +01:20.000 --> 01:22.000 +a esta +función. + +01:22.000 --> 01:24.000 +Pero lo que sí queremos que nos +devuelva + +01:24.000 --> 01:26.000 +es si el valor del dado es un número +par + +01:26.000 --> 01:28.000 +o es un número +impar. + +01:28.000 --> 01:30.000 +Y también estaría bueno que nos +regresara + +01:30.000 --> 01:32.000 +el valor del dado para que nosotros +podamos + +01:32.000 --> 01:34.000 +comprobar si se está haciendo +bien + +01:34.000 --> 01:36.000 +nuestro +IF-THEN. + +01:36.000 --> 01:38.000 +Es por eso que el +valor, + +01:38.000 --> 01:40.000 +el tipo de dato que vamos a +necesitar + +01:40.000 --> 01:43.000 +del valor de retorno va a ser un +string + +01:43.000 --> 01:45.000 +para el +texto. + +01:45.000 --> 01:47.000 +Listo. + +01:47.000 --> 01:50.000 +Después, lo siguiente que nosotros vamos a +hacer + +01:50.000 --> 01:52.000 +es definir nuestras +variables. + +01:52.000 --> 01:54.000 +En este caso, nosotros +necesitamos + +01:54.000 --> 01:57.000 +una variable en donde vamos a +tener + +01:57.000 --> 01:59.000 +el valor del +dado. + +01:59.000 --> 02:02.000 +Y es por eso que yo la voy a +llamar + +02:02.000 --> 02:05.000 +vd, donde vamos a tener el valor del dado. + +02:05.000 --> 02:09.000 +Entonces vamos a poner dim vd as +integer + +02:09.000 --> 02:11.000 +porque el valor de nuestro dado va a +ir + +02:11.000 --> 02:13.000 +del 1 al 6, no necesitamos +más. + +02:13.000 --> 02:15.000 +Muy +bien. + +02:15.000 --> 02:19.000 +Ahora, nosotros necesitamos +utilizar + +02:19.000 --> 02:21.000 +un número aleatorio para ver nuestra +función + +02:21.000 --> 02:23.000 +del +dado. + +02:23.000 --> 02:25.000 +Cuando nosotros estamos trabajando +directamente + +02:25.000 --> 02:27.000 +en el libro de Excel, sabemos que +tenemos + +02:27.000 --> 02:31.000 +una función que se llama aleatorio +entre + +02:31.000 --> 02:33.000 +o round between, que nos permite +elegir + +02:33.000 --> 02:36.000 +desde qué valor hasta qué valor vamos a +tomar + +02:36.000 --> 02:39.000 +nosotros este número +aleatorio. + +02:39.000 --> 02:41.000 +Sin embargo, en el entorno de Visual +Basic + +02:41.000 --> 02:43.000 +no lo tenemos como +tal. + +02:43.000 --> 02:45.000 +Entonces, para poder utilizarlo, podemos +hacer + +02:45.000 --> 02:47.000 +alguna de las dos formas siguientes. + +02:47.000 --> 02:49.000 +La primera forma en la que +nosotros + +02:49.000 --> 02:51.000 +lo podemos hacer es +utilizar + +02:51.000 --> 02:53.000 +lo que sí tenemos en el entorno de Visual +Basic, + +02:53.000 --> 02:55.000 +que es la función +random. + +02:55.000 --> 02:58.000 +Esta función random nos va a +regresar + +02:58.000 --> 03:01.000 +un número decimal aleatorio entre el 0 y el 1. + +03:01.000 --> 03:04.000 +Y podemos nosotros tomar eso y +convertirlo + +03:04.000 --> 03:07.000 +en un número entero, o lo que nosotros +podemos + +03:07.000 --> 03:09.000 +hacer directamente es llamar a la +función + +03:09.000 --> 03:10.000 +desde el +libro. + +03:10.000 --> 03:12.000 +Entonces vamos a ver cómo se ve en cada +uno + +03:12.000 --> 03:13.000 +de estos dos +casos. + +03:13.000 --> 03:15.000 +Para nosotros, poder hacer la primera forma, + +03:15.000 --> 03:17.000 +que es tomar este número +aleatorio + +03:17.000 --> 03:19.000 +con decimales entre 0 y 1, y +convertirlo + +03:19.000 --> 03:22.000 +en un número entero, vamos a +utilizar + +03:22.000 --> 03:24.000 +nuestra variable de valor de +dado. + +03:24.000 --> 03:27.000 +Y lo primero que vamos a hacer es +poner + +03:27.000 --> 03:29.000 +nuestro número +aleatorio. + +03:29.000 --> 03:32.000 +Este número sabemos que está entre 0 y 1, + +03:32.000 --> 03:35.000 +y como lo queremos nosotros entre 1 y 6, + +03:35.000 --> 03:38.000 +lo que vamos a hacer es que vamos a +multiplicar + +03:38.000 --> 03:42.000 +por 6, y con esto ya vamos a tener un +valor + +03:42.000 --> 03:45.000 +en donde el número entero más +cercano + +03:45.000 --> 03:48.000 +va a estar entre 0 y +5. + +03:48.000 --> 03:51.000 +Como nosotros lo necesitamos entre 1 y 6, + +03:51.000 --> 03:53.000 +lo que vamos a hacer al final es que le +vamos + +03:53.000 --> 03:54.000 +a sumar un +1. + +03:54.000 --> 03:57.000 +En este caso, nosotros estamos +trabajando + +03:57.000 --> 03:59.000 +con un número que contiene decimales. + +03:59.000 --> 04:01.000 +Cuando lo multiplicamos por 6, +mantiene + +04:01.000 --> 04:03.000 +estos mismos decimales, y lo mismo +cuando + +04:03.000 --> 04:04.000 +le sumamos el +1. + +04:04.000 --> 04:06.000 +Lo que podemos hacer para +eliminar + +04:06.000 --> 04:09.000 +estos decimales es utilizar la función +int + +04:09.000 --> 04:11.000 +de integer, que nos va a llevar este +número + +04:11.000 --> 04:13.000 +a ser 1 +entero. + +04:13.000 --> 04:15.000 +Entonces vamos a escribir la +int, + +04:15.000 --> 04:18.000 +y vamos a poner nuestro cálculo dentro de +esto. + +04:18.000 --> 04:21.000 +Listo, de esta manera nosotros ya vamos a +poder + +04:21.000 --> 04:23.000 +tener el valor de nuestro +dado. + +04:25.000 --> 04:28.000 +Ahora sí, vamos a empezar ahora a +definir + +04:28.000 --> 04:31.000 +si el valor de nuestro dado es un número +par + +04:31.000 --> 04:33.000 +o es un número +impar. + +04:33.000 --> 04:36.000 +Para hacer eso, vamos a poner +if, + +04:37.000 --> 04:39.000 +y después vamos a ver la +condición + +04:39.000 --> 04:41.000 +que nosotros queremos que se cumpla. + +04:41.000 --> 04:47.000 +Entonces, if valor dado es igual a 2, + +04:49.000 --> 04:51.000 +then, y entonces vamos a +escribir + +04:51.000 --> 04:54.000 +lo que queremos que suceda en el renglón +de abajo. + +04:54.000 --> 05:00.000 +Entonces vamos a poner que dado va a ser +igual a par. + +05:04.000 --> 05:08.000 +Después, nosotros podríamos continuar +escribiendo + +05:08.000 --> 05:11.000 +if valor dado es igual a +3, + +05:11.000 --> 05:13.000 +then el dado es igual a +impar, + +05:13.000 --> 05:15.000 +y así +sucesivamente. + +05:15.000 --> 05:17.000 +Pero lo que haríamos con esto es +que + +05:17.000 --> 05:21.000 +nuestra función iría a probar en cada +uno + +05:21.000 --> 05:23.000 +de los casos si se cumple esta condición. + +05:23.000 --> 05:26.000 +Si nosotros utilizamos else +if, + +05:26.000 --> 05:28.000 +lo que vamos a hacer es que le vamos a +decir + +05:28.000 --> 05:31.000 +a nuestro código que una vez que se cumpla +el caso + +05:31.000 --> 05:34.000 +no es necesario que vaya a revisar el +resto + +05:34.000 --> 05:36.000 +de las condiciones que estamos poniendo, + +05:36.000 --> 05:39.000 +dado que ya encontró una que le aplica +específicamente. + +05:40.000 --> 05:43.000 +Cuando nosotros lo hagamos utilizando este +ejercicio, + +05:43.000 --> 05:46.000 +no nos vamos a dar cuenta de que el +programa + +05:46.000 --> 05:49.000 +es menos eficiente si solamente usamos if. + +05:49.000 --> 05:52.000 +Pero cuando estamos trabajando con una +función + +05:52.000 --> 05:55.000 +sumamente grande o que vamos a estar +analizando + +05:55.000 --> 05:57.000 +muchos datos, puede tomar mucho +tiempo + +05:57.000 --> 05:59.000 +y hacérnoslo +ineficiente. + +05:59.000 --> 06:01.000 +Entonces es una buena práctica que si +solamente + +06:01.000 --> 06:04.000 +necesitamos que coincida con una de las +condiciones, + +06:04.000 --> 06:07.000 +lo dejemos con else +if. + +06:07.000 --> 06:10.000 +Entonces vamos a poner else +if, + +06:11.000 --> 06:16.000 +valor del dado es igual a +4, + +06:16.000 --> 06:17.000 +then, + +06:19.000 --> 06:23.000 +el dado es igual a par, +nuevamente. + +06:27.000 --> 06:29.000 +Y vamos a +continuar + +06:29.000 --> 06:35.000 +poniendo else if, el valor del dado es +igual a 6, + +06:35.000 --> 06:40.000 +then, dado es igual a +par. + +06:41.000 --> 06:45.000 +Listo, ahora nosotros ya cubrimos todos +los casos + +06:45.000 --> 06:47.000 +en los que nuestro dado puede ser par. + +06:47.000 --> 06:49.000 +Y podríamos seguir con la +instrucción + +06:49.000 --> 06:52.000 +para los números impares, que son 1, 3 y 5. + +06:52.000 --> 06:56.000 +O simplemente podemos poner que +else + +06:56.000 --> 07:00.000 +y en cualquier otro caso que nos +arroje + +07:00.000 --> 07:03.000 +que el valor de nuestro dado es impar. + +07:06.000 --> 07:10.000 +Else, valor del +dado, + +07:11.000 --> 07:16.000 +no, else dado es igual a +impar. + +07:16.000 --> 07:19.000 +Y aquí nosotros lo +ponemos. + +07:19.000 --> 07:22.000 +Y por último, nosotros +necesitamos + +07:22.000 --> 07:24.000 +cerrar nuestra condición +if. + +07:24.000 --> 07:27.000 +Y es por eso que vamos a poner un end if. + +07:29.000 --> 07:31.000 +Ahora, como nosotros ya lo +vimos, + +07:31.000 --> 07:34.000 +es una buena práctica que todo lo que esté +incluido + +07:34.000 --> 07:37.000 +en esta instrucción if tenga un espacio +hacia la derecha + +07:37.000 --> 07:41.000 +para nosotros poderlo ver de manera mucho +más clara. + +07:42.000 --> 07:45.000 +Y entonces vamos a probar nuestra función. + +07:45.000 --> 07:49.000 +Entonces vamos a poner el signo de +interrogación + +07:49.000 --> 07:50.000 +en nuestra ventana de +inmediato, + +07:50.000 --> 07:52.000 +y vamos a escribir +dado, + +07:52.000 --> 07:55.000 +y vamos a abrir y cerrar los paréntesis. + +07:55.000 --> 07:58.000 +En este caso nos está devolviendo que es +impar. + +07:58.000 --> 08:00.000 +Si nosotros adicional a esto queremos +saber + +08:00.000 --> 08:02.000 +cuál es el valor del +dado, + +08:02.000 --> 08:04.000 +podemos incluir una nueva +variable + +08:04.000 --> 08:08.000 +y un message box en donde nos diga cuál es +este valor. + +08:08.000 --> 08:11.000 +Entonces vamos a ponerlo, dim +a, + +08:12.000 --> 08:15.000 +y por último vamos a +poner + +08:16.000 --> 08:19.000 +a es igual a message +box, + +08:19.000 --> 08:23.000 +y vamos a incluir el valor del dado, + +08:23.000 --> 08:26.000 +que en este caso nosotros lo tenemos +guardado + +08:26.000 --> 08:30.000 +con las letras b, +d. + +08:30.000 --> 08:33.000 +Entonces nuevamente nos vamos a +correr + +08:33.000 --> 08:35.000 +en nuestra ventana de inmediato nuestra +función, + +08:35.000 --> 08:38.000 +y vemos que nos dice que el valor del dado +es 4, + +08:38.000 --> 08:41.000 +y ahora vemos que el resultado que nos +arroja + +08:41.000 --> 08:43.000 +es que nuestro dado es +par, + +08:43.000 --> 08:46.000 +lo que quiere decir que está funcionando +perfectamente + +08:46.000 --> 08:48.000 +nuestro if +then. + +08:48.000 --> 08:52.000 +Ahora te reto a que tú repitas este +ejercicio + +08:52.000 --> 08:55.000 +utilizando las cartas que nosotros +tenemos + +08:55.000 --> 08:57.000 +en las cartas de +juego, + +08:57.000 --> 09:00.000 +y que tú vayas definiendo del caso de cada +uno + +09:00.000 --> 09:03.000 +si las cartas son de color rojo o si son +de color negro. + +09:03.000 --> 09:05.000 +Lo puedes ampliar tanto como quieras, + +09:05.000 --> 09:07.000 +y puedes incluir si estamos +hablando + +09:07.000 --> 09:09.000 +de que son cartas de corazones, de diamantes, + +09:09.000 --> 09:11.000 +o del palo al que +pertenezcan. + +09:11.000 --> 09:14.000 +Déjanos en los comentarios cómo se ve tu +código, + +09:14.000 --> 09:18.000 +y nos vemos en la siguiente +clase. + diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/07-Resumen.html b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/07-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..066d2580f5ba5757b28ac653b818ed038705e8c0 --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/07-Resumen.html @@ -0,0 +1,153 @@ + + + + + + + Condicionales IF-THEN en Visual Basic: Funciones y Ejercicios Prácticos + + + +
    +
    +

    Resumen

    ¿Qué es la instrucción if-then y cómo se utiliza?

    +

    La instrucción IF-THEN es una herramienta fundamental en la programación que permite ejecutar acciones específicas si se cumple una determinada condición. En esencia, se estructura como: "si ocurre esto, entonces haz aquello". Esta instrucción es clave para implementar condicionales y tomar decisiones en función de los datos disponibles, permitiendo mayor control y flexibilidad en los programas.

    +

    En Visual Basic, por ejemplo, puedes emplear IF-THEN para decidir si el valor de un dado es par o impar. Esto se hace utilizando funciones y variables que determinan el valor y, posteriormente, evalúan la condición para ejecutar la acción correspondiente.

    +

    ¿Cómo crear una función para un dado en Visual Basic?

    +

    La creación de una función en Visual Basic requiere definir claramente los pasos y decisiones que deseas implementar. Aquí te brindamos una guía para programar una función que simule el lanzamiento de un dado y determine su resultado como par o impar.

    +
      +
    1. +

      Definir la función y las variables:

      +
        +
      • Crea una función llamada "dado" que no requiere argumentos ya que los lanzamientos de un dado son aleatorios.
        • +
      • Define la variable para almacenar el valor del dado, por ejemplo, usa vd como dim vd as integer.
        • +
      +
      2. +
    2. +

      Generar el valor aleatorio:

      +
        +
      • Visual Basic tiene una función random para obtener un número aleatorio entre 0 y 1.
        • +
      • Ajusta este valor multiplicándolo por 6 y sumando 1 para que resulte en un número entero entre 1 y 6: int(random * 6 + 1).
        • +
      +
      3. +
    3. +

      Implementar la condición IF-THEN:

      +
        +
      • Utiliza IF-THEN para comprobar si el valor del dado es par. Por ejemplo, comprueba si vd es igual a 2, 4 o 6 para considerarlo par: if vd = 2 or vd = 4 or vd = 6 then dado = "par".
        • +
      • Usa else para otros valores y considera que el dado es impar: else dado = "impar".
        • +
      +
      4. +
    4. +

      Probar y visualizar el resultado:

      +
        +
      • Prueba la función en el entorno de desarrollo para verificar su correcto funcionamiento.
        • +
      • Usa un message box para mostrar el valor del dado.
        • +
      +
      5. +
    +

    ¿Cómo optimizar las condiciones con else if?

    +

    El uso de else if optimiza el código al detener la evaluación una vez que una condición se cumple, lo cual es crucial en programas complejos o con grandes volúmenes de datos.

    +
      +
    • +

      Reducir evaluación innecesaria:

      +
        +
      • Al usar solo if, cada condición se evalúa independientemente, lo que puede ser ineficiente. Else if asegura que no se sigan evaluando las condiciones una vez que se encuentra la correcta.
        • +
      +
      • +
    • +

      Estructurar cuidadosamente las condiciones:

      +
        +
      • Asegúrate de que las condiciones estén bien definidas para maximizar la eficiencia y claridad del código.
        • +
      +
      • +
    • +

      Buenas prácticas:

      +
        +
      • Indentar las acciones dentro de las estructuras condicionales para mejorar la legibilidad y mantenimiento.
        • +
      +
      • +
    +

    ¿Cómo poner en práctica lo aprendido?

    +

    Refuerza tu comprensión repitiendo este ejercicio con otro conjunto de reglas. Por ejemplo, puedes usar cartas de un mazo para determinar si son de color rojo o negro. Expande tu programa para incluir detalles como el palo (corazones, diamantes, tréboles, picas) y experimenta creando complejidades adicionales en el código. ¡Este enfoque aprender-haciendo ofrecerá una práctica valiosa y te hará más competente en el uso de IF-THEN y en la programación en general!

    +
    +
    + + \ No newline at end of file diff --git "a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/08-Ciclos For Next en Visual Basic para Excel Fibonacci Autom\303\241tico.mp4" "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/08-Ciclos For Next en Visual Basic para Excel Fibonacci Autom\303\241tico.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..d311396f7737cc9307c7cc7af75d29b5562b164e --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/08-Ciclos For Next en Visual Basic para Excel Fibonacci Autom\303\241tico.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:89ca2ce78dc52038ba8cb13b9a4badfc3bd8aa1c452c52928b61de7d1527b47e +size 58090595 diff --git "a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/08-Ciclos For Next en Visual Basic para Excel Fibonacci Autom\303\241tico.vtt" "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/08-Ciclos For Next en Visual Basic para Excel Fibonacci Autom\303\241tico.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..3d00a86abb158263a48c0c3f5ab1ea4a381850c5 --- /dev/null +++ "b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/08-Ciclos For Next en Visual Basic para Excel Fibonacci Autom\303\241tico.vtt" @@ -0,0 +1,530 @@ +WEBVTT + +00:00.000 --> 00:05.000 +Platzi, educación profesional efectiva. + +00:05.000 --> 00:07.000 +Hola, te doy la bienvenida a esta clase. + +00:07.000 --> 00:10.000 +Hoy vamos a hablar de los ciclos For Next, + +00:10.000 --> 00:16.000 +en donde nosotros vamos a poderle pedir a +nuestra función o subrutina en Visual Basic + +00:16.000 --> 00:22.000 +que realice una acción siempre y cuando un +valor se mantenga dentro de un rango específico. + +00:22.000 --> 00:26.000 +Esto nos va a ser muy útil cuando nosotros +necesitamos, por ejemplo, + +00:26.000 --> 00:30.000 +poner un valor en distintas celdas y que +esto vaya avanzando + +00:30.000 --> 00:33.000 +o que haga un contador hasta llegar a un +punto determinado. + +00:33.000 --> 00:37.000 +Vamos a nuestro entorno de Visual Basic +para ver cómo podemos hacerlo. + +00:37.000 --> 00:40.000 +En este caso, vamos a seguir utilizando el +módulo 1 + +00:40.000 --> 00:42.000 +sobre el que hemos trabajado en el resto +de las clases. + +00:42.000 --> 00:46.000 +Recuerda que puedes hacer esto en +cualquier documento de Excel, + +00:46.000 --> 00:50.000 +siempre y cuando este esté guardado con la +terminación XSLM + +00:50.000 --> 00:52.000 +para que sea compatible con +macros + +00:52.000 --> 00:56.000 +y todo tu trabajo realizado en el entorno +de Visual Basic quede guardado. + +00:56.000 --> 01:01.000 +En este caso, lo que vamos a hacer es que +nosotros vamos a poner en nuestro documento + +01:01.000 --> 01:03.000 +la sucesión de +Fibonacci. + +01:03.000 --> 01:07.000 +Esta sucesión de Fibonacci es la que +comienza con un número 1, + +01:07.000 --> 01:11.000 +después vendrá otro número 1 y para los +números consecutivos + +01:11.000 --> 01:13.000 +será la suma de los números anteriores. + +01:13.000 --> 01:16.000 +Entonces, vamos a comenzar a hacerlo. + +01:16.000 --> 01:19.000 +Para esto, vamos a utilizar una +subrutina + +01:19.000 --> 01:23.000 +ya que queremos que quede esta información +plasmada en nuestro documento. + +01:23.000 --> 01:27.000 +Entonces, vamos a comenzar escribiendo +public sub + +01:27.000 --> 01:30.000 +y yo le voy a llamar +Fibonacci. + +01:31.000 --> 01:34.000 +No necesitamos argumentos porque es una +subrutina + +01:34.000 --> 01:38.000 +ni definir el tipo de dato del valor de +retorno + +01:38.000 --> 01:40.000 +porque pues no lo vamos a +tener. + +01:40.000 --> 01:41.000 +Listo. + +01:41.000 --> 01:42.000 +Ahora +sí. + +01:42.000 --> 01:46.000 +El siguiente paso es que nosotros +definamos nuestras variables. + +01:46.000 --> 01:49.000 +En este caso, nosotros vamos a necesitar +una variable + +01:49.000 --> 01:52.000 +que sea el contador que nos vaya +diciendo + +01:52.000 --> 01:56.000 +cuántas veces hemos hecho esta +sucesión + +01:56.000 --> 02:00.000 +o cuántos números de celdas nos falta +conllenar con el dato anterior. + +02:00.000 --> 02:04.000 +Y también podemos utilizar un input +box + +02:04.000 --> 02:08.000 +para pedirle al usuario que nos diga +cuántos términos de esta sucesión necesita. + +02:08.000 --> 02:10.000 +Entonces, vamos a +definirlos. + +02:10.000 --> 02:13.000 +Dim i as +integer + +02:13.000 --> 02:17.000 +porque va a ser un número entero nuestro +contador. + +02:17.000 --> 02:22.000 +Normalmente, cuando nosotros estamos +utilizando contadores + +02:22.000 --> 02:24.000 +vamos a utilizar letras como i o como +j + +02:24.000 --> 02:27.000 +pero realmente tú le puedes llamar a tu +variable como quieras. + +02:27.000 --> 02:30.000 +Pero si de pronto vas a revisar el código +de alguien más + +02:30.000 --> 02:33.000 +y ves una i o una j, lo más probable es +que sea un contador. + +02:33.000 --> 02:37.000 +También vamos a utilizar la variable +n + +02:37.000 --> 02:41.000 +para saber cuáles son el número de +términos que nosotros vamos a llenar. + +02:41.000 --> 02:45.000 +Y en este caso también lo vamos a poner +como un número entero. + +02:45.000 --> 02:47.000 +Listo. + +02:47.000 --> 02:51.000 +Entonces, lo primero que nosotros +necesitamos es hacer nuestro input box + +02:51.000 --> 02:58.000 +para ver cuántos números dentro de esta +sucesión de Fibonacci + +02:58.000 --> 03:01.000 +vamos a necesitar plasmar en nuestro +documento de Excel. + +03:01.000 --> 03:07.000 +Entonces, vamos a poner n es igual a input +box + +03:07.000 --> 03:16.000 +y abrimos paréntesis y lo que vamos a +preguntar es elementos de la sucesión. + +03:16.000 --> 03:17.000 +Listo. + +03:17.000 --> 03:21.000 +Y en el título le vamos a poner Fibonacci. + +03:23.000 --> 03:24.000 +Muy +bien. + +03:24.000 --> 03:28.000 +Y ahora sí, nosotros ya sabemos hasta +cuántos números + +03:28.000 --> 03:31.000 +necesitamos llegar en esta sucesión. + +03:31.000 --> 03:36.000 +Ahora, nosotros sabemos que la sucesión de +Fibonacci comienza con un 1 + +03:36.000 --> 03:41.000 +luego seguirá otro 1 y después el tercer +término será un 2 + +03:41.000 --> 03:44.000 +ya que suma los dos anteriores y así +sucesivamente. + +03:44.000 --> 03:47.000 +Entonces, nosotros tenemos que primero +definir + +03:47.000 --> 03:50.000 +en qué lugar de nuestro documento vamos a +vaciar esta información + +03:50.000 --> 03:53.000 +y después los primeros dos +entradas + +03:53.000 --> 03:56.000 +para que a partir de la tercera entrada +pongamos la suma. + +03:56.000 --> 04:04.000 +Entonces, vamos a empezar nosotros a poner +esto en nuestra hoja activa + +04:04.000 --> 04:06.000 +sobre la que estamos +trabajando, + +04:06.000 --> 04:09.000 +entonces no hay necesidad de especificar +sobre qué hoja es + +04:09.000 --> 04:12.000 +y vamos a comenzar a hacerlo desde la +celda A1. + +04:12.000 --> 04:20.000 +Y para eso vamos a poner cells y 1,1 por +el renglón y la columna de esta celda + +04:20.000 --> 04:22.000 +y el primer valor será +1. + +04:22.000 --> 04:27.000 +Después, las celdas donde la línea es +2 + +04:27.000 --> 04:31.000 +pero la columna sigue siendo la 1, +nuevamente tendrá un 1. + +04:31.000 --> 04:36.000 +Como sería muy tedioso ir definiendo el +valor de cada una de estas celdas + +04:36.000 --> 04:39.000 +vamos a utilizar un ciclo for +then + +04:39.000 --> 04:43.000 +en donde vamos a ir avanzando con el valor +de nuestro contador + +04:43.000 --> 04:44.000 +que en este caso es +i + +04:44.000 --> 04:50.000 +para ir cambiando el atributo que vamos a +poner dentro de cada una de las celdas. + +04:50.000 --> 04:55.000 +Para escribirlo tenemos que comenzar +escribiendo for i + +04:55.000 --> 05:00.000 +quiere decir desde que nuestro contador +sea igual a qué número + +05:00.000 --> 05:05.000 +y nosotros como necesitamos empezar en el +tercer elemento de nuestra sucesión de Fibonacci + +05:05.000 --> 05:07.000 +vamos a poner +3. + +05:07.000 --> 05:12.000 +Y vamos a definir hasta qué valor tenemos +que llegar con nuestra i. + +05:12.000 --> 05:17.000 +Entonces nosotros le preguntamos al +usuario cuántos términos necesitaba + +05:17.000 --> 05:21.000 +y no los contestó y nosotros guardamos ese +valor en n. + +05:21.000 --> 05:24.000 +Entonces le vamos a decir a nuestra +subrutina + +05:24.000 --> 05:30.000 +que la i vaya avanzando desde el número 3 +hasta el valor contenido en n. + +05:31.000 --> 05:32.000 +Listo. + +05:32.000 --> 05:36.000 +Una buena práctica es que cuando nosotros +estamos escribiendo ciclos + +05:36.000 --> 05:39.000 +o estamos escribiendo +instrucciones + +05:39.000 --> 05:43.000 +pongamos tanto la parte inicial como la +parte final + +05:43.000 --> 05:46.000 +y después vayamos poniendo las partes +intermedias. + +05:46.000 --> 05:51.000 +Pero igual si a ti te funciona escribirlo +de una todo seguido lo puedes hacer igual. + +05:51.000 --> 05:55.000 +Entonces en este caso nosotros lo primero +que hacemos es + +05:55.000 --> 05:58.000 +decirle que empieza desde que la i vale 3 +hasta n + +05:58.000 --> 06:04.000 +y como vamos a cerrar este ciclo for es +con la instrucción next + +06:04.000 --> 06:07.000 +en donde nuestro contador va a tomar un +valor siguiente. + +06:07.000 --> 06:12.000 +Entonces si comenzamos con la i en 3 +cuando llega la instrucción next + +06:12.000 --> 06:14.000 +el valor de i será +4. + +06:14.000 --> 06:18.000 +Entonces vamos a cerrar de una nuestra +instrucción. + +06:19.000 --> 06:20.000 +Listo. + +06:20.000 --> 06:24.000 +Y ahora sí vamos a incluir todas las +actividades que se tienen que realizar + +06:24.000 --> 06:28.000 +mientras el valor de i es igual a 3. + +06:28.000 --> 06:33.000 +Y para eso nosotros necesitamos +seleccionar la celda + +06:33.000 --> 06:35.000 +en donde va a quedar cada uno de estos +valores. + +06:35.000 --> 06:39.000 +Entonces nosotros ya pusimos lo que va a +ir contenido + +06:39.000 --> 06:41.000 +en el primer renglón, en el segundo +renglón + +06:41.000 --> 06:44.000 +y ahora vamos a poner nuestro contador i. + +06:45.000 --> 06:49.000 +Y la columna es fija porque todo va a +quedar en la columna a. + +06:49.000 --> 06:54.000 +Entonces ya elegimos que nuestra celda va +a ser la i,1. + +06:54.000 --> 07:00.000 +Y lo que vamos a contener acá tiene que +ser la suma de los dos elementos anteriores. + +07:00.000 --> 07:13.000 +Entonces necesitamos que sume la celda i-1, +1 con la celda i-2,1. + +07:13.000 --> 07:20.000 +Y de esta manera nosotros ya no +necesitamos escribir todas las instrucciones + +07:20.000 --> 07:23.000 +y dependiendo del valor que nos dé el +usuario y todo, + +07:23.000 --> 07:27.000 +sino que automáticamente lo vamos a ver +reflejado en nuestro documento + +07:27.000 --> 07:29.000 +hacia el valor que nosotros pedimos. + +07:29.000 --> 07:30.000 +Muy +bien. + +07:31.000 --> 07:37.000 +Ahora vamos a correr nuestra subrutina +para verificar que la hemos hecho correctamente. + +07:39.000 --> 07:42.000 +Nos pide, nos pregunta cuántos elementos +de la sucesión + +07:42.000 --> 07:44.000 +y en este caso vamos a poner el +20. + +07:44.000 --> 07:45.000 +Listo. + +07:45.000 --> 07:49.000 +Si nosotros nos regresamos a nuestro +documento de Excel, + +07:49.000 --> 07:53.000 +vamos a poder ver en nuestro documento que +los números de la sucesión + +07:53.000 --> 07:55.000 +se han vaciado de manera +correcta. + +07:55.000 --> 08:01.000 +Igual podríamos incluir una verificación +metiendo la fórmula de manera manual en nuestro documento. + +08:01.000 --> 08:06.000 +Entonces nosotros podríamos sumar esto más +esto + +08:06.000 --> 08:12.000 +y después restar la columna en la que +estamos parados. + +08:12.000 --> 08:15.000 +Si nos llevamos esta fórmula para abajo, +vemos que todo nos sale cero, + +08:15.000 --> 08:20.000 +lo que quiere decir que nuestra sucesión +de Fibonacci se ha corrido de manera exitosa. + +08:21.000 --> 08:28.000 +Estos ciclos FOR, NEXT son sumamente +útiles cuando estamos poniendo un formato en el documento, + +08:28.000 --> 08:33.000 +cuando vaciamos la información, cuando +necesitamos que las cosas se repitan + +08:33.000 --> 08:36.000 +sin que nosotros tengamos que dar la +instrucción múltiples veces. + +08:36.000 --> 08:40.000 +Ahora te reto a que nos dejes en los +comentarios distintos casos + +08:40.000 --> 08:44.000 +en los que tú pudieras utilizar este ciclo +FOR, NEXT. + +08:44.000 --> 09:04.000 +Nos vemos en la siguiente +clase. + diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/08-Resumen.html b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/08-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..68acb4729e1b2cb699acf7eddc080ed4bb50ab5e --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/08-Resumen.html @@ -0,0 +1,152 @@ + + + + + + + Ciclos For Next en Visual Basic para Excel: Fibonacci Automático + + + +
    +
    +

    Resumen

    ¿Cómo se utiliza el ciclo For Next en Visual Basic?

    +

    El ciclo For Next en Visual Basic permite ejecutar una serie de instrucciones repetidamente mientras un contador se encuentra dentro de un rango determinado. Esto es crucial cuando necesitas automatizar tareas repetitivas, como llenar múltiples celdas en Excel con valores específicos o realizar un conteo hasta cierto número.

    +

    ¿Qué es la sucesión de Fibonacci y cómo se implementa con Visual Basic?

    +

    La sucesión de Fibonacci es una serie de números que comienza con 1, seguida por otro 1, y cada número subsecuente es la suma de los dos anteriores. Implementar esta sucesión en Excel usando Visual Basic es una excelente manera de poner en práctica el ciclo For Next.

    +
      +
    1. +

      Definir Subrutinas y Variables:

      +
        +
      • Comienza definiendo una subrutina sin argumentos ni valores de retorno.
        • +
      • Establece variables, como un contador (Dim i As Integer) y el número de términos que quieres calcular (Dim n As Integer).
        • +
      +
      2. +
    2. +

      Crear un Input Box:

      +
        +
      • Utiliza un Input Box para solicitar al usuario cuántos términos de la sucesión desea calcular: +
        n = InputBox("Elementos de la sucesión", "Fibonacci")
+
        +
        • +
      +
      3. +
    3. +

      Configurar el Documento y Asignar Valores Iniciales:

      +
        +
      • Decide desde dónde comenzarás a vaciar la información en tu hoja activa, generalmente desde la celda A1.
        • +
      • Las primeras dos entradas deberán ser asignadas manualmente, ya que siempre son 1s: +
        Cells(1, 1) = 1
+Cells(2, 1) = 1
+
        +
        • +
      +
      4. +
    4. +

      Implementar el Ciclo For Next:

      +
        +
      • Iniciar el ciclo desde 3, puesto que los dos primeros valores están definidos: +
        For i = 3 To n
+
        +
        • +
      • Calcula cada elemento como la suma de los dos anteriores: +
        Cells(i, 1) = Cells(i - 1, 1) + Cells(i - 2, 1)
+
        +
        • +
      • Finaliza el ciclo con Next i para pasar al siguiente término.
        • +
      +
      5. +
    +

    ¿Cómo verificar el funcionamiento correcto de la subrutina?

    +

    Puedes ejecutar la subrutina y recibirás un prompt preguntando cuántos términos de la sucesión deseas realizar. Ingresando, por ejemplo, 20 te permitirá confirmar visualmente en Excel que los números aparecen correctamente. Incluso puedes verificar manualmente sumando los dos números anteriores y compararlos con el resultado.

    +

    ¿Cuándo es útil utilizar ciclos For Next?

    +

    El ciclo For Next es extremadamente valioso cuando se trata de:

    +
      +
    • Poner formato: Aplicar estilos o formatos específicos en rangos definidos.
      • +
    • Manipulación masiva de datos: Insertar, modificar o eliminar grandes cantidades de datos de manera organizada.
      • +
    • Automatización: Realizar acciones repetitivas sin intervención manual, ahorrando tiempo y minimizando errores.
      • +
    +

    ¿Cómo iniciar tu propio proyecto usando ciclos For Next?

    +

    Te invito a practicar implementando tus propias soluciones. Piensa en actividades diarias realizadas en Excel que se podrían simplificar mediante estos ciclos. Compártelas o reflexiona sobre sus beneficios en los comentarios, y sigue explorando la programación para seguir ampliando tus habilidades.

    +
    +
    + + \ No newline at end of file diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/09-Ciclos DoWhile en Visual Basic Suma de Dados hasta 100.mp4 b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/09-Ciclos DoWhile en Visual Basic Suma de Dados hasta 100.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..b8a9b496dd88ba6cf44336f5ad50b1ac1c208bc0 --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/09-Ciclos DoWhile en Visual Basic Suma de Dados hasta 100.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:39e445304fccf9117578ec02542bc2b95888e49060f0f09925fb294072294efa +size 44572828 diff --git a/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/09-Ciclos DoWhile en Visual Basic Suma de Dados hasta 100.vtt b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/09-Ciclos DoWhile en Visual Basic Suma de Dados hasta 100.vtt new file mode 100644 index 0000000000000000000000000000000000000000..5ae4eaf624299786aa6c884347a33139bcf961f2 --- /dev/null +++ b/a/Curso de Excel Avanzado con Macros/02-Funciones y subrutinas/09-Ciclos DoWhile en Visual Basic Suma de Dados hasta 100.vtt @@ -0,0 +1,263 @@ +WEBVTT + +00:00.000 --> 00:05.000 +Platzi, educación profesional efectiva. + +00:05.000 --> 00:09.000 +Hoy vamos a platicar sobre los ciclos +do-while loop. + +00:09.000 --> 00:15.000 +Estos ciclos nos van a servir cuando +nosotros necesitamos repetir una instrucción o una serie de actividades, + +00:15.000 --> 00:19.000 +siempre y cuando una condición se siga +cumpliendo. + +00:19.000 --> 00:24.000 +Entonces, vamos a nuestro entorno de +Visual Basic para ver cómo podemos utilizarlo. + +00:24.000 --> 00:34.000 +En este caso, vamos a seguir trabajando en +el módulo 1, donde nosotros ya tenemos todas las subrutinas y todas las funciones que hemos utilizado en las clases anteriores. + +00:34.000 --> 00:43.000 +Ahora, lo que nosotros vamos a hacer es +ver cuántos tiros de un dado necesitamos para llegar a una suma de 100. + +00:43.000 --> 00:50.000 +Es decir, cada vez que nosotros hagamos un +tiro, vamos a ir tomando el resultado de cada uno de estos tiros, + +00:50.000 --> 00:55.000 +los vamos a ir sumando y vamos a ver en +qué momento nosotros vamos a llegar a 100. + +00:55.000 --> 01:01.000 +Para hacer eso, lo primero que tenemos que +hacer es empezar a definir nuestra función. + +01:03.000 --> 01:13.000 +Vamos a poner public function y le vamos a +llamar w por do-while. + +01:13.000 --> 01:22.000 +Y en este caso, nosotros no necesitamos +ningún argumento, pero el valor que nos va a regresar va a ser un número entero. + +01:23.000 --> 01:24.000 +Listo. + +01:25.000 --> 01:30.000 +Luego, lo siguiente que nosotros +necesitamos es definir nuestras variables. + +01:30.000 --> 01:37.000 +En este caso, nosotros vamos a tener una +variable que le podemos llamar dado. + +01:37.000 --> 01:45.000 +Y esto lo vamos a tener como un número entero, +ya que va a ir desde el 1 hasta el 6. + +01:45.000 --> 01:49.000 +Lo siguiente que necesitamos es tener un +contador. + +01:49.000 --> 01:56.000 +Entonces, a este contador le podemos llamar i, +y nuevamente será un número entero. + +01:57.000 --> 01:58.000 +Listo. + +01:58.000 --> 02:08.000 +Entonces, nos hace falta a nosotros una +variable, que va a ser la variable que va a contener la suma del valor de los dados. + +02:08.000 --> 02:15.000 +Y la podemos agregar dim s por suma as +integer, nuevamente. + +02:16.000 --> 02:20.000 +Ahora, lo que nosotros necesitamos es +definir el valor de nuestro dado. + +02:20.000 --> 02:26.000 +Hace un par de clases, nosotros definimos +el valor de un dado utilizando la función rnd o random, + +02:26.000 --> 02:29.000 +y convirtiéndola en un número entero. + +02:29.000 --> 02:35.000 +En este caso, lo que vamos a hacer es +llamar a una función que tenemos en nuestro libro de trabajo, + +02:35.000 --> 02:37.000 +para poder utilizarla +acá. + +02:37.000 --> 02:48.000 +Y para eso vamos a poner que dado sea +igual a worksheet function punto. + +02:48.000 --> 02:51.000 +Cuando nosotros ponemos la instrucción +worksheet function, + +02:51.000 --> 02:57.000 +lo que estamos haciendo es decir que vamos +a incluir en nuestra función o subrutina, + +02:57.000 --> 03:01.000 +alguna fórmula que ya está definida en el +uso normal de Excel. + +03:01.000 --> 03:06.000 +Y entonces, aquí sí podemos utilizar la +fórmula aleatorio entre o random between. + +03:06.000 --> 03:11.000 +Entonces, lo vamos a escribir, y ponemos +run between, + +03:11.000 --> 03:19.000 +y vamos a abrir paréntesis para poner los +argumentos, en este caso necesitamos que sea del 1 al 6. + +03:19.000 --> 03:23.000 +Y listo, ya tenemos nuestro dado definido. + +03:23.000 --> 03:26.000 +Ahora, lo siguiente que tenemos que hacer +es tirar este dado, + +03:26.000 --> 03:31.000 +tirar teóricamente este dado múltiples veces, +e ir sumando el valor. + +03:31.000 --> 03:36.000 +Entonces, vamos a abrir nuestra +instrucción do while. + +03:36.000 --> 03:44.000 +Entonces, vamos a poner do while, y +necesitamos aquí saber hasta qué valor es menor a 100, + +03:44.000 --> 03:46.000 +o al número que nosotros +definamos. + +03:46.000 --> 03:51.000 +Entonces, do while s de la suma sea menor +a 100. + +03:53.000 --> 03:59.000 +Cuando nosotros abrimos la instrucción do +while, la vamos a cerrar con la instrucción loop, + +03:59.000 --> 04:07.000 +que esto significa regresar al principio +del ciclo do while, y que repita estas instrucciones. + +04:07.000 --> 04:14.000 +Y con esto listo, nosotros ya podemos +pasar a escribir las actividades u operaciones + +04:14.000 --> 04:17.000 +que necesitamos que se realicen en este caso. + +04:17.000 --> 04:25.000 +Entonces, lo que vamos a hacer es que +vamos a poner que i es igual a i más 1, + +04:25.000 --> 04:32.000 +para que nuestro contador vaya avanzando y +nosotros vayamos viendo cuántas veces hemos tirado este dado. + +04:32.000 --> 04:37.000 +Lo siguiente que vamos a hacer es que +nuestra suma va a ser igual al valor anterior + +04:37.000 --> 04:44.000 +que nosotros teníamos de la suma, pero +vamos a agregar ahora el valor del dado que teníamos. + +04:44.000 --> 04:46.000 +Y listo, es todo lo que tenemos que hacer. + +04:46.000 --> 04:52.000 +Tirar el dado e ir contando cuántas veces +lo tiramos e ir sumando. + +04:52.000 --> 04:58.000 +Y cuando lleguemos a un valor que supere +el 100, o sea igual al 100, se va a detener. + +04:58.000 --> 05:04.000 +Y por último, necesitamos que nos devuelva +el valor de el contador, + +05:04.000 --> 05:10.000 +en donde nosotros podemos ver cuántas +veces se tuvo que hacer este tiro de dados + +05:10.000 --> 05:11.000 +para llegar a la suma +establecida. + +05:11.000 --> 05:15.000 +Entonces ponemos dw es igual a +i. + +05:15.000 --> 05:16.000 +Y +listo. + +05:16.000 --> 05:21.000 +Ahora podemos pasar a nuestra ventana de +inmediato en donde vamos a probar nuestra función. + +05:21.000 --> 05:29.000 +Entonces vamos a poner el signo de +interrogación y vamos a poner dw y damos click en enter. + +05:29.000 --> 05:34.000 +Y en este caso tomo 25 tiros del dado para +llegar a la suma de 100. + +05:34.000 --> 05:39.000 +Como los valores del dado son aleatorios, +cada vez que nosotros corramos esta función, + +05:39.000 --> 05:42.000 +vamos a ver que el resultado que tenemos +es distinto. + +05:42.000 --> 05:48.000 +Nuevamente fue 17, 20, 17, 34, +17. + +05:48.000 --> 05:54.000 +Vemos que pues vamos a tener un número +aleatorio porque el tiro de los dados es aleatorio. + +05:54.000 --> 05:59.000 +Ahora te reto a que tú repitas este código +en tu computadora + +05:59.000 --> 06:05.000 +y que aparte agregues que el usuario te +pueda decir cuál es la suma a la que quiere llegar. + +06:05.000 --> 06:09.000 +Cuéntanos en los comentarios para qué más +utilizarías estos ciclos. + +06:09.000 --> 06:24.000 +Nos vemos en la siguiente +clase. +