CSS3 PDF

Unidad Temática III. CSS3 1. Sintaxis básica de la estructura de CSS3 La sintaxis básica de CSS3 consiste en reglas de estilo que se aplican a elementos HTML para controlar su apariencia y presentación en una página web. Aquí tienes un ejemplo básico de cómo se estructura una regla de estilo en CS...

Unidad Temática III. CSS3 1. Sintaxis básica de la estructura de CSS3 La sintaxis básica de CSS3 consiste en reglas de estilo que se aplican a elementos HTML para controlar su apariencia y presentación en una página web. Aquí tienes un ejemplo básico de cómo se estructura una regla de estilo en CSS3: selector { propiedad: valor; } Selector: Es el elemento HTML al que se aplicará el estilo. Puede ser un elemento HTML específico (como div, p, h1, etc.), una clase (precedida por un punto, por ejemplo,.clase) o un identificador (precedido por un numeral, por ejemplo, #id). Propiedad: Es la característica o aspecto del elemento que se desea cambiar. Puede ser el color, el tamaño, la fuente, el margen, el relleno, etc. Valor: Es el valor asignado a la propiedad. Puede ser un color (como blue, #ffffff, rgb(255, 0, 0)), un tamaño (como 12px, 2em), una fuente (como Arial, sans-serif), una posición (como center, top, bottom), entre otros. Por ejemplo: h1 { color: blue; font-size: 24px; font-family: Arial, sans-serif; }.clase { background-color: #ff0000; padding: 10px; } #id { border: 1px solid black; margin-top: 20px; } En este ejemplo, se aplican estilos a los elementos , elementos con la clase.clase, y elementos con el identificador #id. Cada regla de estilo se compone de una o más propiedades y sus valores correspondientes, separados por dos puntos y terminados por punto y coma. 2. Variables en CSS3 Las variables en CSS3, también conocidas como variables personalizadas o custom properties, permiten almacenar valores que se pueden reutilizar en múltiples reglas de estilo. Aquí tienes un ejemplo de cómo se definen y utilizan variables en CSS3: :root { --color-primary: #007bff; --color-secondary: #6c757d; }.selector { color: var(--color-primary); background-color: var(--color-secondary); } En este ejemplo: :root es un pseudo-selector que selecciona el elemento raíz del documento HTML. --color-primary y --color-secondary son las variables definidas con el prefijo --. Estas variables almacenan los valores de color #007bff (azul) y #6c757d (gris), respectivamente. Dentro de la regla.selector, var(--color-primary) y var(--color-secondary) se utilizan para aplicar los valores de las variables a las propiedades color y background-color, respectivamente. Las variables en CSS3 son útiles para mantener un código más limpio y modular, ya que permiten definir valores una vez y utilizarlos en múltiples lugares sin necesidad de repetirlos. Además, facilitan la personalización y el mantenimiento de estilos al proporcionar un punto central para realizar cambios globales en el diseño de una página web. 3. Tipos de Selectores en CSS3, Pseudoclases, Pseudoelementos y Atributos. En CSS3, existen diferentes tipos de selectores que te permiten aplicar estilos a elementos HTML de diversas maneras. 1. Selectores de tipo: Estos selectores permiten seleccionar elementos HTML según su tipo. Por ejemplo: p { color: blue; } Este selector aplica el color azul a todos los elementos del documento. 2. Selectores de clase: Permiten seleccionar elementos HTML que tienen asignada una clase específica. Por ejemplo:.clase { font-weight: bold; } Este selector aplica negrita a todos los elementos que tengan la clase "clase". 3. Selectores de ID: Permiten seleccionar un elemento HTML según su ID único. Por ejemplo: #identificador { background-color: yellow; } Este selector aplica un fondo amarillo al elemento con el ID "identificador". 4. Selectores universales: Seleccionan todos los elementos del documento. Por ejemplo: * { margin: 0; padding: 0; } Este selector elimina los márgenes y rellenos predeterminados de todos los elementos del documento. 5. Selectores descendientes: Permiten seleccionar un elemento que sea descendiente directo de otro elemento. Por ejemplo: div p { font-style: italic; } Este selector aplica cursiva a todos los elementos que sean descendientes directos de un elemento. 6. Pseudoclases: Permiten aplicar estilos a un elemento en función de su estado o posición en relación con el contenido del documento. Algunos ejemplos comunes incluyen :hover, :active, :focus, :nth-child(n), etc. 7. Pseudoelementos: Permiten aplicar estilos a partes específicas de un elemento. Algunos ejemplos comunes incluyen ::before, ::after, ::first-line, ::first-letter, etc. 8. Selectores de atributos: Permiten seleccionar elementos que tengan un atributo específico y/o un valor de atributo específico. Por ejemplo: input[type="text"] { border: 1px solid black; } Este selector aplica un borde negro a todos los elementos que tengan un atributo type con el valor "text". 9. Selectores de combinación: Permiten seleccionar elementos que cumplen con ciertas condiciones en relación con otros elementos. Algunos ejemplos incluyen: elementoA elementoB: Selecciona elementos B que son descendientes de elementos A. elementoA > elementoB: Selecciona elementos B que son hijos directos de elementos A. elementoA + elementoB: Selecciona elementos B que son adyacentes inmediatos de elementos A. elementoA ~ elementoB: Selecciona elementos B que son hermanos de elementos A. 10. Pseudoclases de enlaces: Permiten aplicar estilos a enlaces en función de su estado. Algunos ejemplos incluyen: :link: Selecciona enlaces no visitados. :visited: Selecciona enlaces visitados. :hover: Selecciona enlaces cuando el cursor se encuentra sobre ellos.  :active: Selecciona enlaces cuando están activos (por ejemplo, cuando se hace clic en ellos). :focus: Selecciona enlaces cuando reciben el foco de entrada. 11. Pseudoelementos de selección de texto: Permiten aplicar estilos a partes específicas del texto. Algunos ejemplos incluyen: ::selection: Selecciona el texto seleccionado por el usuario. ::first-line: Selecciona la primera línea de texto dentro de un elemento. ::first-letter: Selecciona la primera letra de un elemento. 12. Pseudoclases de formularios: Permiten aplicar estilos a elementos de formulario en función de su estado. Algunos ejemplos incluyen: :valid: Selecciona elementos de formulario con datos válidos. :invalid: Selecciona elementos de formulario con datos inválidos. :required: Selecciona elementos de formulario requeridos. :optional: Selecciona elementos de formulario opcionales. 4. Modelo de Cajas: Unidades, Márgenes y Rellenos, Bordes, entre otros. El modelo de caja en CSS es fundamental para entender cómo se representa y se controla el diseño y el formato de los elementos HTML en una página web. 1. Contenido (Content): Es el área donde se muestra el contenido del elemento HTML, como texto, imágenes u otros elementos. 2. Relleno (Padding): Es el espacio entre el contenido y el borde del elemento. Se puede establecer utilizando propiedades como padding-top, padding- right, padding-bottom y padding-left. Se puede especificar en diferentes unidades como píxeles (px), porcentaje (%), em (em), entre otros. 3. Borde (Border): Es la línea que rodea el contenido y el relleno del elemento. Se puede establecer utilizando propiedades como border-width, border- style y border-color. También puedes establecer estas propiedades individualmente para cada lado del borde, por ejemplo, border-top-width, border-right-style, etc. 4. Margen (Margin): Es el espacio entre el borde del elemento y los elementos adyacentes (otros elementos o el borde del contenedor padre). Se puede establecer utilizando propiedades como margin-top, margin-right, margin- bottom y margin-left. Al igual que con el relleno, se puede especificar en diferentes unidades. Además de estas partes principales, hay otras propiedades y conceptos relacionados con el modelo de caja:  Ancho y altura (Width and Height): Determinan las dimensiones del elemento. Se pueden establecer utilizando propiedades como width y height. Box-sizing: Es una propiedad que controla cómo se calcula el tamaño total de un elemento, teniendo en cuenta o no el relleno y el borde. Los valores comunes son content-box (el tamaño total incluye solo el contenido) y border-box (el tamaño total incluye el contenido, el relleno y el borde). Overflow: Es una propiedad que controla cómo se maneja el contenido que desborda el área definida por las dimensiones del elemento. Los valores comunes son visible (el contenido desbordante se muestra fuera del elemento), hidden (el contenido desbordante se oculta) y scroll (se muestra una barra de desplazamiento para permitir al usuario desplazarse por el contenido desbordante). 5. Colores, Fondos e Imágenes, Fuentes y Tipografías. Colores. Modelos de color: CSS admite varios modelos de color, como RGB (Red, Green, Blue), HEX (código hexadecimal), HSL (Hue, Saturation, Lightness), y RGBA (Red, Green, Blue, Alpha). Transparencia: RGBA y HSLA (Hue, Saturation, Lightness, Alpha) permiten definir colores con transparencia, lo que es útil para crear efectos de capas y de superposición. Gradientes: CSS permite crear gradientes utilizando la propiedad background-image con valores específicos como linear-gradient() y radial- gradient(), lo que te permite crear efectos de degradado de color. Color de texto: La propiedad color se utiliza para definir el color del texto dentro de un elemento. Sistema de nombres de colores: Además de los valores hexadecimales y RGB, CSS proporciona un conjunto de nombres de colores predefinidos, como red, green, blue, yellow, etc..texto-rojo { color: #FF0000; }.texto-verde { color: rgb(0, 128, 0); }.texto-azul { color: rgba(0, 0, 255, 0.5); } Fondos e Imágenes. Propiedad background-color: Define el color de fondo de un elemento. Propiedad background-image: Permite establecer una imagen de fondo para un elemento. Propiedad background-size: Controla el tamaño de la imagen de fondo, pudiendo ser cover (cubrir), contain (contener), o valores específicos de tamaño. Repetición de Imágenes: La propiedad background-repeat controla cómo se repite la imagen de fondo, pudiendo ser repeat, repeat-x, repeat-y, o no- repeat. Posicionamiento de fondo: Con las propiedades background-position, puedes controlar la posición inicial de la imagen de fondo. Fondos múltiples: CSS3 permite definir múltiples imágenes de fondo para un mismo elemento utilizando la propiedad background-image con una lista separada por comas. Efectos de fondo: CSS proporciona propiedades como background-blend- mode para aplicar efectos de mezcla en las imágenes de fondo, y background-attachment para controlar si el fondo se desplaza con el contenido o permanece fijo..caja1 { background-color: lightblue; }.caja2 { background-image: url('imagen.jpg'); background-size: cover; }.caja3 { background-image: url('patron.png'); background-repeat: repeat; } Fuentes y Tipografías: Propiedad font-family: Especifica la fuente o fuentes a utilizar para un elemento. Se puede proporcionar una lista de fuentes, y el navegador utilizará la primera disponible. Propiedad font-size: Define el tamaño de la fuente, que puede ser especificado en píxeles (px), porcentajes (%), unidades de longitud relativa (em, rem), o valores absolutos (xx-small, x-small, small, medium, large, x- large, xx-large). Propiedad font-weight: Controla el grosor o peso de la fuente. Los valores comunes incluyen normal, bold, lighter, y bolder. Propiedad font-style: Permite especificar el estilo de la fuente, como normal, italic, o oblique. Propiedad text-align: Controla la alineación horizontal del texto dentro de su contenedor, pudiendo ser left, right, center, o justify. Fuentes Web: Puedes cargar fuentes personalizadas utilizando la regla @font-face, permitiendo el uso de fuentes que no están instaladas en el sistema del usuario. Variantes de fuente: Además de font-weight y font-style, CSS3 introduce propiedades como font-stretch para controlar la compresión o expansión de la fuente y font-variant para activar o desactivar variantes como small-caps. Alineación vertical: La propiedad vertical-align se utiliza para controlar la alineación vertical del texto dentro de un contenedor en línea. Espaciado de texto: CSS proporciona propiedades como letter-spacing para controlar el espaciado entre caracteres y word-spacing para controlar el espaciado entre palabras..texto-generico { font-family: Arial, sans-serif; }.texto-personalizado {  font-family: 'Open Sans', sans-serif; }.texto-grande { font-size: 24px; }.texto-negrita { font-weight: bold; }.texto-cursiva { font-style: italic; } 6. Maquetación y Colocación con Flexbox y Grid. Flexbox es un sistema de diseño unidimensional que permite organizar elementos de manera flexible dentro de un contenedor. html Copy code Ejemplo de Flexbox.navbar { display: flex; justify-content: space-between; background-color: #333; color: white; padding: 10px; }.nav-item { padding: 10px; text-decoration: none; color: white; } Inicio Acerca Servicios Contacto CSS Grid es un sistema de diseño bidimensional que permite organizar elementos en filas y columnas. html Copy code Ejemplo de CSS Grid.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; }.grid-item { background-color: #333; color: white; padding: 20px; text-align: center; }  Elemento 1 Elemento 2 Elemento 3 Elemento 4 Elemento 5 Elemento 6 Comparativo. Flexbox y CSS Grid son dos tecnologías de diseño en CSS que tienen diferentes propósitos y enfoques. Flexbox. Propósito: Flexbox está diseñado principalmente para diseñar diseños unidimensionales, como filas o columnas de elementos. Uso: Es ideal para diseñar componentes flexibles y alinear elementos en una sola dirección, como menús de navegación, barras laterales y diseños de contenido vertical. Ventajas: Es fácil de entender y utilizar para diseños simples y lineales. Permite alinear y distribuir elementos de manera flexible, incluso cuando sus tamaños son desconocidos o dinámicos. Proporciona propiedades específicas para el alineamiento de elementos, como justify-content, align-items y align-self. CSS Grid. Propósito: CSS Grid está diseñado para crear diseños bidimensionales y complejos, permitiendo colocar elementos en filas y columnas. Uso: Es ideal para diseñar diseños más complejos y estructurados, como cuadrículas de productos, diseños de páginas completas y diseños de tablas. Ventajas: Ofrece un control completo sobre el diseño bidimensional, permitiendo especificar filas y columnas con tamaños definidos y alineamientos personalizados.  Permite crear diseños responsivos de manera más intuitiva y eficiente. Facilita la creación de diseños con elementos superpuestos y de diferentes tamaños. ¿Cuál es mejor? La elección entre Flexbox y CSS Grid depende del diseño específico que estés tratando de lograr: Si estás trabajando en un diseño unidimensional, como un menú de navegación o una barra lateral, Flexbox suele ser la mejor opción debido a su simplicidad y capacidad para alinear elementos en una sola dirección. Si necesitas crear un diseño bidimensional complejo, como una página web completa con múltiples secciones y elementos en filas y columnas, entonces CSS Grid puede ser más adecuado ya que ofrece un control más preciso sobre el diseño bidimensional y permite crear diseños más estructurados y responsivos. 7. Animaciones, Efectos e Interacciones. Las animaciones CSS te permiten crear efectos visuales dinámicos en los elementos HTML. Aquí tienes un ejemplo de cómo puedes crear una animación de cambio de color en un botón cuando el usuario pasa el cursor sobre él: Ejemplo de Animación CSS.btn { padding: 10px 20px; background-color: #3498db; color: white; border: none; cursor: pointer; transition: background-color 0.3s ease; }.btn:hover { background-color: #2980b9; }  Hover sobre mí Los efectos CSS son cambios visuales aplicados a los elementos mediante transiciones o transformaciones. Aquí tienes un ejemplo de cómo puedes crear un efecto de desvanecimiento en un elemento al hacer clic en él: Ejemplo de Efecto CSS.box { width: 200px; height: 200px; background-color: #3498db; transition: opacity 0.5s ease; }.box.fade-out { opacity: 0; } Haz clic para desvanecer Las interacciones CSS permiten crear respuestas visuales a las acciones del usuario, como pasar el cursor sobre un elemento o hacer clic en él. Aquí tienes un ejemplo de cómo puedes crear un efecto de cambio de tamaño al pasar el cursor sobre una imagen:  Ejemplo de Interacción CSS.img-container { width: 300px; height: 200px; overflow: hidden; }.img-container:hover img { transform: scale(1.1); transition: transform 0.3s ease; } 8. Media Querys y Responsive Web Design. 8.1 Responsive Web Design El diseño web responsivo es una técnica de diseño y desarrollo web que se centra en crear sitios web que proporcionen una experiencia óptima de usuario en una amplia gama de dispositivos y tamaños de pantalla. Aquí hay una expansión de la información sobre Responsive Web Design: Principios del Responsive Web Design. 1. Flexibilidad: Los diseños responsivos se adaptan y responden a diferentes dispositivos y tamaños de pantalla, desde teléfonos móviles hasta computadoras de escritorio.  2. Fluidez: Los elementos del diseño se expanden, contraen y reorganizan automáticamente para ajustarse al espacio disponible en la pantalla del dispositivo del usuario. 3. Priorización del Contenido: En lugar de simplemente ajustar el diseño para que quepa en pantallas más pequeñas, el diseño responsivo prioriza el contenido más importante y lo presenta de manera legible y accesible en todas las resoluciones de pantalla. 4. Usabilidad: Un diseño responsivo garantiza una experiencia de usuario consistente y agradable, independientemente del dispositivo que se esté utilizando, lo que mejora la usabilidad y la retención de usuarios. Componentes Clave del Responsive Web Design. 1. Media Queries: Permiten aplicar estilos CSS específicos según las características del dispositivo, como el ancho de la pantalla, la altura, la orientación, la resolución y otras características. 2. Unidades de Medida Relativas: El uso de unidades de medida relativas, como porcentajes, ems y rems, en lugar de unidades fijas, permite que los elementos se escalen proporcionalmente según el tamaño de la pantalla. 3. Imágenes Flexibles: Utilizar imágenes flexibles que se ajusten automáticamente al tamaño del contenedor en el que se encuentran, evitando el desperdicio de ancho de banda y mejorando los tiempos de carga de la página. 4. Diseño de Rejilla Fluida: El uso de sistemas de diseño de rejilla fluida, como Flexbox o CSS Grid, permite crear diseños flexibles que se adaptan automáticamente a diferentes tamaños de pantalla. 5. Pruebas Multiplataforma: Es fundamental realizar pruebas exhaustivas en una variedad de dispositivos y tamaños de pantalla para garantizar que el diseño se vea y funcione como se esperaba en todos los casos. Beneficios del Responsive Web Design. 1. Mejora la Experiencia del Usuario: Proporciona una experiencia de usuario consistente y optimizada en todos los dispositivos, lo que aumenta la satisfacción del usuario y fomenta la fidelidad del cliente. 2. Mayor Alcance: Al adaptarse a dispositivos móviles, el diseño responsivo permite llegar a una audiencia más amplia que utiliza una variedad de dispositivos para acceder a Internet.  3. Mejora el SEO: Los motores de búsqueda, como Google, favorecen los sitios web responsivos, ya que proporcionan una mejor experiencia de usuario, lo que puede resultar en una mejor clasificación en los resultados de búsqueda. 4. Ahorro de Tiempo y Costos: En lugar de crear y mantener múltiples versiones de un sitio web para diferentes dispositivos, el diseño responsivo permite a los desarrolladores trabajar en una única versión que se adapta automáticamente a todos los dispositivos. 8.2 Media Queries Las Media Queries son una herramienta esencial en el diseño web responsivo. Ejemplo básico de cómo puedes usar Media Queries para crear un diseño responsivo que se adapte a diferentes tamaños de pantalla: Ejemplo de Responsive Web Design.container { width: 80%; margin: 0 auto; text-align: center; padding: 20px; background-color: lightgray; } @media screen and (min-width: 768px) {.container { width: 60%; } } @media screen and (min-width: 1200px) {.container { width: 40%; } }  Responsive Web Design Este es un ejemplo de diseño web responsivo utilizando Media Queries. En este ejemplo: Hemos definido un contenedor con la clase.container que tiene un ancho del 80% de la ventana del navegador, con margen automático para centrarlo horizontalmente. Luego, hemos utilizado Media Queries para cambiar el ancho del contenedor en función del tamaño de la pantalla. Cuando la pantalla tiene un ancho mínimo de 768px, el ancho del contenedor se reduce al 60%. Y cuando la pantalla tiene un ancho mínimo de 1200px, el ancho del contenedor se reduce aún más al 40%. Con este enfoque, el diseño se adapta automáticamente a diferentes tamaños de pantalla, proporcionando una experiencia óptima para usuarios en dispositivos móviles, tablets y computadoras de escritorio. Puedes ajustar los valores de las Media Queries según tus necesidades específicas y agregar más reglas de estilo dentro de ellas para personalizar aún más el diseño en diferentes tamaños de pantalla. 9. Elementos Utilizados de CSS3 en el Proyecto 1. @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,10 0;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,4 00;1,500;1,600;1,700;1,800;1,900&display=swap');. Esta declaración importa una fuente de Google Fonts llamada "Poppins" con diferentes pesos y estilos (italiano, normal) para usar en el diseño de la página web. La opción display=swap indica que se deberá mostrar el texto utilizando una fuente de respaldo mientras la fuente principal se está cargando. 2. * {...}. Este selector universal aplica las siguientes reglas de estilo a todos los elementos de la página web:  margin: 0: Establece el margen exterior de todos los elementos en 0, eliminando cualquier espacio adicional entre los elementos y el borde exterior del navegador. padding: 0: Establece el relleno interior de todos los elementos en 0, eliminando cualquier espacio adicional dentro de los elementos. box-sizing: border-box: Define el modelo de caja como "border-box", lo que significa que el ancho y la altura especificados incluirán tanto el contenido como el relleno y el borde. text-decoration: none: Elimina cualquier subrayado enlaces. font-family: 'Poppins', sans-serif: Establece la fuente predeterminada para todo el documento como "Poppins" de Google Fonts, y si esta no está disponible, utiliza una fuente sans-serif. 3. header {...}. Este selector de elemento se aplica al elemento header de la página web. width: 100%: Establece el ancho del encabezado al 100% del ancho de la ventana del navegador. height: 100px: Define la altura del encabezado en 100 píxeles. position: fixed: Fija el encabezado en la parte superior de la ventana del navegador, de modo que permanezca visible incluso al desplazarse por la página. z-index: 100: Establece la posición en el eje Z del encabezado, lo que lo coloca en la parte superior de otras capas. 4..container_header {...}. Este selector de clase se aplica al contenedor del encabezado de la página web. max-width: 1200px: Establece el ancho máximo del contenedor en 1200 píxeles. height: 100%: Define la altura del contenedor como el 100% de la altura del elemento contenedor. margin: auto: Centra el contenedor horizontalmente en la página. display: flex: Aplica un modelo de caja flexible al contenedor, lo que permite el diseño flexible de los elementos secundarios dentro de él. justify-content: space-between: Esta propiedad de CSS3 se aplica a un contenedor flexbox y distribuye los elementos secundarios a lo largo del eje principal del contenedor con un espacio igual entre ellos.  Esto significa que el primer elemento se coloca al inicio del contenedor, el último elemento se coloca al final del contenedor y el espacio restante se distribuye equitativamente entre los elementos secundarios. align-items: center: Esta propiedad de CSS3 se aplica a un contenedor flexbox y alinea los elementos secundarios a lo largo del eje transversal del contenedor (eje vertical si el contenedor es un flex- direction: row o eje horizontal si el contenedor es un flex-direction: column). En este caso, los elementos secundarios se alinearán verticalmente en el centro del contenedor. padding: 0px 20px: Esta propiedad de CSS3 establece el relleno (padding) de un elemento. En este caso, se establece un relleno de 0 píxeles en la parte superior e inferior y un relleno de 20 píxeles en los lados izquierdo y derecho del elemento. El valor 0px representa el relleno en la parte superior e inferior, y 20px representa el relleno en los lados izquierdo y derecho. Los valores se aplican en el sentido de las agujas del reloj, comenzando desde la parte superior y continuando hacia la derecha. 4. Este bloque de código CSS define variables personalizadas utilizando la pseudo- clase :root, que representa el elemento raíz del documento (normalmente el elemento ). Estas variables se utilizan para establecer valores que se pueden reutilizar fácilmente en todo el documento CSS. 1. :root {: Inicia la declaración de variables CSS dentro del elemento raíz del documento. 2. --color_text-primary: #309C13;: Define una variable llamada --color_text- primary y le asigna el valor #309C13, que es un color verde. 3. --color_text-secundary: #101E2C;: Define una variable llamada -- color_text-secundary y le asigna el valor #101E2C, que es un color azul oscuro. 4. --color_text-tertiary: #155404;: Define una variable llamada --color_text- tertiary y le asigna el valor #155404, que es un color verde oscuro. 5. --main_color-primary: #155404;: Define una variable llamada -- main_color-primary y le asigna el valor #155404, que es un color verde oscuro. 6. --main_color-secundary: #8ADA74;: Define una variable llamada -- main_color-secundary y le asigna el valor #8ADA74, que es un color verde claro.  7. --background-color: #FAFBFE;: Define una variable llamada -- background-color y le asigna el valor #FAFBFE, que es un color de fondo muy claro. 8. --lowText_font_size: 16px;: Define una variable llamada -- lowText_font_size y le asigna el valor 16px, que es el tamaño de fuente para texto más pequeño. 9. --text_size_title: 40px;: Define una variable llamada --text_size_title y le asigna el valor 40px, que es el tamaño de fuente para los títulos principales. 10. --text_title_card: 24px;: Define una variable llamada --text_title_card y le asigna el valor 24px, que es el tamaño de fuente para los títulos de las tarjetas. 11. --text_title_cardv2: 20px;: Define una variable llamada --text_title_cardv2 y le asigna el valor 20px, que es otro tamaño de fuente para los títulos de las tarjetas. 12. --text_paragraph: 16px;: Define una variable llamada --text_paragraph y le asigna el valor 16px, que es el tamaño de fuente para los párrafos. 13. --box_shadow-primary: 0px 6px 50px -20px rgba(0,0,0,0.2);: Define una variable llamada --box_shadow-primary y le asigna un valor que representa un efecto de sombra. Este valor define la sombra como un desplazamiento horizontal de 0px, un desplazamiento vertical de 6px, un radio de desenfoque de 50px, un radio de propagación de -20px y un color de sombra con una opacidad del 20%. El uso de variables personalizadas en CSS, como las definidas en este bloque de código, permite una fácil personalización y mantenimiento de estilos en un documento CSS, ya que los valores se pueden cambiar en un solo lugar y se aplicarán automáticamente en todo el documento donde se utilicen esas variables. 5. Portada 1..container__cover{: Inicia la regla CSS para los elementos con la clase container__cover. 2. padding-top: 100px;: Establece un relleno superior de 100px para el contenedor. 3. padding-bottom: 100px;: Establece un relleno inferior de 100px para el contenedor. 4. background: var(--main_color-secundary);: Establece el color de fondo del contenedor utilizando una variable CSS personalizada llamada -- main_color-secundary. 5. }: Cierra la regla CSS para los elementos con la clase container__cover. 6..cover{: Inicia la regla CSS para los elementos con la clase cover. 7. max-width: 1200px;: Establece el ancho máximo del contenedor en 1200px. 8. margin: auto;: Centra horizontalmente el contenedor utilizando márgenes automáticos. 9. margin-top: 100px;: Establece un margen superior de 100px para el contenedor. 10. display: flex;: Utiliza el modelo de caja flexible para el contenedor. 11. align-items: center;: Centra verticalmente los elementos hijos dentro del contenedor. 12. padding: 0px 20px;: Establece un relleno de 0px en los lados izquierdo y derecho, y de 20px en la parte superior e inferior del contenedor. 13. }: Cierra la regla CSS para los elementos con la clase cover. 14..text__cover{: Inicia la regla CSS para los elementos con la clase text__cover. 15. width: 100%;: Establece que el ancho del elemento sea el 100% del ancho de su contenedor padre. 16. padding-right: 150px;: Establece un relleno de 150px en el lado derecho del elemento. 17. }: Cierra la regla CSS para los elementos con la clase text__cover. 18..text__cover h1{: Inicia la regla CSS para los elementos h1 que son descendientes de elementos con la clase text__cover. 19. font-size: 50px;: Establece el tamaño de la fuente del elemento h1 en 50px. 20. color: var(--color_text-secundary);: Establece el color del texto utilizando una variable CSS personalizada llamada --color_text-secundary. 21. }: Cierra la regla CSS para los elementos h1. 6. Cards. 1..container__card-primary{: Inicia la regla CSS para los elementos con la clase container__card-primary. 2. padding-top: 100px;: Establece un relleno superior de 100px para los elementos con la clase container__card-primary. 3. }: Cierra la regla CSS para los elementos con la clase container__card- primary. 4..card__primary{: Inicia la regla CSS para los elementos con la clase card__primary. 5. max-width: 1200px;: Establece el ancho máximo del elemento en 1200px. 6. margin: auto;: Centra horizontalmente el elemento utilizando márgenes automáticos. 7. text-align: center;: Centra el texto dentro del elemento. 8. padding: 0px 20px;: Establece un relleno de 0px en los lados izquierdo y derecho, y de 20px en la parte superior e inferior del elemento. 9. }: Cierra la regla CSS para los elementos con la clase card__primary. 10..text__card-primary{: Inicia la regla CSS para los elementos con la clase text__card-primary. 11. max-width: 800px;: Establece el ancho máximo del elemento en 800px. 12. margin: auto;: Centra horizontalmente el elemento utilizando márgenes automáticos. 13. }: Cierra la regla CSS para los elementos con la clase text__card-primary. 14..text__card-primary p{: Inicia la regla CSS para los elementos p que son descendientes de elementos con la clase text__card-primary. 15. color: var(--color_text-primary);: Establece el color del texto utilizando una variable CSS personalizada llamada --color_text-primary. 16. letter-spacing: 4px;: Establece el espaciado entre caracteres en 4px. 17. font-size: var(--text_paragraph);: Establece el tamaño de la fuente utilizando una variable CSS personalizada llamada --text_paragraph. 18. font-weight: 500;: Establece el peso de la fuente en 500 (medio). 19. }: Cierra la regla CSS para los elementos p. 20..text__card-primary h1{: Inicia la regla CSS para los elementos h1 que son descendientes de elementos con la clase text__card-primary. 21. font-size: var(--text_size_title);: Establece el tamaño de la fuente utilizando una variable CSS personalizada llamada --text_size_title. 22. font-weight: 600;: Establece el peso de la fuente en 600 (negrita). 23. color: var(--color_text-secundary);: Establece el color del texto utilizando una variable CSS personalizada llamada --color_text-secundary. 24. }: Cierra la regla CSS para los elementos h1.