.nosotros { --nosotros-max: 1100px; } .nosotros-hero__credit { position: absolute; right: var(--space-6, 1.5rem); bottom: var(--space-4, 1rem); z-index: 1; gap: var(--space-2, 0.5rem); margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-white); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); } .nosotros-hero__avatar { width: 32px; height: 32px; border-radius: var(--radius-full, 50%); object-fit: cover; border: 2px solid var(--color-white); } .nosotros__body { max-width: var(--nosotros-max); margin-inline: auto; padding: var(--space-12, 3rem) var(--space-4, 1rem); display: flex; flex-direction: column; gap: var(--space-12, 3rem); } .nosotros-block { display: flex; flex-direction: column-reverse; gap: var(--space-6, 1.5rem); } @media (min-width: 992px) { .nosotros-block { flex-direction: row; align-items: center; gap: var(--space-12, 3rem); } .nosotros-block[data-image-first="true"] { flex-direction: row-reverse; } .nosotros-block__text, .nosotros-block__media { flex: 1 1 0; min-width: 0; } } .nosotros-block__title { margin: 0 0 var(--space-4, 1rem); font-family: var(--font-heading, var(--font-body)); font-weight: var(--fw-semibold); font-size: var(--fs-3xl); line-height: 1.2; color: var(--color-text-dark); } .nosotros-block__body { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; color: var(--color-text); } .nosotros-block__body h1, .nosotros-block__body h2, .nosotros-block__body h3 { margin: 0 0 var(--space-4, 1rem); font-family: var(--font-heading, var(--font-body)); font-weight: var(--fw-semibold); line-height: 1.2; color: var(--color-text-dark); } .nosotros-block__body h1, .nosotros-block__body h2 { font-size: var(--fs-3xl); } .nosotros-block__body h3 { font-size: var(--fs-xl); } .nosotros-block__body p { margin: 0 0 var(--space-4, 1rem); } .nosotros-block__body ul, .nosotros-block__body ol { margin: 0 0 var(--space-4, 1rem); padding-left: 1.25rem; } .nosotros-block__body li { margin-bottom: var(--space-1, 0.25rem); } .nosotros-block__body a { color: var(--color-canon-red); text-underline-offset: 3px; } .nosotros-block__body a:hover { color: var(--color-canon-red-hover); } .nosotros-block__body > :last-child { margin-bottom: 0; } .nosotros-block__body img { max-width: 100%; height: auto; } .nosotros-block__body [class^="uil-"]::before, .nosotros-block__body [class*="bi-"]::before { font-family: "unicons-line", sans-serif; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; font-variant: normal; text-transform: none; line-height: 1em; } .nosotros-block__body .bi-youtube::before { content: "\ec06"; } .nosotros-block__body .bi-camera-fill::before { content: "\ea3d"; } .nosotros-block__body .bi-cart-check-fill::before { content: "\e889"; } .nosotros-block__body .bi-gear-fill::before { content: "\ec60"; } .nosotros-block__body .bi-person-lines-fill::before { content: "\ea0d"; } .nosotros-block__body .red { color: var(--color-canon-red); } .nosotros-block__body a > [class*="bi-"]:not(.redes), .nosotros-block__body a > [class^="uil-"]:not(.redes) { margin-right: 0.35rem; } .nosotros-block__body .social-icons { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); } .nosotros-block__body .social-icons > br { display: none; } @media (min-width: 1200px) { .nosotros-block__body .social-icons { padding-bottom: 0 !important; } } .nosotros-block__body .social-icons ul { list-style: none; margin: 0; margin-top: auto; padding: 0 !important; } .nosotros-block__body .social-icons ul li { display: inline-block; margin: 0; } .nosotros-block__body .redes { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0.15rem; border-radius: var(--radius-full, 50%); background-color: var(--color-canon-red); color: var(--color-white); font-size: 1.25rem; text-decoration: none; } .nosotros-block__body .redes:hover { background-color: var(--color-canon-red-hover); color: var(--color-white); } .nosotros-block__cta { margin-top: var(--space-5, 1.25rem); padding: 0.7rem 1.5rem; border-radius: 10px; background-color: var(--color-canon-red); color: var(--color-white); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-sm); text-decoration: none; transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease-out); } .nosotros-block__cta:hover { background-color: var(--color-canon-red-hover); color: var(--color-white); } .nosotros-block__media { border-radius: 15px; overflow: hidden; aspect-ratio: 4 / 3; } .nosotros-block__img { width: 100%; height: 100%; object-fit: cover; display: block; } .nosotros-loyalty { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: var(--space-12, 3rem) var(--space-4, 1rem); background-color: var(--color-black); } .nosotros-loyalty__inner { max-width: var(--nosotros-max); margin-inline: auto; } .nosotros-loyalty__title { margin: 0 0 var(--space-8, 2rem); text-align: center; font-family: var(--font-heading, var(--font-body)); font-weight: var(--fw-semibold); font-size: var(--fs-3xl); color: var(--color-white); } .nosotros-loyalty__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4, 1rem); } @media (min-width: 768px) { .nosotros-loyalty__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .nosotros-loyalty__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .nosotros-loyalty__card { gap: var(--space-3, 0.75rem); padding: var(--space-6, 1.5rem); background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: 15px; transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease-out), transform var(--duration-fast, 150ms) var(--ease-out, ease-out); } .nosotros-loyalty__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .nosotros-loyalty__name { margin: 0; font-family: var(--font-heading, var(--font-body)); font-weight: var(--fw-semibold); font-size: var(--fs-lg); color: var(--color-text-dark); } .nosotros-loyalty__desc { margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.55; color: var(--color-text); } .nosotros-loyalty__link { margin-top: auto; padding-top: var(--space-2, 0.5rem); gap: 6px; align-self: flex-start; color: var(--color-canon-red); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; } .nosotros-loyalty__link:hover { color: var(--color-canon-red-hover); }