/*=============== VARIABLES CSS ===============*/ :root { --primary-color: #007bff; --primary-color-alt: #0056b3; --secondary-color: #f0f8ff; --text-color: #333; --text-color-light: #666; --body-color: #ffffff; --container-color: #ffffff; --title-color: #222; --body-font: "Poppins", sans-serif; --biggest-font-size: 2.5rem; --h1-font-size: 2rem; --h2-font-size: 1.5rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; --font-medium: 500; --font-semi-bold: 600; --font-bold: 700; } /*=============== BASE ===============*/ * { box-sizing: border-box; padding: 0; margin: 0; } html { scroll-behavior: smooth; } body { font-family: var(--body-font); font-size: var(--normal-font-size); background-color: var(--body-color); color: var(--text-color); } h1, h2, h3 { color: var(--title-color); font-weight: var(--font-semi-bold); } ul { list-style: none; } a { text-decoration: none; } img { max-width: 89%; height: fit-content; } /*=============== REUSABLE CSS CLASSES ===============*/ .section { padding: 6rem 0 2rem; } .section__title, .section__title-left { font-size: var(--h1-font-size); margin-bottom: 3rem; text-align: center; } .section__title-left { text-align: left; } .container { max-width: 1024px; margin-left: auto; margin-right: auto; padding: 0 1.5rem; } .grid { display: grid; gap: 1.5rem; } .button { display: inline-block; color: #fff; padding: 1rem 2rem; border-radius: 0.5rem; font-weight: var(--font-medium); transition: 0.3s; border: none; cursor: pointer; } .button--primary { background-color: var(--primary-color); } .button--primary:hover { background-color: var(--primary-color-alt); } .button--secondary { background-color: #fff; color: var(--primary-color); border: 1px solid var(--primary-color); } .button--white { background-color: #fff; color: var(--primary-color); } /*=============== HEADER & NAV ===============*/ .header { width: 100%; background-color: var(--body-color); position: fixed; top: 0; left: 0; z-index: 100; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .nav { height: 4.5rem; display: flex; justify-content: space-between; align-items: center; } .nav__logo img { height: 70px; } .nav__list { display: flex; column-gap: 2rem; } .nav__link { color: var(--text-color); font-weight: var(--font-medium); transition: 0.3s; } .nav__link:hover { color: var(--primary-color); } /*=============== WHATSAPP ===============*/ /* Pega esto en tu archivo .css o dentro de una etiqueta